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

package/fesm2022/rt-tools-ui-kit-v2-inline-edit.mjs

@@ -0,0 +1,606 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import { RtInputComponent } from "@rt-tools/ui-kit-v2/input";
+import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+function inlineEditOutcome(value, draft, allowEmpty) {
+	const next = draft.trim();
+	if (next === "" && !allowEmpty) return { kind: "refuse" };
+	return next === value ? { kind: "close" } : {
+		kind: "save",
+		value: next
+	};
+}
+function inlineEditMiddle(text) {
+	const chars = Array.from(text);
+	if (chars.length <= 20) return {
+		head: text,
+		tail: ""
+	};
+	return {
+		head: chars.slice(0, -10).join(""),
+		tail: chars.slice(-10).join("")
+	};
+}
+function inlineEditLeaves(host, target) {
+	return !(target instanceof Node && host.contains(target));
+}
+const BEM_BLOCK = "rt-inline-edit";
+var RtInlineEditComponent = class RtInlineEditComponent {
+	#host;
+	#injector;
+	#t_uiEdit;
+	#focusInside;
+	#wasEditing;
+	#wasSaving;
+	#chipFocused;
+	#chipLeaving;
+	#draft;
+	constructor() {
+		this.#host = inject(ElementRef);
+		this.#injector = inject(Injector);
+		this.#t_uiEdit = rtKitLabel("uiEdit");
+		this.#focusInside = false;
+		this.#wasEditing = false;
+		this.#wasSaving = false;
+		this.#chipFocused = false;
+		this.#chipLeaving = false;
+		this.saveLabel = rtKitLabel("uiSave");
+		this.cancelLabel = rtKitLabel("uiCancel");
+		this.shown = computed(() => this.value() || this.placeholder(), ...ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []);
+		this.isEmpty = computed(() => this.value() === "", ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+		this.startLabel = computed(() => `${this.#t_uiEdit()}: ${this.shown()}`, ...ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []);
+		this.#draft = signal("", ...ngDevMode ? [{ debugName: "#draft" }] : /* istanbul ignore next */ []);
+		this.draftControl = new FormControl("", { nonNullable: true });
+		this.canSave = computed(() => inlineEditOutcome(this.value(), this.#draft(), this.allowEmpty()).kind !== "refuse", ...ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []);
+		this.isChipField = computed(() => this.look() === "chip-field", ...ngDevMode ? [{ debugName: "isChipField" }] : /* istanbul ignore next */ []);
+		this.chipText = computed(() => this.#draft() || this.placeholder(), ...ngDevMode ? [{ debugName: "chipText" }] : /* istanbul ignore next */ []);
+		this.middleParts = computed(() => this.truncate() === "middle" && this.#draft() !== "" ? inlineEditMiddle(this.#draft()) : null, ...ngDevMode ? [{ debugName: "middleParts" }] : /* istanbul ignore next */ []);
+		this.value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.look = input("text", ...ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []);
+		this.truncate = input("end", ...ngDevMode ? [{ debugName: "truncate" }] : /* istanbul ignore next */ []);
+		this.size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.fieldLabel = input("", ...ngDevMode ? [{ debugName: "fieldLabel" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.saving = input(false, {
+			...ngDevMode ? { debugName: "saving" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.allowEmpty = input(false, {
+			...ngDevMode ? { debugName: "allowEmpty" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.closeOnSave = input(true, {
+			...ngDevMode ? { debugName: "closeOnSave" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.blurAction = input("keep", ...ngDevMode ? [{ debugName: "blurAction" }] : /* istanbul ignore next */ []);
+		this.fieldIcon = input("pencil", ...ngDevMode ? [{ debugName: "fieldIcon" }] : /* istanbul ignore next */ []);
+		this.editing = model(false, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
+		this.saved = output();
+		this.cancelled = output();
+		this.draftControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((draft) => this.#draft.set(draft));
+		effect(() => {
+			const editing = this.editing();
+			if (editing) {
+				this.draftControl.setValue(untracked(this.value));
+				afterNextRender(() => this.focusField(), { injector: this.#injector });
+			} else if (this.#wasEditing) this.#restoreFocus(".rt-inline-edit__value");
+			this.#wasEditing = editing;
+		});
+		effect(() => {
+			const value = this.value();
+			if (this.isChipField() && !this.#chipFocused) this.draftControl.setValue(value);
+		});
+		effect(() => {
+			const saving = this.saving();
+			if (saving || this.isChipField() && this.disabled()) this.draftControl.disable({ emitEvent: false });
+			else {
+				this.draftControl.enable({ emitEvent: false });
+				if (this.#wasSaving && untracked(this.editing)) this.#restoreFocus(".rt-inline-edit__field input");
+			}
+			this.#wasSaving = saving;
+		});
+	}
+	open() {
+		if (this.disabled() || this.editing()) return;
+		this.editing.set(true);
+	}
+	save() {
+		if (this.saving()) return;
+		const outcome = inlineEditOutcome(this.value(), this.draftControl.value, this.allowEmpty());
+		if (outcome.kind === "refuse") return;
+		if (outcome.kind === "save") {
+			this.saved.emit(outcome.value);
+			if (!this.closeOnSave()) return;
+		}
+		this.#close();
+	}
+	cancel() {
+		if (this.saving()) return;
+		this.#close();
+		this.cancelled.emit();
+	}
+	onKeydown(event) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			this.save();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.cancel();
+		}
+	}
+	onFocusIn() {
+		this.#focusInside = true;
+	}
+	onFocusOut(event) {
+		if (event.relatedTarget instanceof Node && !this.#host.nativeElement.contains(event.relatedTarget)) this.#focusInside = false;
+		if (!this.editing() || this.saving() || !inlineEditLeaves(this.#host.nativeElement, event.relatedTarget)) return;
+		if (this.blurAction() === "save") this.save();
+		else if (this.blurAction() === "cancel") this.cancel();
+	}
+	onChipFocus(event) {
+		this.#chipFocused = true;
+		if (event.target instanceof HTMLInputElement) event.target.select();
+	}
+	onChipBlur() {
+		this.#chipFocused = false;
+		if (!this.#chipLeaving) this.#commitChip();
+	}
+	onChipKeydown(event) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			this.#leaveChip(event);
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.draftControl.setValue(this.value());
+			this.#leaveChip(event);
+			this.cancelled.emit();
+		}
+	}
+	focusField() {
+		const field = this.#host.nativeElement.querySelector(".rt-inline-edit__field input");
+		field?.focus();
+		field?.select();
+	}
+	#close() {
+		this.editing.set(false);
+	}
+	#commitChip() {
+		if (this.saving()) return;
+		const outcome = inlineEditOutcome(this.value(), this.draftControl.value, this.allowEmpty());
+		if (outcome.kind === "save") {
+			this.saved.emit(outcome.value);
+			this.draftControl.setValue(outcome.value);
+		} else this.draftControl.setValue(this.value());
+	}
+	#leaveChip(event) {
+		const target = event.target;
+		this.#commitChip();
+		if (target instanceof HTMLElement && target.ownerDocument.activeElement === target) {
+			this.#chipLeaving = true;
+			target.blur();
+			this.#chipLeaving = false;
+		}
+	}
+	#restoreFocus(selector) {
+		const host = this.#host.nativeElement;
+		const active = host.ownerDocument.activeElement;
+		if (!this.#focusInside || active !== null && active !== host.ownerDocument.body && !host.contains(active)) return;
+		afterNextRender(() => host.querySelector(selector)?.focus(), { injector: this.#injector });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtInlineEditComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtInlineEditComponent,
+			isStandalone: true,
+			selector: "rt-inline-edit",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				look: {
+					classPropertyName: "look",
+					publicName: "look",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				truncate: {
+					classPropertyName: "truncate",
+					publicName: "truncate",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fieldLabel: {
+					classPropertyName: "fieldLabel",
+					publicName: "fieldLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				saving: {
+					classPropertyName: "saving",
+					publicName: "saving",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowEmpty: {
+					classPropertyName: "allowEmpty",
+					publicName: "allowEmpty",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeOnSave: {
+					classPropertyName: "closeOnSave",
+					publicName: "closeOnSave",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				blurAction: {
+					classPropertyName: "blurAction",
+					publicName: "blurAction",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fieldIcon: {
+					classPropertyName: "fieldIcon",
+					publicName: "fieldIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editing: {
+					classPropertyName: "editing",
+					publicName: "editing",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				editing: "editingChange",
+				saved: "saved",
+				cancelled: "cancelled"
+			},
+			host: {
+				listeners: {
+					"focusin": "onFocusIn()",
+					"focusout": "onFocusOut($event)"
+				},
+				properties: {
+					"class.rt-inline-edit--chip": "look() === 'chip'",
+					"class.rt-inline-edit--chip-field": "isChipField()",
+					"class.rt-inline-edit--size-md": "size() === 'md'",
+					"class.rt-inline-edit--size-lg": "size() === 'lg'"
+				},
+				classAttribute: "rt-inline-edit"
+			},
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-inline-edit\">\n    @if (isChipField()) {\n        <!-- Плашка-поле: значок и поле внутри одной плашки. Ширину задаёт невидимая копия текста под\n             полем — плашка растёт с текстом до своего предела, дальше поле прокручивается. -->\n        <label rtElem=\"chip-field\" [rtMod]=\"{ disabled: disabled() }\">\n            <rt-icon rtElem=\"chip-icon\" size=\"sm\" [name]=\"fieldIcon()\" />\n            <span rtElem=\"sizer\" rtTooltipWhenTruncated [rtTooltip]=\"chipText()\">\n                <span rtElem=\"mirror\" aria-hidden=\"true\">{{ chipText() }}</span>\n                <!-- Обрезка посередине: копия выше по-прежнему задаёт ширину и будит подсказку, а этот\n                     слой в той же клетке показывает начало с многоточием и конец, пока поле не в фокусе. -->\n                @if (middleParts(); as parts) {\n                    <span rtElem=\"middle\" aria-hidden=\"true\">\n                        <span rtElem=\"head\">{{ parts.head }}</span>\n                        <span rtElem=\"tail\">{{ parts.tail }}</span>\n                    </span>\n                }\n                <input\n                    type=\"text\"\n                    rtElem=\"chip-input\"\n                    qa-dataid=\"inline-edit-chip-input\"\n                    [placeholder]=\"placeholder()\"\n                    [attr.aria-label]=\"fieldLabel() || placeholder() || null\"\n                    [formControl]=\"draftControl\"\n                    (focus)=\"onChipFocus($event)\"\n                    (blur)=\"onChipBlur()\"\n                    (keydown)=\"onChipKeydown($event)\" />\n            </span>\n        </label>\n    } @else if (editing()) {\n        <rt-input\n            rtElem=\"field\"\n            qa-dataid=\"inline-edit-field\"\n            [size]=\"size()\"\n            [placeholder]=\"placeholder()\"\n            [ariaLabel]=\"fieldLabel() || placeholder() || null\"\n            [clearable]=\"false\"\n            [formControl]=\"draftControl\"\n            (keydown)=\"onKeydown($event)\" />\n\n        <rt-icon-button\n            rtElem=\"save\"\n            qa-dataid=\"inline-edit-save\"\n            icon=\"check\"\n            [size]=\"size()\"\n            [ariaLabel]=\"saveLabel()\"\n            [tooltip]=\"saveLabel()\"\n            [loading]=\"saving()\"\n            [disabled]=\"!canSave()\"\n            (clicked)=\"save()\" />\n\n        <rt-icon-button\n            rtElem=\"cancel\"\n            qa-dataid=\"inline-edit-cancel\"\n            icon=\"close\"\n            [size]=\"size()\"\n            [ariaLabel]=\"cancelLabel()\"\n            [tooltip]=\"cancelLabel()\"\n            [disabled]=\"saving()\"\n            (clicked)=\"cancel()\" />\n    } @else {\n        <button\n            type=\"button\"\n            rtElem=\"value\"\n            qa-dataid=\"inline-edit-value\"\n            [rtMod]=\"{ empty: isEmpty() }\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"startLabel()\"\n            (click)=\"open()\">\n            <span rtElem=\"text\" rtTooltipWhenTruncated [rtTooltip]=\"shown()\">{{ shown() }}</span>\n\n            @if (!disabled()) {\n                <rt-icon rtElem=\"pencil\" name=\"pencil\" size=\"sm\" />\n            }\n        </button>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-inline-edit{--rt-inline-edit-height: var(--rt-input-height-sm);--rt-inline-edit-field-width: var(--rt-size-64);--rt-inline-edit-radius: var(--rt-radius-sm);--rt-inline-edit-border-width: var(--rt-border-width-thin);--rt-inline-edit-duration: var(--rt-duration-fast);--rt-inline-edit-gap: var(--rt-space-2xs);--rt-inline-edit-value-padding-x: var(--rt-space-xs);--rt-inline-edit-value-gap: var(--rt-space-xs);--rt-inline-edit-value-bg-hover: var(--rt-color-bg-hover);--rt-inline-edit-empty-color: var(--rt-color-text-muted);--rt-inline-edit-disabled-color: var(--rt-color-text-disabled);--rt-inline-edit-pencil-color: var(--rt-color-text-muted);--rt-inline-edit-chip-radius: var(--rt-radius-sm);--rt-inline-edit-chip-bg: var(--rt-color-bg-subtle);--rt-inline-edit-chip-color: var(--rt-color-text-primary);--rt-inline-edit-chip-border-color: var(--rt-color-border-default);--rt-inline-edit-chip-border-color-hover: var(--rt-color-action-primary-on-surface);--rt-inline-edit-chip-font-size: var(--rt-text-xs);--rt-inline-edit-chip-font-weight: var(--rt-font-weight-semibold);--rt-inline-edit-chip-field-max-width: calc(var(--rt-size-64) + var(--rt-size-64) / 2);--rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg);--rt-inline-edit-chip-field-color: var(--rt-inline-edit-chip-color);--rt-inline-edit-chip-field-icon-color: var(--rt-inline-edit-pencil-color);--rt-inline-edit-chip-field-border-color: var(--rt-inline-edit-chip-border-color);--rt-inline-edit-chip-field-border-color-focus: var(--rt-inline-edit-chip-border-color-hover);display:inline-flex;min-width:0;max-width:100%;align-items:center;gap:var(--rt-inline-edit-gap);vertical-align:middle}.rt-inline-edit--size-md{--rt-inline-edit-height: var(--rt-input-height-md)}.rt-inline-edit--size-lg{--rt-inline-edit-height: var(--rt-input-height-lg)}:is(.rt-preset-material,[data-preset=material]) .rt-inline-edit{--rt-inline-edit-chip-radius: var(--rt-radius-ms);--rt-inline-edit-chip-bg: var(--rt-color-bg-surface-subtle-2);--rt-inline-edit-chip-border-color: var(--rt-color-border-subtle);--rt-inline-edit-chip-border-color-hover: var(--rt-color-border-strong);--rt-inline-edit-value-padding-x: var(--rt-space-2);--rt-inline-edit-chip-field-bg: var(--rt-mat-neutral-5);--rt-inline-edit-chip-field-color: var(--mat-sys-primary, var(--rt-color-action-primary));--rt-inline-edit-chip-field-icon-color: var(--mat-sys-primary, var(--rt-color-action-primary));--rt-inline-edit-chip-field-border-color: var(--mat-sys-primary-fixed-dim, var(--rt-brand-200));--rt-inline-edit-chip-field-border-color-focus: var(--mat-sys-primary, var(--rt-color-action-primary))}.rt-inline-edit__value{display:inline-flex;min-width:0;max-width:100%;min-height:var(--rt-inline-edit-height);box-sizing:border-box;align-items:center;padding:0 var(--rt-inline-edit-value-padding-x);border:var(--rt-inline-edit-border-width) solid transparent;border-radius:var(--rt-inline-edit-radius);background:transparent;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-inline-edit-value-gap);text-align:start;transition:background-color var(--rt-inline-edit-duration) ease,border-color var(--rt-inline-edit-duration) ease}.rt-inline-edit__value:hover:not(:disabled){background:var(--rt-inline-edit-value-bg-hover)}.rt-inline-edit__value:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-inline-edit__value--empty{color:var(--rt-inline-edit-empty-color)}.rt-inline-edit__value:disabled{color:var(--rt-inline-edit-disabled-color);cursor:default}.rt-inline-edit__text{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-inline-edit__pencil{flex-shrink:0;color:var(--rt-inline-edit-pencil-color)}.rt-inline-edit__field{width:var(--rt-inline-edit-field-width);min-width:0;flex:0 1 auto}.rt-inline-edit__save,.rt-inline-edit__cancel{flex-shrink:0}.rt-inline-edit--chip .rt-inline-edit__value{border-color:var(--rt-inline-edit-chip-border-color);border-radius:var(--rt-inline-edit-chip-radius);background:var(--rt-inline-edit-chip-bg);color:var(--rt-inline-edit-chip-color);font-size:var(--rt-inline-edit-chip-font-size);font-weight:var(--rt-inline-edit-chip-font-weight)}.rt-inline-edit--chip .rt-inline-edit__value:hover:not(:disabled){border-color:var(--rt-inline-edit-chip-border-color-hover);background:var(--rt-inline-edit-chip-bg)}.rt-inline-edit--chip .rt-inline-edit__value--empty{color:var(--rt-inline-edit-empty-color)}.rt-inline-edit--chip .rt-inline-edit__value:disabled{color:var(--rt-inline-edit-disabled-color)}.rt-inline-edit__chip-field{display:inline-flex;min-width:0;max-width:min(100%,var(--rt-inline-edit-chip-field-max-width));min-height:var(--rt-inline-edit-height);box-sizing:border-box;align-items:center;padding:0 var(--rt-inline-edit-value-padding-x);border:var(--rt-inline-edit-border-width) solid var(--rt-inline-edit-chip-field-border-color);border-radius:var(--rt-inline-edit-chip-radius);background:var(--rt-inline-edit-chip-field-bg);color:var(--rt-inline-edit-chip-field-color);cursor:text;font-size:var(--rt-inline-edit-chip-font-size);font-weight:var(--rt-inline-edit-chip-font-weight);gap:var(--rt-inline-edit-value-gap);transition:border-color var(--rt-inline-edit-duration) ease}.rt-inline-edit__chip-field:focus-within{border-color:var(--rt-inline-edit-chip-field-border-color-focus)}.rt-inline-edit__chip-field--disabled{color:var(--rt-inline-edit-disabled-color);cursor:default}.rt-inline-edit__chip-icon{flex-shrink:0;color:var(--rt-inline-edit-chip-field-icon-color)}.rt-inline-edit__chip-field--disabled .rt-inline-edit__chip-icon{color:var(--rt-inline-edit-disabled-color)}.rt-inline-edit__sizer{display:inline-grid;overflow:hidden;min-width:0;grid-template-columns:minmax(0,auto)}.rt-inline-edit__mirror,.rt-inline-edit__middle,.rt-inline-edit__chip-input{padding:0;font:inherit;grid-area:1/1;letter-spacing:inherit;white-space:pre}.rt-inline-edit__mirror{visibility:hidden}.rt-inline-edit__middle{display:flex;overflow:hidden;min-width:0;pointer-events:none}.rt-inline-edit__head{overflow:hidden;min-width:0;text-overflow:ellipsis}.rt-inline-edit__tail{flex-shrink:0}.rt-inline-edit__middle~.rt-inline-edit__chip-input{color:transparent}.rt-inline-edit__chip-field:focus-within .rt-inline-edit__middle{visibility:hidden}.rt-inline-edit__chip-field:focus-within .rt-inline-edit__middle~.rt-inline-edit__chip-input{color:inherit}.rt-inline-edit__chip-input{width:100%;min-width:var(--rt-space-xs);border:0;background:transparent;color:inherit;outline:none}.rt-inline-edit__chip-input::placeholder{color:var(--rt-inline-edit-empty-color)}.rt-inline-edit__chip-input:disabled{cursor:default}[data-theme=dark] :is(.rt-preset-material,[data-preset=material]) .rt-inline-edit,:is(.rt-preset-material,[data-preset=material]) [data-theme=dark] .rt-inline-edit,html.rt-theme-dark :is(.rt-preset-material,[data-preset=material]) .rt-inline-edit{--rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg)}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: ReactiveFormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.DefaultValueAccessor,
+					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.FormControlDirective,
+					selector: "[formControl]",
+					inputs: [
+						"formControl",
+						"disabled",
+						"ngModel"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngForm"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtInputComponent,
+					selector: "rt-input",
+					inputs: [
+						"appearance",
+						"type",
+						"placeholder",
+						"iconLeft",
+						"iconRight",
+						"passwordToggle",
+						"autocomplete"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtInlineEditComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-inline-edit",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				ReactiveFormsModule,
+				BlockDirective,
+				ElemDirective,
+				ModDirective,
+				RtIconComponent,
+				RtIconButtonComponent,
+				RtInputComponent,
+				RtTooltipDirective
+			],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-inline-edit--chip]": "look() === 'chip'",
+				"[class.rt-inline-edit--chip-field]": "isChipField()",
+				"[class.rt-inline-edit--size-md]": "size() === 'md'",
+				"[class.rt-inline-edit--size-lg]": "size() === 'lg'",
+				"(focusin)": "onFocusIn()",
+				"(focusout)": "onFocusOut($event)"
+			},
+			template: "<ng-container rtBlock=\"rt-inline-edit\">\n    @if (isChipField()) {\n        <!-- Плашка-поле: значок и поле внутри одной плашки. Ширину задаёт невидимая копия текста под\n             полем — плашка растёт с текстом до своего предела, дальше поле прокручивается. -->\n        <label rtElem=\"chip-field\" [rtMod]=\"{ disabled: disabled() }\">\n            <rt-icon rtElem=\"chip-icon\" size=\"sm\" [name]=\"fieldIcon()\" />\n            <span rtElem=\"sizer\" rtTooltipWhenTruncated [rtTooltip]=\"chipText()\">\n                <span rtElem=\"mirror\" aria-hidden=\"true\">{{ chipText() }}</span>\n                <!-- Обрезка посередине: копия выше по-прежнему задаёт ширину и будит подсказку, а этот\n                     слой в той же клетке показывает начало с многоточием и конец, пока поле не в фокусе. -->\n                @if (middleParts(); as parts) {\n                    <span rtElem=\"middle\" aria-hidden=\"true\">\n                        <span rtElem=\"head\">{{ parts.head }}</span>\n                        <span rtElem=\"tail\">{{ parts.tail }}</span>\n                    </span>\n                }\n                <input\n                    type=\"text\"\n                    rtElem=\"chip-input\"\n                    qa-dataid=\"inline-edit-chip-input\"\n                    [placeholder]=\"placeholder()\"\n                    [attr.aria-label]=\"fieldLabel() || placeholder() || null\"\n                    [formControl]=\"draftControl\"\n                    (focus)=\"onChipFocus($event)\"\n                    (blur)=\"onChipBlur()\"\n                    (keydown)=\"onChipKeydown($event)\" />\n            </span>\n        </label>\n    } @else if (editing()) {\n        <rt-input\n            rtElem=\"field\"\n            qa-dataid=\"inline-edit-field\"\n            [size]=\"size()\"\n            [placeholder]=\"placeholder()\"\n            [ariaLabel]=\"fieldLabel() || placeholder() || null\"\n            [clearable]=\"false\"\n            [formControl]=\"draftControl\"\n            (keydown)=\"onKeydown($event)\" />\n\n        <rt-icon-button\n            rtElem=\"save\"\n            qa-dataid=\"inline-edit-save\"\n            icon=\"check\"\n            [size]=\"size()\"\n            [ariaLabel]=\"saveLabel()\"\n            [tooltip]=\"saveLabel()\"\n            [loading]=\"saving()\"\n            [disabled]=\"!canSave()\"\n            (clicked)=\"save()\" />\n\n        <rt-icon-button\n            rtElem=\"cancel\"\n            qa-dataid=\"inline-edit-cancel\"\n            icon=\"close\"\n            [size]=\"size()\"\n            [ariaLabel]=\"cancelLabel()\"\n            [tooltip]=\"cancelLabel()\"\n            [disabled]=\"saving()\"\n            (clicked)=\"cancel()\" />\n    } @else {\n        <button\n            type=\"button\"\n            rtElem=\"value\"\n            qa-dataid=\"inline-edit-value\"\n            [rtMod]=\"{ empty: isEmpty() }\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"startLabel()\"\n            (click)=\"open()\">\n            <span rtElem=\"text\" rtTooltipWhenTruncated [rtTooltip]=\"shown()\">{{ shown() }}</span>\n\n            @if (!disabled()) {\n                <rt-icon rtElem=\"pencil\" name=\"pencil\" size=\"sm\" />\n            }\n        </button>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-inline-edit{--rt-inline-edit-height: var(--rt-input-height-sm);--rt-inline-edit-field-width: var(--rt-size-64);--rt-inline-edit-radius: var(--rt-radius-sm);--rt-inline-edit-border-width: var(--rt-border-width-thin);--rt-inline-edit-duration: var(--rt-duration-fast);--rt-inline-edit-gap: var(--rt-space-2xs);--rt-inline-edit-value-padding-x: var(--rt-space-xs);--rt-inline-edit-value-gap: var(--rt-space-xs);--rt-inline-edit-value-bg-hover: var(--rt-color-bg-hover);--rt-inline-edit-empty-color: var(--rt-color-text-muted);--rt-inline-edit-disabled-color: var(--rt-color-text-disabled);--rt-inline-edit-pencil-color: var(--rt-color-text-muted);--rt-inline-edit-chip-radius: var(--rt-radius-sm);--rt-inline-edit-chip-bg: var(--rt-color-bg-subtle);--rt-inline-edit-chip-color: var(--rt-color-text-primary);--rt-inline-edit-chip-border-color: var(--rt-color-border-default);--rt-inline-edit-chip-border-color-hover: var(--rt-color-action-primary-on-surface);--rt-inline-edit-chip-font-size: var(--rt-text-xs);--rt-inline-edit-chip-font-weight: var(--rt-font-weight-semibold);--rt-inline-edit-chip-field-max-width: calc(var(--rt-size-64) + var(--rt-size-64) / 2);--rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg);--rt-inline-edit-chip-field-color: var(--rt-inline-edit-chip-color);--rt-inline-edit-chip-field-icon-color: var(--rt-inline-edit-pencil-color);--rt-inline-edit-chip-field-border-color: var(--rt-inline-edit-chip-border-color);--rt-inline-edit-chip-field-border-color-focus: var(--rt-inline-edit-chip-border-color-hover);display:inline-flex;min-width:0;max-width:100%;align-items:center;gap:var(--rt-inline-edit-gap);vertical-align:middle}.rt-inline-edit--size-md{--rt-inline-edit-height: var(--rt-input-height-md)}.rt-inline-edit--size-lg{--rt-inline-edit-height: var(--rt-input-height-lg)}:is(.rt-preset-material,[data-preset=material]) .rt-inline-edit{--rt-inline-edit-chip-radius: var(--rt-radius-ms);--rt-inline-edit-chip-bg: var(--rt-color-bg-surface-subtle-2);--rt-inline-edit-chip-border-color: var(--rt-color-border-subtle);--rt-inline-edit-chip-border-color-hover: var(--rt-color-border-strong);--rt-inline-edit-value-padding-x: var(--rt-space-2);--rt-inline-edit-chip-field-bg: var(--rt-mat-neutral-5);--rt-inline-edit-chip-field-color: var(--mat-sys-primary, var(--rt-color-action-primary));--rt-inline-edit-chip-field-icon-color: var(--mat-sys-primary, var(--rt-color-action-primary));--rt-inline-edit-chip-field-border-color: var(--mat-sys-primary-fixed-dim, var(--rt-brand-200));--rt-inline-edit-chip-field-border-color-focus: var(--mat-sys-primary, var(--rt-color-action-primary))}.rt-inline-edit__value{display:inline-flex;min-width:0;max-width:100%;min-height:var(--rt-inline-edit-height);box-sizing:border-box;align-items:center;padding:0 var(--rt-inline-edit-value-padding-x);border:var(--rt-inline-edit-border-width) solid transparent;border-radius:var(--rt-inline-edit-radius);background:transparent;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-inline-edit-value-gap);text-align:start;transition:background-color var(--rt-inline-edit-duration) ease,border-color var(--rt-inline-edit-duration) ease}.rt-inline-edit__value:hover:not(:disabled){background:var(--rt-inline-edit-value-bg-hover)}.rt-inline-edit__value:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-inline-edit__value--empty{color:var(--rt-inline-edit-empty-color)}.rt-inline-edit__value:disabled{color:var(--rt-inline-edit-disabled-color);cursor:default}.rt-inline-edit__text{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-inline-edit__pencil{flex-shrink:0;color:var(--rt-inline-edit-pencil-color)}.rt-inline-edit__field{width:var(--rt-inline-edit-field-width);min-width:0;flex:0 1 auto}.rt-inline-edit__save,.rt-inline-edit__cancel{flex-shrink:0}.rt-inline-edit--chip .rt-inline-edit__value{border-color:var(--rt-inline-edit-chip-border-color);border-radius:var(--rt-inline-edit-chip-radius);background:var(--rt-inline-edit-chip-bg);color:var(--rt-inline-edit-chip-color);font-size:var(--rt-inline-edit-chip-font-size);font-weight:var(--rt-inline-edit-chip-font-weight)}.rt-inline-edit--chip .rt-inline-edit__value:hover:not(:disabled){border-color:var(--rt-inline-edit-chip-border-color-hover);background:var(--rt-inline-edit-chip-bg)}.rt-inline-edit--chip .rt-inline-edit__value--empty{color:var(--rt-inline-edit-empty-color)}.rt-inline-edit--chip .rt-inline-edit__value:disabled{color:var(--rt-inline-edit-disabled-color)}.rt-inline-edit__chip-field{display:inline-flex;min-width:0;max-width:min(100%,var(--rt-inline-edit-chip-field-max-width));min-height:var(--rt-inline-edit-height);box-sizing:border-box;align-items:center;padding:0 var(--rt-inline-edit-value-padding-x);border:var(--rt-inline-edit-border-width) solid var(--rt-inline-edit-chip-field-border-color);border-radius:var(--rt-inline-edit-chip-radius);background:var(--rt-inline-edit-chip-field-bg);color:var(--rt-inline-edit-chip-field-color);cursor:text;font-size:var(--rt-inline-edit-chip-font-size);font-weight:var(--rt-inline-edit-chip-font-weight);gap:var(--rt-inline-edit-value-gap);transition:border-color var(--rt-inline-edit-duration) ease}.rt-inline-edit__chip-field:focus-within{border-color:var(--rt-inline-edit-chip-field-border-color-focus)}.rt-inline-edit__chip-field--disabled{color:var(--rt-inline-edit-disabled-color);cursor:default}.rt-inline-edit__chip-icon{flex-shrink:0;color:var(--rt-inline-edit-chip-field-icon-color)}.rt-inline-edit__chip-field--disabled .rt-inline-edit__chip-icon{color:var(--rt-inline-edit-disabled-color)}.rt-inline-edit__sizer{display:inline-grid;overflow:hidden;min-width:0;grid-template-columns:minmax(0,auto)}.rt-inline-edit__mirror,.rt-inline-edit__middle,.rt-inline-edit__chip-input{padding:0;font:inherit;grid-area:1/1;letter-spacing:inherit;white-space:pre}.rt-inline-edit__mirror{visibility:hidden}.rt-inline-edit__middle{display:flex;overflow:hidden;min-width:0;pointer-events:none}.rt-inline-edit__head{overflow:hidden;min-width:0;text-overflow:ellipsis}.rt-inline-edit__tail{flex-shrink:0}.rt-inline-edit__middle~.rt-inline-edit__chip-input{color:transparent}.rt-inline-edit__chip-field:focus-within .rt-inline-edit__middle{visibility:hidden}.rt-inline-edit__chip-field:focus-within .rt-inline-edit__middle~.rt-inline-edit__chip-input{color:inherit}.rt-inline-edit__chip-input{width:100%;min-width:var(--rt-space-xs);border:0;background:transparent;color:inherit;outline:none}.rt-inline-edit__chip-input::placeholder{color:var(--rt-inline-edit-empty-color)}.rt-inline-edit__chip-input:disabled{cursor:default}[data-theme=dark] :is(.rt-preset-material,[data-preset=material]) .rt-inline-edit,:is(.rt-preset-material,[data-preset=material]) [data-theme=dark] .rt-inline-edit,html.rt-theme-dark :is(.rt-preset-material,[data-preset=material]) .rt-inline-edit{--rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		look: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "look",
+				required: false
+			}]
+		}],
+		truncate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "truncate",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		fieldLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		saving: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "saving",
+				required: false
+			}]
+		}],
+		allowEmpty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowEmpty",
+				required: false
+			}]
+		}],
+		closeOnSave: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnSave",
+				required: false
+			}]
+		}],
+		blurAction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "blurAction",
+				required: false
+			}]
+		}],
+		fieldIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldIcon",
+				required: false
+			}]
+		}],
+		editing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editing",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["editingChange"]
+		}],
+		saved: [{
+			type: i0.Output,
+			args: ["saved"]
+		}],
+		cancelled: [{
+			type: i0.Output,
+			args: ["cancelled"]
+		}]
+	}
+});
+export { RtInlineEditComponent, inlineEditLeaves, inlineEditMiddle, inlineEditOutcome };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-inline-edit.mjs.map