@mesgflow/ui-kit 0.6.0

package/fesm2022/mesgflow-ui-kit-dialog.mjs

@@ -0,0 +1,700 @@
+import { DIALOG_DATA, DialogRef, Dialog as Dialog$1 } from '@angular/cdk/dialog';
+import * as i0 from '@angular/core';
+import { signal, inject, ElementRef, input, computed, Directive, output, viewChild, effect, DestroyRef, afterNextRender, Component, Injector, Injectable } from '@angular/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { glassSurface, MF_DIALOG_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import * as i1 from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { cva } from 'class-variance-authority';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { createGlobalPositionStrategy } from '@angular/cdk/overlay';
+
+/**
+ * Dialog başına TEK instance — `DialogService.open()` her açılışta yeni bir
+ * tane üretip `options`'tan doldurur, CDK `DialogConfig.providers` ile o
+ * dialog'un (içerik component'inin) injector'ına verir. `Dialog` (dialog.ts)
+ * kendi `@Component.providers`'ında `skipSelf` ile bunu arar — bulamazsa
+ * (ör. overlay olmadan tek başına render edilen statik bir önizleme/demo)
+ * kendi yerel instance'ını üretir, hiçbir şey patlamaz.
+ *
+ * Boyut/maximize/drag/resize/sheet durumunun TAMAMI burada yaşıyor — `Dialog`
+ * kendi `@Input()`'larıyla DEĞİL, bu sınıfı okuyarak render ediyor. Böylece
+ * `DialogService.open(SomeForm, { size:'lg', maximizable:true })` gibi bir
+ * çağrı, `SomeForm`'un template'inde 1+ seviye iç içe olan `<mf-dialog>`'a
+ * DI üzerinden ulaşabiliyor (`@Input()` ile mümkün olmazdı — DialogService
+ * `Dialog`'u değil, `SomeForm`'u örnekliyor).
+ */
+class DialogSurface {
+    size = signal('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    placement = signal('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    maximizable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizable" }] : /* istanbul ignore next */ []));
+    draggable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+    resizable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    maximized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
+    /** Kullanıcı kenardan boyutlandırdıysa dolu; maximize/sheet'te yok sayılır. */
+    customSize = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customSize" }] : /* istanbul ignore next */ []));
+    /** < 640px — `DialogService` `BreakpointObserver` ile besler. */
+    sheet = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
+    /** Kapanış animasyonu oynarken `true` — bkz. `DialogService.open()` `closePredicate`. */
+    closing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []));
+    toggleMaximize() {
+        this.maximized.update((value) => !value);
+        this.customSize.set(null);
+    }
+    dirtyCheck = null;
+    /** Başarılı kayıt/programatik kapanışta `true` yapılır — bir sonraki kapanışta kirli-form uyarısı SORULMAZ. */
+    bypassDirtyGuard = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bypassDirtyGuard" }] : /* istanbul ignore next */ []));
+    /** İçerik component'i (tüketicinin kendi form component'i) kendi "kirli mi" sorusunu buraya kaydeder — `DialogSurface` formun kendi şemasını bilmez. */
+    registerDirty(check) {
+        this.dirtyCheck = check;
+    }
+    /** `DialogService.open()`'ın `closePredicate`'i ESC/backdrop/X kapanışında bunu okur. */
+    isDirty() {
+        return !this.bypassDirtyGuard() && !!this.dirtyCheck?.();
+    }
+    /** Başarılı kayıttan hemen önce çağrılır — programatik `dialogRef.close()` kirli-form uyarısı sormasın diye. */
+    markClean() {
+        this.bypassDirtyGuard.set(true);
+    }
+}
+
+const MIN_WIDTH = 320;
+const MIN_HEIGHT = 240;
+const VIEWPORT_MARGIN = 32;
+const ARROW_STEP = 16;
+const ARROW_STEP_LARGE = 64;
+/**
+ * `<button mfDialogResizeHandle [ariaLabel]="...">` — `Dialog`'un (dialog.ts)
+ * sağ-alt köşesinde, `DialogSurface.customSize`'ı besleyen serbest boyutlandırma
+ * tutamacı. Fare/dokunma İLE klavye (ok tuşları) İKİSİ de destekleniyor —
+ * projects/ui-kit/README.md "a11y checklist" bölümü "sadece fareyle çalışan bir
+ * tutamaç"ı kabul etmiyor.
+ */
+class DialogResizeHandle {
+    surface = inject(DialogSurface);
+    host = inject(ElementRef);
+    ariaLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** `role="slider"` `aria-valuenow` zorunlu kılıyor (axe: `aria-required-attr`) — genişliği raporlar, özel boyut yoksa panelin ölçülen genişliğine, o da yoksa `MIN_WIDTH`'e düşer. */
+    ariaValueNow = computed(() => this.surface.customSize()?.width ?? this.panelRect()?.width ?? MIN_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
+    pointerId = null;
+    startX = 0;
+    startY = 0;
+    startWidth = 0;
+    startHeight = 0;
+    onPointerDown(event) {
+        if (event.button !== 0)
+            return;
+        const rect = this.panelRect();
+        if (!rect)
+            return;
+        this.pointerId = event.pointerId;
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+        this.startWidth = this.surface.customSize()?.width ?? rect.width;
+        this.startHeight = this.surface.customSize()?.height ?? rect.height;
+        this.host.nativeElement.setPointerCapture(event.pointerId);
+        event.preventDefault();
+    }
+    onPointerMove(event) {
+        if (this.pointerId !== event.pointerId)
+            return;
+        this.applySize(this.startWidth + (event.clientX - this.startX), this.startHeight + (event.clientY - this.startY));
+    }
+    onPointerUp(event) {
+        if (this.pointerId !== event.pointerId)
+            return;
+        this.pointerId = null;
+    }
+    onKeydown(event) {
+        const rect = this.panelRect();
+        const current = this.surface.customSize() ?? {
+            width: rect?.width ?? MIN_WIDTH,
+            height: rect?.height ?? MIN_HEIGHT,
+        };
+        const step = event.shiftKey ? ARROW_STEP_LARGE : ARROW_STEP;
+        switch (event.key) {
+            case 'ArrowRight':
+                this.applySize(current.width + step, current.height);
+                break;
+            case 'ArrowLeft':
+                this.applySize(current.width - step, current.height);
+                break;
+            case 'ArrowDown':
+                this.applySize(current.width, current.height + step);
+                break;
+            case 'ArrowUp':
+                this.applySize(current.width, current.height - step);
+                break;
+            case 'Home':
+                this.surface.customSize.set(null);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    panelRect() {
+        return (this.host.nativeElement.closest('.cdk-overlay-pane')?.getBoundingClientRect() ??
+            null);
+    }
+    applySize(width, height) {
+        const maxWidth = window.innerWidth - VIEWPORT_MARGIN;
+        const maxHeight = window.innerHeight - VIEWPORT_MARGIN;
+        this.surface.customSize.set({
+            width: Math.min(Math.max(width, MIN_WIDTH), maxWidth),
+            height: Math.min(Math.max(height, MIN_HEIGHT), maxHeight),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DialogResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: DialogResizeHandle, isStandalone: true, selector: "[mfDialogResizeHandle]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "ariaValueNow()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DialogResizeHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfDialogResizeHandle]',
+                    host: {
+                        role: 'slider',
+                        tabindex: '0',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-valuenow]': 'ariaValueNow()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerUp($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
+
+/**
+ * Boyut ölçeği CSS `min()` ile viewport'a göre kendini sınırlıyor —
+ * `max-w-[560px]` gibi ayrı bir "hiçbir zaman viewport'tan taşma" class'ıyla
+ * `cn()`/tailwind-merge üzerinden birleştirilemezdi (ikisi aynı utility
+ * grubu — `max-width` — sonuncusu kazanır, ikisi birden UYGULANMAZ). Tek
+ * arbitrary value'da `min(N, 100vw-2rem)` ile ikisi birden garanti ediliyor.
+ *
+ * `state` (normal/maximized/sheet/drawer) boyut eksenine dik, tek-seçim bir eksen —
+ * `Dialog` (dialog.ts) `DialogSurface`'ten okuyup hesaplıyor, tüketici
+ * tarafından doğrudan set edilmiyor. `drawer` boyut ölçeğini (sm/md/lg/xl)
+ * `normal` ile PAYLAŞIR ama genişliği AYNI şekilde uygulamaz — aşağıdaki
+ * `compoundVariants`'a bak.
+ *
+ * **`drawer` neden `width` de alıyor, `max-width` yetmiyor mu**: sağa yaslı
+ * `GlobalPositionStrategy` (`dialog.service.ts`) overlay wrapper'a
+ * `align-items:flex-start` veriyor — bu, cross-axis stretch'i KAPATIYOR, yani
+ * `.cdk-overlay-pane` içeriğine göre daralıyor (shrink-to-fit). Böyle bir
+ * (genişliği belirsiz/auto) kapsayıcı içinde `mf-dialog`'un tabandaki
+ * `w-full`'u (`width:100%`) CSS Sizing L3'e göre `width:auto`'ya döner —
+ * yani panel `max-w-[min(N,...)]` TAVANINA hiç ulaşmadan, içeriğin doğal
+ * genişliğinde kalır. `normal` (ortada yüzen) dialog için bu doğru davranış
+ * (kısa bir onay kutusu tavana kadar zorla GENİŞLEMEMELİ), ama drawer için
+ * YANLIŞ — üç CRUD formu içerik uzunluğuna göre üç farklı genişlikte açılırdı
+ * (gerçek, gözlemlenen bir regresyon). Çözüm: `calc(100vw-2rem)` viewport'a
+ * göre DEFINITE bir uzunluk — parent'ın genişliği belirsiz olsa bile bu
+ * paradoksu atlıyor. `width` + `max-width` aynı ifadeyi taşıdığı için
+ * `max-width` drawer'da fiilen artık gereksiz ama zararsız kalıyor.
+ *
+ * **`maximized` neden kendi `max-w-none`'ını taşıyor**: `size` (sm/md/lg/xl)
+ * her zaman uygulanır, `state` ondan BAĞIMSIZ bir eksendir — `maximized` kendi
+ * `max-w-none`'ını taşımazsa, `size`'ın `max-w-[min(N,...)]`'i (aynı `max-width`
+ * grubu, ama `size` `state`'ten ÖNCE değerlendirildiği için `state` sonuncusu
+ * kazanmadıkça) tek başına kalır ve `w-screen`'i geçersiz kılar — gerçek,
+ * gözlemlenen bir regresyon: `maximizable:true, size:'lg'` bir dialog
+ * büyütüldüğünde yükseklik `h-[100dvh]`'e ulaşırken genişlik hâlâ `lg`'nin
+ * 720px tavanına sıkışıp kalıyordu ("kenarlar kısa, sadece boyu uzuyor").
+ */
+/**
+ * Panel yüzeyi `glassSurface` (bkz. `@mesgflow/ui-kit/core` — mikro
+ * glassmorphism, 2026-09 Deep Emerald geçişi): arkadaki içerik `backdrop-blur`
+ * destekleyen tarayıcılarda hafifçe görünür kalır, backdrop
+ * (`.mf-dialog-backdrop`, motion.css) ayrıca karartıyor. `maximized` durumu
+ * TAM VIEWPORT'u kapladığı için (arkasında blur'lanacak sayfa içeriği yok,
+ * sadece backdrop) camı KAPATIP düz `bg-surface`'e döner — hem maliyetsiz hem
+ * anlamsız bir blur'dan kaçınır.
+ */
+const dialogVariants = cva(`relative flex w-full flex-col overflow-hidden border shadow-3 ${glassSurface}`, {
+    variants: {
+        size: {
+            sm: 'max-w-[min(440px,calc(100vw-2rem))]',
+            md: 'max-w-[min(560px,calc(100vw-2rem))]',
+            lg: 'max-w-[min(720px,calc(100vw-2rem))]',
+            xl: 'max-w-[min(960px,calc(100vw-2rem))]',
+            full: 'max-w-none',
+        },
+        state: {
+            normal: 'rounded-xl max-h-[85vh]',
+            maximized: 'h-[100dvh] max-h-none w-screen max-w-none rounded-none supports-[backdrop-filter]:bg-surface supports-[backdrop-filter]:backdrop-blur-none',
+            sheet: 'w-screen rounded-t-xl rounded-b-none max-h-[92dvh]',
+            drawer: 'h-[100dvh] max-h-none rounded-l-xl rounded-r-none',
+        },
+    },
+    compoundVariants: [
+        { state: 'drawer', size: 'sm', class: 'w-[min(440px,calc(100vw-2rem))]' },
+        { state: 'drawer', size: 'md', class: 'w-[min(560px,calc(100vw-2rem))]' },
+        { state: 'drawer', size: 'lg', class: 'w-[min(720px,calc(100vw-2rem))]' },
+        { state: 'drawer', size: 'xl', class: 'w-[min(960px,calc(100vw-2rem))]' },
+    ],
+    defaultVariants: { size: 'md', state: 'normal' },
+});
+
+const DRAG_MIN_VISIBLE = 48;
+/**
+ * `<mf-dialog [title]="..." [subtitle]="..." [icon]="'group'" (close)="onCancel()">`
+ * — `DialogService.open()`'ın açtığı her içerik component'i (tüketicinin kendi
+ * form component'i, ör. `ConfirmDialog`) kendi kök elemanı olarak bunu kullanır. CDK Dialog'un
+ * kendisi (bkz. dialog.service.ts) hiçbir görsel çerçeve DAYATMIYOR (backdrop hariç) —
+ * panel görünümü (yuvarlak köşe/gölge/header/footer/kapatma düğmesi) TAMAMEN burada,
+ * tek yerde yaşıyor.
+ *
+ * Boyut/placement/maximize/drag/resize/sheet durumu kendi `@Input()`'ları DEĞİL,
+ * `DialogSurface` (DI ile enjekte edilir) — bkz. o dosyanın doc yorumu. `title`/
+ * `subtitle`/`icon`/`fillBody` ise İÇERİĞE ait olduğu için normal input —
+ * `[dialog-header]` slot'u tamamen özel bir başlık gerektiren durumlar için (bkz.
+ * ConfirmDialog) kaçış kapısı olarak kalıyor.
+ *
+ * `stateVariant()` sırası (sheet → maximized → drawer → normal) bilinçli: mobil
+ * sheet her zaman kazanır, ardından drag/resize/mobil-sheet'in yalnızca `normal`'da
+ * açık olması (bkz. `dragEnabled`/`resizeHandleVisible`) drawer'da bu ikisinin
+ * otomatik kapalı kalmasını BEDAVA sağlıyor — ayrı bir kontrol gerekmiyor.
+ */
+class Dialog {
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Sadece `DialogSurface` DI ile enjekte edilmediğinde (ör. statik bir önizleme/demo) etkili — gerçek dialog'larda `DialogService.open({ size })` kullanılır. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` ise gövde kendi kaydırmasını KAPATIR (`overflow:hidden`) ve kalan
+     * yüksekliği içeriğe `flex-1` ile devreder — içeriğin KENDİ tek scroll alanını
+     * kurması beklenir (ör. uzun bir liste içeren bir form). "Tek kaydırma bölgesi"
+     * kuralının uygulama noktası: dialog gövdesi + içerik aynı anda kaymaz.
+     */
+    fillBody = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillBody" }] : /* istanbul ignore next */ []));
+    // `close` adı native DOM `close` olayıyla çakışıyor (@angular-eslint/no-output-native);
+    // mevcut public API — yeniden adlandırma kırıcı, ileri bir sürümde ele alınacak.
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    close = output();
+    surface = inject(DialogSurface);
+    labels = inject(MF_DIALOG_LABELS);
+    elementRef = inject(ElementRef);
+    cdkDrag = inject(CdkDrag, { self: true });
+    scrollBody = viewChild('scrollBody', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollBody" }] : /* istanbul ignore next */ []));
+    scrolledFromTop = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrolledFromTop" }] : /* istanbul ignore next */ []));
+    hasMoreBelow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMoreBelow" }] : /* istanbul ignore next */ []));
+    stateVariant = computed(() => {
+        if (this.surface.sheet())
+            return 'sheet';
+        if (this.surface.maximized() || this.size() === 'full')
+            return 'maximized';
+        if (this.surface.placement() === 'right')
+            return 'drawer';
+        return 'normal';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateVariant" }] : /* istanbul ignore next */ []));
+    dragEnabled = computed(() => this.surface.draggable() && this.stateVariant() === 'normal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragEnabled" }] : /* istanbul ignore next */ []));
+    resizeHandleVisible = computed(() => this.surface.resizable() && this.stateVariant() === 'normal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeHandleVisible" }] : /* istanbul ignore next */ []));
+    /** Drawer zaten tam yükseklik — büyütme düğmesinin anlamı yok, `surface.maximizable()` `true` olsa bile gizlenir. */
+    maximizeVisible = computed(() => this.surface.maximizable() && this.stateVariant() !== 'drawer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeVisible" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const closing = this.surface.closing();
+        const state = this.stateVariant();
+        const animateBase = state === 'sheet' ? 'sheet' : state === 'drawer' ? 'drawer' : 'dialog';
+        return cn(dialogVariants({ size: this.size() ?? this.surface.size(), state }), state === 'normal' && this.surface.customSize() ? 'max-w-none max-h-none' : '', `animate-${animateBase}-${closing ? 'out' : 'in'}`);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    customWidth = computed(() => this.stateVariant() === 'normal' ? this.surface.customSize()?.width : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customWidth" }] : /* istanbul ignore next */ []));
+    customHeight = computed(() => this.stateVariant() === 'normal' ? this.surface.customSize()?.height : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customHeight" }] : /* istanbul ignore next */ []));
+    /** Kenara/tam ekrana yaslı yüzeyler (drawer, mobil sheet, maximized): bölgeler KALICI
+     *  çizgiyle ayrılır — header/content/footer iskeleti her zaman aynı görünür. Ortada
+     *  yüzen klasik dialog (`normal`, ör. ConfirmDialog) bugünkü kaydırma-gölgesi davranışını
+     *  korur — kısa bir onay kutusu gereksiz çizgi kazanmaz. */
+    framed = computed(() => this.stateVariant() !== 'normal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "framed" }] : /* istanbul ignore next */ []));
+    headerBorder = computed(() => this.framed() || this.scrolledFromTop(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerBorder" }] : /* istanbul ignore next */ []));
+    footerBorder = computed(() => this.framed() || this.hasMoreBelow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerBorder" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.cdkDrag.rootElementSelector = '.cdk-overlay-pane';
+        this.cdkDrag.constrainPosition = (point, _dragRef, dimensions) => ({
+            x: Math.min(Math.max(point.x, DRAG_MIN_VISIBLE - dimensions.width), window.innerWidth - DRAG_MIN_VISIBLE),
+            y: Math.min(Math.max(point.y, 0), window.innerHeight - DRAG_MIN_VISIBLE),
+        });
+        effect(() => {
+            this.cdkDrag.disabled = !this.dragEnabled();
+        });
+        effect(() => {
+            if (this.surface.maximized() || this.surface.sheet()) {
+                this.cdkDrag.reset();
+                this.surface.customSize.set(null);
+            }
+        });
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            this.updateScrollShadow();
+            const el = this.scrollBody()?.nativeElement;
+            if (!el || typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(() => this.updateScrollShadow());
+            observer.observe(el);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    updateScrollShadow() {
+        const el = this.scrollBody()?.nativeElement;
+        if (!el)
+            return;
+        this.scrolledFromTop.set(el.scrollTop > 1);
+        this.hasMoreBelow.set(el.scrollHeight - el.clientHeight - el.scrollTop > 1);
+    }
+    /**
+     * Ctrl/Cmd+Enter — tek yerde çözülür, her form bedava kazanır. Kaydet düğmesi
+     * footer slot'unda `<form>`'un DIŞINDA yaşıyor (`form="role-form"` attribute
+     * ilişkilendirmesiyle çalışıyor) — bu yüzden düğmeye tıklamayı taklit etmek
+     * yerine doğrudan `<form>` üzerinde `requestSubmit()` çağrılıyor; bu da native
+     * kısıt doğrulamasını çalıştırıp mevcut `(submit)` bağlamasını tetikler.
+     */
+    requestSubmit() {
+        this.elementRef.nativeElement.querySelector('form')?.requestSubmit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Dialog, isStandalone: true, selector: "mf-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fillBody: { classPropertyName: "fillBody", publicName: "fillBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { listeners: { "keydown.control.enter": "requestSubmit()", "keydown.meta.enter": "requestSubmit()" }, properties: { "class": "hostClasses()", "style.width.px": "customWidth()", "style.height.px": "customHeight()" } }, providers: [
+            {
+                provide: DialogSurface,
+                useFactory: () => inject(DialogSurface, { optional: true, skipSelf: true }) ?? new DialogSurface(),
+            },
+        ], viewQueries: [{ propertyName: "scrollBody", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }], exportAs: ["mfDialog"], hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: "<div\r\n  class=\"flex shrink-0 items-start justify-between gap-3 px-6 pt-5 pb-4\"\r\n  [class.border-b]=\"headerBorder()\"\r\n  [class.border-border]=\"headerBorder()\"\r\n>\r\n  <ng-content select=\"[dialog-header]\">\r\n    @if (icon()) {\r\n      <span\r\n        class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface-alt text-fg-muted\"\r\n      >\r\n        <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n      </span>\r\n    }\r\n    <div\r\n      cdkDragHandle\r\n      class=\"min-w-0 flex-1 pt-0.5\"\r\n      [class.cursor-grab]=\"dragEnabled()\"\r\n      [class.active:cursor-grabbing]=\"dragEnabled()\"\r\n    >\r\n      @if (title()) {\r\n        <h2 class=\"truncate font-display text-title text-fg\">{{ title() }}</h2>\r\n      }\r\n      @if (subtitle()) {\r\n        <p class=\"mt-0.5 truncate text-sm text-fg-muted\">{{ subtitle() }}</p>\r\n      }\r\n    </div>\r\n  </ng-content>\r\n\r\n  <div class=\"flex shrink-0 items-center gap-1\">\r\n    @if (maximizeVisible()) {\r\n      <button\r\n        mfButton\r\n        appearance=\"text\"\r\n        tone=\"neutral\"\r\n        size=\"icon\"\r\n        shape=\"square\"\r\n        type=\"button\"\r\n        [attr.aria-label]=\"surface.maximized() ? labels().fullscreenExit : labels().fullscreenEnter\"\r\n        (click)=\"surface.toggleMaximize()\"\r\n      >\r\n        <span mfIcon [size]=\"18\">{{ surface.maximized() ? 'fullscreen_exit' : 'fullscreen' }}</span>\r\n      </button>\r\n    }\r\n    <button\r\n      mfButton\r\n      appearance=\"text\"\r\n      tone=\"neutral\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"labels().close\"\r\n      (click)=\"close.emit()\"\r\n    >\r\n      <span mfIcon [size]=\"20\">close</span>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  #scrollBody\r\n  class=\"flex-1 min-h-0 px-6\"\r\n  [class.py-4]=\"framed()\"\r\n  [class.overflow-y-auto]=\"!fillBody()\"\r\n  [class.flex]=\"fillBody()\"\r\n  [class.flex-col]=\"fillBody()\"\r\n  [class.overflow-hidden]=\"fillBody()\"\r\n  (scroll)=\"updateScrollShadow()\"\r\n>\r\n  <ng-content />\r\n</div>\r\n\r\n<div\r\n  class=\"shrink-0 px-6 py-4 [&:not(:has(*))]:hidden\"\r\n  [class.border-t]=\"footerBorder()\"\r\n  [class.border-border]=\"footerBorder()\"\r\n>\r\n  <ng-content select=\"[dialog-footer]\" />\r\n</div>\r\n\r\n@if (resizeHandleVisible()) {\r\n  <button\r\n    mfDialogResizeHandle\r\n    type=\"button\"\r\n    [ariaLabel]=\"labels().resize\"\r\n    class=\"absolute right-1 bottom-1 flex h-4 w-4 cursor-se-resize items-center justify-center rounded-xs text-fg-subtle hover:text-fg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n  >\r\n    <span mfIcon [size]=\"14\">south_east</span>\r\n  </button>\r\n}\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: DialogResizeHandle, selector: "[mfDialogResizeHandle]", inputs: ["ariaLabel"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Dialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-dialog', exportAs: 'mfDialog', imports: [Button, Icon, DialogResizeHandle, CdkDragHandle], hostDirectives: [CdkDrag], providers: [
+                        {
+                            provide: DialogSurface,
+                            useFactory: () => inject(DialogSurface, { optional: true, skipSelf: true }) ?? new DialogSurface(),
+                        },
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                        '[style.width.px]': 'customWidth()',
+                        '[style.height.px]': 'customHeight()',
+                        '(keydown.control.enter)': 'requestSubmit()',
+                        '(keydown.meta.enter)': 'requestSubmit()',
+                    }, template: "<div\r\n  class=\"flex shrink-0 items-start justify-between gap-3 px-6 pt-5 pb-4\"\r\n  [class.border-b]=\"headerBorder()\"\r\n  [class.border-border]=\"headerBorder()\"\r\n>\r\n  <ng-content select=\"[dialog-header]\">\r\n    @if (icon()) {\r\n      <span\r\n        class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface-alt text-fg-muted\"\r\n      >\r\n        <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n      </span>\r\n    }\r\n    <div\r\n      cdkDragHandle\r\n      class=\"min-w-0 flex-1 pt-0.5\"\r\n      [class.cursor-grab]=\"dragEnabled()\"\r\n      [class.active:cursor-grabbing]=\"dragEnabled()\"\r\n    >\r\n      @if (title()) {\r\n        <h2 class=\"truncate font-display text-title text-fg\">{{ title() }}</h2>\r\n      }\r\n      @if (subtitle()) {\r\n        <p class=\"mt-0.5 truncate text-sm text-fg-muted\">{{ subtitle() }}</p>\r\n      }\r\n    </div>\r\n  </ng-content>\r\n\r\n  <div class=\"flex shrink-0 items-center gap-1\">\r\n    @if (maximizeVisible()) {\r\n      <button\r\n        mfButton\r\n        appearance=\"text\"\r\n        tone=\"neutral\"\r\n        size=\"icon\"\r\n        shape=\"square\"\r\n        type=\"button\"\r\n        [attr.aria-label]=\"surface.maximized() ? labels().fullscreenExit : labels().fullscreenEnter\"\r\n        (click)=\"surface.toggleMaximize()\"\r\n      >\r\n        <span mfIcon [size]=\"18\">{{ surface.maximized() ? 'fullscreen_exit' : 'fullscreen' }}</span>\r\n      </button>\r\n    }\r\n    <button\r\n      mfButton\r\n      appearance=\"text\"\r\n      tone=\"neutral\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"labels().close\"\r\n      (click)=\"close.emit()\"\r\n    >\r\n      <span mfIcon [size]=\"20\">close</span>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  #scrollBody\r\n  class=\"flex-1 min-h-0 px-6\"\r\n  [class.py-4]=\"framed()\"\r\n  [class.overflow-y-auto]=\"!fillBody()\"\r\n  [class.flex]=\"fillBody()\"\r\n  [class.flex-col]=\"fillBody()\"\r\n  [class.overflow-hidden]=\"fillBody()\"\r\n  (scroll)=\"updateScrollShadow()\"\r\n>\r\n  <ng-content />\r\n</div>\r\n\r\n<div\r\n  class=\"shrink-0 px-6 py-4 [&:not(:has(*))]:hidden\"\r\n  [class.border-t]=\"footerBorder()\"\r\n  [class.border-border]=\"footerBorder()\"\r\n>\r\n  <ng-content select=\"[dialog-footer]\" />\r\n</div>\r\n\r\n@if (resizeHandleVisible()) {\r\n  <button\r\n    mfDialogResizeHandle\r\n    type=\"button\"\r\n    [ariaLabel]=\"labels().resize\"\r\n    class=\"absolute right-1 bottom-1 flex h-4 w-4 cursor-se-resize items-center justify-center rounded-xs text-fg-subtle hover:text-fg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n  >\r\n    <span mfIcon [size]=\"14\">south_east</span>\r\n  </button>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fillBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillBody", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], scrollBody: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }] } });
+
+const TONE_ICON = {
+    danger: 'warning',
+    warning: 'warning',
+    info: 'info',
+    success: 'check_circle',
+    neutral: 'help',
+};
+/** Rozet renkleri Badge'in `badge.variants.ts`'teki tonal işaret rol token'ını (`bg-X-tint text-X-tint-fg`) birebir izliyor. */
+const TONE_BADGE_CLASS = {
+    danger: 'bg-danger-tint text-danger-tint-fg',
+    warning: 'bg-warning-tint text-warning-tint-fg',
+    info: 'bg-info-tint text-info-tint-fg',
+    success: 'bg-success-tint text-success-tint-fg',
+    neutral: 'bg-surface-alt text-fg-muted',
+};
+/**
+ * Onay diyaloğunun içerik component'i — `DialogService.confirm()`/`confirmDelete()`/
+ * `alert()` (bkz. dialog.service.ts) bunu açıp `DialogRef<boolean>`'ı `Promise`'e
+ * çeviriyor. `Dialog`'un (dialog.ts) `[dialog-header]` kaçış kapısını kullanıyor —
+ * ton'a göre renkli ikon rozeti, generic `Dialog`'un kendi `[icon]` input'unun
+ * desteklemediği bir şey (o sadece nötr bir rozet çizer), bu yüzden kendi başlığını
+ * kendi çiziyor.
+ */
+class ConfirmDialog {
+    data = inject(DIALOG_DATA);
+    dialogRef = inject((DialogRef));
+    labels = inject(MF_DIALOG_LABELS);
+    tone = computed(() => this.data.tone ?? 'neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    toneIcon = computed(() => TONE_ICON[this.tone()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toneIcon" }] : /* istanbul ignore next */ []));
+    toneBadgeClass = computed(() => TONE_BADGE_CLASS[this.tone()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toneBadgeClass" }] : /* istanbul ignore next */ []));
+    /** Her ton `filled` — warning da diğer tonlarla aynı `bg-X-fill` rol deseninde dolu blok kullanıyor (bkz. button.variants.ts), eski `outlined` istisnası kaldırıldı. */
+    confirmTone = computed(() => {
+        const tone = this.tone();
+        if (tone === 'danger')
+            return 'danger';
+        if (tone === 'warning')
+            return 'warning';
+        return 'primary';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmTone" }] : /* istanbul ignore next */ []));
+    submitting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+    actionError = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionError" }] : /* istanbul ignore next */ []));
+    onCancel() {
+        this.dialogRef.close(false);
+    }
+    async onConfirm() {
+        if (!this.data.action) {
+            this.dialogRef.close(true);
+            return;
+        }
+        this.submitting.set(true);
+        this.actionError.set(null);
+        this.dialogRef.disableClose = true;
+        try {
+            await this.data.action();
+            this.dialogRef.close(true);
+        }
+        catch {
+            this.actionError.set(this.labels().errorGeneric);
+        }
+        finally {
+            this.submitting.set(false);
+            this.dialogRef.disableClose = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ConfirmDialog, isStandalone: true, selector: "mf-confirm-dialog", host: { classAttribute: "contents" }, ngImport: i0, template: "<mf-dialog size=\"sm\" (close)=\"onCancel()\">\r\n  <div dialog-header class=\"flex items-start gap-3\">\r\n    <span\r\n      class=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md\"\r\n      [class]=\"toneBadgeClass()\"\r\n    >\r\n      <span mfIcon [size]=\"22\">{{ toneIcon() }}</span>\r\n    </span>\r\n    <div class=\"min-w-0 flex-1 pt-1.5\">\r\n      <h2 class=\"truncate font-display text-title text-fg\">{{ data.title }}</h2>\r\n    </div>\r\n  </div>\r\n\r\n  <p class=\"text-sm text-fg-muted\">{{ data.content }}</p>\r\n\r\n  @if (actionError()) {\r\n    <p class=\"mt-3 text-sm text-danger\">{{ actionError() }}</p>\r\n  }\r\n\r\n  <div dialog-footer class=\"flex justify-end gap-2\">\r\n    @if (!data.alert) {\r\n      <button\r\n        mfButton\r\n        appearance=\"outlined\"\r\n        tone=\"neutral\"\r\n        type=\"button\"\r\n        [disabled]=\"submitting()\"\r\n        (click)=\"onCancel()\"\r\n      >\r\n        {{ data.cancelLabel ?? labels().confirmCancel }}\r\n      </button>\r\n    }\r\n    <button\r\n      mfButton\r\n      [tone]=\"confirmTone()\"\r\n      appearance=\"filled\"\r\n      type=\"button\"\r\n      [disabled]=\"submitting()\"\r\n      (click)=\"onConfirm()\"\r\n    >\r\n      @if (submitting()) {\r\n        <span mfIcon [size]=\"16\" class=\"animate-spin\">progress_activity</span>\r\n      }\r\n      {{ data.confirmLabel ?? (data.alert ? labels().confirmOk : labels().confirmConfirm) }}\r\n    </button>\r\n  </div>\r\n</mf-dialog>\r\n", dependencies: [{ kind: "component", type: Dialog, selector: "mf-dialog", inputs: ["title", "subtitle", "icon", "size", "fillBody"], outputs: ["close"], exportAs: ["mfDialog"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-confirm-dialog', imports: [Dialog, Button, Icon], host: { class: 'contents' }, template: "<mf-dialog size=\"sm\" (close)=\"onCancel()\">\r\n  <div dialog-header class=\"flex items-start gap-3\">\r\n    <span\r\n      class=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md\"\r\n      [class]=\"toneBadgeClass()\"\r\n    >\r\n      <span mfIcon [size]=\"22\">{{ toneIcon() }}</span>\r\n    </span>\r\n    <div class=\"min-w-0 flex-1 pt-1.5\">\r\n      <h2 class=\"truncate font-display text-title text-fg\">{{ data.title }}</h2>\r\n    </div>\r\n  </div>\r\n\r\n  <p class=\"text-sm text-fg-muted\">{{ data.content }}</p>\r\n\r\n  @if (actionError()) {\r\n    <p class=\"mt-3 text-sm text-danger\">{{ actionError() }}</p>\r\n  }\r\n\r\n  <div dialog-footer class=\"flex justify-end gap-2\">\r\n    @if (!data.alert) {\r\n      <button\r\n        mfButton\r\n        appearance=\"outlined\"\r\n        tone=\"neutral\"\r\n        type=\"button\"\r\n        [disabled]=\"submitting()\"\r\n        (click)=\"onCancel()\"\r\n      >\r\n        {{ data.cancelLabel ?? labels().confirmCancel }}\r\n      </button>\r\n    }\r\n    <button\r\n      mfButton\r\n      [tone]=\"confirmTone()\"\r\n      appearance=\"filled\"\r\n      type=\"button\"\r\n      [disabled]=\"submitting()\"\r\n      (click)=\"onConfirm()\"\r\n    >\r\n      @if (submitting()) {\r\n        <span mfIcon [size]=\"16\" class=\"animate-spin\">progress_activity</span>\r\n      }\r\n      {{ data.confirmLabel ?? (data.alert ? labels().confirmOk : labels().confirmConfirm) }}\r\n    </button>\r\n  </div>\r\n</mf-dialog>\r\n" }]
+        }] });
+
+/** `--duration-fast` (styles.css) ile birebir — `animate-dialog-out`/`animate-sheet-out` keyframe'lerinin süresi. */
+const EXIT_MS = 120;
+const SHEET_QUERY = '(max-width: 639.98px)';
+function normalizeClass(value) {
+    if (!value)
+        return [];
+    return Array.isArray(value) ? value : [value];
+}
+/**
+ * Dialog açmanın tek, merkezi noktası — `@angular/cdk/dialog`'un `Dialog`
+ * servisi ÜZERİNE ince bir katman (focus-trap/ESC/backdrop-click/geri-scroll-
+ * engelleme davranışının TAMAMI CDK'dan geliyor, burada TEKRAR YAZILMADI — bkz.
+ * projects/ui-kit/README.md "a11y checklist" bölümündeki "elle yazmak son çare" ilkesi).
+ *
+ * İçerik component'i (tüketicinin kendi form component'i, ör. `ConfirmDialog`) `@angular/cdk/dialog`'un
+ * KENDİ `DIALOG_DATA`/`DialogRef` token'larını doğrudan `inject()` eder — ekstra bir
+ * sarmalayıcı token'a gerek yok. Boyut/placement/maximize/drag/resize/sheet durumu
+ * `DialogSurface` (bkz. o dosya) üzerinden, `providers` ile o dialog'un injector'ına
+ * verilir — `Dialog` (dialog.ts) bunu DI'dan okuyarak render eder.
+ *
+ * **Tek kural**: kayıt oluştur/düzenle → `openDrawer()` (sağdan, `placement:'right'`);
+ * onayla/bilgilendir/sil → `confirm()`/`confirmDelete()`/`alert()` (merkezi, `size:'sm'`).
+ * Drawer ayrı bir primitif DEĞİL — `placement` sadece konum stratejisini ve
+ * `Dialog.stateVariant()`'ı değiştiren bir eksen, geri kalan her şey (CDK Dialog,
+ * closePredicate, kirli-form koruması, mobil sheet, kaydırma gölgesi) ortak.
+ *
+ * Kapanış animasyonu: CDK'nın `DialogRef.close()`'u `overlayRef.dispose()`'u SENKRON
+ * çağırıyor, bir "kapanıyor" olayı/kancası yok. `closePredicate` bunun için bilinçli
+ * bir kaçamak — `false` döndürmek kapanmayı iptal ediyor: ilk çağrıda `surface.closing`'i
+ * `true` yapıp gerçek kapanmayı `EXIT_MS` geciktiriyoruz (panel bu sürede `Dialog`'un
+ * kendi reaktif `animate-dialog-out`/`animate-sheet-out`/`animate-drawer-out` class'ıyla
+ * görsel olarak kapanır), ikinci çağrıda (zaten `closing()===true`) gerçek `dispose()`'a
+ * izin veriyoruz. ESC/backdrop/programatik `dialogRef.close(...)` HEPSİ bu predicate'ten
+ * geçtiği için davranış tekdüze. `prefers-reduced-motion` gecikmeyi tamamen atlıyor —
+ * AMA kirli-form kontrolünden SONRA: koruma reduced-motion kullanıcılarında da çalışmalı.
+ *
+ * **Kirli form koruması**: `surface.isDirty()` `true` dönerse kapanış iptal edilip
+ * `confirmDiscard()` (kendi içindeki `ConfirmDialog`, ayrı/temiz bir `DialogSurface`
+ * ile) açılır; kullanıcı onaylarsa `surface.markClean()` + gerçek `close()`. İçerik
+ * component'i `constructor()`'da `surface.registerDirty(() => ...)` ile kendi
+ * "değişti mi" sorusunu kaydeder.
+ */
+class DialogService {
+    cdkDialog = inject(Dialog$1);
+    injector = inject(Injector);
+    breakpointObserver = inject(BreakpointObserver);
+    labels = inject(MF_DIALOG_LABELS);
+    /** `ref` başına `DialogSurface` — tüketicinin kendi URL senkronizasyon mantığı, kirli-form durumunu PROAKTİF sormak için kullanabilir (kendi `closePredicate`'inin async akışıyla yarışmamak için). */
+    // `DialogRef<D, C>`'nin `config.providers` callback'i kendi generic'lerine yapısal
+    // olarak döngüsel referans veriyor (bkz. @angular/cdk/dialog) — `unknown` kullanmak
+    // `ref`'i somut `DialogRef<R, C>` tipiyle çağıran DIŞARIDAKİ tüketicileri (public API)
+    // derleme zamanında kırar. Registry nesne KİMLİĞİNE göre çalışıyor, tür parametreleri
+    // ilgisiz; `any` burada BİLEREK.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    surfaces = new WeakMap();
+    open(component, options) {
+        const surface = new DialogSurface();
+        const placement = options?.placement ?? 'center';
+        surface.size.set(options?.size ?? 'md');
+        surface.placement.set(placement);
+        surface.maximizable.set(options?.maximizable ?? false);
+        surface.draggable.set(options?.draggable ?? false);
+        surface.resizable.set(options?.resizable ?? false);
+        const position = createGlobalPositionStrategy(this.injector);
+        if (placement === 'right')
+            position.right('0').top('0');
+        else
+            position.centerHorizontally().centerVertically();
+        const reducedMotion = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const ref = this.cdkDialog.open(component, {
+            data: options?.data,
+            panelClass: normalizeClass(options?.panelClass),
+            backdropClass: 'mf-dialog-backdrop',
+            positionStrategy: position,
+            autoFocus: 'first-tabbable',
+            restoreFocus: true,
+            disableClose: options?.disableClose ?? false,
+            // CDK'nın kendi tarayıcı geri/ileri tuşu dinleyicisi (varsayılan `true`) —
+            // tüketici derin-bağlantı/URL senkronizasyonunu KENDİ route effect'i
+            // üzerinden yönetiyorsa (kirli-form kontrolü + confirmDiscard + URL
+            // senkronu dahil), CDK'nın PARALEL ve koordinasyonsuz kendi `close()`
+            // çağrısı (kendi closePredicate'inden geçerek KENDİ confirmDiscard'ını
+            // açar) tüketicininkiyle AYNI ANDA iki ayrı "Kaydedilmemiş değişiklikler"
+            // onayı açılmasına yol açabilir — gerçek bir kullanıcı senaryosunda
+            // tekrarlanan, doğrulanmış bir çakışma.
+            closeOnNavigation: false,
+            ariaLabel: options?.ariaLabel,
+            providers: [{ provide: DialogSurface, useValue: surface }],
+            closePredicate: (result) => {
+                // Çıkış animasyonu turu — ikinci çağrı, gerçek dispose'a izin ver.
+                if (surface.closing())
+                    return true;
+                // Kirli form koruması `reducedMotion`'DAN ÖNCE kontrol edilir — aksi halde
+                // "animasyonu azalt" açık kullanıcılarda bu koruma hiç çalışmazdı.
+                if (surface.isDirty()) {
+                    void this.confirmDiscard().then((discard) => {
+                        if (!discard)
+                            return;
+                        surface.markClean();
+                        ref.close(result);
+                    });
+                    return false;
+                }
+                if (reducedMotion)
+                    return true;
+                surface.closing.set(true);
+                ref.overlayRef.backdropElement?.classList.add('is-closing');
+                setTimeout(() => ref.close(result), EXIT_MS);
+                return false;
+            },
+        });
+        this.surfaces.set(ref, surface);
+        const breakpointSub = this.breakpointObserver.observe(SHEET_QUERY).subscribe(({ matches }) => {
+            surface.sheet.set(matches);
+            if (matches) {
+                position.centerHorizontally().bottom('0');
+            }
+            else if (placement === 'right') {
+                position.right('0').top('0');
+            }
+            else {
+                position.centerHorizontally().centerVertically();
+            }
+            position.apply();
+        });
+        ref.closed.subscribe(() => breakpointSub.unsubscribe());
+        return ref;
+    }
+    /**
+     * Kayıt oluştur/düzenle formlarının TEK açılış noktası — sağdan drawer.
+     * `maximizable` bilerek zorla kapatılıyor: drawer zaten tam yükseklik, büyütme
+     * düğmesinin anlamı yok (bkz. `Dialog.maximizeVisible`).
+     *
+     * Varsayılan genişlik `md` (560px) — CRUD formları `size` GEÇMEZ, hepsi aynı
+     * genişlikte açılmalı. İstisna: iki sütunlu bir form (sol dikey ray + sağ
+     * panel gibi) `md` içine sığmazsa `xl` (960px) geçilebilir.
+     */
+    openDrawer(component, options) {
+        return this.open(component, { ...options, placement: 'right', maximizable: false });
+    }
+    /** `Promise<boolean>` döner — `if (await dialog.confirm(...))` çağıran taraf için `.subscribe()` zincirinden daha sade. */
+    confirm(data) {
+        const ref = this.open(ConfirmDialog, {
+            data,
+            size: 'sm',
+            // `data.title` her zaman görünür bir başlık taşıyor — CDK'nın dialog konteynerine
+            // erişilebilir ad olarak veriliyor (axe: `aria-dialog-name`); çağıran taraf
+            // `ConfirmDialogData`'da ayrı bir `ariaLabel` alanı sağlayamıyor zaten.
+            ariaLabel: data.title,
+        });
+        return new Promise((resolve) => ref.closed.subscribe((result) => resolve(!!result)));
+    }
+    /**
+     * Kirli-form kapanış korumasının kendi onay diyaloğu — `confirmDiscard`'ın açtığı
+     * `ConfirmDialog`'un `DialogSurface`'i her zaman temiz (yeni instance), bu yüzden
+     * özyineleme sorunsuz. `closePredicate` içinden (ESC/backdrop/X) VE tüketicinin
+     * kendi route senkronizasyonundan (URL değişip panel PROAKTİF kapatılmadan
+     * önce) iki ayrı yoldan çağrılabildiği için `public`.
+     *
+     * `tone: 'warning'` — onay butonu artık DOLU warning (bkz.
+     * `button.variants.ts`/`confirm-dialog.ts`, eski `outlined` istisnası
+     * kaldırıldı).
+     */
+    confirmDiscard() {
+        const t = this.labels().discard;
+        return this.confirm({
+            title: t.title,
+            content: t.content,
+            tone: 'warning',
+            confirmLabel: t.confirm,
+            cancelLabel: t.cancel,
+        });
+    }
+    /** Tüketici bir ref'i kapatmadan ÖNCE kirli mi diye sormak istiyorsa — kendi `closePredicate`'inin async akışıyla yarışmamak için `DialogSurface`'e doğrudan erişim. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getSurface(ref) {
+        return this.surfaces.get(ref);
+    }
+    /** `confirm()`'in silme kısayolu — `tone:'danger'` + varsayılan "Sil" etiketi. */
+    confirmDelete(data) {
+        const confirmLabel = data.confirmLabel ?? this.labels().confirmDelete;
+        return this.confirm({ ...data, tone: 'danger', confirmLabel });
+    }
+    /** Tek butonlu bilgilendirme modu — sonuç önemsiz olduğu için `Promise<void>` döner. */
+    alert(data) {
+        const ref = this.open(ConfirmDialog, {
+            data: { ...data, alert: true },
+            size: 'sm',
+            ariaLabel: data.title,
+        });
+        return new Promise((resolve) => ref.closed.subscribe(() => resolve()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// `MF_DIALOG_LABELS`/`MfDialogLabels` artık `@mesgflow/ui-kit/core`'da yaşıyor
+// (bkz. `core/i18n/tokens.ts` — MF_LABELS'ın bir seçicisi) — buradan AYRICA
+// re-export etmek `ng build ui-kit`'de TS2308 (ambiguous export) veriyor, çünkü
+// birincil barrel zaten hem `./core`'u hem `./dialog`'u `export *` ediyor.
+// Tüketici `import { MF_DIALOG_LABELS } from '@mesgflow/ui-kit'` (birincil barrel)
+// veya `'@mesgflow/ui-kit/core'` kullanır.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfirmDialog, Dialog, DialogResizeHandle, DialogService, DialogSurface, dialogVariants };
+//# sourceMappingURL=mesgflow-ui-kit-dialog.mjs.map