@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,99 @@
+import * as i1 from '@angular/aria/toolbar';
+import { Toolbar as Toolbar$1, ToolbarWidget } from '@angular/aria/toolbar';
+import * as i0 from '@angular/core';
+import { Component, inject, input, computed, Directive } from '@angular/core';
+import { cn } from '@mesgflow/ui-kit/core';
+import { cva } from 'class-variance-authority';
+
+/**
+ * `<mf-toolbar><button mfToolbarButton value="bold">B</button>...</mf-toolbar>`
+ *
+ * Genel amaçlı gruplu buton çubuğu — zengin metin editörü/tuval araç
+ * çubukları için düşünüldü. ARIA/klavye (roving tabindex, ok tuşu
+ * navigasyonu) `@angular/aria/toolbar`'ın `Toolbar` pattern'inden
+ * `hostDirectives` ile geliyor — `SegmentedControl`'ün AYNI pattern ailesini
+ * kullandığı ama SEÇİM DURUMU (tek/çoklu) tuttuğu yere karşılık, bu primitif
+ * seçim durumu TUTMAZ: tekil aksiyon düğmeleri için `mfToolbarButton`
+ * yeter, dışlayıcı bir alt-grup gerekiyorsa (ör. hizalama) tüketici kendi
+ * `<div ngToolbarWidgetGroup [multi]="false">` sarmalayıcısını ekler (bkz.
+ * `@angular/aria/toolbar`'ın kendi JSDoc örneği).
+ */
+class Toolbar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: Toolbar, isStandalone: true, selector: "mf-toolbar", host: { classAttribute: "flex items-center gap-0.5 rounded-lg border border-hairline bg-surface p-1" }, exportAs: ["mfToolbar"], hostDirectives: [{ directive: i1.Toolbar, inputs: ["orientation", "orientation", "disabled", "disabled", "wrap", "wrap"] }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Toolbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-toolbar',
+                    exportAs: 'mfToolbar',
+                    hostDirectives: [{ directive: Toolbar$1, inputs: ['orientation', 'disabled', 'wrap'] }],
+                    host: {
+                        class: 'flex items-center gap-0.5 rounded-lg border border-hairline bg-surface p-1',
+                    },
+                    template: '<ng-content />',
+                }]
+        }] });
+
+const toolbarButtonVariants = cva('flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99] ' +
+    'hover:bg-surface-alt hover:text-fg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
+    'disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100', {
+    variants: {
+        active: {
+            true: 'bg-primary-tint text-primary-tint-fg',
+            false: '',
+        },
+    },
+    defaultVariants: { active: false },
+});
+
+/**
+ * `<button mfToolbarButton value="bold" [pressed]="isBold()">B</button>` —
+ * `mf-toolbar` içine konur. `pressed`, bir `ngToolbarWidgetGroup` sarmalayıcısı
+ * OLMADAN da (ör. bağımsız bir toggle — kalın/italik gibi birbirinden bağımsız
+ * açma-kapama düğmeleri) tüketicinin kendi state'inden görsel "aktif" durumunu
+ * bildirmesi için var; bir grup içindeyse `widget.selected()` zaten aynı
+ * görevi görür, ikisi OR'lanıyor.
+ */
+class ToolbarButton {
+    widget = inject(ToolbarWidget);
+    pressed = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(toolbarButtonVariants({ active: this.pressed() || this.widget.selected() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ToolbarButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ToolbarButton, isStandalone: true, selector: "button[mfToolbarButton]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "'button'", "class": "classes()" } }, hostDirectives: [{ directive: i1.ToolbarWidget, inputs: ["value", "value", "disabled", "disabled", "id", "id"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ToolbarButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[mfToolbarButton]',
+                    hostDirectives: [{ directive: ToolbarWidget, inputs: ['value', 'disabled', 'id'] }],
+                    host: { '[attr.type]': "'button'", '[class]': 'classes()' },
+                }]
+        }], propDecorators: { pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }] } });
+
+/** `<mf-toolbar-separator />` — `mf-toolbar` içindeki buton gruplarını ayırmak için dikey çizgi. */
+class ToolbarSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ToolbarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: ToolbarSeparator, isStandalone: true, selector: "mf-toolbar-separator", host: { attributes: { "role": "separator", "aria-orientation": "vertical" }, classAttribute: "mx-1 h-5 w-px shrink-0 self-center bg-border" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ToolbarSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-toolbar-separator',
+                    host: {
+                        class: 'mx-1 h-5 w-px shrink-0 self-center bg-border',
+                        role: 'separator',
+                        'aria-orientation': 'vertical',
+                    },
+                    template: '',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Toolbar, ToolbarButton, ToolbarSeparator, toolbarButtonVariants };
+//# sourceMappingURL=mesgflow-ui-kit-toolbar.mjs.map

package/fesm2022/mesgflow-ui-kit-toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-toolbar.mjs","sources":["../../../projects/ui-kit/toolbar/toolbar.ts","../../../projects/ui-kit/toolbar/toolbar.variants.ts","../../../projects/ui-kit/toolbar/toolbar-button.ts","../../../projects/ui-kit/toolbar/toolbar-separator.ts","../../../projects/ui-kit/toolbar/mesgflow-ui-kit-toolbar.ts"],"sourcesContent":["import { Toolbar as AriaToolbar } from '@angular/aria/toolbar';\r\nimport { Component } from '@angular/core';\r\n\r\n/**\r\n * `<mf-toolbar><button mfToolbarButton value=\"bold\">B</button>...</mf-toolbar>`\r\n *\r\n * Genel amaçlı gruplu buton çubuğu — zengin metin editörü/tuval araç\r\n * çubukları için düşünüldü. ARIA/klavye (roving tabindex, ok tuşu\r\n * navigasyonu) `@angular/aria/toolbar`'ın `Toolbar` pattern'inden\r\n * `hostDirectives` ile geliyor — `SegmentedControl`'ün AYNI pattern ailesini\r\n * kullandığı ama SEÇİM DURUMU (tek/çoklu) tuttuğu yere karşılık, bu primitif\r\n * seçim durumu TUTMAZ: tekil aksiyon düğmeleri için `mfToolbarButton`\r\n * yeter, dışlayıcı bir alt-grup gerekiyorsa (ör. hizalama) tüketici kendi\r\n * `<div ngToolbarWidgetGroup [multi]=\"false\">` sarmalayıcısını ekler (bkz.\r\n * `@angular/aria/toolbar`'ın kendi JSDoc örneği).\r\n */\r\n@Component({\r\n  selector: 'mf-toolbar',\r\n  exportAs: 'mfToolbar',\r\n  hostDirectives: [{ directive: AriaToolbar, inputs: ['orientation', 'disabled', 'wrap'] }],\r\n  host: {\r\n    class: 'flex items-center gap-0.5 rounded-lg border border-hairline bg-surface p-1',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Toolbar {}\r\n","import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const toolbarButtonVariants = cva(\r\n  'flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99] ' +\r\n    'hover:bg-surface-alt hover:text-fg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    'disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100',\r\n  {\r\n    variants: {\r\n      active: {\r\n        true: 'bg-primary-tint text-primary-tint-fg',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { active: false },\r\n  },\r\n);\r\n\r\nexport type ToolbarButtonActive = VariantProps<typeof toolbarButtonVariants>['active'];\r\n","import { ToolbarWidget as AriaToolbarWidget } from '@angular/aria/toolbar';\r\nimport { Directive, computed, inject, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { toolbarButtonVariants } from './toolbar.variants';\r\n\r\n/**\r\n * `<button mfToolbarButton value=\"bold\" [pressed]=\"isBold()\">B</button>` —\r\n * `mf-toolbar` içine konur. `pressed`, bir `ngToolbarWidgetGroup` sarmalayıcısı\r\n * OLMADAN da (ör. bağımsız bir toggle — kalın/italik gibi birbirinden bağımsız\r\n * açma-kapama düğmeleri) tüketicinin kendi state'inden görsel \"aktif\" durumunu\r\n * bildirmesi için var; bir grup içindeyse `widget.selected()` zaten aynı\r\n * görevi görür, ikisi OR'lanıyor.\r\n */\r\n@Directive({\r\n  selector: 'button[mfToolbarButton]',\r\n  hostDirectives: [{ directive: AriaToolbarWidget, inputs: ['value', 'disabled', 'id'] }],\r\n  host: { '[attr.type]': \"'button'\", '[class]': 'classes()' },\r\n})\r\nexport class ToolbarButton {\r\n  private readonly widget = inject(AriaToolbarWidget);\r\n  readonly pressed = input(false);\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(toolbarButtonVariants({ active: this.pressed() || this.widget.selected() })),\r\n  );\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n/** `<mf-toolbar-separator />` — `mf-toolbar` içindeki buton gruplarını ayırmak için dikey çizgi. */\r\n@Component({\r\n  selector: 'mf-toolbar-separator',\r\n  host: {\r\n    class: 'mx-1 h-5 w-px shrink-0 self-center bg-border',\r\n    role: 'separator',\r\n    'aria-orientation': 'vertical',\r\n  },\r\n  template: '',\r\n})\r\nexport class ToolbarSeparator {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaToolbar","AriaToolbarWidget"],"mappings":"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"}

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

@@ -0,0 +1,160 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal, DomPortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, ViewContainerRef, Directive } from '@angular/core';
+
+const POSITIONS = {
+    top: [
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
+    ],
+    bottom: [
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
+    ],
+    left: [
+        { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
+        { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
+    ],
+    right: [
+        { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
+        { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
+    ],
+};
+/** `role`/`pointer-events-none` DIŞINDAKİ görsel kabuk — CDK'nın `panelClass`'ı ile OVERLAY PANELİNİN kendisine uygulanır (bkz. `show()`), hem düz metin hem şablon içeriği AYNI balon çerçevesini paylaşır. */
+const BUBBLE_CLASSES = [
+    'rounded-sm',
+    'bg-surface-inverse',
+    'px-2',
+    'py-1',
+    'text-xs',
+    'font-medium',
+    'whitespace-nowrap',
+    'text-fg-inverse',
+    'shadow-2',
+];
+/**
+ * `<button mfButton [mfTooltip]="'Filtreler'">` (düz metin) veya
+ * `<button mfButton [mfTooltipContent]="richTpl">` (bkz. aşağıdaki örnek —
+ * zengin/reaktif içerik) — hover/focus'ta CDK Overlay ile konumlanan bir
+ * balon gösterir. `mfTooltipContent` VERİLMİŞSE `mfTooltip` YOK SAYILIR.
+ *
+ * ```html
+ * <button mfButton [mfTooltipContent]="kbdHint">Kaydet</button>
+ * <ng-template #kbdHint>
+ *   Kaydet <kbd mfKbd>Ctrl</kbd>+<kbd mfKbd>S</kbd>
+ * </ng-template>
+ * ```
+ *
+ * Düz metin YOLU (ayrı bir Angular component/`ComponentPortal` kurmadan) ham
+ * bir DOM node'u ile çiziliyor — statik metin için fazla makine olurdu.
+ * Şablon YOLU `TemplatePortal` kullanır (gerçek Angular içeriği — binding/
+ * directive/başka bir bileşen barındırabilir), bunun için `ViewContainerRef`
+ * gerekiyor.
+ */
+class Tooltip {
+    /** Boş string verilirse (ve `mfTooltipContent` de yoksa) tooltip tamamen devre dışı kalır (ör. koşullu etiketler için). */
+    mfTooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mfTooltip" }] : /* istanbul ignore next */ []));
+    /** Verilmişse `mfTooltip`'in YERİNE geçer — bkz. sınıf üstündeki JSDoc örneği. */
+    mfTooltipContent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mfTooltipContent" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    overlay = inject(Overlay);
+    elementRef = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    overlayRef;
+    bubbleEl;
+    showHandle;
+    scheduleShow() {
+        if (!this.mfTooltip() && !this.mfTooltipContent())
+            return;
+        clearTimeout(this.showHandle);
+        this.showHandle = setTimeout(() => this.show(), 350);
+    }
+    show() {
+        const template = this.mfTooltipContent();
+        const text = this.mfTooltip();
+        if ((!template && !text) || this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(POSITIONS[this.tooltipPosition()])
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: [...BUBBLE_CLASSES, 'animate-overlay-in'],
+        });
+        this.overlayRef.overlayElement.setAttribute('role', 'tooltip');
+        this.overlayRef.overlayElement.classList.add('pointer-events-none');
+        if (template) {
+            this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+            return;
+        }
+        // Düz `appendChild` YETMİYOR: CDK'nın konumlandırma stratejisi (flexibleConnectedTo)
+        // sadece `OverlayRef.attach()` çağrıldığında çalışıyor — atlanırsa panel {0,0,0,0}
+        // boyutunda kalıp hiçbir yerde görünmüyor (gerçek bulgu, ui-kit'te yakalandı).
+        // `DomPortal` gerçek bir Angular component'i olmadan (ComponentPortal'a gerek
+        // kalmadan) ham bir DOM node'unu attach akışına sokuyor — ama `DomPortal`
+        // node'un ZATEN bir parent'a bağlı olmasını şart koşuyor (detach sonrası eski
+        // yerine geri koyabilmek için konumunu hatırlıyor), o yüzden önce `body`'ye
+        // ekleyip Portal'ı ondan SONRA kuruyoruz.
+        const bubble = document.createElement('span');
+        bubble.textContent = text;
+        document.body.appendChild(bubble);
+        this.overlayRef.attach(new DomPortal(bubble));
+        this.bubbleEl = bubble;
+    }
+    /**
+     * Public: `SearchInput` gibi, kendi state değişimiyle tooltip'i ANINDA
+     * kapatmak isteyen tüketiciler için (bkz. search-input.ts `expand()`) —
+     * BİLEREK senkron: tooltip hover/focus/Escape gibi yüksek frekanslı,
+     * anlık etkileşimlerle kapanıyor, `Popover`'ın gecikmeli-dispose deseni
+     * (bkz. `popover.ts` `EXIT_MS`) burada gereksiz karmaşıklık + testlerin
+     * beklediği "blur → anında kaldırılır" sözleşmesini bozardı (bkz.
+     * `tooltip.spec.ts`). Giriş animasyonu (`show()`teki `animate-overlay-in`)
+     * yeterli — önceden tooltip'in HİÇ animasyonu yoktu (gerçek bulgu).
+     */
+    hide() {
+        clearTimeout(this.showHandle);
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+        // `dispose()` DomPortal'ı "attach öncesi" body konumuna geri koyuyor,
+        // DOM'dan silmiyor — silinmezse hover'dan çıkınca balon body'nin sonunda
+        // öksüz kalıp görünür kalıyordu (gerçek bulgu, birden fazla satırda
+        // sırayla hover edince ui-kit'te yakalandı). Şablon yolunda `bubbleEl`
+        // hiç atanmadığı için bu satır NO-OP.
+        this.bubbleEl?.remove();
+        this.bubbleEl = undefined;
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: Tooltip, isStandalone: true, selector: "[mfTooltip], [mfTooltipContent]", inputs: { mfTooltip: { classPropertyName: "mfTooltip", publicName: "mfTooltip", isSignal: true, isRequired: false, transformFunction: null }, mfTooltipContent: { classPropertyName: "mfTooltipContent", publicName: "mfTooltipContent", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "scheduleShow()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()", "keydown.escape": "hide()", "click": "hide()" } }, exportAs: ["mfTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfTooltip], [mfTooltipContent]',
+                    exportAs: 'mfTooltip',
+                    host: {
+                        '(mouseenter)': 'scheduleShow()',
+                        '(mouseleave)': 'hide()',
+                        '(focus)': 'show()',
+                        '(blur)': 'hide()',
+                        '(keydown.escape)': 'hide()',
+                        '(click)': 'hide()',
+                    },
+                }]
+        }], propDecorators: { mfTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfTooltip", required: false }] }], mfTooltipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfTooltipContent", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tooltip };
+//# sourceMappingURL=mesgflow-ui-kit-tooltip.mjs.map

package/fesm2022/mesgflow-ui-kit-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-tooltip.mjs","sources":["../../../projects/ui-kit/tooltip/tooltip.ts","../../../projects/ui-kit/tooltip/mesgflow-ui-kit-tooltip.ts"],"sourcesContent":["import { Overlay, type ConnectedPosition, type OverlayRef } from '@angular/cdk/overlay';\r\nimport { DomPortal, TemplatePortal } from '@angular/cdk/portal';\r\nimport {\r\n  Directive,\r\n  ElementRef,\r\n  OnDestroy,\r\n  TemplateRef,\r\n  ViewContainerRef,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\r\n\r\nconst POSITIONS: Record<TooltipPosition, ConnectedPosition[]> = {\r\n  top: [\r\n    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },\r\n    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },\r\n  ],\r\n  bottom: [\r\n    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },\r\n    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },\r\n  ],\r\n  left: [\r\n    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },\r\n    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },\r\n  ],\r\n  right: [\r\n    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },\r\n    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },\r\n  ],\r\n};\r\n\r\n/** `role`/`pointer-events-none` DIŞINDAKİ görsel kabuk — CDK'nın `panelClass`'ı ile OVERLAY PANELİNİN kendisine uygulanır (bkz. `show()`), hem düz metin hem şablon içeriği AYNI balon çerçevesini paylaşır. */\r\nconst BUBBLE_CLASSES = [\r\n  'rounded-sm',\r\n  'bg-surface-inverse',\r\n  'px-2',\r\n  'py-1',\r\n  'text-xs',\r\n  'font-medium',\r\n  'whitespace-nowrap',\r\n  'text-fg-inverse',\r\n  'shadow-2',\r\n];\r\n\r\n/**\r\n * `<button mfButton [mfTooltip]=\"'Filtreler'\">` (düz metin) veya\r\n * `<button mfButton [mfTooltipContent]=\"richTpl\">` (bkz. aşağıdaki örnek —\r\n * zengin/reaktif içerik) — hover/focus'ta CDK Overlay ile konumlanan bir\r\n * balon gösterir. `mfTooltipContent` VERİLMİŞSE `mfTooltip` YOK SAYILIR.\r\n *\r\n * ```html\r\n * <button mfButton [mfTooltipContent]=\"kbdHint\">Kaydet</button>\r\n * <ng-template #kbdHint>\r\n *   Kaydet <kbd mfKbd>Ctrl</kbd>+<kbd mfKbd>S</kbd>\r\n * </ng-template>\r\n * ```\r\n *\r\n * Düz metin YOLU (ayrı bir Angular component/`ComponentPortal` kurmadan) ham\r\n * bir DOM node'u ile çiziliyor — statik metin için fazla makine olurdu.\r\n * Şablon YOLU `TemplatePortal` kullanır (gerçek Angular içeriği — binding/\r\n * directive/başka bir bileşen barındırabilir), bunun için `ViewContainerRef`\r\n * gerekiyor.\r\n */\r\n@Directive({\r\n  selector: '[mfTooltip], [mfTooltipContent]',\r\n  exportAs: 'mfTooltip',\r\n  host: {\r\n    '(mouseenter)': 'scheduleShow()',\r\n    '(mouseleave)': 'hide()',\r\n    '(focus)': 'show()',\r\n    '(blur)': 'hide()',\r\n    '(keydown.escape)': 'hide()',\r\n    '(click)': 'hide()',\r\n  },\r\n})\r\nexport class Tooltip implements OnDestroy {\r\n  /** Boş string verilirse (ve `mfTooltipContent` de yoksa) tooltip tamamen devre dışı kalır (ör. koşullu etiketler için). */\r\n  readonly mfTooltip = input('');\r\n  /** Verilmişse `mfTooltip`'in YERİNE geçer — bkz. sınıf üstündeki JSDoc örneği. */\r\n  readonly mfTooltipContent = input<TemplateRef<unknown> | null>(null);\r\n  readonly tooltipPosition = input<TooltipPosition>('top');\r\n\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\r\n  private readonly viewContainerRef = inject(ViewContainerRef);\r\n  private overlayRef?: OverlayRef;\r\n  private bubbleEl?: HTMLElement;\r\n  private showHandle?: ReturnType<typeof setTimeout>;\r\n\r\n  protected scheduleShow(): void {\r\n    if (!this.mfTooltip() && !this.mfTooltipContent()) return;\r\n    clearTimeout(this.showHandle);\r\n    this.showHandle = setTimeout(() => this.show(), 350);\r\n  }\r\n\r\n  protected show(): void {\r\n    const template = this.mfTooltipContent();\r\n    const text = this.mfTooltip();\r\n    if ((!template && !text) || this.overlayRef) return;\r\n\r\n    const positionStrategy = this.overlay\r\n      .position()\r\n      .flexibleConnectedTo(this.elementRef)\r\n      .withPositions(POSITIONS[this.tooltipPosition()])\r\n      .withPush(true);\r\n\r\n    this.overlayRef = this.overlay.create({\r\n      positionStrategy,\r\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\r\n      panelClass: [...BUBBLE_CLASSES, 'animate-overlay-in'],\r\n    });\r\n    this.overlayRef.overlayElement.setAttribute('role', 'tooltip');\r\n    this.overlayRef.overlayElement.classList.add('pointer-events-none');\r\n\r\n    if (template) {\r\n      this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\r\n      return;\r\n    }\r\n\r\n    // Düz `appendChild` YETMİYOR: CDK'nın konumlandırma stratejisi (flexibleConnectedTo)\r\n    // sadece `OverlayRef.attach()` çağrıldığında çalışıyor — atlanırsa panel {0,0,0,0}\r\n    // boyutunda kalıp hiçbir yerde görünmüyor (gerçek bulgu, ui-kit'te yakalandı).\r\n    // `DomPortal` gerçek bir Angular component'i olmadan (ComponentPortal'a gerek\r\n    // kalmadan) ham bir DOM node'unu attach akışına sokuyor — ama `DomPortal`\r\n    // node'un ZATEN bir parent'a bağlı olmasını şart koşuyor (detach sonrası eski\r\n    // yerine geri koyabilmek için konumunu hatırlıyor), o yüzden önce `body`'ye\r\n    // ekleyip Portal'ı ondan SONRA kuruyoruz.\r\n    const bubble = document.createElement('span');\r\n    bubble.textContent = text;\r\n    document.body.appendChild(bubble);\r\n    this.overlayRef.attach(new DomPortal(bubble));\r\n    this.bubbleEl = bubble;\r\n  }\r\n\r\n  /**\r\n   * Public: `SearchInput` gibi, kendi state değişimiyle tooltip'i ANINDA\r\n   * kapatmak isteyen tüketiciler için (bkz. search-input.ts `expand()`) —\r\n   * BİLEREK senkron: tooltip hover/focus/Escape gibi yüksek frekanslı,\r\n   * anlık etkileşimlerle kapanıyor, `Popover`'ın gecikmeli-dispose deseni\r\n   * (bkz. `popover.ts` `EXIT_MS`) burada gereksiz karmaşıklık + testlerin\r\n   * beklediği \"blur → anında kaldırılır\" sözleşmesini bozardı (bkz.\r\n   * `tooltip.spec.ts`). Giriş animasyonu (`show()`teki `animate-overlay-in`)\r\n   * yeterli — önceden tooltip'in HİÇ animasyonu yoktu (gerçek bulgu).\r\n   */\r\n  hide(): void {\r\n    clearTimeout(this.showHandle);\r\n    this.overlayRef?.dispose();\r\n    this.overlayRef = undefined;\r\n    // `dispose()` DomPortal'ı \"attach öncesi\" body konumuna geri koyuyor,\r\n    // DOM'dan silmiyor — silinmezse hover'dan çıkınca balon body'nin sonunda\r\n    // öksüz kalıp görünür kalıyordu (gerçek bulgu, birden fazla satırda\r\n    // sırayla hover edince ui-kit'te yakalandı). Şablon yolunda `bubbleEl`\r\n    // hiç atanmadığı için bu satır NO-OP.\r\n    this.bubbleEl?.remove();\r\n    this.bubbleEl = undefined;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.hide();\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,272 @@
+import * as i0 from '@angular/core';
+import { signal, computed, inject, ElementRef, afterRenderEffect, Component, Injector, DOCUMENT, Service } from '@angular/core';
+import { createOverlayRef, createGlobalPositionStrategy, createFlexibleConnectedPositionStrategy, createRepositionScrollStrategy } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { MF_TOUR_LABELS, isRtl } from '@mesgflow/ui-kit/core';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Button } from '@mesgflow/ui-kit/button';
+import { Icon } from '@mesgflow/ui-kit/icon';
+
+/** Bir tur çalışmasının durumu — servis ile spot ışığı ve kart bileşenleri bunu paylaşır. */
+class TourRun {
+    steps;
+    onNavigate;
+    onFinish;
+    index = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** Hedefin viewport'taki kutusu (padding dahil); hedefsiz adımda `null`. */
+    rect = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
+    step = computed(() => this.steps[this.index()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    isFirst = computed(() => this.index() === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
+    isLast = computed(() => this.index() === this.steps.length - 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    constructor(steps, onNavigate, onFinish) {
+        this.steps = steps;
+        this.onNavigate = onNavigate;
+        this.onFinish = onFinish;
+    }
+    next() {
+        if (this.isLast())
+            this.onFinish('completed');
+        else
+            this.onNavigate(this.index() + 1);
+    }
+    back() {
+        if (!this.isFirst())
+            this.onNavigate(this.index() - 1);
+    }
+    skip() {
+        this.onFinish('skipped');
+    }
+}
+
+let tourCardIdSeq = 0;
+/**
+ * Adım kartı — modal `role="dialog"`, odak kartın içinde tutulur (`cdkTrapFocus`). Her adım
+ * değişiminde odak kartın KENDİSİNE taşınır: ekran okuyucu `aria-labelledby` (başlık) +
+ * `aria-describedby` (içerik) üzerinden yeni adımı baştan okur. Esc turu atlar.
+ */
+class TourCard {
+    run = inject(TourRun);
+    labels = inject(MF_TOUR_LABELS);
+    host = inject(ElementRef);
+    id = `mf-tour-${++tourCardIdSeq}`;
+    titleId = `${this.id}-title`;
+    contentId = `${this.id}-content`;
+    constructor() {
+        afterRenderEffect(() => {
+            this.run.index();
+            this.host.nativeElement.querySelector('[role="dialog"]')?.focus();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TourCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TourCard, isStandalone: true, selector: "mf-tour-card", ngImport: i0, template: "<div\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  tabindex=\"-1\"\r\n  cdkTrapFocus\r\n  [attr.aria-labelledby]=\"titleId\"\r\n  [attr.aria-describedby]=\"contentId\"\r\n  class=\"w-[min(20rem,calc(100vw-2rem))] animate-overlay-in rounded-xl border border-hairline bg-overlay p-4 shadow-3 outline-none\"\r\n  (keydown.escape)=\"run.skip()\"\r\n>\r\n  <div class=\"flex items-center justify-between gap-2\">\r\n    <span class=\"font-mono text-eyebrow text-help uppercase tabular-nums\">\r\n      {{ run.index() + 1 }} {{ labels().stepOf }} {{ run.steps.length }}\r\n    </span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"-me-1.5 inline-flex size-7 cursor-pointer appearance-none items-center justify-center rounded-md border-0 bg-transparent text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [attr.aria-label]=\"labels().skip\"\r\n      (click)=\"run.skip()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  </div>\r\n\r\n  <h2 [id]=\"titleId\" class=\"mt-1.5 font-display text-base font-semibold text-fg\">\r\n    {{ run.step().title }}\r\n  </h2>\r\n  <p [id]=\"contentId\" class=\"mt-1 text-sm text-fg-muted\">{{ run.step().content }}</p>\r\n\r\n  <div class=\"mt-4 flex items-center gap-2\">\r\n    <!-- \u0130lerleme: ad\u0131m ba\u015F\u0131na bir \u00E7izgi; salt g\u00F6rsel, say\u0131 zaten yukar\u0131da. -->\r\n    <div class=\"flex flex-1 items-center gap-1\" aria-hidden=\"true\">\r\n      @for (step of run.steps; track $index) {\r\n        <span\r\n          class=\"h-1 flex-1 rounded-full transition-colors duration-base ease-emphasis\"\r\n          [class]=\"$index <= run.index() ? 'bg-help' : 'bg-surface-alt'\"\r\n        ></span>\r\n      }\r\n    </div>\r\n    @if (!run.isFirst()) {\r\n      <button\r\n        mfButton\r\n        appearance=\"text\"\r\n        tone=\"neutral\"\r\n        size=\"sm\"\r\n        type=\"button\"\r\n        (click)=\"run.back()\"\r\n      >\r\n        {{ labels().back }}\r\n      </button>\r\n    }\r\n    <button mfButton tone=\"help\" size=\"sm\" type=\"button\" (click)=\"run.next()\">\r\n      {{ run.isLast() ? labels().done : labels().next }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: TourCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-tour-card', imports: [A11yModule, Button, Icon], template: "<div\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  tabindex=\"-1\"\r\n  cdkTrapFocus\r\n  [attr.aria-labelledby]=\"titleId\"\r\n  [attr.aria-describedby]=\"contentId\"\r\n  class=\"w-[min(20rem,calc(100vw-2rem))] animate-overlay-in rounded-xl border border-hairline bg-overlay p-4 shadow-3 outline-none\"\r\n  (keydown.escape)=\"run.skip()\"\r\n>\r\n  <div class=\"flex items-center justify-between gap-2\">\r\n    <span class=\"font-mono text-eyebrow text-help uppercase tabular-nums\">\r\n      {{ run.index() + 1 }} {{ labels().stepOf }} {{ run.steps.length }}\r\n    </span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"-me-1.5 inline-flex size-7 cursor-pointer appearance-none items-center justify-center rounded-md border-0 bg-transparent text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [attr.aria-label]=\"labels().skip\"\r\n      (click)=\"run.skip()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  </div>\r\n\r\n  <h2 [id]=\"titleId\" class=\"mt-1.5 font-display text-base font-semibold text-fg\">\r\n    {{ run.step().title }}\r\n  </h2>\r\n  <p [id]=\"contentId\" class=\"mt-1 text-sm text-fg-muted\">{{ run.step().content }}</p>\r\n\r\n  <div class=\"mt-4 flex items-center gap-2\">\r\n    <!-- \u0130lerleme: ad\u0131m ba\u015F\u0131na bir \u00E7izgi; salt g\u00F6rsel, say\u0131 zaten yukar\u0131da. -->\r\n    <div class=\"flex flex-1 items-center gap-1\" aria-hidden=\"true\">\r\n      @for (step of run.steps; track $index) {\r\n        <span\r\n          class=\"h-1 flex-1 rounded-full transition-colors duration-base ease-emphasis\"\r\n          [class]=\"$index <= run.index() ? 'bg-help' : 'bg-surface-alt'\"\r\n        ></span>\r\n      }\r\n    </div>\r\n    @if (!run.isFirst()) {\r\n      <button\r\n        mfButton\r\n        appearance=\"text\"\r\n        tone=\"neutral\"\r\n        size=\"sm\"\r\n        type=\"button\"\r\n        (click)=\"run.back()\"\r\n      >\r\n        {{ labels().back }}\r\n      </button>\r\n    }\r\n    <button mfButton tone=\"help\" size=\"sm\" type=\"button\" (click)=\"run.next()\">\r\n      {{ run.isLast() ? labels().done : labels().next }}\r\n    </button>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+/** Dialog arka planıyla aynı karartma (bkz. motion.css `.mf-dialog-backdrop`), biraz daha koyu. */
+const SCRIM = 'color-mix(in srgb, var(--color-neutral-975) 55%, transparent)';
+/**
+ * Tam ekran katman: tıklamaları yutar (tur modal) ve hedefin çevresi dışını karartır. Delik,
+ * hedef kutusuna oturan bir öğenin çok büyük `box-shadow`'u — maske/SVG yolu gerekmez, konumu
+ * `transition` ile adımlar arasında kayar. Hedefsiz adımda düz karartma.
+ */
+class TourSpotlight {
+    run = inject(TourRun);
+    scrim = SCRIM;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TourSpotlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TourSpotlight, isStandalone: true, selector: "mf-tour-spotlight", host: { classAttribute: "fixed inset-0 block" }, ngImport: i0, template: `
+    @if (run.rect(); as rect) {
+      <div class="absolute inset-0" aria-hidden="true"></div>
+      <div
+        aria-hidden="true"
+        class="pointer-events-none fixed rounded-lg outline outline-2 outline-offset-0 outline-help transition-[top,left,width,height] duration-base ease-emphasis"
+        [style.top.px]="rect.top"
+        [style.left.px]="rect.left"
+        [style.width.px]="rect.width"
+        [style.height.px]="rect.height"
+        [style.box-shadow]="'0 0 0 200vmax ' + scrim"
+      ></div>
+    } @else {
+      <div class="absolute inset-0" aria-hidden="true" [style.background-color]="scrim"></div>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TourSpotlight, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-tour-spotlight',
+                    host: { class: 'fixed inset-0 block' },
+                    template: `
+    @if (run.rect(); as rect) {
+      <div class="absolute inset-0" aria-hidden="true"></div>
+      <div
+        aria-hidden="true"
+        class="pointer-events-none fixed rounded-lg outline outline-2 outline-offset-0 outline-help transition-[top,left,width,height] duration-base ease-emphasis"
+        [style.top.px]="rect.top"
+        [style.left.px]="rect.left"
+        [style.width.px]="rect.width"
+        [style.height.px]="rect.height"
+        [style.box-shadow]="'0 0 0 200vmax ' + scrim"
+      ></div>
+    } @else {
+      <div class="absolute inset-0" aria-hidden="true" [style.background-color]="scrim"></div>
+    }
+  `,
+                }]
+        }] });
+
+const GAP = 12;
+const DEFAULT_PADDING = 6;
+/** Tercih edilen taraf önce, sığmazsa karşısı, sonra diğer eksen. */
+const POSITIONS = {
+    bottom: [
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: GAP },
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -GAP },
+    ],
+    top: [
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -GAP },
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: GAP },
+    ],
+    end: [
+        { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: GAP },
+        { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -GAP },
+    ],
+    start: [
+        { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -GAP },
+        { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: GAP },
+    ],
+};
+/**
+ * `const result = await tour.start([{ target: '#new-campaign', title: '…', content: '…' }, …]);`
+ *
+ * Ürün turu / coachmark — `help` tonu tam bunun için. İki overlay: tam ekran spot ışığı (karartır,
+ * tıklamaları yutar) ve hedefe bağlı adım kartı. Her adımda hedef görünür alana kaydırılır
+ * (azaltılmış harekette anında), kaydırma/yeniden boyutlandırmada delik ve kart birlikte izler.
+ * Bulunamayan hedef ortalanmış karta düşer (tur kırılmaz). Aynı anda tek tur; bitince odak
+ * turdan önceki öğeye döner. Sonuç: `'completed'` ya da `'skipped'` (Esc, ×).
+ */
+class TourService {
+    injector = inject(Injector);
+    document = inject(DOCUMENT);
+    active = null;
+    get isActive() {
+        return this.active !== null;
+    }
+    start(steps, options = {}) {
+        if (this.active)
+            return this.active;
+        if (steps.length === 0)
+            return Promise.resolve('completed');
+        this.active = new Promise((resolve) => {
+            const doc = this.document;
+            const view = doc.defaultView;
+            const padding = options.padding ?? DEFAULT_PADDING;
+            const previousFocus = doc.activeElement;
+            const direction = isRtl(doc.documentElement) ? 'rtl' : 'ltr';
+            let target = null;
+            let frame = 0;
+            const run = new TourRun(steps, (index) => show(index), (result) => finish(result));
+            const injector = Injector.create({
+                providers: [{ provide: TourRun, useValue: run }],
+                parent: this.injector,
+            });
+            const spotlight = createOverlayRef(this.injector, {
+                positionStrategy: createGlobalPositionStrategy(this.injector),
+                width: '100vw',
+                height: '100vh',
+                direction,
+            });
+            spotlight.attach(new ComponentPortal(TourSpotlight, null, injector));
+            const card = createOverlayRef(this.injector, { direction });
+            const measure = () => {
+                frame = 0;
+                if (!target) {
+                    run.rect.set(null);
+                    return;
+                }
+                const box = target.getBoundingClientRect();
+                run.rect.set({
+                    top: box.top - padding,
+                    left: box.left - padding,
+                    width: box.width + padding * 2,
+                    height: box.height + padding * 2,
+                });
+                card.updatePosition();
+            };
+            const schedule = () => {
+                if (!frame)
+                    frame = view?.requestAnimationFrame(measure) ?? 0;
+            };
+            const place = (step) => {
+                const strategy = target
+                    ? createFlexibleConnectedPositionStrategy(this.injector, target)
+                        .withPositions(POSITIONS[step.placement ?? 'bottom'])
+                        .withViewportMargin(12)
+                        .withPush(true)
+                    : createGlobalPositionStrategy(this.injector).centerHorizontally().centerVertically();
+                card.updatePositionStrategy(strategy);
+                card.updateScrollStrategy(createRepositionScrollStrategy(this.injector));
+            };
+            const show = (index) => {
+                const step = steps[index];
+                target = resolveTarget(step.target, doc);
+                run.index.set(index);
+                options.stepChange?.(index, step);
+                if (target) {
+                    const reduced = view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? true;
+                    target.scrollIntoView?.({
+                        block: 'center',
+                        inline: 'nearest',
+                        behavior: reduced ? 'auto' : 'smooth',
+                    });
+                }
+                place(step);
+                if (!card.hasAttached())
+                    card.attach(new ComponentPortal(TourCard, null, injector));
+                measure();
+            };
+            const finish = (result) => {
+                view?.removeEventListener('scroll', schedule, true);
+                view?.removeEventListener('resize', schedule);
+                if (frame)
+                    view?.cancelAnimationFrame(frame);
+                card.dispose();
+                spotlight.dispose();
+                this.active = null;
+                previousFocus?.focus?.();
+                resolve(result);
+            };
+            view?.addEventListener('scroll', schedule, true);
+            view?.addEventListener('resize', schedule);
+            show(0);
+        });
+        return this.active;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TourService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: TourService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TourService, decorators: [{
+            type: Service
+        }] });
+function resolveTarget(target, doc) {
+    if (!target)
+        return null;
+    if (typeof target === 'string')
+        return doc.querySelector(target);
+    return target instanceof ElementRef ? target.nativeElement : target;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TourRun, TourService };
+//# sourceMappingURL=mesgflow-ui-kit-tour.mjs.map