@rt-tools/ui-kit-v2 0.33.0 → 0.34.0

package/fesm2022/rt-tools-ui-kit-v2-expansion-panel.mjs

@@ -1,11 +1,49 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, booleanAttribute, computed, contentChild, inject, input, model } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, InjectionToken, TemplateRef, ViewEncapsulation, booleanAttribute, computed, contentChildren, effect, forwardRef, inject, input, model, signal, untracked } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+const RT_EXPANSION_PANEL_OWNER = new InjectionToken("RT_EXPANSION_PANEL_OWNER");
+const RT_EXPANSION_PANEL_GROUP = new InjectionToken("RT_EXPANSION_PANEL_GROUP");
+var RtExpansionPanelActionsDirective = class RtExpansionPanelActionsDirective {
+	constructor() {
+		this.owner = inject(RT_EXPANSION_PANEL_OWNER, { optional: true });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtExpansionPanelActionsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtExpansionPanelActionsDirective,
+			isStandalone: true,
+			selector: "[rtExpansionPanelActions]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtExpansionPanelActionsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtExpansionPanelActions]" }]
+	}]
+});
 var RtExpansionPanelContentDirective = class RtExpansionPanelContentDirective {
 	constructor() {
 		this.templateRef = inject(TemplateRef);
+		this.owner = inject(RT_EXPANSION_PANEL_OWNER, { optional: true });
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -38,6 +76,81 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ selector: "ng-template[rtExpansionPanelContent]" }]
 	}]
 });
+var RtExpansionPanelGroupDirective = class RtExpansionPanelGroupDirective {
+	constructor() {
+		this.#panels = /* @__PURE__ */ new Set();
+		this.multi = input(false, {
+			...ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+	}
+	#panels;
+	register(panel) {
+		this.#panels.add(panel);
+	}
+	unregister(panel) {
+		this.#panels.delete(panel);
+	}
+	opened(panel) {
+		if (this.multi()) return;
+		for (const other of this.#panels) if (other !== panel && other.expanded()) other.expanded.set(false);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtExpansionPanelGroupDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtExpansionPanelGroupDirective,
+			isStandalone: true,
+			selector: "[rtExpansionPanelGroup]",
+			inputs: { multi: {
+				classPropertyName: "multi",
+				publicName: "multi",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			providers: [{
+				provide: RT_EXPANSION_PANEL_GROUP,
+				useExisting: forwardRef(() => RtExpansionPanelGroupDirective)
+			}],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtExpansionPanelGroupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rtExpansionPanelGroup]",
+			providers: [{
+				provide: RT_EXPANSION_PANEL_GROUP,
+				useExisting: forwardRef(() => RtExpansionPanelGroupDirective)
+			}]
+		}]
+	}],
+	propDecorators: { multi: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "multi",
+			required: false
+		}]
+	}] }
+});
 const BEM_BLOCK = "rt-expansion-panel";
 let expansionPanelIdSeed = 0;
 function nextExpansionPanelId() {
@@ -45,10 +158,28 @@ function nextExpansionPanelId() {
 	return expansionPanelIdSeed;
 }
 var RtExpansionPanelComponent = class RtExpansionPanelComponent {
+	#idBase;
+	#group;
+	#everExpanded;
 	constructor() {
 		this.#idBase = `rt-expansion-panel-${nextExpansionPanelId()}`;
-		this.lazyContent = contentChild(RtExpansionPanelContentDirective, ...ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []);
+		this.#group = inject(RT_EXPANSION_PANEL_GROUP, {
+			optional: true,
+			skipSelf: true
+		});
+		this.#everExpanded = signal(false, ...ngDevMode ? [{ debugName: "#everExpanded" }] : /* istanbul ignore next */ []);
+		this.lazyContents = contentChildren(RtExpansionPanelContentDirective, {
+			...ngDevMode ? { debugName: "lazyContents" } : /* istanbul ignore next */ {},
+			descendants: true
+		});
+		this.allActions = contentChildren(RtExpansionPanelActionsDirective, {
+			...ngDevMode ? { debugName: "allActions" } : /* istanbul ignore next */ {},
+			descendants: true
+		});
+		this.lazyContent = computed(() => this.lazyContents().find((content) => content.owner === this), ...ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []);
 		this.bodyId = `${this.#idBase}-body`;
+		this.actions = computed(() => this.allActions().find((action) => action.owner === this), ...ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []);
+		this.bodyRendered = computed(() => this.expanded() || this.preserveContent() && this.#everExpanded(), ...ngDevMode ? [{ debugName: "bodyRendered" }] : /* istanbul ignore next */ []);
 		this.headerDomId = computed(() => this.headerId() ?? `${this.#idBase}-header`, ...ngDevMode ? [{ debugName: "headerDomId" }] : /* istanbul ignore next */ []);
 		this.expanded = model(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
 		this.disabled = input(false, {
@@ -62,8 +193,19 @@ var RtExpansionPanelComponent = class RtExpansionPanelComponent {
 		this.appearance = input("card", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
 		this.headerId = input(null, ...ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.preserveContent = input(false, {
+			...ngDevMode ? { debugName: "preserveContent" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.#group?.register(this);
+		inject(DestroyRef).onDestroy(() => this.#group?.unregister(this));
+		effect(() => {
+			if (this.expanded()) untracked(() => {
+				this.#everExpanded.set(true);
+				this.#group?.opened(this);
+			});
+		});
 	}
-	#idBase;
 	toggle() {
 		if (!this.disabled()) this.expanded.set(!this.expanded());
 	}
@@ -126,6 +268,13 @@ var RtExpansionPanelComponent = class RtExpansionPanelComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				preserveContent: {
+					classPropertyName: "preserveContent",
+					publicName: "preserveContent",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { expanded: "expandedChange" },
@@ -133,20 +282,32 @@ var RtExpansionPanelComponent = class RtExpansionPanelComponent {
 				properties: {
 					"class.rt-expansion-panel--plain": "appearance() === \"plain\"",
 					"class.rt-expansion-panel--expanded": "expanded()",
-					"class.rt-expansion-panel--disabled": "disabled()"
+					"class.rt-expansion-panel--disabled": "disabled()",
+					"class.rt-expansion-panel--with-actions": "!!actions()"
 				},
 				classAttribute: "rt-expansion-panel"
 			},
+			providers: [{
+				provide: RT_EXPANSION_PANEL_GROUP,
+				useValue: null
+			}, {
+				provide: RT_EXPANSION_PANEL_OWNER,
+				useExisting: forwardRef(() => RtExpansionPanelComponent)
+			}],
 			queries: [{
-				propertyName: "lazyContent",
-				first: true,
+				propertyName: "lazyContents",
 				predicate: RtExpansionPanelContentDirective,
 				descendants: true,
 				isSignal: true
+			}, {
+				propertyName: "allActions",
+				predicate: RtExpansionPanelActionsDirective,
+				descendants: true,
+				isSignal: true
 			}],
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-expansion-panel\">\n    <button\n        type=\"button\"\n        rtElem=\"header\"\n        qa-dataid=\"expansion-panel-header\"\n        [id]=\"headerDomId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"expanded() ? bodyId : null\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (click)=\"toggle()\">\n        <ng-content />\n\n        @if (!hideToggle()) {\n            <!-- Шеврон — в обёртке: ширину столбца держит она, значок свою ширину ставит сам. -->\n            <span rtElem=\"chevron\" aria-hidden=\"true\" [rtMod]=\"{ open: expanded() }\"><rt-icon size=\"sm\" name=\"chevron-down\" /></span>\n        }\n    </button>\n\n    @if (expanded()) {\n        <!-- Сворачивание доигрывает движение: класс ухода сводит высоту к нулю, и тело уходит после. -->\n        <div\n            rtElem=\"body\"\n            role=\"region\"\n            qa-dataid=\"expansion-panel-body\"\n            animate.leave=\"rt-expansion-panel__body--leaving\"\n            [id]=\"bodyId\"\n            [attr.aria-labelledby]=\"headerDomId()\">\n            <ng-content select=\"[rtExpansionPanelBody]\" />\n\n            @if (lazyContent(); as content) {\n                <ng-container [ngTemplateOutlet]=\"content.templateRef\" />\n            }\n        </div>\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-expansion-panel{--rt-expansion-panel-radius: var(--rt-radius-md);--rt-expansion-panel-shadow: var(--rt-shadow-sm);--rt-expansion-panel-duration: var(--rt-duration-base);--rt-expansion-panel-bg: var(--rt-color-bg-surface);--rt-expansion-panel-header-min-height: var(--rt-control-height-lg);--rt-expansion-panel-header-padding-block: var(--rt-space-sm);--rt-expansion-panel-header-padding-start: var(--rt-space-lg);--rt-expansion-panel-header-padding-end: var(--rt-space-md);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-radius: var(--rt-radius-md);--rt-expansion-panel-header-bg: transparent;--rt-expansion-panel-header-hover-bg: var(--rt-color-bg-hover);--rt-expansion-panel-header-color: var(--rt-color-text-primary);--rt-expansion-panel-header-font-size: var(--rt-text-md);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-medium);--rt-expansion-panel-chevron-size: var(--rt-control-height-sm);--rt-expansion-panel-chevron-color: var(--rt-color-text-muted);--rt-expansion-panel-body-padding-inline: var(--rt-space-lg);--rt-expansion-panel-body-padding-end: var(--rt-space-md);display:block;width:100%;box-sizing:border-box;border-radius:var(--rt-expansion-panel-radius);background:var(--rt-expansion-panel-bg);box-shadow:var(--rt-expansion-panel-shadow);color:var(--rt-color-text-primary)}.rt-expansion-panel--plain{--rt-expansion-panel-radius: var(--rt-radius-none);--rt-expansion-panel-shadow: var(--rt-shadow-none);--rt-expansion-panel-bg: transparent;--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-start: var(--rt-space-0);--rt-expansion-panel-header-padding-end: var(--rt-space-0);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-regular);--rt-expansion-panel-body-padding-inline: var(--rt-space-0);--rt-expansion-panel-body-padding-end: var(--rt-space-0)}.rt-expansion-panel__header{display:flex;width:100%;min-height:var(--rt-expansion-panel-header-min-height);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-expansion-panel-header-radius);background:var(--rt-expansion-panel-header-bg);color:var(--rt-expansion-panel-header-color);cursor:pointer;font:inherit;font-size:var(--rt-expansion-panel-header-font-size);font-weight:var(--rt-expansion-panel-header-font-weight);gap:var(--rt-expansion-panel-header-gap);padding-block:var(--rt-expansion-panel-header-padding-block);padding-inline:var(--rt-expansion-panel-header-padding-start) var(--rt-expansion-panel-header-padding-end);text-align:start;transition:background-color var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__header:hover:not(:disabled){background:var(--rt-expansion-panel-header-hover-bg)}.rt-expansion-panel__header:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-expansion-panel__header:disabled{color:var(--rt-color-text-disabled);cursor:default}.rt-expansion-panel__chevron{display:inline-flex;flex-shrink:0;justify-content:center;color:var(--rt-expansion-panel-chevron-color);inline-size:var(--rt-expansion-panel-chevron-size);margin-inline-start:auto;transition:transform var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__chevron--open{transform:rotate(180deg)}.rt-expansion-panel__body{overflow:hidden;height:auto;interpolate-size:allow-keywords;padding-block-end:var(--rt-expansion-panel-body-padding-end);padding-inline:var(--rt-expansion-panel-body-padding-inline);transition:height var(--rt-expansion-panel-duration) ease,padding-block-end var(--rt-expansion-panel-duration) ease}@starting-style{.rt-expansion-panel__body{height:0;padding-block-end:0}}.rt-expansion-panel__body--leaving{height:0;padding-block-end:0}@media(prefers-reduced-motion:reduce){.rt-expansion-panel__body{transition:none}}.rt-expansion-panel--disabled .rt-expansion-panel__chevron{color:var(--rt-color-text-disabled)}}\n"],
+			template: "<ng-container rtBlock=\"rt-expansion-panel\">\n    <!-- Строка заголовка: кнопка-переключатель, а при действиях — они и шеврон после неё. Действия\n         вне кнопки: кнопка внутри кнопки недопустима, и нажатие по действию не раскрывает панель. -->\n    <div rtElem=\"head\">\n        <button\n            type=\"button\"\n            rtElem=\"header\"\n            qa-dataid=\"expansion-panel-header\"\n            [id]=\"headerDomId()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"bodyRendered() ? bodyId : null\"\n            [attr.aria-label]=\"ariaLabel()\"\n            (click)=\"toggle()\">\n            <ng-content />\n\n            @if (!hideToggle() && !actions()) {\n                <!-- Шеврон — в обёртке: ширину столбца держит она, значок свою ширину ставит сам. -->\n                <span rtElem=\"chevron\" aria-hidden=\"true\" [rtMod]=\"{ open: expanded() }\"><rt-icon size=\"sm\" name=\"chevron-down\" /></span>\n            }\n        </button>\n\n        @if (actions()) {\n            <div rtElem=\"actions\" qa-dataid=\"expansion-panel-actions\">\n                <ng-content select=\"[rtExpansionPanelActions]\" />\n            </div>\n\n            @if (!hideToggle()) {\n                <!-- Шеврон вне кнопки нажимается мышью; с клавиатуры панель раскрывает сама кнопка. -->\n                <span\n                    rtElem=\"chevron\"\n                    qa-dataid=\"expansion-panel-chevron\"\n                    aria-hidden=\"true\"\n                    [rtMod]=\"{ open: expanded(), outside: true }\"\n                    (click)=\"toggle()\">\n                    <rt-icon size=\"sm\" name=\"chevron-down\" />\n                </span>\n            }\n        }\n    </div>\n\n    @if (bodyRendered()) {\n        <!-- Сворачивание доигрывает движение: класс ухода сводит высоту к нулю, и тело уходит после. -->\n        <div\n            rtElem=\"body\"\n            role=\"region\"\n            qa-dataid=\"expansion-panel-body\"\n            animate.leave=\"rt-expansion-panel__body--leaving\"\n            [rtMod]=\"{ collapsed: !expanded() }\"\n            [attr.inert]=\"expanded() ? null : ''\"\n            [id]=\"bodyId\"\n            [attr.aria-labelledby]=\"headerDomId()\">\n            <ng-content select=\"[rtExpansionPanelBody]\" />\n\n            @if (lazyContent(); as content) {\n                <ng-container [ngTemplateOutlet]=\"content.templateRef\" />\n            }\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-expansion-panel{--rt-expansion-panel-radius: var(--rt-radius-md);--rt-expansion-panel-shadow: var(--rt-shadow-sm);--rt-expansion-panel-duration: var(--rt-duration-base);--rt-expansion-panel-bg: var(--rt-color-bg-surface);--rt-expansion-panel-header-min-height: var(--rt-control-height-lg);--rt-expansion-panel-header-padding-block: var(--rt-space-sm);--rt-expansion-panel-header-padding-start: var(--rt-space-lg);--rt-expansion-panel-header-padding-end: var(--rt-space-md);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-radius: var(--rt-radius-md);--rt-expansion-panel-header-bg: transparent;--rt-expansion-panel-header-hover-bg: var(--rt-color-bg-hover);--rt-expansion-panel-header-color: var(--rt-color-text-primary);--rt-expansion-panel-header-font-size: var(--rt-text-md);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-medium);--rt-expansion-panel-chevron-size: var(--rt-control-height-sm);--rt-expansion-panel-chevron-color: var(--rt-color-text-muted);--rt-expansion-panel-body-padding-inline: var(--rt-space-lg);--rt-expansion-panel-body-padding-end: var(--rt-space-md);--rt-expansion-panel-actions-gap: var(--rt-space-xs);--rt-expansion-panel-box-sizing: border-box;display:block;width:100%;box-sizing:var(--rt-expansion-panel-box-sizing);border-radius:var(--rt-expansion-panel-radius);background:var(--rt-expansion-panel-bg);box-shadow:var(--rt-expansion-panel-shadow);color:var(--rt-color-text-primary)}.rt-expansion-panel--plain{--rt-expansion-panel-radius: var(--rt-radius-none);--rt-expansion-panel-shadow: var(--rt-shadow-none);--rt-expansion-panel-bg: transparent;--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-start: var(--rt-space-0);--rt-expansion-panel-header-padding-end: var(--rt-space-0);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-regular);--rt-expansion-panel-body-padding-inline: var(--rt-space-0);--rt-expansion-panel-body-padding-end: var(--rt-space-0)}.rt-expansion-panel__head{display:flex;align-items:center;border-radius:var(--rt-expansion-panel-header-radius);transition:background-color var(--rt-expansion-panel-duration) ease}.rt-expansion-panel--with-actions .rt-expansion-panel__head{background:var(--rt-expansion-panel-header-bg);gap:var(--rt-expansion-panel-header-gap);padding-inline-end:var(--rt-expansion-panel-header-padding-end)}.rt-expansion-panel--with-actions .rt-expansion-panel__head:hover{background:var(--rt-expansion-panel-header-hover-bg)}.rt-expansion-panel--with-actions .rt-expansion-panel__header{min-width:0;flex:1 1 auto;padding-inline-end:var(--rt-space-0)}.rt-expansion-panel--with-actions .rt-expansion-panel__header:hover:not(:disabled){background:transparent}.rt-expansion-panel__actions{display:inline-flex;flex-shrink:0;align-items:center;gap:var(--rt-expansion-panel-actions-gap)}.rt-expansion-panel__header{display:flex;width:100%;min-height:var(--rt-expansion-panel-header-min-height);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-expansion-panel-header-radius);background:var(--rt-expansion-panel-header-bg);color:var(--rt-expansion-panel-header-color);cursor:pointer;font:inherit;font-size:var(--rt-expansion-panel-header-font-size);font-weight:var(--rt-expansion-panel-header-font-weight);gap:var(--rt-expansion-panel-header-gap);padding-block:var(--rt-expansion-panel-header-padding-block);padding-inline:var(--rt-expansion-panel-header-padding-start) var(--rt-expansion-panel-header-padding-end);text-align:start;transition:background-color var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__header:hover:not(:disabled){background:var(--rt-expansion-panel-header-hover-bg)}.rt-expansion-panel__header:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-expansion-panel__header:disabled{color:var(--rt-color-text-disabled);cursor:default}.rt-expansion-panel__chevron{display:inline-flex;flex-shrink:0;justify-content:center;color:var(--rt-expansion-panel-chevron-color);inline-size:var(--rt-expansion-panel-chevron-size);margin-inline-start:auto;transition:transform var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__chevron--open{transform:rotate(180deg)}.rt-expansion-panel__chevron--outside{cursor:pointer;margin-inline-start:0}.rt-expansion-panel__body{overflow:hidden;height:auto;box-sizing:var(--rt-expansion-panel-body-box-sizing, inherit);font-size:var(--rt-expansion-panel-body-font-size);interpolate-size:allow-keywords;line-height:var(--rt-expansion-panel-body-line-height);padding-block-end:var(--rt-expansion-panel-body-padding-end);padding-inline:var(--rt-expansion-panel-body-padding-inline);transition:height var(--rt-expansion-panel-duration) ease,padding-block-end var(--rt-expansion-panel-duration) ease}@starting-style{.rt-expansion-panel__body{height:0;padding-block-end:0}}.rt-expansion-panel__body--leaving{height:0;padding-block-end:0}.rt-expansion-panel__body--collapsed{height:0;padding-block-end:0;transition:height var(--rt-expansion-panel-duration) ease,padding-block-end var(--rt-expansion-panel-duration) ease,visibility 0s linear var(--rt-expansion-panel-duration);visibility:hidden}@media(prefers-reduced-motion:reduce){.rt-expansion-panel__body{transition:none}}.rt-expansion-panel--disabled .rt-expansion-panel__chevron{color:var(--rt-color-text-disabled)}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -218,16 +379,35 @@ i0.ɵɵngDeclareClassMetadata({
 				class: BEM_BLOCK,
 				"[class.rt-expansion-panel--plain]": "appearance() === \"plain\"",
 				"[class.rt-expansion-panel--expanded]": "expanded()",
-				"[class.rt-expansion-panel--disabled]": "disabled()"
+				"[class.rt-expansion-panel--disabled]": "disabled()",
+				"[class.rt-expansion-panel--with-actions]": "!!actions()"
 			},
-			template: "<ng-container rtBlock=\"rt-expansion-panel\">\n    <button\n        type=\"button\"\n        rtElem=\"header\"\n        qa-dataid=\"expansion-panel-header\"\n        [id]=\"headerDomId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"expanded() ? bodyId : null\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (click)=\"toggle()\">\n        <ng-content />\n\n        @if (!hideToggle()) {\n            <!-- Шеврон — в обёртке: ширину столбца держит она, значок свою ширину ставит сам. -->\n            <span rtElem=\"chevron\" aria-hidden=\"true\" [rtMod]=\"{ open: expanded() }\"><rt-icon size=\"sm\" name=\"chevron-down\" /></span>\n        }\n    </button>\n\n    @if (expanded()) {\n        <!-- Сворачивание доигрывает движение: класс ухода сводит высоту к нулю, и тело уходит после. -->\n        <div\n            rtElem=\"body\"\n            role=\"region\"\n            qa-dataid=\"expansion-panel-body\"\n            animate.leave=\"rt-expansion-panel__body--leaving\"\n            [id]=\"bodyId\"\n            [attr.aria-labelledby]=\"headerDomId()\">\n            <ng-content select=\"[rtExpansionPanelBody]\" />\n\n            @if (lazyContent(); as content) {\n                <ng-container [ngTemplateOutlet]=\"content.templateRef\" />\n            }\n        </div>\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-expansion-panel{--rt-expansion-panel-radius: var(--rt-radius-md);--rt-expansion-panel-shadow: var(--rt-shadow-sm);--rt-expansion-panel-duration: var(--rt-duration-base);--rt-expansion-panel-bg: var(--rt-color-bg-surface);--rt-expansion-panel-header-min-height: var(--rt-control-height-lg);--rt-expansion-panel-header-padding-block: var(--rt-space-sm);--rt-expansion-panel-header-padding-start: var(--rt-space-lg);--rt-expansion-panel-header-padding-end: var(--rt-space-md);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-radius: var(--rt-radius-md);--rt-expansion-panel-header-bg: transparent;--rt-expansion-panel-header-hover-bg: var(--rt-color-bg-hover);--rt-expansion-panel-header-color: var(--rt-color-text-primary);--rt-expansion-panel-header-font-size: var(--rt-text-md);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-medium);--rt-expansion-panel-chevron-size: var(--rt-control-height-sm);--rt-expansion-panel-chevron-color: var(--rt-color-text-muted);--rt-expansion-panel-body-padding-inline: var(--rt-space-lg);--rt-expansion-panel-body-padding-end: var(--rt-space-md);display:block;width:100%;box-sizing:border-box;border-radius:var(--rt-expansion-panel-radius);background:var(--rt-expansion-panel-bg);box-shadow:var(--rt-expansion-panel-shadow);color:var(--rt-color-text-primary)}.rt-expansion-panel--plain{--rt-expansion-panel-radius: var(--rt-radius-none);--rt-expansion-panel-shadow: var(--rt-shadow-none);--rt-expansion-panel-bg: transparent;--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-start: var(--rt-space-0);--rt-expansion-panel-header-padding-end: var(--rt-space-0);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-regular);--rt-expansion-panel-body-padding-inline: var(--rt-space-0);--rt-expansion-panel-body-padding-end: var(--rt-space-0)}.rt-expansion-panel__header{display:flex;width:100%;min-height:var(--rt-expansion-panel-header-min-height);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-expansion-panel-header-radius);background:var(--rt-expansion-panel-header-bg);color:var(--rt-expansion-panel-header-color);cursor:pointer;font:inherit;font-size:var(--rt-expansion-panel-header-font-size);font-weight:var(--rt-expansion-panel-header-font-weight);gap:var(--rt-expansion-panel-header-gap);padding-block:var(--rt-expansion-panel-header-padding-block);padding-inline:var(--rt-expansion-panel-header-padding-start) var(--rt-expansion-panel-header-padding-end);text-align:start;transition:background-color var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__header:hover:not(:disabled){background:var(--rt-expansion-panel-header-hover-bg)}.rt-expansion-panel__header:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-expansion-panel__header:disabled{color:var(--rt-color-text-disabled);cursor:default}.rt-expansion-panel__chevron{display:inline-flex;flex-shrink:0;justify-content:center;color:var(--rt-expansion-panel-chevron-color);inline-size:var(--rt-expansion-panel-chevron-size);margin-inline-start:auto;transition:transform var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__chevron--open{transform:rotate(180deg)}.rt-expansion-panel__body{overflow:hidden;height:auto;interpolate-size:allow-keywords;padding-block-end:var(--rt-expansion-panel-body-padding-end);padding-inline:var(--rt-expansion-panel-body-padding-inline);transition:height var(--rt-expansion-panel-duration) ease,padding-block-end var(--rt-expansion-panel-duration) ease}@starting-style{.rt-expansion-panel__body{height:0;padding-block-end:0}}.rt-expansion-panel__body--leaving{height:0;padding-block-end:0}@media(prefers-reduced-motion:reduce){.rt-expansion-panel__body{transition:none}}.rt-expansion-panel--disabled .rt-expansion-panel__chevron{color:var(--rt-color-text-disabled)}}\n"]
+			providers: [{
+				provide: RT_EXPANSION_PANEL_GROUP,
+				useValue: null
+			}, {
+				provide: RT_EXPANSION_PANEL_OWNER,
+				useExisting: forwardRef(() => RtExpansionPanelComponent)
+			}],
+			template: "<ng-container rtBlock=\"rt-expansion-panel\">\n    <!-- Строка заголовка: кнопка-переключатель, а при действиях — они и шеврон после неё. Действия\n         вне кнопки: кнопка внутри кнопки недопустима, и нажатие по действию не раскрывает панель. -->\n    <div rtElem=\"head\">\n        <button\n            type=\"button\"\n            rtElem=\"header\"\n            qa-dataid=\"expansion-panel-header\"\n            [id]=\"headerDomId()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"bodyRendered() ? bodyId : null\"\n            [attr.aria-label]=\"ariaLabel()\"\n            (click)=\"toggle()\">\n            <ng-content />\n\n            @if (!hideToggle() && !actions()) {\n                <!-- Шеврон — в обёртке: ширину столбца держит она, значок свою ширину ставит сам. -->\n                <span rtElem=\"chevron\" aria-hidden=\"true\" [rtMod]=\"{ open: expanded() }\"><rt-icon size=\"sm\" name=\"chevron-down\" /></span>\n            }\n        </button>\n\n        @if (actions()) {\n            <div rtElem=\"actions\" qa-dataid=\"expansion-panel-actions\">\n                <ng-content select=\"[rtExpansionPanelActions]\" />\n            </div>\n\n            @if (!hideToggle()) {\n                <!-- Шеврон вне кнопки нажимается мышью; с клавиатуры панель раскрывает сама кнопка. -->\n                <span\n                    rtElem=\"chevron\"\n                    qa-dataid=\"expansion-panel-chevron\"\n                    aria-hidden=\"true\"\n                    [rtMod]=\"{ open: expanded(), outside: true }\"\n                    (click)=\"toggle()\">\n                    <rt-icon size=\"sm\" name=\"chevron-down\" />\n                </span>\n            }\n        }\n    </div>\n\n    @if (bodyRendered()) {\n        <!-- Сворачивание доигрывает движение: класс ухода сводит высоту к нулю, и тело уходит после. -->\n        <div\n            rtElem=\"body\"\n            role=\"region\"\n            qa-dataid=\"expansion-panel-body\"\n            animate.leave=\"rt-expansion-panel__body--leaving\"\n            [rtMod]=\"{ collapsed: !expanded() }\"\n            [attr.inert]=\"expanded() ? null : ''\"\n            [id]=\"bodyId\"\n            [attr.aria-labelledby]=\"headerDomId()\">\n            <ng-content select=\"[rtExpansionPanelBody]\" />\n\n            @if (lazyContent(); as content) {\n                <ng-container [ngTemplateOutlet]=\"content.templateRef\" />\n            }\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-expansion-panel{--rt-expansion-panel-radius: var(--rt-radius-md);--rt-expansion-panel-shadow: var(--rt-shadow-sm);--rt-expansion-panel-duration: var(--rt-duration-base);--rt-expansion-panel-bg: var(--rt-color-bg-surface);--rt-expansion-panel-header-min-height: var(--rt-control-height-lg);--rt-expansion-panel-header-padding-block: var(--rt-space-sm);--rt-expansion-panel-header-padding-start: var(--rt-space-lg);--rt-expansion-panel-header-padding-end: var(--rt-space-md);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-radius: var(--rt-radius-md);--rt-expansion-panel-header-bg: transparent;--rt-expansion-panel-header-hover-bg: var(--rt-color-bg-hover);--rt-expansion-panel-header-color: var(--rt-color-text-primary);--rt-expansion-panel-header-font-size: var(--rt-text-md);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-medium);--rt-expansion-panel-chevron-size: var(--rt-control-height-sm);--rt-expansion-panel-chevron-color: var(--rt-color-text-muted);--rt-expansion-panel-body-padding-inline: var(--rt-space-lg);--rt-expansion-panel-body-padding-end: var(--rt-space-md);--rt-expansion-panel-actions-gap: var(--rt-space-xs);--rt-expansion-panel-box-sizing: border-box;display:block;width:100%;box-sizing:var(--rt-expansion-panel-box-sizing);border-radius:var(--rt-expansion-panel-radius);background:var(--rt-expansion-panel-bg);box-shadow:var(--rt-expansion-panel-shadow);color:var(--rt-color-text-primary)}.rt-expansion-panel--plain{--rt-expansion-panel-radius: var(--rt-radius-none);--rt-expansion-panel-shadow: var(--rt-shadow-none);--rt-expansion-panel-bg: transparent;--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-start: var(--rt-space-0);--rt-expansion-panel-header-padding-end: var(--rt-space-0);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-font-weight: var(--rt-font-weight-regular);--rt-expansion-panel-body-padding-inline: var(--rt-space-0);--rt-expansion-panel-body-padding-end: var(--rt-space-0)}.rt-expansion-panel__head{display:flex;align-items:center;border-radius:var(--rt-expansion-panel-header-radius);transition:background-color var(--rt-expansion-panel-duration) ease}.rt-expansion-panel--with-actions .rt-expansion-panel__head{background:var(--rt-expansion-panel-header-bg);gap:var(--rt-expansion-panel-header-gap);padding-inline-end:var(--rt-expansion-panel-header-padding-end)}.rt-expansion-panel--with-actions .rt-expansion-panel__head:hover{background:var(--rt-expansion-panel-header-hover-bg)}.rt-expansion-panel--with-actions .rt-expansion-panel__header{min-width:0;flex:1 1 auto;padding-inline-end:var(--rt-space-0)}.rt-expansion-panel--with-actions .rt-expansion-panel__header:hover:not(:disabled){background:transparent}.rt-expansion-panel__actions{display:inline-flex;flex-shrink:0;align-items:center;gap:var(--rt-expansion-panel-actions-gap)}.rt-expansion-panel__header{display:flex;width:100%;min-height:var(--rt-expansion-panel-header-min-height);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-expansion-panel-header-radius);background:var(--rt-expansion-panel-header-bg);color:var(--rt-expansion-panel-header-color);cursor:pointer;font:inherit;font-size:var(--rt-expansion-panel-header-font-size);font-weight:var(--rt-expansion-panel-header-font-weight);gap:var(--rt-expansion-panel-header-gap);padding-block:var(--rt-expansion-panel-header-padding-block);padding-inline:var(--rt-expansion-panel-header-padding-start) var(--rt-expansion-panel-header-padding-end);text-align:start;transition:background-color var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__header:hover:not(:disabled){background:var(--rt-expansion-panel-header-hover-bg)}.rt-expansion-panel__header:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-expansion-panel__header:disabled{color:var(--rt-color-text-disabled);cursor:default}.rt-expansion-panel__chevron{display:inline-flex;flex-shrink:0;justify-content:center;color:var(--rt-expansion-panel-chevron-color);inline-size:var(--rt-expansion-panel-chevron-size);margin-inline-start:auto;transition:transform var(--rt-expansion-panel-duration) ease}.rt-expansion-panel__chevron--open{transform:rotate(180deg)}.rt-expansion-panel__chevron--outside{cursor:pointer;margin-inline-start:0}.rt-expansion-panel__body{overflow:hidden;height:auto;box-sizing:var(--rt-expansion-panel-body-box-sizing, inherit);font-size:var(--rt-expansion-panel-body-font-size);interpolate-size:allow-keywords;line-height:var(--rt-expansion-panel-body-line-height);padding-block-end:var(--rt-expansion-panel-body-padding-end);padding-inline:var(--rt-expansion-panel-body-padding-inline);transition:height var(--rt-expansion-panel-duration) ease,padding-block-end var(--rt-expansion-panel-duration) ease}@starting-style{.rt-expansion-panel__body{height:0;padding-block-end:0}}.rt-expansion-panel__body--leaving{height:0;padding-block-end:0}.rt-expansion-panel__body--collapsed{height:0;padding-block-end:0;transition:height var(--rt-expansion-panel-duration) ease,padding-block-end var(--rt-expansion-panel-duration) ease,visibility 0s linear var(--rt-expansion-panel-duration);visibility:hidden}@media(prefers-reduced-motion:reduce){.rt-expansion-panel__body{transition:none}}.rt-expansion-panel--disabled .rt-expansion-panel__chevron{color:var(--rt-color-text-disabled)}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
-		lazyContent: [{
-			type: i0.ContentChild,
-			args: [i0.forwardRef(() => RtExpansionPanelContentDirective), { isSignal: true }]
+		lazyContents: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RtExpansionPanelContentDirective), {
+				descendants: true,
+				isSignal: true
+			}]
+		}],
+		allActions: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RtExpansionPanelActionsDirective), {
+				descendants: true,
+				isSignal: true
+			}]
 		}],
 		expanded: [{
 			type: i0.Input,
@@ -279,9 +459,17 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "ariaLabel",
 				required: false
 			}]
+		}],
+		preserveContent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "preserveContent",
+				required: false
+			}]
 		}]
 	}
 });
-export { RtExpansionPanelComponent, RtExpansionPanelContentDirective };
+export { RT_EXPANSION_PANEL_GROUP, RT_EXPANSION_PANEL_OWNER, RtExpansionPanelActionsDirective, RtExpansionPanelComponent, RtExpansionPanelContentDirective, RtExpansionPanelGroupDirective };
 
 //# sourceMappingURL=rt-tools-ui-kit-v2-expansion-panel.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-expansion-panel.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel-content.directive.ts","../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel.component.ts","../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel.component.html"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Тело `rt-expansion-panel`, собираемое лениво: ставится на `<ng-template>` внутри панели, и его\n * содержимое создаётся при раскрытии и уходит после сворачивания. Сворачивание при этом доигрывает\n * движение до конца: тело уходит вместе со своим содержимым, а не пустым.\n */\n@Directive({\n    selector: 'ng-template[rtExpansionPanelContent]',\n})\nexport class RtExpansionPanelContentDirective {\n    public readonly templateRef: TemplateRef<unknown> = inject<TemplateRef<unknown>>(TemplateRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    model,\n    ModelSignal,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtExpansionPanelContentDirective } from './rt-expansion-panel-content.directive';\nimport { IRtExpansionPanel } from './rt-expansion-panel.model';\n\nconst BEM_BLOCK: string = 'rt-expansion-panel';\n\nlet expansionPanelIdSeed: number = 0;\n\nfunction nextExpansionPanelId(): number {\n    expansionPanelIdSeed += 1;\n    return expansionPanelIdSeed;\n}\n\n/**\n * Раскрывающаяся панель: заголовок-кнопка во всю ширину с шевроном у правого края и тело под ним.\n * Нажатие на заголовок раскрывает и сворачивает тело, раскрытие и сворачивание идут с движением.\n * Заменяет во втором ките панель раскрытия Material первого кита.\n *\n * Заголовок — содержимое панели без отметки. Тело — узел с `rtExpansionPanelBody`, созданный сразу,\n * или `<ng-template rtExpansionPanelContent>`, созданный при раскрытии.\n *\n * Состояние раскрытия — `expanded`, двусторонняя привязка: панель пишет в него сама, а владелец\n * может держать его в своём сигнале и менять извне.\n */\n@Component({\n    selector: 'rt-expansion-panel',\n    templateUrl: './rt-expansion-panel.component.html',\n    styleUrl: './rt-expansion-panel.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        NgTemplateOutlet,\n\n        // directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n\n        // components\n        RtIconComponent,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-expansion-panel--plain]': 'appearance() === \"plain\"',\n        '[class.rt-expansion-panel--expanded]': 'expanded()',\n        '[class.rt-expansion-panel--disabled]': 'disabled()',\n    },\n})\nexport class RtExpansionPanelComponent {\n    /** Основа id: две панели на одной странице не ссылаются на чужое тело. */\n    readonly #idBase: string = `rt-expansion-panel-${nextExpansionPanelId()}`;\n\n    /** Ленивое тело: шаблон создаётся при раскрытии. */\n    protected readonly lazyContent: Signal<RtExpansionPanelContentDirective | undefined> = contentChild(RtExpansionPanelContentDirective);\n    protected readonly bodyId: string = `${this.#idBase}-body`;\n    protected readonly headerDomId: Signal<string> = computed((): string => this.headerId() ?? `${this.#idBase}-header`);\n\n    /** Тело раскрыто. Двусторонняя привязка: нажатие на заголовок пишет сюда. */\n    public readonly expanded: ModelSignal<boolean> = model<boolean>(false);\n\n    /** Заголовок не нажимается, тело остаётся как было. */\n    public readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n\n    /** Шеврона нет: раскрытие читается по содержимому или его нечего раскрывать. */\n    public readonly hideToggle: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n\n    public readonly appearance: InputSignal<IRtExpansionPanel.Appearance> = input<IRtExpansionPanel.Appearance>('card');\n\n    /** Id кнопки заголовка. Нужен владельцу, который ищет заголовок по своему номеру; иначе — свой. */\n    public readonly headerId: InputSignal<string | null> = input<string | null>(null);\n\n    /** Имя кнопки заголовка для вспомогательных средств, когда видимой подписи мало. */\n    public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n    /** Нажатие на заголовок: раскрывает свёрнутую панель и сворачивает раскрытую. */\n    public toggle(): void {\n        if (!this.disabled()) {\n            this.expanded.set(!this.expanded());\n        }\n    }\n}\n","<ng-container rtBlock=\"rt-expansion-panel\">\n    <button\n        type=\"button\"\n        rtElem=\"header\"\n        qa-dataid=\"expansion-panel-header\"\n        [id]=\"headerDomId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"expanded() ? bodyId : null\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (click)=\"toggle()\">\n        <ng-content />\n\n        @if (!hideToggle()) {\n            <!-- Шеврон — в обёртке: ширину столбца держит она, значок свою ширину ставит сам. -->\n            <span rtElem=\"chevron\" aria-hidden=\"true\" [rtMod]=\"{ open: expanded() }\"><rt-icon size=\"sm\" name=\"chevron-down\" /></span>\n        }\n    </button>\n\n    @if (expanded()) {\n        <!-- Сворачивание доигрывает движение: класс ухода сводит высоту к нулю, и тело уходит после. -->\n        <div\n            rtElem=\"body\"\n            role=\"region\"\n            qa-dataid=\"expansion-panel-body\"\n            animate.leave=\"rt-expansion-panel__body--leaving\"\n            [id]=\"bodyId\"\n            [attr.aria-labelledby]=\"headerDomId()\">\n            <ng-content select=\"[rtExpansionPanelBody]\" />\n\n            @if (lazyContent(); as content) {\n                <ng-container [ngTemplateOutlet]=\"content.templateRef\" />\n            }\n        </div>\n    }\n</ng-container>\n"],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-expansion-panel.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel-group.token.ts","../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel-actions.directive.ts","../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel-content.directive.ts","../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel-group.directive.ts","../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel.component.ts","../../../projects/ui-kit-v2/src/lib/components/expansion-panel/rt-expansion-panel.component.html"],"sourcesContent":["import { InjectionToken, WritableSignal } from '@angular/core';\n\n/**\n * Что панель сообщает группе, в которой стоит. Отдельным токеном, а не классом группы: группа сама\n * знает панели по типу, и прямой импорт в обе стороны замкнул бы файлы в круг.\n */\nexport interface IRtExpansionPanelGroupHost {\n    /** Панель встала в группу. Вложенная в тело другой панели не встаёт: её группа — не эта. */\n    readonly register: (panel: IRtExpansionPanelGroupMember) => void;\n    /** Панель ушла из разметки. */\n    readonly unregister: (panel: IRtExpansionPanelGroupMember) => void;\n    /** Панель раскрылась: группа без `multi` сворачивает остальные. */\n    readonly opened: (panel: IRtExpansionPanelGroupMember) => void;\n}\n\n/** Что группа знает о панели: только её раскрытие. */\nexport interface IRtExpansionPanelGroupMember {\n    readonly expanded: WritableSignal<boolean>;\n}\n\n/**\n * Ближайшая панель над узлом. Директивы тела и действий запоминают её, и панель берёт из своего\n * содержимого только свои: шаблон в обёртке владельца находится, а шаблон вложенной панели — нет.\n */\nexport const RT_EXPANSION_PANEL_OWNER: InjectionToken<object> = new InjectionToken<object>('RT_EXPANSION_PANEL_OWNER');\n\nexport const RT_EXPANSION_PANEL_GROUP: InjectionToken<IRtExpansionPanelGroupHost> = new InjectionToken<IRtExpansionPanelGroupHost>(\n    'RT_EXPANSION_PANEL_GROUP'\n);\n","import { Directive, inject } from '@angular/core';\n\nimport { RT_EXPANSION_PANEL_OWNER } from './rt-expansion-panel-group.token';\n\n/**\n * Действия в заголовке `rt-expansion-panel`: кнопки, флажки, меню. Встают в строку заголовка между\n * подписью и шевроном, но вне кнопки-переключателя — кнопка внутри кнопки недопустима, и нажатие\n * по действию не раскрывает панель.\n */\n@Directive({\n    selector: '[rtExpansionPanelActions]',\n})\nexport class RtExpansionPanelActionsDirective {\n    /** Панель, которой принадлежат действия: ближайшая над узлом. */\n    public readonly owner: object | null = inject(RT_EXPANSION_PANEL_OWNER, { optional: true });\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\nimport { RT_EXPANSION_PANEL_OWNER } from './rt-expansion-panel-group.token';\n\n/**\n * Тело `rt-expansion-panel`, собираемое лениво: ставится на `<ng-template>` внутри панели, и его\n * содержимое создаётся при раскрытии и уходит после сворачивания. Сворачивание при этом доигрывает\n * движение до конца: тело уходит вместе со своим содержимым, а не пустым.\n */\n@Directive({\n    selector: 'ng-template[rtExpansionPanelContent]',\n})\nexport class RtExpansionPanelContentDirective {\n    public readonly templateRef: TemplateRef<unknown> = inject<TemplateRef<unknown>>(TemplateRef);\n    /** Панель, которой принадлежит тело: ближайшая над шаблоном, сколько бы обёрток ни стояло между. */\n    public readonly owner: object | null = inject(RT_EXPANSION_PANEL_OWNER, { optional: true });\n}\n","import { booleanAttribute, Directive, forwardRef, input, InputSignalWithTransform } from '@angular/core';\n\nimport { IRtExpansionPanelGroupHost, IRtExpansionPanelGroupMember, RT_EXPANSION_PANEL_GROUP } from './rt-expansion-panel-group.token';\n\n/**\n * Группа раскрывающихся панелей, положенных разметкой: раскрытие одной сворачивает остальные, как\n * аккордеон Material. С `multi` панели раскрываются независимо, и группа только собирает их.\n *\n * Ставится на любой узел-обёртку, а не рисует свою: раскладку панелей — промежутки, рамки между\n * ними — задаёт владелец. `rt-accordion` остаётся списком пунктов из входа и группой не служит.\n */\n@Directive({\n    selector: '[rtExpansionPanelGroup]',\n    providers: [\n        {\n            provide: RT_EXPANSION_PANEL_GROUP,\n            useExisting: forwardRef((): typeof RtExpansionPanelGroupDirective => RtExpansionPanelGroupDirective),\n        },\n    ],\n})\nexport class RtExpansionPanelGroupDirective implements IRtExpansionPanelGroupHost {\n    /**\n     * Панели группы, и вложенные в обёртки владельца тоже. Их список ведут сами панели, а не запрос\n     * по содержимому: запрос взял бы и панель из тела соседки, и раскрытие такой панели свернуло бы\n     * её же родителя.\n     */\n    readonly #panels: Set<IRtExpansionPanelGroupMember> = new Set<IRtExpansionPanelGroupMember>();\n\n    /** Панели раскрываются независимо: группа никого не сворачивает. */\n    public readonly multi: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n\n    public register(panel: IRtExpansionPanelGroupMember): void {\n        this.#panels.add(panel);\n    }\n\n    public unregister(panel: IRtExpansionPanelGroupMember): void {\n        this.#panels.delete(panel);\n    }\n\n    public opened(panel: IRtExpansionPanelGroupMember): void {\n        if (this.multi()) {\n            return;\n        }\n\n        for (const other of this.#panels) {\n            if (other !== panel && other.expanded()) {\n                other.expanded.set(false);\n            }\n        }\n    }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChildren,\n    DestroyRef,\n    effect,\n    forwardRef,\n    inject,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    model,\n    ModelSignal,\n    Signal,\n    signal,\n    untracked,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtExpansionPanelActionsDirective } from './rt-expansion-panel-actions.directive';\nimport { RtExpansionPanelContentDirective } from './rt-expansion-panel-content.directive';\nimport { IRtExpansionPanelGroupHost, RT_EXPANSION_PANEL_GROUP, RT_EXPANSION_PANEL_OWNER } from './rt-expansion-panel-group.token';\nimport { IRtExpansionPanel } from './rt-expansion-panel.model';\n\nconst BEM_BLOCK: string = 'rt-expansion-panel';\n\nlet expansionPanelIdSeed: number = 0;\n\nfunction nextExpansionPanelId(): number {\n    expansionPanelIdSeed += 1;\n    return expansionPanelIdSeed;\n}\n\n/**\n * Раскрывающаяся панель: заголовок-кнопка во всю ширину с шевроном у правого края и тело под ним.\n * Нажатие на заголовок раскрывает и сворачивает тело, раскрытие и сворачивание идут с движением.\n * Заменяет во втором ките панель раскрытия Material первого кита.\n *\n * Заголовок — содержимое панели без отметки. Тело — узел с `rtExpansionPanelBody`, созданный сразу,\n * или `<ng-template rtExpansionPanelContent>`, созданный при раскрытии.\n *\n * Состояние раскрытия — `expanded`, двусторонняя привязка: панель пишет в него сама, а владелец\n * может держать его в своём сигнале и менять извне.\n *\n * Действия заголовка — узел с `rtExpansionPanelActions`: он стоит в строке заголовка вне кнопки, и\n * нажатие по нему панель не раскрывает. В группе `rtExpansionPanelGroup` раскрытие панели\n * сворачивает соседей.\n */\n@Component({\n    selector: 'rt-expansion-panel',\n    templateUrl: './rt-expansion-panel.component.html',\n    styleUrl: './rt-expansion-panel.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        NgTemplateOutlet,\n\n        // directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n\n        // components\n        RtIconComponent,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-expansion-panel--plain]': 'appearance() === \"plain\"',\n        '[class.rt-expansion-panel--expanded]': 'expanded()',\n        '[class.rt-expansion-panel--disabled]': 'disabled()',\n        '[class.rt-expansion-panel--with-actions]': '!!actions()',\n    },\n    // Тело панели закрыто от группы над ней: вложенная панель раскрывается независимо, как в Material.\n    providers: [\n        { provide: RT_EXPANSION_PANEL_GROUP, useValue: null },\n        { provide: RT_EXPANSION_PANEL_OWNER, useExisting: forwardRef((): typeof RtExpansionPanelComponent => RtExpansionPanelComponent) },\n    ],\n})\nexport class RtExpansionPanelComponent {\n    /** Основа id: две панели на одной странице не ссылаются на чужое тело. */\n    readonly #idBase: string = `rt-expansion-panel-${nextExpansionPanelId()}`;\n    /** Группа над панелью. Сама панель закрывает её от своего тела: вложенная панель в группу не встаёт. */\n    readonly #group: IRtExpansionPanelGroupHost | null = inject(RT_EXPANSION_PANEL_GROUP, { optional: true, skipSelf: true });\n    /** Панель хоть раз раскрывалась: сохраняемое тело создаётся при первом раскрытии, не раньше. */\n    readonly #everExpanded: WritableSignal<boolean> = signal<boolean>(false);\n\n    /** Ленивые тела в содержимом на любой глубине, свои и вложенных панелей. */\n    protected readonly lazyContents: Signal<readonly RtExpansionPanelContentDirective[]> = contentChildren(\n        RtExpansionPanelContentDirective,\n        {\n            descendants: true,\n        }\n    );\n    /** Действия в содержимом на любой глубине, свои и вложенных панелей. */\n    protected readonly allActions: Signal<readonly RtExpansionPanelActionsDirective[]> = contentChildren(RtExpansionPanelActionsDirective, {\n        descendants: true,\n    });\n\n    /** Ленивое тело: шаблон создаётся при раскрытии. Своё и в обёртке владельца тоже; тело вложенной панели — её. */\n    protected readonly lazyContent: Signal<RtExpansionPanelContentDirective | undefined> = computed(\n        (): RtExpansionPanelContentDirective | undefined =>\n            this.lazyContents().find((content: RtExpansionPanelContentDirective): boolean => content.owner === this)\n    );\n    protected readonly bodyId: string = `${this.#idBase}-body`;\n    /**\n     * Действия заголовка: есть они — шеврон выходит из кнопки и встаёт после них. Только свои: действия\n     * панели, вложенной в тело, принадлежат ей.\n     */\n    protected readonly actions: Signal<RtExpansionPanelActionsDirective | undefined> = computed(\n        (): RtExpansionPanelActionsDirective | undefined =>\n            this.allActions().find((action: RtExpansionPanelActionsDirective): boolean => action.owner === this)\n    );\n    /** Тело есть в разметке: раскрыто, или сохраняется свёрнутым после первого раскрытия. */\n    protected readonly bodyRendered: Signal<boolean> = computed(\n        (): boolean => this.expanded() || (this.preserveContent() && this.#everExpanded())\n    );\n    protected readonly headerDomId: Signal<string> = computed((): string => this.headerId() ?? `${this.#idBase}-header`);\n\n    /** Тело раскрыто. Двусторонняя привязка: нажатие на заголовок пишет сюда. */\n    public readonly expanded: ModelSignal<boolean> = model<boolean>(false);\n\n    /** Заголовок не нажимается, тело остаётся как было. */\n    public readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n\n    /** Шеврона нет: раскрытие читается по содержимому или его нечего раскрывать. */\n    public readonly hideToggle: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n\n    public readonly appearance: InputSignal<IRtExpansionPanel.Appearance> = input<IRtExpansionPanel.Appearance>('card');\n\n    /** Id кнопки заголовка. Нужен владельцу, который ищет заголовок по своему номеру; иначе — свой. */\n    public readonly headerId: InputSignal<string | null> = input<string | null>(null);\n\n    /** Имя кнопки заголовка для вспомогательных средств, когда видимой подписи мало. */\n    public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n    /**\n     * Тело не уходит при сворачивании, а прячется: внутри остаются набранный текст, прокрутка и\n     * выбор. Ленивое тело создаётся при первом раскрытии и дальше живёт вместе с панелью.\n     */\n    public readonly preserveContent: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n\n    constructor() {\n        this.#group?.register(this);\n        inject(DestroyRef).onDestroy((): void => this.#group?.unregister(this));\n\n        effect((): void => {\n            if (this.expanded()) {\n                untracked((): void => {\n                    this.#everExpanded.set(true);\n                    this.#group?.opened(this);\n                });\n            }\n        });\n    }\n\n    /** Нажатие на заголовок: раскрывает свёрнутую панель и сворачивает раскрытую. */\n    public toggle(): void {\n        if (!this.disabled()) {\n            this.expanded.set(!this.expanded());\n        }\n    }\n}\n","<ng-container rtBlock=\"rt-expansion-panel\">\n    <!-- Строка заголовка: кнопка-переключатель, а при действиях — они и шеврон после неё. Действия\n         вне кнопки: кнопка внутри кнопки недопустима, и нажатие по действию не раскрывает панель. -->\n    <div rtElem=\"head\">\n        <button\n            type=\"button\"\n            rtElem=\"header\"\n            qa-dataid=\"expansion-panel-header\"\n            [id]=\"headerDomId()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"bodyRendered() ? bodyId : null\"\n            [attr.aria-label]=\"ariaLabel()\"\n            (click)=\"toggle()\">\n            <ng-content />\n\n            @if (!hideToggle() && !actions()) {\n                <!-- Шеврон — в обёртке: ширину столбца держит она, значок свою ширину ставит сам. -->\n                <span rtElem=\"chevron\" aria-hidden=\"true\" [rtMod]=\"{ open: expanded() }\"><rt-icon size=\"sm\" name=\"chevron-down\" /></span>\n            }\n        </button>\n\n        @if (actions()) {\n            <div rtElem=\"actions\" qa-dataid=\"expansion-panel-actions\">\n                <ng-content select=\"[rtExpansionPanelActions]\" />\n            </div>\n\n            @if (!hideToggle()) {\n                <!-- Шеврон вне кнопки нажимается мышью; с клавиатуры панель раскрывает сама кнопка. -->\n                <span\n                    rtElem=\"chevron\"\n                    qa-dataid=\"expansion-panel-chevron\"\n                    aria-hidden=\"true\"\n                    [rtMod]=\"{ open: expanded(), outside: true }\"\n                    (click)=\"toggle()\">\n                    <rt-icon size=\"sm\" name=\"chevron-down\" />\n                </span>\n            }\n        }\n    </div>\n\n    @if (bodyRendered()) {\n        <!-- Сворачивание доигрывает движение: класс ухода сводит высоту к нулю, и тело уходит после. -->\n        <div\n            rtElem=\"body\"\n            role=\"region\"\n            qa-dataid=\"expansion-panel-body\"\n            animate.leave=\"rt-expansion-panel__body--leaving\"\n            [rtMod]=\"{ collapsed: !expanded() }\"\n            [attr.inert]=\"expanded() ? null : ''\"\n            [id]=\"bodyId\"\n            [attr.aria-labelledby]=\"headerDomId()\">\n            <ng-content select=\"[rtExpansionPanelBody]\" />\n\n            @if (lazyContent(); as content) {\n                <ng-container [ngTemplateOutlet]=\"content.templateRef\" />\n            }\n        </div>\n    }\n</ng-container>\n"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, booleanAttribute, computed, contentChild, effect, inject, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, booleanAttribute, computed, contentChild, effect, inject, input, viewChild } from "@angular/core";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { RT_KIT_LABELS, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
-import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
+import { RtFormControlBase, rtNotchWidth } from "@rt-tools/ui-kit-v2/form-control";
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
 import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
 import { RtSkeletonWrapperComponent } from "@rt-tools/ui-kit-v2/skeleton-wrapper";
@@ -63,9 +63,14 @@ var RtFieldComponent = class RtFieldComponent {
 		this.projectedControl = contentChild(RtFormControlBase, ...ngDevMode ? [{ debugName: "projectedControl" }] : /* istanbul ignore next */ []);
 		this.projectedHint = contentChild(RtFieldHintDirective, ...ngDevMode ? [{ debugName: "projectedHint" }] : /* istanbul ignore next */ []);
 		this.#autoId = nextAutoId();
+		this.labelRow = viewChild("labelRow", ...ngDevMode ? [{ debugName: "labelRow" }] : /* istanbul ignore next */ []);
+		this.notchWidth = rtNotchWidth(this.labelRow);
 		this.controlId = computed(() => this.projectedControl()?.effectiveControlId() ?? this.#autoId, ...ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []);
 		this.isRequired = computed(() => this.projectedControl()?.required() ?? false, ...ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []);
 		this.showError = computed(() => !!this.projectedControl()?.invalid(), ...ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []);
+		this.filled = computed(() => (this.projectedControl()?.displayText() ?? "") !== "", ...ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []);
+		this.isStatic = computed(() => this.readonly() || this.loading() || !!this.projectedControl()?.isReadonly(), ...ngDevMode ? [{ debugName: "isStatic" }] : /* istanbul ignore next */ []);
+		this.labelInside = computed(() => !this.isStatic() && !!this.projectedControl()?.fieldLabelInside, ...ngDevMode ? [{ debugName: "labelInside" }] : /* istanbul ignore next */ []);
 		this.#failedValidator = computed(() => {
 			const errs = this.projectedControl()?.errors() ?? null;
 			return errs ? Object.keys(errs)[0] ?? "" : "";
@@ -196,7 +201,16 @@ var RtFieldComponent = class RtFieldComponent {
 					transformFunction: null
 				}
 			},
-			host: { classAttribute: "rt-field" },
+			host: {
+				properties: {
+					"class.rt-field--filled": "filled()",
+					"class.rt-field--invalid": "showError()",
+					"class.rt-field--static": "isStatic()",
+					"class.rt-field--label-inside": "labelInside()",
+					"style.--rt-field-notch-width": "notchWidth() + 'px'"
+				},
+				classAttribute: "rt-field"
+			},
 			queries: [{
 				propertyName: "projectedControl",
 				first: true,
@@ -210,9 +224,16 @@ var RtFieldComponent = class RtFieldComponent {
 				descendants: true,
 				isSignal: true
 			}],
+			viewQueries: [{
+				propertyName: "labelRow",
+				first: true,
+				predicate: ["labelRow"],
+				descendants: true,
+				isSignal: true
+			}],
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span rtElem=\"label-row\">\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                {{ label() }}\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- С резервом hint остаётся в потоке даже под ошибкой (скрытый), а сама\n         ошибка кладётся в ту же ячейку грида: высота зоны равна большему из\n         двух сообщений и не меняется при их подмене. Без резерва — как было,\n         одно сообщение за раз, чтобы плотные формы не набирали лишний воздух. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight)}.rt-field__required{color:var(--rt-field-required-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:1lh}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n"],
+			template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span #labelRow rtElem=\"label-row\">\n            <!-- Текст подписи — свой узел: пробел между ним и звёздочкой сборка выбрасывает, и зазор до\n                 звёздочки задаёт свойство, а не пробел в разметке. -->\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                <span>{{ label() }}</span>\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- С резервом hint остаётся в потоке даже под ошибкой (скрытый), а сама\n         ошибка кладётся в ту же ячейку грида: высота зоны равна большему из\n         двух сообщений и не меняется при их подмене. Без резерва — как было,\n         одно сообщение за раз, чтобы плотные формы не набирали лишний воздух. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{--rt-field-floating-start: calc(var(--rt-input-padding-x) + var(--rt-input-border-width));--rt-field-floating-rest-start: var(--rt-field-floating-start);--rt-field-floating-duration: var(--rt-duration-fast);--rt-field-raised-start: max( var(--rt-field-floating-start), calc(min(var(--rt-input-radius), var(--rt-input-height) / 2) + var(--rt-space-2)) );--rt-field-notch-start: calc(var(--rt-field-raised-start) - var(--rt-space-1));--rt-field-notch-depth: calc(2 * var(--rt-input-border-width));--rt-field-notch-width: 0px;--rt-field-fill-height: var(--rt-input-height-md);--rt-field-floating-z: var(--rt-z-sticky);display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight);letter-spacing:var(--rt-field-label-letter-spacing, inherit)}.rt-field__required{margin-left:var(--rt-field-required-gap);color:var(--rt-field-required-color)}.rt-field--invalid .rt-field__required{color:var(--rt-field-error-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid;box-sizing:border-box}.rt-field__messages:is(.rt-preset-material *,[data-preset=material] *){line-height:var(--rt-field-messages-line-height)}.rt-field__messages--reserved,.rt-field__messages:has(>*){padding-top:var(--rt-field-messages-padding-top)}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:calc(1lh + var(--rt-field-messages-padding-top))}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n", "@charset \"UTF-8\";@layer rt-kit.components{.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]){--rt-field-floating-start: var(--rt-input-padding-x);position:relative;isolation:isolate}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--with-icon-left){--rt-field-floating-rest-start: calc(var(--rt-field-floating-start) + var(--rt-input-icon-size) + var(--rt-input-gap))}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--with-icon-left>.rt-input__icon-left){--rt-field-floating-rest-start: calc(var(--rt-space-2) + var(--rt-space-1) + var(--rt-input-icon-size) + var(--rt-space-1))}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__messages{margin-top:calc(-1 * var(--rt-field-gap));padding-inline:var(--rt-input-padding-x)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--size--sm,.rt-select--size--sm,.rt-input-number--size--sm){--rt-input-height: var(--rt-input-height-sm)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--size--lg,.rt-select--size--lg,.rt-input-number--size--lg){--rt-input-height: var(--rt-input-height-lg)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__label-row{position:absolute;z-index:var(--rt-field-floating-z);top:calc(var(--rt-input-height) / 2);left:var(--rt-field-floating-rest-start);max-width:calc(100% - 2 * var(--rt-field-floating-start));pointer-events:none;transform:translateY(-50%);transition:top var(--rt-field-floating-duration) ease,left var(--rt-field-floating-duration) ease}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__label{overflow:hidden;color:var(--rt-input-color-text-placeholder);font-size:var(--rt-input-font-size);font-weight:inherit;text-overflow:ellipsis;transition:font-size var(--rt-field-floating-duration) ease,color var(--rt-field-floating-duration) ease;white-space:nowrap}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__help{pointer-events:auto}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row):not(.rt-field--filled,:focus-within) ::placeholder,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row):not(.rt-field--filled,:focus-within) .rt-select__label--placeholder{color:transparent}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled .rt-field__label-row,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within .rt-field__label-row{top:0;left:var(--rt-field-raised-start);max-width:calc(100% - var(--rt-field-raised-start) - var(--rt-field-floating-start));padding:0 var(--rt-space-1);margin-left:calc(-1 * var(--rt-space-1));line-height:1}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled:not(:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill)) .rt-field__control,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within:not(:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill)) .rt-field__control{clip-path:polygon(0 0,var(--rt-field-notch-start) 0,var(--rt-field-notch-start) var(--rt-field-notch-depth),calc(var(--rt-field-notch-start) + var(--rt-field-notch-width)) var(--rt-field-notch-depth),calc(var(--rt-field-notch-start) + var(--rt-field-notch-width)) 0,100% 0,100% 100%,0 100%)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill){--rt-input-height: var(--rt-field-fill-height)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill) .rt-field__label{line-height:var(--rt-leading-tight)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row) :is(.rt-input--appearance--fill .rt-input__field,.rt-input--appearance--pill .rt-input__field,.rt-select--appearance--fill .rt-select__label,.rt-input-number--appearance--fill .rt-input-number__field,.rt-input-number--appearance--pill .rt-input-number__field){align-self:stretch;padding-top:calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-fill-edge));padding-bottom:calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-border-width));line-height:var(--rt-leading-normal)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row) :is(.rt-input--appearance--pill .rt-input__field,.rt-input-number--appearance--pill .rt-input-number__field){padding-top:calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-border-width))}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill) .rt-field__label-row,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill) .rt-field__label-row{top:calc(var(--rt-input-height) / 2 - var(--rt-space-5));left:var(--rt-field-floating-rest-start);padding:0;margin-left:0;transform:none}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled .rt-field__label,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within .rt-field__label{font-size:var(--rt-text-xs)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within .rt-field__label{color:var(--rt-input-color-border-focus)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--invalid .rt-field__label{color:var(--rt-input-color-border-error)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--disabled,.rt-select--disabled,.rt-input-number--disabled,.rt-textarea--disabled) .rt-field__label{color:var(--rt-input-color-placeholder-disabled)}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -305,9 +326,16 @@ i0.ɵɵngDeclareClassMetadata({
 				ElemDirective,
 				ModDirective
 			],
-			host: { class: BEM_BLOCK },
-			template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span rtElem=\"label-row\">\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                {{ label() }}\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- С резервом hint остаётся в потоке даже под ошибкой (скрытый), а сама\n         ошибка кладётся в ту же ячейку грида: высота зоны равна большему из\n         двух сообщений и не меняется при их подмене. Без резерва — как было,\n         одно сообщение за раз, чтобы плотные формы не набирали лишний воздух. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight)}.rt-field__required{color:var(--rt-field-required-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:1lh}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n"]
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-field--filled]": "filled()",
+				"[class.rt-field--invalid]": "showError()",
+				"[class.rt-field--static]": "isStatic()",
+				"[class.rt-field--label-inside]": "labelInside()",
+				"[style.--rt-field-notch-width]": "notchWidth() + 'px'"
+			},
+			template: "<ng-container rtBlock=\"rt-field\">\n    @if (label()) {\n        <span #labelRow rtElem=\"label-row\">\n            <!-- Текст подписи — свой узел: пробел между ним и звёздочкой сборка выбрасывает, и зазор до\n                 звёздочки задаёт свойство, а не пробел в разметке. -->\n            <label rtElem=\"label\" qa-dataid=\"field-label\" [attr.for]=\"controlId()\">\n                <span>{{ label() }}</span>\n                @if (isRequired() && !hideRequiredMark()) {\n                    <span rtElem=\"required\" qa-dataid=\"field-required\" aria-hidden=\"true\">*</span>\n                }\n            </label>\n            @if (help()) {\n                <button\n                    rtElem=\"help\"\n                    qa-dataid=\"field-help\"\n                    type=\"button\"\n                    rtPopoverTrigger=\"hover\"\n                    [attr.aria-label]=\"t().uiHint\"\n                    [rtPopover]=\"helpTpl\">\n                    <rt-icon name=\"ico-help\" size=\"sm\" color=\"muted\" />\n                </button>\n                <ng-template #helpTpl>\n                    <span rtElem=\"help-popover\" qa-dataid=\"field-help-popover\">{{ help() }}</span>\n                </ng-template>\n            }\n        </span>\n    }\n\n    <rt-skeleton-wrapper rtElem=\"control\" height=\"var(--rt-input-height)\" [isLoading]=\"loading()\">\n        <ng-content />\n    </rt-skeleton-wrapper>\n\n    <!-- С резервом hint остаётся в потоке даже под ошибкой (скрытый), а сама\n         ошибка кладётся в ту же ячейку грида: высота зоны равна большему из\n         двух сообщений и не меняется при их подмене. Без резерва — как было,\n         одно сообщение за раз, чтобы плотные формы не набирали лишний воздух. -->\n    <span rtElem=\"messages\" [rtMod]=\"{ reserved: reserveHintSpace() }\">\n        @if (projectedHint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                <ng-content select=\"[rtFieldHint]\" />\n            </small>\n        } @else if (hint() && (reserveHintSpace() || !showError())) {\n            <small rtElem=\"hint\" qa-dataid=\"field-hint\" [rtMod]=\"{ hidden: showError() }\" [attr.aria-hidden]=\"showError() ? 'true' : null\">\n                {{ hint() }}\n            </small>\n        }\n\n        @if (showError()) {\n            <small rtElem=\"error\" qa-dataid=\"field-error\">{{ errorText() }}</small>\n        }\n    </span>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-field{--rt-field-floating-start: calc(var(--rt-input-padding-x) + var(--rt-input-border-width));--rt-field-floating-rest-start: var(--rt-field-floating-start);--rt-field-floating-duration: var(--rt-duration-fast);--rt-field-raised-start: max( var(--rt-field-floating-start), calc(min(var(--rt-input-radius), var(--rt-input-height) / 2) + var(--rt-space-2)) );--rt-field-notch-start: calc(var(--rt-field-raised-start) - var(--rt-space-1));--rt-field-notch-depth: calc(2 * var(--rt-input-border-width));--rt-field-notch-width: 0px;--rt-field-fill-height: var(--rt-input-height-md);--rt-field-floating-z: var(--rt-z-sticky);display:flex;flex-direction:column;gap:var(--rt-field-gap)}.rt-field__label-row{display:inline-flex;align-items:center;gap:var(--rt-field-label-help-gap)}.rt-field__label{color:var(--rt-field-label-color);font-size:var(--rt-field-label-font-size);font-weight:var(--rt-field-label-font-weight);letter-spacing:var(--rt-field-label-letter-spacing, inherit)}.rt-field__required{margin-left:var(--rt-field-required-gap);color:var(--rt-field-required-color)}.rt-field--invalid .rt-field__required{color:var(--rt-field-error-color)}.rt-field__control{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-field__help{display:inline-flex;padding:0;border:none;margin:0;background:none;cursor:help}.rt-field__help-popover{display:block;max-width:240px;font-size:var(--rt-field-hint-font-size)}.rt-field__messages{display:grid;box-sizing:border-box}.rt-field__messages:is(.rt-preset-material *,[data-preset=material] *){line-height:var(--rt-field-messages-line-height)}.rt-field__messages--reserved,.rt-field__messages:has(>*){padding-top:var(--rt-field-messages-padding-top)}.rt-field__messages--reserved{font-size:var(--rt-field-error-font-size);min-block-size:calc(1lh + var(--rt-field-messages-padding-top))}.rt-field__messages--reserved>*{grid-area:1/1}.rt-field__hint{color:var(--rt-field-hint-color);font-size:var(--rt-field-hint-font-size)}.rt-field__hint--hidden{visibility:hidden}.rt-field__error{color:var(--rt-field-error-color);font-size:var(--rt-field-error-font-size)}}\n", "@charset \"UTF-8\";@layer rt-kit.components{.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]){--rt-field-floating-start: var(--rt-input-padding-x);position:relative;isolation:isolate}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--with-icon-left){--rt-field-floating-rest-start: calc(var(--rt-field-floating-start) + var(--rt-input-icon-size) + var(--rt-input-gap))}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--with-icon-left>.rt-input__icon-left){--rt-field-floating-rest-start: calc(var(--rt-space-2) + var(--rt-space-1) + var(--rt-input-icon-size) + var(--rt-space-1))}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__messages{margin-top:calc(-1 * var(--rt-field-gap));padding-inline:var(--rt-input-padding-x)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--size--sm,.rt-select--size--sm,.rt-input-number--size--sm){--rt-input-height: var(--rt-input-height-sm)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--size--lg,.rt-select--size--lg,.rt-input-number--size--lg){--rt-input-height: var(--rt-input-height-lg)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__label-row{position:absolute;z-index:var(--rt-field-floating-z);top:calc(var(--rt-input-height) / 2);left:var(--rt-field-floating-rest-start);max-width:calc(100% - 2 * var(--rt-field-floating-start));pointer-events:none;transform:translateY(-50%);transition:top var(--rt-field-floating-duration) ease,left var(--rt-field-floating-duration) ease}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__label{overflow:hidden;color:var(--rt-input-color-text-placeholder);font-size:var(--rt-input-font-size);font-weight:inherit;text-overflow:ellipsis;transition:font-size var(--rt-field-floating-duration) ease,color var(--rt-field-floating-duration) ease;white-space:nowrap}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-field__help{pointer-events:auto}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row):not(.rt-field--filled,:focus-within) ::placeholder,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row):not(.rt-field--filled,:focus-within) .rt-select__label--placeholder{color:transparent}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled .rt-field__label-row,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within .rt-field__label-row{top:0;left:var(--rt-field-raised-start);max-width:calc(100% - var(--rt-field-raised-start) - var(--rt-field-floating-start));padding:0 var(--rt-space-1);margin-left:calc(-1 * var(--rt-space-1));line-height:1}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled:not(:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill)) .rt-field__control,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within:not(:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill)) .rt-field__control{clip-path:polygon(0 0,var(--rt-field-notch-start) 0,var(--rt-field-notch-start) var(--rt-field-notch-depth),calc(var(--rt-field-notch-start) + var(--rt-field-notch-width)) var(--rt-field-notch-depth),calc(var(--rt-field-notch-start) + var(--rt-field-notch-width)) 0,100% 0,100% 100%,0 100%)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill){--rt-input-height: var(--rt-field-fill-height)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill) .rt-field__label{line-height:var(--rt-leading-tight)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row) :is(.rt-input--appearance--fill .rt-input__field,.rt-input--appearance--pill .rt-input__field,.rt-select--appearance--fill .rt-select__label,.rt-input-number--appearance--fill .rt-input-number__field,.rt-input-number--appearance--pill .rt-input-number__field){align-self:stretch;padding-top:calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-fill-edge));padding-bottom:calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-border-width));line-height:var(--rt-leading-normal)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-field__label-row) :is(.rt-input--appearance--pill .rt-input__field,.rt-input-number--appearance--pill .rt-input-number__field){padding-top:calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-border-width))}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill) .rt-field__label-row,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within:has(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-select--appearance--fill,.rt-input-number--appearance--fill,.rt-input-number--appearance--pill,.rt-textarea--appearance--fill) .rt-field__label-row{top:calc(var(--rt-input-height) / 2 - var(--rt-space-5));left:var(--rt-field-floating-rest-start);padding:0;margin-left:0;transform:none}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--filled .rt-field__label,.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within .rt-field__label{font-size:var(--rt-text-xs)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):focus-within .rt-field__label{color:var(--rt-input-color-border-focus)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-field--invalid .rt-field__label{color:var(--rt-input-color-border-error)}.rt-field--label-inside:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(.rt-input--disabled,.rt-select--disabled,.rt-input-number--disabled,.rt-textarea--disabled) .rt-field__label{color:var(--rt-input-color-placeholder-disabled)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -320,6 +348,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => RtFieldHintDirective), { isSignal: true }]
 		}],
+		labelRow: [{
+			type: i0.ViewChild,
+			args: ["labelRow", { isSignal: true }]
+		}],
 		label: [{
 			type: i0.Input,
 			args: [{