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

package/fesm2022/rt-tools-ui-kit-v2-confirm-popover.mjs

@@ -1,255 +1,464 @@
-import * as i0 from '@angular/core';
-import { computed, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, ElementRef, DestroyRef, signal, booleanAttribute, Directive } from '@angular/core';
-import { BlockDirective, ElemDirective, setRtComponentInputs } from '@rt-tools/core';
-import { rtKitLabel, carryThemeScope, materialPresetClassesOf } from '@rt-tools/ui-kit-v2/core';
-import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
-import { Overlay, ScrollStrategyOptions, OverlayConfig } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, switchMap, merge, map } from 'rxjs';
-
-const BEM_BLOCK = 'rt-confirm-popover';
-/**
- * Презентационная панель подтверждения. Рендерится директивой `[rtConfirm]`
- * через CDK `ComponentPortal` под host-кнопкой. Содержит опциональный заголовок,
- * текст вопроса и две кнопки: «Отмена» (text/secondary) и подтверждающую
- * (`tone` — danger по умолчанию для деструктивных действий).
- *
- * `ViewEncapsulation.None` — стили префиксованы `.rt-confirm-popover`. Inputs
- * выставляются директивой через `setInput`; outputs (`confirm`/`cancel`) она
- * слушает и транслирует в `(confirmed)` / закрытие.
- */
-class RtConfirmPopoverComponent {
-    constructor() {
-        this.#t_uiConfirm = rtKitLabel('uiConfirm');
-        this.#t_uiCancel = rtKitLabel('uiCancel');
-        this.confirmText = computed(() => this.confirmLabel() || this.#t_uiConfirm(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []));
-        this.cancelText = computed(() => this.cancelLabel() || this.#t_uiCancel(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
-        this.message = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-        this.title = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        /** Пусто — берётся переведённая подпись по умолчанию */
-        this.confirmLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
-        this.cancelLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
-        this.tone = input('danger', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-        this.accepted = output();
-        this.cancelled = output();
-    }
-    #t_uiConfirm;
-    #t_uiCancel;
-    onConfirm() {
-        this.accepted.emit();
-    }
-    onCancel() {
-        this.cancelled.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtConfirmPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtConfirmPopoverComponent, isStandalone: true, selector: "rt-confirm-popover", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accepted: "accepted", cancelled: "cancelled" }, host: { classAttribute: "rt-confirm-popover" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-confirm-popover\">\n    @if (title()) {\n        <p rtElem=\"title\">{{ title() }}</p>\n    }\n\n    <p rtElem=\"message\">{{ message() }}</p>\n\n    <div rtElem=\"actions\">\n        <button\n            rtButton\n            qa-dataid=\"confirm-cancel\"\n            type=\"button\"\n            theme=\"secondary\"\n            appearance=\"text\"\n            [label]=\"cancelText()\"\n            [attr.aria-label]=\"cancelText()\"\n            (click)=\"onCancel()\"></button>\n        <button\n            rtButton\n            qa-dataid=\"confirm-accept\"\n            type=\"button\"\n            [theme]=\"tone()\"\n            [label]=\"confirmText()\"\n            [attr.aria-label]=\"confirmText()\"\n            (click)=\"onConfirm()\"></button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-confirm-popover{--rt-confirm-popover-radius: var(--rt-radius-md);--rt-confirm-popover-border-width: var(--rt-border-width-thin);--rt-confirm-popover-shadow: var(--rt-shadow-lg);display:flex;width:280px;max-width:280px;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-confirm-popover-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-confirm-popover-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-confirm-popover-shadow);gap:var(--rt-space-sm)}.rt-confirm-popover__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}.rt-confirm-popover__message{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-confirm-popover__actions{display:flex;justify-content:space-between;gap:var(--rt-space-sm);margin-block-start:var(--rt-space-xs)}}\n"], dependencies: [{ kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtConfirmPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-confirm-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtButtonDirective, BlockDirective, ElemDirective], host: {
-                        class: BEM_BLOCK,
-                    }, template: "<ng-container rtBlock=\"rt-confirm-popover\">\n    @if (title()) {\n        <p rtElem=\"title\">{{ title() }}</p>\n    }\n\n    <p rtElem=\"message\">{{ message() }}</p>\n\n    <div rtElem=\"actions\">\n        <button\n            rtButton\n            qa-dataid=\"confirm-cancel\"\n            type=\"button\"\n            theme=\"secondary\"\n            appearance=\"text\"\n            [label]=\"cancelText()\"\n            [attr.aria-label]=\"cancelText()\"\n            (click)=\"onCancel()\"></button>\n        <button\n            rtButton\n            qa-dataid=\"confirm-accept\"\n            type=\"button\"\n            [theme]=\"tone()\"\n            [label]=\"confirmText()\"\n            [attr.aria-label]=\"confirmText()\"\n            (click)=\"onConfirm()\"></button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-confirm-popover{--rt-confirm-popover-radius: var(--rt-radius-md);--rt-confirm-popover-border-width: var(--rt-border-width-thin);--rt-confirm-popover-shadow: var(--rt-shadow-lg);display:flex;width:280px;max-width:280px;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-confirm-popover-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-confirm-popover-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-confirm-popover-shadow);gap:var(--rt-space-sm)}.rt-confirm-popover__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}.rt-confirm-popover__message{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-confirm-popover__actions{display:flex;justify-content:space-between;gap:var(--rt-space-sm);margin-block-start:var(--rt-space-xs)}}\n"] }]
-        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], accepted: [{ type: i0.Output, args: ["accepted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, ViewEncapsulation, booleanAttribute, computed, inject, input, output, signal } from "@angular/core";
+import { BlockDirective, ElemDirective, setRtComponentInputs } from "@rt-tools/core";
+import { carryThemeScope, materialPresetClassesOf, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
+import { Overlay, OverlayConfig, ScrollStrategyOptions } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { outputToObservable, takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Subject, map, merge, switchMap } from "rxjs";
+const BEM_BLOCK = "rt-confirm-popover";
+var RtConfirmPopoverComponent = class RtConfirmPopoverComponent {
+	constructor() {
+		this.#t_uiConfirm = rtKitLabel("uiConfirm");
+		this.#t_uiCancel = rtKitLabel("uiCancel");
+		this.confirmText = computed(() => this.confirmLabel() || this.#t_uiConfirm(), ...ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []);
+		this.cancelText = computed(() => this.cancelLabel() || this.#t_uiCancel(), ...ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []);
+		this.message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+		this.title = input(null, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.confirmLabel = input("", ...ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []);
+		this.cancelLabel = input("", ...ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []);
+		this.tone = input("danger", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+		this.accepted = output();
+		this.cancelled = output();
+	}
+	#t_uiConfirm;
+	#t_uiCancel;
+	onConfirm() {
+		this.accepted.emit();
+	}
+	onCancel() {
+		this.cancelled.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtConfirmPopoverComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtConfirmPopoverComponent,
+			isStandalone: true,
+			selector: "rt-confirm-popover",
+			inputs: {
+				message: {
+					classPropertyName: "message",
+					publicName: "message",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				confirmLabel: {
+					classPropertyName: "confirmLabel",
+					publicName: "confirmLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				cancelLabel: {
+					classPropertyName: "cancelLabel",
+					publicName: "cancelLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tone: {
+					classPropertyName: "tone",
+					publicName: "tone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				accepted: "accepted",
+				cancelled: "cancelled"
+			},
+			host: { classAttribute: "rt-confirm-popover" },
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-confirm-popover\">\n    @if (title()) {\n        <p rtElem=\"title\">{{ title() }}</p>\n    }\n\n    <p rtElem=\"message\">{{ message() }}</p>\n\n    <div rtElem=\"actions\">\n        <button\n            rtButton\n            qa-dataid=\"confirm-cancel\"\n            type=\"button\"\n            theme=\"secondary\"\n            appearance=\"text\"\n            [label]=\"cancelText()\"\n            [attr.aria-label]=\"cancelText()\"\n            (click)=\"onCancel()\"></button>\n        <button\n            rtButton\n            qa-dataid=\"confirm-accept\"\n            type=\"button\"\n            [theme]=\"tone()\"\n            [label]=\"confirmText()\"\n            [attr.aria-label]=\"confirmText()\"\n            (click)=\"onConfirm()\"></button>\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-confirm-popover{--rt-confirm-popover-radius: var(--rt-radius-md);--rt-confirm-popover-border-width: var(--rt-border-width-thin);--rt-confirm-popover-shadow: var(--rt-shadow-lg);display:flex;width:280px;max-width:280px;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-confirm-popover-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-confirm-popover-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-confirm-popover-shadow);gap:var(--rt-space-sm)}.rt-confirm-popover__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}.rt-confirm-popover__message{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-confirm-popover__actions{display:flex;justify-content:space-between;gap:var(--rt-space-sm);margin-block-start:var(--rt-space-xs)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtConfirmPopoverComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-confirm-popover",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtButtonDirective,
+				BlockDirective,
+				ElemDirective
+			],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-confirm-popover\">\n    @if (title()) {\n        <p rtElem=\"title\">{{ title() }}</p>\n    }\n\n    <p rtElem=\"message\">{{ message() }}</p>\n\n    <div rtElem=\"actions\">\n        <button\n            rtButton\n            qa-dataid=\"confirm-cancel\"\n            type=\"button\"\n            theme=\"secondary\"\n            appearance=\"text\"\n            [label]=\"cancelText()\"\n            [attr.aria-label]=\"cancelText()\"\n            (click)=\"onCancel()\"></button>\n        <button\n            rtButton\n            qa-dataid=\"confirm-accept\"\n            type=\"button\"\n            [theme]=\"tone()\"\n            [label]=\"confirmText()\"\n            [attr.aria-label]=\"confirmText()\"\n            (click)=\"onConfirm()\"></button>\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-confirm-popover{--rt-confirm-popover-radius: var(--rt-radius-md);--rt-confirm-popover-border-width: var(--rt-border-width-thin);--rt-confirm-popover-shadow: var(--rt-shadow-lg);display:flex;width:280px;max-width:280px;flex-direction:column;padding:var(--rt-space-md);border:var(--rt-confirm-popover-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-confirm-popover-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-confirm-popover-shadow);gap:var(--rt-space-sm)}.rt-confirm-popover__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}.rt-confirm-popover__message{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-normal)}.rt-confirm-popover__actions{display:flex;justify-content:space-between;gap:var(--rt-space-sm);margin-block-start:var(--rt-space-xs)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		confirmLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "confirmLabel",
+				required: false
+			}]
+		}],
+		cancelLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cancelLabel",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		accepted: [{
+			type: i0.Output,
+			args: ["accepted"]
+		}],
+		cancelled: [{
+			type: i0.Output,
+			args: ["cancelled"]
+		}]
+	}
+});
 const VIEWPORT_MARGIN = 8;
-/**
- * Confirm-popover директива поверх CDK Overlay. Вешается на host-кнопку
- * (обычно `rt-icon-button` деструктивного действия). По клику показывает прямо
- * под кнопкой панель `rt-confirm-popover` с вопросом и кнопками
- * «Отмена» / подтверждение. Подтверждение → `(confirmed)` + закрытие; отмена,
- * outside-click, Escape → просто закрытие.
- *
- * Движок — CDK `flexibleConnectedTo` (end-выравнивание + flip), чтобы панель у
- * правого края aside'а раскрывалась влево и не резалась `overflow: hidden`.
- *
- * @example
- * ```html
- * <rt-icon-button
- *     icon="ico-error"
- *     variant="danger"
- *     ariaLabel="Отклонить"
- *     tooltip="Отклонить"
- *     [rtConfirm]="'Отклонить заявку? Оператор получит уведомление.'"
- *     rtConfirmTitle="Отклонить заявку"
- *     rtConfirmLabel="Отклонить"
- *     (confirmed)="rejectTour()" />
- * ```
- */
-class RtConfirmDirective {
-    #overlay;
-    #elementRef;
-    #scrollStrategies;
-    #destroyRef;
-    #overlayCreatedSource;
-    #panelAttachedSource;
-    #overlayRef;
-    #panelRef;
-    constructor() {
-        this.#overlay = inject(Overlay);
-        this.#elementRef = inject(ElementRef);
-        this.#scrollStrategies = inject(ScrollStrategyOptions);
-        this.#destroyRef = inject(DestroyRef);
-        this.#overlayCreatedSource = new Subject();
-        this.#panelAttachedSource = new Subject();
-        this.#overlayRef = null;
-        this.#panelRef = null;
-        this.isOpenState = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isOpenState" }] : /* istanbul ignore next */ []));
-        this.message = input('', { ...(ngDevMode ? { debugName: "message" } : /* istanbul ignore next */ {}), alias: 'rtConfirm' });
-        this.title = input(null, { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), alias: 'rtConfirmTitle' });
-        /** Пусто — панель подставит переведённое умолчание */
-        this.label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'rtConfirmLabel' });
-        this.cancelLabel = input('', { ...(ngDevMode ? { debugName: "cancelLabel" } : /* istanbul ignore next */ {}), alias: 'rtConfirmCancelLabel' });
-        this.tone = input('danger', { ...(ngDevMode ? { debugName: "tone" } : /* istanbul ignore next */ {}), alias: 'rtConfirmTone' });
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'rtConfirmDisabled',
-            transform: booleanAttribute });
-        this.confirmed = output();
-        this.isOpen = this.isOpenState.asReadonly();
-        // Per-attach подписки на outputs панели (accepted / cancelled) живут в
-        // одном конструкторном стриме: open() эмитит свежий ComponentRef,
-        // switchMap переключается на его outputs (предыдущая панель к этому
-        // моменту уже detach'нута — outputs комплитятся при destroy componentRef).
-        // Бэкстоп takeUntilDestroyed — на жизнь директивы.
-        this.#panelAttachedSource
-            .pipe(switchMap((panelRef) => merge(outputToObservable(panelRef.instance.accepted).pipe(map(() => () => {
-            this.confirmed.emit();
-            this.close();
-        })), outputToObservable(panelRef.instance.cancelled).pipe(map(() => () => this.close())))), takeUntilDestroyed(this.#destroyRef))
-            .subscribe((handleCloseIntent) => handleCloseIntent());
-        // Outside-click / ESC подписки на единожды создаваемый overlay:
-        // #ensureOverlay эмитит OverlayRef после создания (ровно один раз за
-        // жизнь директивы), стрим живёт до destroy директивы.
-        this.#overlayCreatedSource
-            .pipe(switchMap((overlayRef) => merge(overlayRef.outsidePointerEvents().pipe(map((event) => () => {
-            // Клик по host обрабатывает onHostClick (toggle) — не закрываем
-            // здесь, иначе двойной toggle.
-            if (this.#elementRef.nativeElement.contains(event.target)) {
-                return;
-            }
-            this.close();
-        })), overlayRef.keydownEvents().pipe(map((event) => () => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.close();
-            }
-        })))), takeUntilDestroyed(this.#destroyRef))
-            .subscribe((handleCloseIntent) => handleCloseIntent());
-    }
-    ngOnDestroy() {
-        this.#disposeOverlay();
-    }
-    open() {
-        if (this.disabled() || this.isOpenState() || this.message().trim() === '') {
-            return;
-        }
-        const overlayRef = this.#ensureOverlay();
-        // Коробка переживает закрытие, а кусок темы вокруг host'а мог смениться — переносим на каждом открытии.
-        carryThemeScope(overlayRef.overlayElement, this.#elementRef.nativeElement);
-        const portal = new ComponentPortal(RtConfirmPopoverComponent);
-        this.#panelRef = overlayRef.attach(portal);
-        // Одним набором, а не пятью строками с именами: имя, написанное строкой, не проверяет
-        // ничто — опечатка собирается и падает на подъёме сообщением о входе, которого нет.
-        setRtComponentInputs(this.#panelRef, {
-            message: this.message(),
-            title: this.title(),
-            confirmLabel: this.label(),
-            cancelLabel: this.cancelLabel(),
-            tone: this.tone(),
-        });
-        // Подписки на accepted/cancelled объявлены один раз в конструкторе —
-        // здесь только эмит свежего ComponentRef (см. #panelAttachedSource-стрим).
-        this.#panelAttachedSource.next(this.#panelRef);
-        this.isOpenState.set(true);
-    }
-    close() {
-        if (!this.isOpenState()) {
-            return;
-        }
-        this.#overlayRef?.detach();
-        this.#panelRef = null;
-        this.isOpenState.set(false);
-    }
-    onHostClick() {
-        if (this.disabled()) {
-            return;
-        }
-        if (this.isOpenState()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    #ensureOverlay() {
-        if (this.#overlayRef !== null) {
-            return this.#overlayRef;
-        }
-        const positions = [
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-                offsetY: 6,
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-                offsetY: -6,
-            },
-        ];
-        const positionStrategy = this.#overlay
-            .position()
-            .flexibleConnectedTo(this.#elementRef)
-            .withPush(true)
-            .withViewportMargin(VIEWPORT_MARGIN)
-            .withFlexibleDimensions(false)
-            .withPositions(positions);
-        const config = new OverlayConfig({
-            positionStrategy,
-            scrollStrategy: this.#scrollStrategies.reposition(),
-            hasBackdrop: false,
-            panelClass: ['rt-confirm-popover-panel', ...materialPresetClassesOf(this.#elementRef.nativeElement)],
-        });
-        const overlayRef = this.#overlay.create(config);
-        // Outside-click / ESC подписки объявлены один раз в конструкторе —
-        // здесь только эмит созданного OverlayRef (см. #overlayCreatedSource-стрим).
-        this.#overlayCreatedSource.next(overlayRef);
-        this.#overlayRef = overlayRef;
-        return overlayRef;
-    }
-    #disposeOverlay() {
-        this.#overlayRef?.dispose();
-        this.#overlayRef = null;
-        this.#panelRef = null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtConfirmDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtConfirmDirective, isStandalone: true, selector: "[rtConfirm]", inputs: { message: { classPropertyName: "message", publicName: "rtConfirm", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "rtConfirmTitle", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "rtConfirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "rtConfirmCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "rtConfirmTone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "rtConfirmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { listeners: { "click": "onHostClick()" } }, exportAs: ["rtConfirm"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtConfirmDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtConfirm]',
-                    exportAs: 'rtConfirm',
-                    host: {
-                        '(click)': 'onHostClick()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtConfirm", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtConfirmTitle", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtConfirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtConfirmCancelLabel", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtConfirmTone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtConfirmDisabled", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtConfirmDirective = class RtConfirmDirective {
+	#overlay;
+	#elementRef;
+	#scrollStrategies;
+	#destroyRef;
+	#overlayCreatedSource;
+	#panelAttachedSource;
+	#overlayRef;
+	#panelRef;
+	constructor() {
+		this.#overlay = inject(Overlay);
+		this.#elementRef = inject(ElementRef);
+		this.#scrollStrategies = inject(ScrollStrategyOptions);
+		this.#destroyRef = inject(DestroyRef);
+		this.#overlayCreatedSource = new Subject();
+		this.#panelAttachedSource = new Subject();
+		this.#overlayRef = null;
+		this.#panelRef = null;
+		this.isOpenState = signal(false, ...ngDevMode ? [{ debugName: "isOpenState" }] : /* istanbul ignore next */ []);
+		this.message = input("", {
+			...ngDevMode ? { debugName: "message" } : /* istanbul ignore next */ {},
+			alias: "rtConfirm"
+		});
+		this.title = input(null, {
+			...ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {},
+			alias: "rtConfirmTitle"
+		});
+		this.label = input("", {
+			...ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {},
+			alias: "rtConfirmLabel"
+		});
+		this.cancelLabel = input("", {
+			...ngDevMode ? { debugName: "cancelLabel" } : /* istanbul ignore next */ {},
+			alias: "rtConfirmCancelLabel"
+		});
+		this.tone = input("danger", {
+			...ngDevMode ? { debugName: "tone" } : /* istanbul ignore next */ {},
+			alias: "rtConfirmTone"
+		});
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			alias: "rtConfirmDisabled",
+			transform: booleanAttribute
+		});
+		this.confirmed = output();
+		this.isOpen = this.isOpenState.asReadonly();
+		this.#panelAttachedSource.pipe(switchMap((panelRef) => merge(outputToObservable(panelRef.instance.accepted).pipe(map(() => () => {
+			this.confirmed.emit();
+			this.close();
+		})), outputToObservable(panelRef.instance.cancelled).pipe(map(() => () => this.close())))), takeUntilDestroyed(this.#destroyRef)).subscribe((handleCloseIntent) => handleCloseIntent());
+		this.#overlayCreatedSource.pipe(switchMap((overlayRef) => merge(overlayRef.outsidePointerEvents().pipe(map((event) => () => {
+			if (this.#elementRef.nativeElement.contains(event.target)) return;
+			this.close();
+		})), overlayRef.keydownEvents().pipe(map((event) => () => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				this.close();
+			}
+		})))), takeUntilDestroyed(this.#destroyRef)).subscribe((handleCloseIntent) => handleCloseIntent());
+	}
+	ngOnDestroy() {
+		this.#disposeOverlay();
+	}
+	open() {
+		if (this.disabled() || this.isOpenState() || this.message().trim() === "") return;
+		const overlayRef = this.#ensureOverlay();
+		carryThemeScope(overlayRef.overlayElement, this.#elementRef.nativeElement);
+		const portal = new ComponentPortal(RtConfirmPopoverComponent);
+		this.#panelRef = overlayRef.attach(portal);
+		setRtComponentInputs(this.#panelRef, {
+			message: this.message(),
+			title: this.title(),
+			confirmLabel: this.label(),
+			cancelLabel: this.cancelLabel(),
+			tone: this.tone()
+		});
+		this.#panelAttachedSource.next(this.#panelRef);
+		this.isOpenState.set(true);
+	}
+	close() {
+		if (!this.isOpenState()) return;
+		this.#overlayRef?.detach();
+		this.#panelRef = null;
+		this.isOpenState.set(false);
+	}
+	onHostClick() {
+		if (this.disabled()) return;
+		if (this.isOpenState()) this.close();
+		else this.open();
+	}
+	#ensureOverlay() {
+		if (this.#overlayRef !== null) return this.#overlayRef;
+		const positionStrategy = this.#overlay.position().flexibleConnectedTo(this.#elementRef).withPush(true).withViewportMargin(VIEWPORT_MARGIN).withFlexibleDimensions(false).withPositions([{
+			originX: "end",
+			originY: "bottom",
+			overlayX: "end",
+			overlayY: "top",
+			offsetY: 6
+		}, {
+			originX: "end",
+			originY: "top",
+			overlayX: "end",
+			overlayY: "bottom",
+			offsetY: -6
+		}]);
+		const config = new OverlayConfig({
+			positionStrategy,
+			scrollStrategy: this.#scrollStrategies.reposition(),
+			hasBackdrop: false,
+			panelClass: ["rt-confirm-popover-panel", ...materialPresetClassesOf(this.#elementRef.nativeElement)]
+		});
+		const overlayRef = this.#overlay.create(config);
+		this.#overlayCreatedSource.next(overlayRef);
+		this.#overlayRef = overlayRef;
+		return overlayRef;
+	}
+	#disposeOverlay() {
+		this.#overlayRef?.dispose();
+		this.#overlayRef = null;
+		this.#panelRef = null;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtConfirmDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtConfirmDirective,
+			isStandalone: true,
+			selector: "[rtConfirm]",
+			inputs: {
+				message: {
+					classPropertyName: "message",
+					publicName: "rtConfirm",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "rtConfirmTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "rtConfirmLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				cancelLabel: {
+					classPropertyName: "cancelLabel",
+					publicName: "rtConfirmCancelLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tone: {
+					classPropertyName: "tone",
+					publicName: "rtConfirmTone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "rtConfirmDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { confirmed: "confirmed" },
+			host: { listeners: { "click": "onHostClick()" } },
+			exportAs: ["rtConfirm"],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtConfirmDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rtConfirm]",
+			exportAs: "rtConfirm",
+			host: { "(click)": "onHostClick()" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtConfirm",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtConfirmTitle",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtConfirmLabel",
+				required: false
+			}]
+		}],
+		cancelLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtConfirmCancelLabel",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtConfirmTone",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtConfirmDisabled",
+				required: false
+			}]
+		}],
+		confirmed: [{
+			type: i0.Output,
+			args: ["confirmed"]
+		}]
+	}
+});
 export { RtConfirmDirective, RtConfirmPopoverComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-confirm-popover.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-confirm-popover.mjs.map