@mesgflow/ui-kit 0.6.0 → 0.8.0

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

@@ -1,15 +1,119 @@
-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 { signal, computed, inject, ElementRef, input, Directive, booleanAttribute, 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 { glassSurface, MF_DIALOG_LABELS, nextId, cn, exitDurationMs } from '@mesgflow/ui-kit/core';
 import { Icon } from '@mesgflow/ui-kit/icon';
+import { DIALOG_DATA, DialogRef, Dialog as Dialog$1 } from '@angular/cdk/dialog';
 import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { cva } from 'class-variance-authority';
+import { Directionality } from '@angular/cdk/bidi';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { createGlobalPositionStrategy } from '@angular/cdk/overlay';
 
+/**
+ * `DialogService.open()`/`openDrawer()`'ın döndürdüğü, kite ait dialog referansı.
+ *
+ * CDK `DialogRef`'in günlük kullanılan yüzeyini (`close`, `closed`,
+ * `componentInstance`, `disableClose`, `backdropClick`, `keydownEvents` …)
+ * birebir DELEGE eder — yani eski `ref.closed.subscribe(...)` kodu aynen derlenir.
+ * Üstüne kitin kendi dünyasını ekler:
+ *
+ * - `afterClosed()` — `await` edilebilir sonuç (çıkış animasyonu BİTTİKTEN sonra çözülür).
+ * - `state` — `'open' | 'closing' | 'closed'` signal'i (şablonda/`computed`'ta okunur).
+ * - `surface` — boyut/maximize/kirli-form durumuna tipli erişim (`setSize`, `toggleMaximize`,
+ *   `registerDirty`, `markClean` kısayolları).
+ * - `cdk` — ham CDK referansı (kaçış kapısı; ör. `updatePosition()`).
+ *
+ * `close()` İDEMPOTENT'tir: çıkış animasyonu sürerken ya da kirli-form onayı
+ * açıkken gelen ek çağrılar yok sayılır (bkz. `dialog.service.ts` `closePredicate`).
+ *
+ * İçerik component'i içinde `injectDialogRef<Sonuç>()` ile alınır.
+ */
+class MfDialogRef {
+    cdk;
+    surface;
+    closed;
+    backdropClick;
+    keydownEvents;
+    outsidePointerEvents;
+    overlayRef;
+    id;
+    isClosed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isClosed" }] : /* istanbul ignore next */ []));
+    result;
+    /** Dialog'un yaşam döngüsü — `closing` çıkış animasyonu boyunca. */
+    state;
+    constructor(cdk, surface) {
+        this.cdk = cdk;
+        this.surface = surface;
+        this.closed = cdk.closed;
+        this.backdropClick = cdk.backdropClick;
+        this.keydownEvents = cdk.keydownEvents;
+        this.outsidePointerEvents = cdk.outsidePointerEvents;
+        this.overlayRef = cdk.overlayRef;
+        this.id = cdk.id;
+        this.state = computed(() => this.isClosed() ? 'closed' : surface.closing() ? 'closing' : 'open', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.result = new Promise((resolve) => cdk.closed.subscribe((value) => {
+            this.isClosed.set(true);
+            resolve(value);
+        }));
+    }
+    /** Açılan component örneği (şablonla açıldıysa ve kapandıktan sonra `null`). */
+    get componentInstance() {
+        return this.cdk.componentInstance;
+    }
+    get componentRef() {
+        return this.cdk.componentRef;
+    }
+    /** `true` iken ESC/backdrop kapatmaz; programatik `close()` yine çalışır. */
+    get disableClose() {
+        return this.cdk.disableClose;
+    }
+    set disableClose(value) {
+        this.cdk.disableClose = value;
+    }
+    /** Dialog'u (çıkış animasyonu + kirli-form koruması üzerinden) kapatır. İdempotent. */
+    close(result) {
+        if (this.isClosed())
+            return;
+        this.cdk.close(result);
+    }
+    /** Kapanış tamamlandığında (animasyon dahil) sonuçla çözülür; ESC/backdrop'ta `undefined`. */
+    afterClosed() {
+        return this.result;
+    }
+    /** Açıkken genişlik basamağını değiştirir (`sm`…`xl`, `full`). */
+    setSize(size) {
+        this.surface.size.set(size);
+    }
+    toggleMaximize() {
+        this.surface.toggleMaximize();
+    }
+    /** Kirli-form sorusunu kaydeder — ESC/backdrop/X kapanışında `true` dönerse onay sorulur. */
+    registerDirty(check) {
+        this.surface.registerDirty(check);
+    }
+    /** Başarılı kayıttan hemen önce — sonraki `close()` kirli-form onayı sormaz. */
+    markClean() {
+        this.surface.markClean();
+    }
+}
+/**
+ * `DIALOG_DATA`'nın kite ait adı — AYNI token nesnesi, CDK'dan ayrıca import
+ * etmeye gerek kalmasın diye. `inject(MF_DIALOG_DATA)` ≡ `injectDialogData()`.
+ */
+const MF_DIALOG_DATA = DIALOG_DATA;
+/** İçerik component'inde `DialogService.open(..., { data })` ile geçilen veriyi okur. */
+function injectDialogData() {
+    return inject(DIALOG_DATA);
+}
+/** İçerik component'inde kendi dialog referansını alır — `ref.close(sonuç)`. */
+function injectDialogRef() {
+    return inject(MfDialogRef);
+}
+
 /**
  * Dialog başına TEK instance — `DialogService.open()` her açılışta yeni bir
  * tane üretip `options`'tan doldurur, CDK `DialogConfig.providers` ile o
@@ -30,6 +134,9 @@ class DialogSurface {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     placement = signal('center', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Çekmecenin fiziksel kenarı (`center`'da `null`) — `DialogService` yön bilgisiyle çözer. */
+    side = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
     maximizable = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maximizable" }] : /* istanbul ignore next */ []));
     draggable = signal(false, /* @ts-ignore */
@@ -158,10 +265,10 @@ class DialogResizeHandle {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DialogResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DialogResizeHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mfDialogResizeHandle]',
@@ -238,16 +345,52 @@ const dialogVariants = cva(`relative flex w-full flex-col overflow-hidden border
             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',
+            drawer: 'max-h-none',
+        },
+        /** Çekmecenin fiziksel kenarı — yalnızca `state: 'drawer'` ile anlamlı. */
+        side: {
+            none: '',
+            right: '',
+            left: '',
+            top: '',
+            bottom: '',
         },
     },
     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))]' },
+        // Yan çekmeceler: tam yükseklik, boyut ölçeği GENİŞLİK olarak.
+        { state: 'drawer', side: ['left', 'right'], class: 'h-[100dvh]' },
+        { state: 'drawer', side: 'right', class: 'rounded-l-xl rounded-r-none' },
+        { state: 'drawer', side: 'left', class: 'rounded-r-xl rounded-l-none' },
+        {
+            state: 'drawer',
+            side: ['left', 'right'],
+            size: 'sm',
+            class: 'w-[min(440px,calc(100vw-2rem))]',
+        },
+        {
+            state: 'drawer',
+            side: ['left', 'right'],
+            size: 'md',
+            class: 'w-[min(560px,calc(100vw-2rem))]',
+        },
+        {
+            state: 'drawer',
+            side: ['left', 'right'],
+            size: 'lg',
+            class: 'w-[min(720px,calc(100vw-2rem))]',
+        },
+        {
+            state: 'drawer',
+            side: ['left', 'right'],
+            size: 'xl',
+            class: 'w-[min(960px,calc(100vw-2rem))]',
+        },
+        // Üst/alt paneller: tam genişlik, içerik yüksekliğinde (en çok %85).
+        { state: 'drawer', side: ['top', 'bottom'], class: 'w-screen max-w-none max-h-[85dvh]' },
+        { state: 'drawer', side: 'top', class: 'rounded-b-xl rounded-t-none' },
+        { state: 'drawer', side: 'bottom', class: 'rounded-t-xl rounded-b-none' },
     ],
-    defaultVariants: { size: 'md', state: 'normal' },
+    defaultVariants: { size: 'md', state: 'normal', side: 'none' },
 });
 
 const DRAG_MIN_VISIBLE = 48;
@@ -288,12 +431,23 @@ class Dialog {
      */
     fillBody = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fillBody" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` (varsayılan): kapat (X) düğmesi `close` olayını yayınladıktan SONRA
+     * dialog'u kendisi de kapatır (`MfDialogRef.close()` — idempotent, tüketicinin
+     * `(close)` handler'ında sonuçla yaptığı kapanış önce davranır ve kazanır).
+     * `false`: yalnızca `close` yayınlanır — kapanışı tamamen tüketici yönetir.
+     */
+    autoClose = input(true, { ...(ngDevMode ? { debugName: "autoClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     // `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);
+    /** Görünür başlığın id'si — CDK konteynerinin `aria-labelledby`'ı buna bağlanır. */
+    titleId = nextId('mf-dialog-title');
+    mfRef = inject(MfDialogRef, { optional: true });
+    cdkRef = inject(DialogRef, { optional: true });
     elementRef = inject(ElementRef);
     cdkDrag = inject(CdkDrag, { self: true });
     scrollBody = viewChild('scrollBody', /* @ts-ignore */
@@ -307,7 +461,7 @@ class Dialog {
             return 'sheet';
         if (this.surface.maximized() || this.size() === 'full')
             return 'maximized';
-        if (this.surface.placement() === 'right')
+        if (this.surface.side())
             return 'drawer';
         return 'normal';
     }, /* @ts-ignore */
@@ -322,8 +476,18 @@ class Dialog {
     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'}`);
+        const side = state === 'drawer' ? (this.surface.side() ?? 'right') : null;
+        // Kenar başına FİZİKSEL kayma (host `--mf-dir: 1` sabitler — bkz. host bağlaması).
+        const animateBase = state === 'sheet' || side === 'bottom'
+            ? 'sheet'
+            : side === 'right'
+                ? 'drawer'
+                : side === 'left'
+                    ? 'drawer-start'
+                    : side === 'top'
+                        ? 'drawer-top'
+                        : 'dialog';
+        return cn(dialogVariants({ size: this.size() ?? this.surface.size(), state, side: side ?? 'none' }), 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 */
@@ -355,6 +519,17 @@ class Dialog {
                 this.surface.customSize.set(null);
             }
         });
+        // Erişilebilir ad: `ariaLabel` verilmemiş bir dialog'da CDK konteyneri görünür
+        // başlığa `aria-labelledby` ile bağlanır (MatDialogTitle'ın kullandığı AYNI kanca).
+        // Başlık sonradan boşalırsa/değişirse effect cleanup'ı kaydı geri alır.
+        effect((onCleanup) => {
+            // `DialogRef.containerInstance` tipi bu (CdkDialogContainer'a ait) metotları taşımıyor.
+            const container = this.cdkRef?.containerInstance;
+            if (!this.title() || !container?._addAriaLabelledBy)
+                return;
+            container._addAriaLabelledBy(this.titleId);
+            onCleanup(() => container._removeAriaLabelledBy?.(this.titleId));
+        });
         const destroyRef = inject(DestroyRef);
         afterNextRender(() => {
             this.updateScrollShadow();
@@ -366,6 +541,12 @@ class Dialog {
             destroyRef.onDestroy(() => observer.disconnect());
         });
     }
+    /** Kapat (X): önce `close` olayı (tüketici sonuçla kapatabilsin), sonra — `autoClose` ise — ref'in kendisi. */
+    onDismiss() {
+        this.close.emit();
+        if (this.autoClose())
+            (this.mfRef ?? this.cdkRef)?.close();
+    }
     updateScrollShadow() {
         const el = this.scrollBody()?.nativeElement;
         if (!el)
@@ -383,15 +564,15 @@ class Dialog {
     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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", 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()", "style.--mf-dir": "stateVariant() === 'drawer' ? 1 : null" } }, 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"] }] });
+        ], 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 [id]=\"titleId\" 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)=\"onDismiss()\"\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{ selector: 'mf-dialog', exportAs: 'mfDialog', imports: [Button, Icon, DialogResizeHandle, CdkDragHandle], hostDirectives: [CdkDrag], providers: [
                         {
@@ -402,10 +583,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[class]': 'hostClasses()',
                         '[style.width.px]': 'customWidth()',
                         '[style.height.px]': 'customHeight()',
+                        // Çekmece kenarları FİZİKSEL çözülür (`DialogService` RTL'i zaten hesaba kattı) —
+                        // motion.css'in `--mf-dir` çevirmesi burada çift çevirme yapmasın.
+                        '[style.--mf-dir]': "stateVariant() === 'drawer' ? 1 : null",
                         '(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 }] }] } });
+                    }, 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 [id]=\"titleId\" 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)=\"onDismiss()\"\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 }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], scrollBody: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }] } });
 
 const TONE_ICON = {
     danger: 'warning',
@@ -431,8 +615,8 @@ const TONE_BADGE_CLASS = {
  * kendi çiziyor.
  */
 class ConfirmDialog {
-    data = inject(DIALOG_DATA);
-    dialogRef = inject((DialogRef));
+    data = injectDialogData();
+    dialogRef = injectDialogRef();
     labels = inject(MF_DIALOG_LABELS);
     tone = computed(() => this.data.tone ?? 'neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
@@ -477,17 +661,28 @@ class ConfirmDialog {
             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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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      [loading]=\"submitting()\"\r\n      (click)=\"onConfirm()\"\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", "autoClose"], 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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" }]
+            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      [loading]=\"submitting()\"\r\n      (click)=\"onConfirm()\"\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)';
+/** Mantıksal yerleşimi fiziksel kenara çevirir (`start`/`end` RTL'de yer değiştirir). */
+function sideOf(placement, rtl) {
+    switch (placement) {
+        case 'center':
+            return null;
+        case 'start':
+            return rtl ? 'right' : 'left';
+        case 'end':
+            return rtl ? 'left' : 'right';
+        default:
+            return placement;
+    }
+}
 function normalizeClass(value) {
     if (!value)
         return [];
@@ -499,9 +694,10 @@ function normalizeClass(value) {
  * 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
+ * `open()` kite ait `MfDialogRef` döndürür (CDK `DialogRef` yüzeyini delege eder +
+ * `afterClosed()`/`state`/`surface`). İçerik component'i `injectDialogRef()`/
+ * `injectDialogData()` (bkz. dialog-ref.ts) kullanır — CDK'nın kendi `DialogRef`/
+ * `DIALOG_DATA` token'larını inject etmek de çalışmaya devam eder. 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.
  *
@@ -514,11 +710,13 @@ function normalizeClass(value) {
  * 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
+ * `true` yapıp gerçek kapanmayı `exitDurationMs()` kadar 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 —
+ * geçtiği için davranış tekdüze. Animasyon sürerken gelen EK `close()` çağrıları
+ * yok sayılır (`disposeArmed` yalnızca zamanlayıcı tarafından kurulur) — X düğmesi +
+ * tüketicinin `(close)` handler'ı aynı anda kapatsa bile animasyon kesilmez. `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
@@ -532,6 +730,7 @@ class DialogService {
     injector = inject(Injector);
     breakpointObserver = inject(BreakpointObserver);
     labels = inject(MF_DIALOG_LABELS);
+    dir = inject(Directionality, { optional: true });
     /** `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
@@ -540,20 +739,43 @@ class DialogService {
     // ilgisiz; `any` burada BİLEREK.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     surfaces = new WeakMap();
+    /**
+     * Bir component'i ya da bir `TemplateRef'i açar (şablon yolu `<mf-drawer>` gibi
+     * bildirimsel sarmalayıcılar içindir — şablonun injector'ı da `DialogSurface'i görür).
+     */
     open(component, options) {
         const surface = new DialogSurface();
         const placement = options?.placement ?? 'center';
         surface.size.set(options?.size ?? 'md');
         surface.placement.set(placement);
+        const side = sideOf(placement, this.dir?.value === 'rtl');
+        surface.side.set(side);
+        const sheetOnMobile = (options?.sheetOnMobile ?? true) && side !== 'top' && side !== 'bottom';
         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 place = () => {
+            if (side === 'right')
+                position.right('0').top('0');
+            else if (side === 'left')
+                position.left('0').top('0');
+            else if (side === 'top')
+                position.top('0').left('0');
+            else if (side === 'bottom')
+                position.bottom('0').left('0');
+            else
+                position.centerHorizontally().centerVertically();
+        };
+        place();
+        // Çıkış süresi CSS token'ından (`--mf-duration-exit`); reduced-motion'da 0.
+        const exitMs = exitDurationMs();
+        // Gerçek dispose'a SADECE çıkış zamanlayıcısı izin verir — bkz. sınıf yorumu.
+        let disposeArmed = false;
+        // Kirli-form onayı açıkken ikinci bir onay yığılmasın.
+        let discardPending = false;
+        let mfRef;
+        // CDK iki aşırı yükü (component / şablon) çalışma zamanında ayırt eder.
         const ref = this.cdkDialog.open(component, {
             data: options?.data,
             panelClass: normalizeClass(options?.panelClass),
@@ -571,16 +793,32 @@ class DialogService {
             // onayı açılmasına yol açabilir — gerçek bir kullanıcı senaryosunda
             // tekrarlanan, doğrulanmış bir çakışma.
             closeOnNavigation: false,
+            // `aria-modal` — arka plan zaten `aria-hidden`, ama ekran okuyucuların sanal imleci
+            // için modal olduğunu açıkça söylemek WAI-ARIA dialog deseninin gereği.
+            ariaModal: true,
+            // Verilmezse CDK konteyneri `<mf-dialog>`'un görünür başlığına `aria-labelledby` ile
+            // bağlanır (bkz. dialog.ts — `_addAriaLabelledBy`).
             ariaLabel: options?.ariaLabel,
-            providers: [{ provide: DialogSurface, useValue: surface }],
+            providers: (cdkRef) => {
+                mfRef = new MfDialogRef(cdkRef, surface);
+                return [
+                    { provide: DialogSurface, useValue: surface },
+                    { provide: MfDialogRef, useValue: mfRef },
+                ];
+            },
             closePredicate: (result) => {
-                // Çıkış animasyonu turu — ikinci çağrı, gerçek dispose'a izin ver.
-                if (surface.closing())
+                // Çıkış animasyonu bitti — zamanlayıcının kendi çağrısı, gerçek dispose'a izin ver.
+                if (disposeArmed)
                     return true;
-                // Kirli form koruması `reducedMotion`'DAN ÖNCE kontrol edilir — aksi halde
+                // Animasyon ya da kirli-form onayı sürerken gelen ek çağrılar yok sayılır.
+                if (surface.closing() || discardPending)
+                    return false;
+                // Kirli form koruması reduced-motion kısa devresinden ÖNCE kontrol edilir — aksi halde
                 // "animasyonu azalt" açık kullanıcılarda bu koruma hiç çalışmazdı.
                 if (surface.isDirty()) {
+                    discardPending = true;
                     void this.confirmDiscard().then((discard) => {
+                        discardPending = false;
                         if (!discard)
                             return;
                         surface.markClean();
@@ -588,30 +826,30 @@ class DialogService {
                     });
                     return false;
                 }
-                if (reducedMotion)
+                if (exitMs === 0)
                     return true;
                 surface.closing.set(true);
                 ref.overlayRef.backdropElement?.classList.add('is-closing');
-                setTimeout(() => ref.close(result), EXIT_MS);
+                setTimeout(() => {
+                    disposeArmed = true;
+                    ref.close(result);
+                }, exitMs);
                 return false;
             },
         });
         this.surfaces.set(ref, surface);
         const breakpointSub = this.breakpointObserver.observe(SHEET_QUERY).subscribe(({ matches }) => {
-            surface.sheet.set(matches);
-            if (matches) {
+            const sheet = matches && sheetOnMobile;
+            surface.sheet.set(sheet);
+            if (sheet)
                 position.centerHorizontally().bottom('0');
-            }
-            else if (placement === 'right') {
-                position.right('0').top('0');
-            }
-            else {
-                position.centerHorizontally().centerVertically();
-            }
+            else
+                place();
             position.apply();
         });
         ref.closed.subscribe(() => breakpointSub.unsubscribe());
-        return ref;
+        // `providers` fabrikası CDK `open()` içinde SENKRON çağrılır — burada her zaman dolu.
+        return mfRef ?? new MfDialogRef(ref, surface);
     }
     /**
      * Kayıt oluştur/düzenle formlarının TEK açılış noktası — sağdan drawer.
@@ -623,7 +861,11 @@ class DialogService {
      * panel gibi) `md` içine sığmazsa `xl` (960px) geçilebilir.
      */
     openDrawer(component, options) {
-        return this.open(component, { ...options, placement: 'right', maximizable: false });
+        return this.open(component, {
+            ...options,
+            placement: options?.placement ?? 'right',
+            maximizable: false,
+        });
     }
     /** `Promise<boolean>` döner — `if (await dialog.confirm(...))` çağıran taraf için `.subscribe()` zincirinden daha sade. */
     confirm(data) {
@@ -635,7 +877,7 @@ class DialogService {
             // `ConfirmDialogData`'da ayrı bir `ariaLabel` alanı sağlayamıyor zaten.
             ariaLabel: data.title,
         });
-        return new Promise((resolve) => ref.closed.subscribe((result) => resolve(!!result)));
+        return ref.afterClosed().then((result) => !!result);
     }
     /**
      * Kirli-form kapanış korumasının kendi onay diyaloğu — `confirmDiscard`'ın açtığı
@@ -658,10 +900,14 @@ class DialogService {
             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. */
+    /**
+     * 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. `MfDialogRef` için
+     * `ref.surface` tercih edilir; ham CDK ref'i (ör. içerikte inject edilen) de kabul edilir.
+     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getSurface(ref) {
-        return this.surfaces.get(ref);
+        return ref instanceof MfDialogRef ? ref.surface : this.surfaces.get(ref);
     }
     /** `confirm()`'in silme kısayolu — `tone:'danger'` + varsayılan "Sil" etiketi. */
     confirmDelete(data) {
@@ -675,12 +921,12 @@ class DialogService {
             size: 'sm',
             ariaLabel: data.title,
         });
-        return new Promise((resolve) => ref.closed.subscribe(() => resolve()));
+        return ref.afterClosed().then(() => undefined);
     }
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -696,5 +942,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ConfirmDialog, Dialog, DialogResizeHandle, DialogService, DialogSurface, dialogVariants };
+export { ConfirmDialog, Dialog, DialogResizeHandle, DialogService, DialogSurface, MF_DIALOG_DATA, MfDialogRef, dialogVariants, injectDialogData, injectDialogRef };
 //# sourceMappingURL=mesgflow-ui-kit-dialog.mjs.map