@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-skeleton.mjs

@@ -1,123 +1,243 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-
-const BEM_BLOCK = 'rt-skeleton';
-/**
- * Visual primitive для loading-state'а: серая полоска с shimmer-анимацией.
- *
- * Не использовать напрямую — оборачивай реальный content в `<rt-skeleton-wrapper>`
- * с input'ом `[isLoading]`. Wrapper решает что показать (skeleton или content),
- * этот компонент только рисует placeholder.
- *
- * Скругление прямоугольника и квадрата — шаг общего входа `radius`; круг остаётся кругом.
- *
- * Shimmer через background-position keyframes; `@media (prefers-reduced-motion)`
- * убирает анимацию для пользователей с reduced-motion preference.
- */
-class RtSkeletonComponent {
-    constructor() {
-        this.#sizeMap = {
-            sm: '10px',
-            md: '15px',
-            lg: '20px',
-        };
-        this.shape = input('rectangle', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
-        this.size = input('md', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.width = input('100%', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-        this.height = input(this.#sizeMap.sm, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-        this.animation = input(true, { ...(ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    }
-    #sizeMap;
-    get isRectangle() {
-        return this.shape() === 'rectangle';
-    }
-    get isCircle() {
-        return this.shape() === 'circle';
-    }
-    get isSquare() {
-        return this.shape() === 'square';
-    }
-    get isSizeSm() {
-        return this.size() === 'sm';
-    }
-    get isSizeMd() {
-        return this.size() === 'md';
-    }
-    get isSizeLg() {
-        return this.size() === 'lg';
-    }
-    get isAnimated() {
-        return this.animation();
-    }
-    get hostWidth() {
-        switch (this.shape()) {
-            case 'circle':
-            case 'square':
-                return this.#getSizeValue();
-            case 'rectangle':
-            default:
-                return this.width();
-        }
-    }
-    get hostHeight() {
-        switch (this.shape()) {
-            case 'circle':
-            case 'square':
-                return this.#getSizeValue();
-            case 'rectangle':
-            default:
-                return this.height();
-        }
-    }
-    #getSizeValue() {
-        return this.#sizeMap[this.size()];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtSkeletonComponent, isStandalone: true, selector: "rt-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-skeleton--rectangle": "this.isRectangle", "class.rt-skeleton--circle": "this.isCircle", "class.rt-skeleton--square": "this.isSquare", "class.rt-skeleton--sm": "this.isSizeSm", "class.rt-skeleton--md": "this.isSizeMd", "class.rt-skeleton--lg": "this.isSizeLg", "class.rt-skeleton--animated": "this.isAnimated", "style.width": "this.hostWidth", "style.height": "this.hostHeight" }, classAttribute: "rt-skeleton" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: '', isInline: true, styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-skeleton{--rt-skeleton-wave-duration: 2.5s;--rt-skeleton-radius: var(--rt-radius-sm);--rt-skeleton-circle-radius: var(--rt-radius-full);position:relative;display:inline-block;overflow:hidden;background:linear-gradient(90deg,var(--rt-color-skeleton-base) 0%,var(--rt-color-skeleton-wave) 50%,var(--rt-color-skeleton-base) 100%);background-size:200% 100%}.rt-skeleton--rectangle{border-radius:var(--rt-skeleton-radius)}.rt-skeleton--circle{border-radius:var(--rt-skeleton-circle-radius)}.rt-skeleton--square{border-radius:var(--rt-skeleton-radius)}.rt-skeleton[data-rt-radius=none]{--rt-skeleton-radius: var(--rt-radius-none)}.rt-skeleton[data-rt-radius=xs]{--rt-skeleton-radius: var(--rt-radius-xs)}.rt-skeleton[data-rt-radius=sm]{--rt-skeleton-radius: var(--rt-radius-sm)}.rt-skeleton[data-rt-radius=ms]{--rt-skeleton-radius: var(--rt-radius-ms)}.rt-skeleton[data-rt-radius=md]{--rt-skeleton-radius: var(--rt-radius-md)}.rt-skeleton[data-rt-radius=lg]{--rt-skeleton-radius: var(--rt-radius-lg)}.rt-skeleton[data-rt-radius=xl]{--rt-skeleton-radius: var(--rt-radius-xl)}.rt-skeleton[data-rt-radius=\"2xl\"]{--rt-skeleton-radius: var(--rt-radius-2xl)}.rt-skeleton[data-rt-radius=full]{--rt-skeleton-radius: var(--rt-radius-full)}.rt-skeleton--sm{min-width:10px;min-height:10px}.rt-skeleton--md{min-width:15px;min-height:15px}.rt-skeleton--lg{min-width:20px;min-height:20px}.rt-skeleton--animated{animation:rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite}@keyframes rt-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.rt-skeleton--animated{animation:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-skeleton', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                    }, styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-skeleton{--rt-skeleton-wave-duration: 2.5s;--rt-skeleton-radius: var(--rt-radius-sm);--rt-skeleton-circle-radius: var(--rt-radius-full);position:relative;display:inline-block;overflow:hidden;background:linear-gradient(90deg,var(--rt-color-skeleton-base) 0%,var(--rt-color-skeleton-wave) 50%,var(--rt-color-skeleton-base) 100%);background-size:200% 100%}.rt-skeleton--rectangle{border-radius:var(--rt-skeleton-radius)}.rt-skeleton--circle{border-radius:var(--rt-skeleton-circle-radius)}.rt-skeleton--square{border-radius:var(--rt-skeleton-radius)}.rt-skeleton[data-rt-radius=none]{--rt-skeleton-radius: var(--rt-radius-none)}.rt-skeleton[data-rt-radius=xs]{--rt-skeleton-radius: var(--rt-radius-xs)}.rt-skeleton[data-rt-radius=sm]{--rt-skeleton-radius: var(--rt-radius-sm)}.rt-skeleton[data-rt-radius=ms]{--rt-skeleton-radius: var(--rt-radius-ms)}.rt-skeleton[data-rt-radius=md]{--rt-skeleton-radius: var(--rt-radius-md)}.rt-skeleton[data-rt-radius=lg]{--rt-skeleton-radius: var(--rt-radius-lg)}.rt-skeleton[data-rt-radius=xl]{--rt-skeleton-radius: var(--rt-radius-xl)}.rt-skeleton[data-rt-radius=\"2xl\"]{--rt-skeleton-radius: var(--rt-radius-2xl)}.rt-skeleton[data-rt-radius=full]{--rt-skeleton-radius: var(--rt-radius-full)}.rt-skeleton--sm{min-width:10px;min-height:10px}.rt-skeleton--md{min-width:15px;min-height:15px}.rt-skeleton--lg{min-width:20px;min-height:20px}.rt-skeleton--animated{animation:rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite}@keyframes rt-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.rt-skeleton--animated{animation:none}}}\n"] }]
-        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], isRectangle: [{
-                type: HostBinding,
-                args: ['class.rt-skeleton--rectangle']
-            }], isCircle: [{
-                type: HostBinding,
-                args: ['class.rt-skeleton--circle']
-            }], isSquare: [{
-                type: HostBinding,
-                args: ['class.rt-skeleton--square']
-            }], isSizeSm: [{
-                type: HostBinding,
-                args: ['class.rt-skeleton--sm']
-            }], isSizeMd: [{
-                type: HostBinding,
-                args: ['class.rt-skeleton--md']
-            }], isSizeLg: [{
-                type: HostBinding,
-                args: ['class.rt-skeleton--lg']
-            }], isAnimated: [{
-                type: HostBinding,
-                args: ['class.rt-skeleton--animated']
-            }], hostWidth: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], hostHeight: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation, booleanAttribute, input } from "@angular/core";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+const BEM_BLOCK = "rt-skeleton";
+var RtSkeletonComponent = class RtSkeletonComponent {
+	constructor() {
+		this.#sizeMap = {
+			sm: "10px",
+			md: "15px",
+			lg: "20px"
+		};
+		this.shape = input("rectangle", ...ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []);
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.width = input("100%", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = input(this.#sizeMap.sm, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.animation = input(true, {
+			...ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+	}
+	#sizeMap;
+	get isRectangle() {
+		return this.shape() === "rectangle";
+	}
+	get isCircle() {
+		return this.shape() === "circle";
+	}
+	get isSquare() {
+		return this.shape() === "square";
+	}
+	get isSizeSm() {
+		return this.size() === "sm";
+	}
+	get isSizeMd() {
+		return this.size() === "md";
+	}
+	get isSizeLg() {
+		return this.size() === "lg";
+	}
+	get isAnimated() {
+		return this.animation();
+	}
+	get hostWidth() {
+		switch (this.shape()) {
+			case "circle":
+			case "square": return this.#getSizeValue();
+			default: return this.width();
+		}
+	}
+	get hostHeight() {
+		switch (this.shape()) {
+			case "circle":
+			case "square": return this.#getSizeValue();
+			default: return this.height();
+		}
+	}
+	#getSizeValue() {
+		return this.#sizeMap[this.size()];
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtSkeletonComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtSkeletonComponent,
+			isStandalone: true,
+			selector: "rt-skeleton",
+			inputs: {
+				shape: {
+					classPropertyName: "shape",
+					publicName: "shape",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				height: {
+					classPropertyName: "height",
+					publicName: "height",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				animation: {
+					classPropertyName: "animation",
+					publicName: "animation",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				properties: {
+					"class.rt-skeleton--rectangle": "this.isRectangle",
+					"class.rt-skeleton--circle": "this.isCircle",
+					"class.rt-skeleton--square": "this.isSquare",
+					"class.rt-skeleton--sm": "this.isSizeSm",
+					"class.rt-skeleton--md": "this.isSizeMd",
+					"class.rt-skeleton--lg": "this.isSizeLg",
+					"class.rt-skeleton--animated": "this.isAnimated",
+					"style.width": "this.hostWidth",
+					"style.height": "this.hostHeight"
+				},
+				classAttribute: "rt-skeleton"
+			},
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "",
+			isInline: true,
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-skeleton{--rt-skeleton-wave-duration: 2.5s;--rt-skeleton-radius: var(--rt-radius-sm);--rt-skeleton-circle-radius: var(--rt-radius-full);position:relative;display:inline-block;overflow:hidden;background:linear-gradient(90deg,var(--rt-color-skeleton-base) 0%,var(--rt-color-skeleton-wave) 50%,var(--rt-color-skeleton-base) 100%);background-size:200% 100%}.rt-skeleton--rectangle{border-radius:var(--rt-skeleton-radius)}.rt-skeleton--circle{border-radius:var(--rt-skeleton-circle-radius)}.rt-skeleton--square{border-radius:var(--rt-skeleton-radius)}.rt-skeleton[data-rt-radius=none]{--rt-skeleton-radius: var(--rt-radius-none)}.rt-skeleton[data-rt-radius=xs]{--rt-skeleton-radius: var(--rt-radius-xs)}.rt-skeleton[data-rt-radius=sm]{--rt-skeleton-radius: var(--rt-radius-sm)}.rt-skeleton[data-rt-radius=ms]{--rt-skeleton-radius: var(--rt-radius-ms)}.rt-skeleton[data-rt-radius=md]{--rt-skeleton-radius: var(--rt-radius-md)}.rt-skeleton[data-rt-radius=lg]{--rt-skeleton-radius: var(--rt-radius-lg)}.rt-skeleton[data-rt-radius=xl]{--rt-skeleton-radius: var(--rt-radius-xl)}.rt-skeleton[data-rt-radius=\"2xl\"]{--rt-skeleton-radius: var(--rt-radius-2xl)}.rt-skeleton[data-rt-radius=full]{--rt-skeleton-radius: var(--rt-radius-full)}.rt-skeleton--sm{min-width:10px;min-height:10px}.rt-skeleton--md{min-width:15px;min-height:15px}.rt-skeleton--lg{min-width:20px;min-height:20px}.rt-skeleton--animated{animation:rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite}@keyframes rt-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.rt-skeleton--animated{animation:none}}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtSkeletonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-skeleton",
+			template: "",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: { class: BEM_BLOCK },
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-skeleton{--rt-skeleton-wave-duration: 2.5s;--rt-skeleton-radius: var(--rt-radius-sm);--rt-skeleton-circle-radius: var(--rt-radius-full);position:relative;display:inline-block;overflow:hidden;background:linear-gradient(90deg,var(--rt-color-skeleton-base) 0%,var(--rt-color-skeleton-wave) 50%,var(--rt-color-skeleton-base) 100%);background-size:200% 100%}.rt-skeleton--rectangle{border-radius:var(--rt-skeleton-radius)}.rt-skeleton--circle{border-radius:var(--rt-skeleton-circle-radius)}.rt-skeleton--square{border-radius:var(--rt-skeleton-radius)}.rt-skeleton[data-rt-radius=none]{--rt-skeleton-radius: var(--rt-radius-none)}.rt-skeleton[data-rt-radius=xs]{--rt-skeleton-radius: var(--rt-radius-xs)}.rt-skeleton[data-rt-radius=sm]{--rt-skeleton-radius: var(--rt-radius-sm)}.rt-skeleton[data-rt-radius=ms]{--rt-skeleton-radius: var(--rt-radius-ms)}.rt-skeleton[data-rt-radius=md]{--rt-skeleton-radius: var(--rt-radius-md)}.rt-skeleton[data-rt-radius=lg]{--rt-skeleton-radius: var(--rt-radius-lg)}.rt-skeleton[data-rt-radius=xl]{--rt-skeleton-radius: var(--rt-radius-xl)}.rt-skeleton[data-rt-radius=\"2xl\"]{--rt-skeleton-radius: var(--rt-radius-2xl)}.rt-skeleton[data-rt-radius=full]{--rt-skeleton-radius: var(--rt-radius-full)}.rt-skeleton--sm{min-width:10px;min-height:10px}.rt-skeleton--md{min-width:15px;min-height:15px}.rt-skeleton--lg{min-width:20px;min-height:20px}.rt-skeleton--animated{animation:rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite}@keyframes rt-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.rt-skeleton--animated{animation:none}}}\n"]
+		}]
+	}],
+	propDecorators: {
+		shape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shape",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		animation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animation",
+				required: false
+			}]
+		}],
+		isRectangle: [{
+			type: HostBinding,
+			args: ["class.rt-skeleton--rectangle"]
+		}],
+		isCircle: [{
+			type: HostBinding,
+			args: ["class.rt-skeleton--circle"]
+		}],
+		isSquare: [{
+			type: HostBinding,
+			args: ["class.rt-skeleton--square"]
+		}],
+		isSizeSm: [{
+			type: HostBinding,
+			args: ["class.rt-skeleton--sm"]
+		}],
+		isSizeMd: [{
+			type: HostBinding,
+			args: ["class.rt-skeleton--md"]
+		}],
+		isSizeLg: [{
+			type: HostBinding,
+			args: ["class.rt-skeleton--lg"]
+		}],
+		isAnimated: [{
+			type: HostBinding,
+			args: ["class.rt-skeleton--animated"]
+		}],
+		hostWidth: [{
+			type: HostBinding,
+			args: ["style.width"]
+		}],
+		hostHeight: [{
+			type: HostBinding,
+			args: ["style.height"]
+		}]
+	}
+});
 export { RtSkeletonComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-skeleton.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-skeleton.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-skeleton.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/skeleton/rt-skeleton.component.ts","../../../projects/ui-kit-v2/src/lib/components/skeleton/rt-tools-ui-kit-v2-skeleton.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nexport type TRtSkeletonShape = 'rectangle' | 'circle' | 'square';\nexport type TRtSkeletonSize = 'sm' | 'md' | 'lg';\n\nconst BEM_BLOCK: string = 'rt-skeleton';\n\n/**\n * Visual primitive для loading-state'а: серая полоска с shimmer-анимацией.\n *\n * Не использовать напрямую — оборачивай реальный content в `<rt-skeleton-wrapper>`\n * с input'ом `[isLoading]`. Wrapper решает что показать (skeleton или content),\n * этот компонент только рисует placeholder.\n *\n * Скругление прямоугольника и квадрата — шаг общего входа `radius`; круг остаётся кругом.\n *\n * Shimmer через background-position keyframes; `@media (prefers-reduced-motion)`\n * убирает анимацию для пользователей с reduced-motion preference.\n */\n@Component({\n    selector: 'rt-skeleton',\n    template: '',\n    styleUrls: ['./rt-skeleton.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtSkeletonComponent {\n    readonly #sizeMap: Record<TRtSkeletonSize, string> = {\n        sm: '10px',\n        md: '15px',\n        lg: '20px',\n    };\n\n    public readonly shape: InputSignal<TRtSkeletonShape> = input<TRtSkeletonShape>('rectangle');\n\n    public readonly size: InputSignal<TRtSkeletonSize> = input<TRtSkeletonSize>('md');\n\n    public readonly width: InputSignal<string> = input<string>('100%');\n\n    public readonly height: InputSignal<string> = input<string>(this.#sizeMap.sm);\n\n    public readonly animation: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(true, {\n        transform: booleanAttribute,\n    });\n\n    @HostBinding('class.rt-skeleton--rectangle')\n    protected get isRectangle(): boolean {\n        return this.shape() === 'rectangle';\n    }\n\n    @HostBinding('class.rt-skeleton--circle')\n    protected get isCircle(): boolean {\n        return this.shape() === 'circle';\n    }\n\n    @HostBinding('class.rt-skeleton--square')\n    protected get isSquare(): boolean {\n        return this.shape() === 'square';\n    }\n\n    @HostBinding('class.rt-skeleton--sm')\n    protected get isSizeSm(): boolean {\n        return this.size() === 'sm';\n    }\n\n    @HostBinding('class.rt-skeleton--md')\n    protected get isSizeMd(): boolean {\n        return this.size() === 'md';\n    }\n\n    @HostBinding('class.rt-skeleton--lg')\n    protected get isSizeLg(): boolean {\n        return this.size() === 'lg';\n    }\n\n    @HostBinding('class.rt-skeleton--animated')\n    protected get isAnimated(): boolean {\n        return this.animation();\n    }\n\n    @HostBinding('style.width')\n    protected get hostWidth(): string {\n        switch (this.shape()) {\n            case 'circle':\n            case 'square':\n                return this.#getSizeValue();\n\n            case 'rectangle':\n            default:\n                return this.width();\n        }\n    }\n\n    @HostBinding('style.height')\n    protected get hostHeight(): string {\n        switch (this.shape()) {\n            case 'circle':\n            case 'square':\n                return this.#getSizeValue();\n\n            case 'rectangle':\n            default:\n                return this.height();\n        }\n    }\n\n    #getSizeValue(): string {\n        return this.#sizeMap[this.size()];\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-skeleton.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/skeleton/rt-skeleton.component.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nexport type TRtSkeletonShape = 'rectangle' | 'circle' | 'square';\nexport type TRtSkeletonSize = 'sm' | 'md' | 'lg';\n\nconst BEM_BLOCK: string = 'rt-skeleton';\n\n/**\n * Visual primitive для loading-state'а: серая полоска с shimmer-анимацией.\n *\n * Не использовать напрямую — оборачивай реальный content в `<rt-skeleton-wrapper>`\n * с input'ом `[isLoading]`. Wrapper решает что показать (skeleton или content),\n * этот компонент только рисует placeholder.\n *\n * Скругление прямоугольника и квадрата — шаг общего входа `radius`; круг остаётся кругом.\n *\n * Shimmer через background-position keyframes; `@media (prefers-reduced-motion)`\n * убирает анимацию для пользователей с reduced-motion preference.\n */\n@Component({\n    selector: 'rt-skeleton',\n    template: '',\n    styleUrls: ['./rt-skeleton.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtSkeletonComponent {\n    readonly #sizeMap: Record<TRtSkeletonSize, string> = {\n        sm: '10px',\n        md: '15px',\n        lg: '20px',\n    };\n\n    public readonly shape: InputSignal<TRtSkeletonShape> = input<TRtSkeletonShape>('rectangle');\n\n    public readonly size: InputSignal<TRtSkeletonSize> = input<TRtSkeletonSize>('md');\n\n    public readonly width: InputSignal<string> = input<string>('100%');\n\n    public readonly height: InputSignal<string> = input<string>(this.#sizeMap.sm);\n\n    public readonly animation: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(true, {\n        transform: booleanAttribute,\n    });\n\n    @HostBinding('class.rt-skeleton--rectangle')\n    protected get isRectangle(): boolean {\n        return this.shape() === 'rectangle';\n    }\n\n    @HostBinding('class.rt-skeleton--circle')\n    protected get isCircle(): boolean {\n        return this.shape() === 'circle';\n    }\n\n    @HostBinding('class.rt-skeleton--square')\n    protected get isSquare(): boolean {\n        return this.shape() === 'square';\n    }\n\n    @HostBinding('class.rt-skeleton--sm')\n    protected get isSizeSm(): boolean {\n        return this.size() === 'sm';\n    }\n\n    @HostBinding('class.rt-skeleton--md')\n    protected get isSizeMd(): boolean {\n        return this.size() === 'md';\n    }\n\n    @HostBinding('class.rt-skeleton--lg')\n    protected get isSizeLg(): boolean {\n        return this.size() === 'lg';\n    }\n\n    @HostBinding('class.rt-skeleton--animated')\n    protected get isAnimated(): boolean {\n        return this.animation();\n    }\n\n    @HostBinding('style.width')\n    protected get hostWidth(): string {\n        switch (this.shape()) {\n            case 'circle':\n            case 'square':\n                return this.#getSizeValue();\n\n            case 'rectangle':\n            default:\n                return this.width();\n        }\n    }\n\n    @HostBinding('style.height')\n    protected get hostHeight(): string {\n        switch (this.shape()) {\n            case 'circle':\n            case 'square':\n                return this.#getSizeValue();\n\n            case 'rectangle':\n            default:\n                return this.height();\n        }\n    }\n\n    #getSizeValue(): string {\n        return this.#sizeMap[this.size()];\n    }\n}\n"],"mappings":"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"}