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

package/fesm2022/rt-tools-ui-kit-v2-empty-state.mjs

@@ -1,56 +1,191 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective } from '@rt-tools/core';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-
-const BEM_BLOCK = 'rt-empty-state';
-/**
- * Заглушка пустого состояния: центрированная иконка в круглой подложке, заголовок,
- * опциональное описание и проецируемый слот для действия (кнопка «Прикрепить»,
- * «Выбрать» и т.п.). Применяется в пустых вкладках/списках и зонах загрузки, когда
- * сущностей ещё нет.
- *
- * Иконка опциональна (`icon`), действие — через `<ng-content />` (если ничего не
- * спроецировано, слот скрыт `:empty`). Громких severity-цветов нет — приглушённая
- * палитра, как у `rt-note`.
- */
-class RtEmptyStateComponent {
-    constructor() {
-        this.icon = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        /** Имя Material вместо `icon` — рисуется так же, как вход `glyph` у `rt-icon`. */
-        this.glyph = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
-        this.title = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.description = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-        /** Пунктирная рамка вокруг заглушки — так она читается как зона, куда бросают файл. */
-        this.framed = input(false, { ...(ngDevMode ? { debugName: "framed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtEmptyStateComponent, isStandalone: true, selector: "rt-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, framed: { classPropertyName: "framed", publicName: "framed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-empty-state--framed": "framed()" }, classAttribute: "rt-empty-state" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-empty-state\">\n    <div rtElem=\"illustration\">\n        <ng-content select=\"[rtEmptyIllustration]\" />\n    </div>\n\n    @if (icon() || glyph()) {\n        <span rtElem=\"icon-wrap\" qa-dataid=\"empty-state-icon\">\n            <rt-icon size=\"xl\" color=\"muted\" [name]=\"icon()\" [glyph]=\"glyph()\" />\n        </span>\n    }\n\n    @if (title()) {\n        <p rtElem=\"title\" qa-dataid=\"empty-state-title\">{{ title() }}</p>\n    }\n\n    @if (description(); as desc) {\n        <p rtElem=\"description\" qa-dataid=\"empty-state-description\">{{ desc }}</p>\n    }\n\n    <div rtElem=\"action\" qa-dataid=\"empty-state-action\">\n        <ng-content />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-empty-state{--rt-empty-state-icon-radius: var(--rt-radius-full);--rt-empty-state-icon-wrap-size: var(--rt-size-16);--rt-empty-state-icon-wrap-bg: var(--rt-color-bg-subtle);--rt-empty-state-icon-size: var(--rt-size-8);--rt-empty-state-title-size: var(--rt-text-md);--rt-empty-state-title-weight: var(--rt-font-weight-medium);--rt-empty-state-title-color: var(--rt-color-text-primary);--rt-empty-state-description-size: var(--rt-text-sm);--rt-empty-state-description-line-height: var(--rt-leading-normal);--rt-empty-state-padding: var(--rt-space-xl) var(--rt-space-lg);--rt-empty-state-gap: var(--rt-space-sm);--rt-empty-state-icon-offset: var(--rt-space-xs);--rt-empty-state-frame-width: var(--rt-border-width-medium);--rt-empty-state-frame-color: var(--rt-color-border-strong);--rt-empty-state-frame-radius: var(--rt-radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-empty-state-padding);gap:var(--rt-empty-state-gap);text-align:center}.rt-empty-state--framed{border:var(--rt-empty-state-frame-width) dashed var(--rt-empty-state-frame-color);border-radius:var(--rt-empty-state-frame-radius)}.rt-empty-state__illustration:empty{display:none}.rt-empty-state__illustration{margin-bottom:var(--rt-empty-state-icon-offset)}.rt-empty-state__icon-wrap{display:flex;width:var(--rt-empty-state-icon-wrap-size);height:var(--rt-empty-state-icon-wrap-size);align-items:center;justify-content:center;border-radius:var(--rt-empty-state-icon-radius);margin-bottom:var(--rt-empty-state-icon-offset);background:var(--rt-empty-state-icon-wrap-bg);color:var(--rt-color-text-muted)}.rt-empty-state__icon-wrap .rt-icon{min-width:var(--rt-empty-state-icon-size);max-width:var(--rt-empty-state-icon-size);min-height:var(--rt-empty-state-icon-size);max-height:var(--rt-empty-state-icon-size)}.rt-empty-state__title{margin:0;color:var(--rt-empty-state-title-color);font-size:var(--rt-empty-state-title-size);font-weight:var(--rt-empty-state-title-weight)}.rt-empty-state__description{max-width:320px;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-empty-state-description-size);line-height:var(--rt-empty-state-description-line-height)}.rt-empty-state__action:empty{display:none}.rt-empty-state__action{margin-top:var(--rt-space-sm)}.rt-empty-state[data-rt-radius=none]{--rt-empty-state-icon-radius: var(--rt-radius-none)}.rt-empty-state[data-rt-radius=xs]{--rt-empty-state-icon-radius: var(--rt-radius-xs)}.rt-empty-state[data-rt-radius=sm]{--rt-empty-state-icon-radius: var(--rt-radius-sm)}.rt-empty-state[data-rt-radius=ms]{--rt-empty-state-icon-radius: var(--rt-radius-ms)}.rt-empty-state[data-rt-radius=md]{--rt-empty-state-icon-radius: var(--rt-radius-md)}.rt-empty-state[data-rt-radius=lg]{--rt-empty-state-icon-radius: var(--rt-radius-lg)}.rt-empty-state[data-rt-radius=xl]{--rt-empty-state-icon-radius: var(--rt-radius-xl)}.rt-empty-state[data-rt-radius=\"2xl\"]{--rt-empty-state-icon-radius: var(--rt-radius-2xl)}.rt-empty-state[data-rt-radius=full]{--rt-empty-state-icon-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "component", type: 
-                // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtEmptyStateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconComponent,
-                        BlockDirective,
-                        ElemDirective,
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-empty-state--framed]': 'framed()',
-                    }, template: "<ng-container rtBlock=\"rt-empty-state\">\n    <div rtElem=\"illustration\">\n        <ng-content select=\"[rtEmptyIllustration]\" />\n    </div>\n\n    @if (icon() || glyph()) {\n        <span rtElem=\"icon-wrap\" qa-dataid=\"empty-state-icon\">\n            <rt-icon size=\"xl\" color=\"muted\" [name]=\"icon()\" [glyph]=\"glyph()\" />\n        </span>\n    }\n\n    @if (title()) {\n        <p rtElem=\"title\" qa-dataid=\"empty-state-title\">{{ title() }}</p>\n    }\n\n    @if (description(); as desc) {\n        <p rtElem=\"description\" qa-dataid=\"empty-state-description\">{{ desc }}</p>\n    }\n\n    <div rtElem=\"action\" qa-dataid=\"empty-state-action\">\n        <ng-content />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-empty-state{--rt-empty-state-icon-radius: var(--rt-radius-full);--rt-empty-state-icon-wrap-size: var(--rt-size-16);--rt-empty-state-icon-wrap-bg: var(--rt-color-bg-subtle);--rt-empty-state-icon-size: var(--rt-size-8);--rt-empty-state-title-size: var(--rt-text-md);--rt-empty-state-title-weight: var(--rt-font-weight-medium);--rt-empty-state-title-color: var(--rt-color-text-primary);--rt-empty-state-description-size: var(--rt-text-sm);--rt-empty-state-description-line-height: var(--rt-leading-normal);--rt-empty-state-padding: var(--rt-space-xl) var(--rt-space-lg);--rt-empty-state-gap: var(--rt-space-sm);--rt-empty-state-icon-offset: var(--rt-space-xs);--rt-empty-state-frame-width: var(--rt-border-width-medium);--rt-empty-state-frame-color: var(--rt-color-border-strong);--rt-empty-state-frame-radius: var(--rt-radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-empty-state-padding);gap:var(--rt-empty-state-gap);text-align:center}.rt-empty-state--framed{border:var(--rt-empty-state-frame-width) dashed var(--rt-empty-state-frame-color);border-radius:var(--rt-empty-state-frame-radius)}.rt-empty-state__illustration:empty{display:none}.rt-empty-state__illustration{margin-bottom:var(--rt-empty-state-icon-offset)}.rt-empty-state__icon-wrap{display:flex;width:var(--rt-empty-state-icon-wrap-size);height:var(--rt-empty-state-icon-wrap-size);align-items:center;justify-content:center;border-radius:var(--rt-empty-state-icon-radius);margin-bottom:var(--rt-empty-state-icon-offset);background:var(--rt-empty-state-icon-wrap-bg);color:var(--rt-color-text-muted)}.rt-empty-state__icon-wrap .rt-icon{min-width:var(--rt-empty-state-icon-size);max-width:var(--rt-empty-state-icon-size);min-height:var(--rt-empty-state-icon-size);max-height:var(--rt-empty-state-icon-size)}.rt-empty-state__title{margin:0;color:var(--rt-empty-state-title-color);font-size:var(--rt-empty-state-title-size);font-weight:var(--rt-empty-state-title-weight)}.rt-empty-state__description{max-width:320px;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-empty-state-description-size);line-height:var(--rt-empty-state-description-line-height)}.rt-empty-state__action:empty{display:none}.rt-empty-state__action{margin-top:var(--rt-space-sm)}.rt-empty-state[data-rt-radius=none]{--rt-empty-state-icon-radius: var(--rt-radius-none)}.rt-empty-state[data-rt-radius=xs]{--rt-empty-state-icon-radius: var(--rt-radius-xs)}.rt-empty-state[data-rt-radius=sm]{--rt-empty-state-icon-radius: var(--rt-radius-sm)}.rt-empty-state[data-rt-radius=ms]{--rt-empty-state-icon-radius: var(--rt-radius-ms)}.rt-empty-state[data-rt-radius=md]{--rt-empty-state-icon-radius: var(--rt-radius-md)}.rt-empty-state[data-rt-radius=lg]{--rt-empty-state-icon-radius: var(--rt-radius-lg)}.rt-empty-state[data-rt-radius=xl]{--rt-empty-state-icon-radius: var(--rt-radius-xl)}.rt-empty-state[data-rt-radius=\"2xl\"]{--rt-empty-state-icon-radius: var(--rt-radius-2xl)}.rt-empty-state[data-rt-radius=full]{--rt-empty-state-icon-radius: var(--rt-radius-full)}}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], framed: [{ type: i0.Input, args: [{ isSignal: true, alias: "framed", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, input } from "@angular/core";
+import { BlockDirective, ElemDirective } from "@rt-tools/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+const BEM_BLOCK = "rt-empty-state";
+var RtEmptyStateComponent = class RtEmptyStateComponent {
+	constructor() {
+		this.icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.glyph = input(null, ...ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []);
+		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.description = input(null, ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+		this.framed = input(false, {
+			...ngDevMode ? { debugName: "framed" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtEmptyStateComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtEmptyStateComponent,
+			isStandalone: true,
+			selector: "rt-empty-state",
+			inputs: {
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				glyph: {
+					classPropertyName: "glyph",
+					publicName: "glyph",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				description: {
+					classPropertyName: "description",
+					publicName: "description",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				framed: {
+					classPropertyName: "framed",
+					publicName: "framed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				properties: { "class.rt-empty-state--framed": "framed()" },
+				classAttribute: "rt-empty-state"
+			},
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-empty-state\">\n    <div rtElem=\"illustration\">\n        <ng-content select=\"[rtEmptyIllustration]\" />\n    </div>\n\n    @if (icon() || glyph()) {\n        <span rtElem=\"icon-wrap\" qa-dataid=\"empty-state-icon\">\n            <rt-icon size=\"xl\" color=\"muted\" [name]=\"icon()\" [glyph]=\"glyph()\" />\n        </span>\n    }\n\n    @if (title()) {\n        <p rtElem=\"title\" qa-dataid=\"empty-state-title\">{{ title() }}</p>\n    }\n\n    @if (description(); as desc) {\n        <p rtElem=\"description\" qa-dataid=\"empty-state-description\">{{ desc }}</p>\n    }\n\n    <div rtElem=\"action\" qa-dataid=\"empty-state-action\">\n        <ng-content />\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-empty-state{--rt-empty-state-icon-radius: var(--rt-radius-full);--rt-empty-state-icon-wrap-size: var(--rt-size-16);--rt-empty-state-icon-wrap-bg: var(--rt-color-bg-subtle);--rt-empty-state-icon-size: var(--rt-size-8);--rt-empty-state-title-size: var(--rt-text-md);--rt-empty-state-title-weight: var(--rt-font-weight-medium);--rt-empty-state-title-color: var(--rt-color-text-primary);--rt-empty-state-description-size: var(--rt-text-sm);--rt-empty-state-description-line-height: var(--rt-leading-normal);--rt-empty-state-padding: var(--rt-space-xl) var(--rt-space-lg);--rt-empty-state-gap: var(--rt-space-sm);--rt-empty-state-icon-offset: var(--rt-space-xs);--rt-empty-state-frame-width: var(--rt-border-width-medium);--rt-empty-state-frame-color: var(--rt-color-border-strong);--rt-empty-state-frame-radius: var(--rt-radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-empty-state-padding);gap:var(--rt-empty-state-gap);text-align:center}.rt-empty-state--framed{border:var(--rt-empty-state-frame-width) dashed var(--rt-empty-state-frame-color);border-radius:var(--rt-empty-state-frame-radius)}.rt-empty-state__illustration:empty{display:none}.rt-empty-state__illustration{margin-bottom:var(--rt-empty-state-icon-offset)}.rt-empty-state__icon-wrap{display:flex;width:var(--rt-empty-state-icon-wrap-size);height:var(--rt-empty-state-icon-wrap-size);align-items:center;justify-content:center;border-radius:var(--rt-empty-state-icon-radius);margin-bottom:var(--rt-empty-state-icon-offset);background:var(--rt-empty-state-icon-wrap-bg);color:var(--rt-color-text-muted)}.rt-empty-state__icon-wrap .rt-icon{min-width:var(--rt-empty-state-icon-size);max-width:var(--rt-empty-state-icon-size);min-height:var(--rt-empty-state-icon-size);max-height:var(--rt-empty-state-icon-size)}.rt-empty-state__title{margin:0;color:var(--rt-empty-state-title-color);font-size:var(--rt-empty-state-title-size);font-weight:var(--rt-empty-state-title-weight)}.rt-empty-state__description{max-width:320px;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-empty-state-description-size);line-height:var(--rt-empty-state-description-line-height)}.rt-empty-state__action:empty{display:none}.rt-empty-state__action{margin-top:var(--rt-space-sm)}.rt-empty-state[data-rt-radius=none]{--rt-empty-state-icon-radius: var(--rt-radius-none)}.rt-empty-state[data-rt-radius=xs]{--rt-empty-state-icon-radius: var(--rt-radius-xs)}.rt-empty-state[data-rt-radius=sm]{--rt-empty-state-icon-radius: var(--rt-radius-sm)}.rt-empty-state[data-rt-radius=ms]{--rt-empty-state-icon-radius: var(--rt-radius-ms)}.rt-empty-state[data-rt-radius=md]{--rt-empty-state-icon-radius: var(--rt-radius-md)}.rt-empty-state[data-rt-radius=lg]{--rt-empty-state-icon-radius: var(--rt-radius-lg)}.rt-empty-state[data-rt-radius=xl]{--rt-empty-state-icon-radius: var(--rt-radius-xl)}.rt-empty-state[data-rt-radius=\"2xl\"]{--rt-empty-state-icon-radius: var(--rt-radius-2xl)}.rt-empty-state[data-rt-radius=full]{--rt-empty-state-icon-radius: var(--rt-radius-full)}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtEmptyStateComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-empty-state",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconComponent,
+				BlockDirective,
+				ElemDirective
+			],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-empty-state--framed]": "framed()"
+			},
+			template: "<ng-container rtBlock=\"rt-empty-state\">\n    <div rtElem=\"illustration\">\n        <ng-content select=\"[rtEmptyIllustration]\" />\n    </div>\n\n    @if (icon() || glyph()) {\n        <span rtElem=\"icon-wrap\" qa-dataid=\"empty-state-icon\">\n            <rt-icon size=\"xl\" color=\"muted\" [name]=\"icon()\" [glyph]=\"glyph()\" />\n        </span>\n    }\n\n    @if (title()) {\n        <p rtElem=\"title\" qa-dataid=\"empty-state-title\">{{ title() }}</p>\n    }\n\n    @if (description(); as desc) {\n        <p rtElem=\"description\" qa-dataid=\"empty-state-description\">{{ desc }}</p>\n    }\n\n    <div rtElem=\"action\" qa-dataid=\"empty-state-action\">\n        <ng-content />\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-empty-state{--rt-empty-state-icon-radius: var(--rt-radius-full);--rt-empty-state-icon-wrap-size: var(--rt-size-16);--rt-empty-state-icon-wrap-bg: var(--rt-color-bg-subtle);--rt-empty-state-icon-size: var(--rt-size-8);--rt-empty-state-title-size: var(--rt-text-md);--rt-empty-state-title-weight: var(--rt-font-weight-medium);--rt-empty-state-title-color: var(--rt-color-text-primary);--rt-empty-state-description-size: var(--rt-text-sm);--rt-empty-state-description-line-height: var(--rt-leading-normal);--rt-empty-state-padding: var(--rt-space-xl) var(--rt-space-lg);--rt-empty-state-gap: var(--rt-space-sm);--rt-empty-state-icon-offset: var(--rt-space-xs);--rt-empty-state-frame-width: var(--rt-border-width-medium);--rt-empty-state-frame-color: var(--rt-color-border-strong);--rt-empty-state-frame-radius: var(--rt-radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-empty-state-padding);gap:var(--rt-empty-state-gap);text-align:center}.rt-empty-state--framed{border:var(--rt-empty-state-frame-width) dashed var(--rt-empty-state-frame-color);border-radius:var(--rt-empty-state-frame-radius)}.rt-empty-state__illustration:empty{display:none}.rt-empty-state__illustration{margin-bottom:var(--rt-empty-state-icon-offset)}.rt-empty-state__icon-wrap{display:flex;width:var(--rt-empty-state-icon-wrap-size);height:var(--rt-empty-state-icon-wrap-size);align-items:center;justify-content:center;border-radius:var(--rt-empty-state-icon-radius);margin-bottom:var(--rt-empty-state-icon-offset);background:var(--rt-empty-state-icon-wrap-bg);color:var(--rt-color-text-muted)}.rt-empty-state__icon-wrap .rt-icon{min-width:var(--rt-empty-state-icon-size);max-width:var(--rt-empty-state-icon-size);min-height:var(--rt-empty-state-icon-size);max-height:var(--rt-empty-state-icon-size)}.rt-empty-state__title{margin:0;color:var(--rt-empty-state-title-color);font-size:var(--rt-empty-state-title-size);font-weight:var(--rt-empty-state-title-weight)}.rt-empty-state__description{max-width:320px;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-empty-state-description-size);line-height:var(--rt-empty-state-description-line-height)}.rt-empty-state__action:empty{display:none}.rt-empty-state__action{margin-top:var(--rt-space-sm)}.rt-empty-state[data-rt-radius=none]{--rt-empty-state-icon-radius: var(--rt-radius-none)}.rt-empty-state[data-rt-radius=xs]{--rt-empty-state-icon-radius: var(--rt-radius-xs)}.rt-empty-state[data-rt-radius=sm]{--rt-empty-state-icon-radius: var(--rt-radius-sm)}.rt-empty-state[data-rt-radius=ms]{--rt-empty-state-icon-radius: var(--rt-radius-ms)}.rt-empty-state[data-rt-radius=md]{--rt-empty-state-icon-radius: var(--rt-radius-md)}.rt-empty-state[data-rt-radius=lg]{--rt-empty-state-icon-radius: var(--rt-radius-lg)}.rt-empty-state[data-rt-radius=xl]{--rt-empty-state-icon-radius: var(--rt-radius-xl)}.rt-empty-state[data-rt-radius=\"2xl\"]{--rt-empty-state-icon-radius: var(--rt-radius-2xl)}.rt-empty-state[data-rt-radius=full]{--rt-empty-state-icon-radius: var(--rt-radius-full)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		glyph: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "glyph",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		framed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "framed",
+				required: false
+			}]
+		}]
+	}
+});
 export { RtEmptyStateComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-empty-state.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-empty-state.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-empty-state.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/empty-state/rt-empty-state.component.ts","../../../projects/ui-kit-v2/src/lib/components/empty-state/rt-empty-state.component.html","../../../projects/ui-kit-v2/src/lib/components/empty-state/rt-tools-ui-kit-v2-empty-state.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-empty-state';\n\n/**\n * Заглушка пустого состояния: центрированная иконка в круглой подложке, заголовок,\n * опциональное описание и проецируемый слот для действия (кнопка «Прикрепить»,\n * «Выбрать» и т.п.). Применяется в пустых вкладках/списках и зонах загрузки, когда\n * сущностей ещё нет.\n *\n * Иконка опциональна (`icon`), действие — через `<ng-content />` (если ничего не\n * спроецировано, слот скрыт `:empty`). Громких severity-цветов нет — приглушённая\n * палитра, как у `rt-note`.\n */\n@Component({\n    selector: 'rt-empty-state',\n    templateUrl: './rt-empty-state.component.html',\n    styleUrl: './rt-empty-state.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-empty-state--framed]': 'framed()',\n    },\n})\nexport class RtEmptyStateComponent {\n    public readonly icon: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /** Имя Material вместо `icon` — рисуется так же, как вход `glyph` у `rt-icon`. */\n    public readonly glyph: InputSignal<string | null> = input<string | null>(null);\n\n    public readonly title: InputSignal<string> = input<string>('');\n\n    public readonly description: InputSignal<string | null> = input<string | null>(null);\n\n    /** Пунктирная рамка вокруг заглушки — так она читается как зона, куда бросают файл. */\n    public readonly framed: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n}\n","<ng-container rtBlock=\"rt-empty-state\">\n    <div rtElem=\"illustration\">\n        <ng-content select=\"[rtEmptyIllustration]\" />\n    </div>\n\n    @if (icon() || glyph()) {\n        <span rtElem=\"icon-wrap\" qa-dataid=\"empty-state-icon\">\n            <rt-icon size=\"xl\" color=\"muted\" [name]=\"icon()\" [glyph]=\"glyph()\" />\n        </span>\n    }\n\n    @if (title()) {\n        <p rtElem=\"title\" qa-dataid=\"empty-state-title\">{{ title() }}</p>\n    }\n\n    @if (description(); as desc) {\n        <p rtElem=\"description\" qa-dataid=\"empty-state-description\">{{ desc }}</p>\n    }\n\n    <div rtElem=\"action\" qa-dataid=\"empty-state-action\">\n        <ng-content />\n    </div>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAiBA,MAAM,SAAS,GAAW,gBAAgB;AAE1C;;;;;;;;;AASG;MAmBU,qBAAqB,CAAA;AAlBlC,IAAA,WAAA,GAAA;QAmBoB,IAAA,CAAA,IAAI,GAAqC,KAAK,CAAsB,IAAI;iFAAC;;QAGzE,IAAA,CAAA,KAAK,GAA+B,KAAK,CAAgB,IAAI;kFAAC;QAE9D,IAAA,CAAA,KAAK,GAAwB,KAAK,CAAS,EAAE;kFAAC;QAE9C,IAAA,CAAA,WAAW,GAA+B,KAAK,CAAgB,IAAI;wFAAC;;QAGpE,IAAA,CAAA,MAAM,GAAoD,KAAK,CAAwB,KAAK,8EACxG,SAAS,EAAE,gBAAgB,EAAA,CAC7B;AACL,IAAA;8GAdY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,63BC/ClC,otBAuBA,EAAA,MAAA,EAAA,CAAA,oiGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBDcQ,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAQR,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAlBjC,SAAS;+BACI,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,eAAe;wBACf,cAAc;wBACd,aAAa;AAChB,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,gCAAgC,EAAE,UAAU;AAC/C,qBAAA,EAAA,QAAA,EAAA,otBAAA,EAAA,MAAA,EAAA,CAAA,oiGAAA,CAAA,EAAA;;;AE7CL;;AAEG;;;;"}
+{"version":3,"file":"rt-tools-ui-kit-v2-empty-state.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/empty-state/rt-empty-state.component.ts","../../../projects/ui-kit-v2/src/lib/components/empty-state/rt-empty-state.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-empty-state';\n\n/**\n * Заглушка пустого состояния: центрированная иконка в круглой подложке, заголовок,\n * опциональное описание и проецируемый слот для действия (кнопка «Прикрепить»,\n * «Выбрать» и т.п.). Применяется в пустых вкладках/списках и зонах загрузки, когда\n * сущностей ещё нет.\n *\n * Иконка опциональна (`icon`), действие — через `<ng-content />` (если ничего не\n * спроецировано, слот скрыт `:empty`). Громких severity-цветов нет — приглушённая\n * палитра, как у `rt-note`.\n */\n@Component({\n    selector: 'rt-empty-state',\n    templateUrl: './rt-empty-state.component.html',\n    styleUrl: './rt-empty-state.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-empty-state--framed]': 'framed()',\n    },\n})\nexport class RtEmptyStateComponent {\n    public readonly icon: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /** Имя Material вместо `icon` — рисуется так же, как вход `glyph` у `rt-icon`. */\n    public readonly glyph: InputSignal<string | null> = input<string | null>(null);\n\n    public readonly title: InputSignal<string> = input<string>('');\n\n    public readonly description: InputSignal<string | null> = input<string | null>(null);\n\n    /** Пунктирная рамка вокруг заглушки — так она читается как зона, куда бросают файл. */\n    public readonly framed: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n}\n","<ng-container rtBlock=\"rt-empty-state\">\n    <div rtElem=\"illustration\">\n        <ng-content select=\"[rtEmptyIllustration]\" />\n    </div>\n\n    @if (icon() || glyph()) {\n        <span rtElem=\"icon-wrap\" qa-dataid=\"empty-state-icon\">\n            <rt-icon size=\"xl\" color=\"muted\" [name]=\"icon()\" [glyph]=\"glyph()\" />\n        </span>\n    }\n\n    @if (title()) {\n        <p rtElem=\"title\" qa-dataid=\"empty-state-title\">{{ title() }}</p>\n    }\n\n    @if (description(); as desc) {\n        <p rtElem=\"description\" qa-dataid=\"empty-state-description\">{{ desc }}</p>\n    }\n\n    <div rtElem=\"action\" qa-dataid=\"empty-state-action\">\n        <ng-content />\n    </div>\n</ng-container>\n"],"mappings":";;;;;;AAiBA,MAAM,YAAoB;AA8B1B,IAAa,wBAAb,MAAa,sBAAqB;CAlBlC,cAAA;EAmBoB,KAAA,OAAyC,MAA2B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;EAGzE,KAAA,QAAoC,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAE9D,KAAA,QAA6B,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAE9C,KAAA,cAA0C,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;EAGpE,KAAA,SAA0D,MAA6B,OAAK;GAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;GACxG,WAAW;EAAgB,CAAA;CAElC;CAdY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAqB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAArB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAqB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,MAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,aAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,QAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,MAAA;IAAA,YAAA,EAAA,gCAAA,WAAA;IAAA,gBAAA;GAAA;GAAA,gBAAA,CAAA;IAAA,WAAA,GAAA;IAAA,QAAA,CAAA,UAAA,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UC/ClC;GAuBA,QAAA,CAAA,oiGAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDcQ;KAAe,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACf;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAQR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAlBjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,iBAGT,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IACA;IACA;GACH;GAAA,gBACe,CAAC;IAAE,WAAW;IAAmB,QAAQ,CAAC,QAAQ;GAAC,CAAE;GAAC,MAChE;IACF,OAAO;IACP,kCAAkC;GACrC;GAAA,UAAA;GAAA,QAAA,CAAA,oiGAAA;EAAA,CAAA"}