@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -2,11 +2,12 @@ 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 { glassSurface, MF_DIALOG_LABELS, cn, exitDurationMs } 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 { Directionality } from '@angular/cdk/bidi';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { createGlobalPositionStrategy } from '@angular/cdk/overlay';
 
@@ -30,6 +31,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 */
@@ -238,16 +242,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;
@@ -307,7 +347,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 +362,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 */
@@ -384,7 +434,7 @@ class Dialog {
         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 ɵ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()", "style.--mf-dir": "stateVariant() === 'drawer' ? 1 : null" } }, providers: [
             {
                 provide: DialogSurface,
                 useFactory: () => inject(DialogSurface, { optional: true, skipSelf: true }) ?? new DialogSurface(),
@@ -402,6 +452,9 @@ 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" }]
@@ -478,16 +531,27 @@ class ConfirmDialog {
         }
     }
     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 ɵ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      [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"], 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" }]
+            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 [];
@@ -514,7 +578,7 @@ 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
@@ -532,6 +596,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 +605,38 @@ 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();
+        // 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),
@@ -577,7 +660,7 @@ class DialogService {
                 // Çı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
+                // 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()) {
                     void this.confirmDiscard().then((discard) => {
@@ -588,26 +671,22 @@ 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(() => 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());
@@ -623,7 +702,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) {