@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { input, model, inject, computed, signal, forwardRef, Component } from '@angular/core';
+import { input, model, booleanAttribute, output, inject, computed, viewChild, signal, forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MF_COMBOBOX_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { focusRecipe, MF_COMBOBOX_LABELS, nextId, cn } from '@mesgflow/ui-kit/core';
 import { Icon } from '@mesgflow/ui-kit/icon';
 import { Popover } from '@mesgflow/ui-kit/popover';
 import { cva } from 'class-variance-authority';
@@ -12,7 +12,9 @@ import { cva } from 'class-variance-authority';
 const comboboxTriggerVariants = cva('w-full rounded-md border border-border bg-surface pe-9 text-sm text-fg shadow-control ' +
     'transition-colors duration-fast ease-emphasis placeholder:text-fg-subtle ' +
     'hover:border-border-strong ' +
-    'focus:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
+    'focus:border-accent ' +
+    focusRecipe +
+    ' ' +
     'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:hover:border-border', {
     variants: {
         size: {
@@ -30,7 +32,7 @@ const comboboxTriggerVariants = cva('w-full rounded-md border border-border bg-s
 const comboboxOptionVariants = cva('flex cursor-pointer items-center justify-between gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis', {
     variants: {
         highlighted: {
-            true: 'bg-surface-alt',
+            true: 'bg-state-hover text-fg',
             false: '',
         },
         selected: {
@@ -41,63 +43,94 @@ const comboboxOptionVariants = cva('flex cursor-pointer items-center justify-bet
     defaultVariants: { highlighted: false, selected: false },
 });
 
-let comboboxIdSeq = 0;
 /**
- * `<mf-combobox [options]="opts" [(value)]="chosen" placeholder="Ara..." />`
+ * `<mf-combobox [options]="opts" [(value)]="chosen" />` — filtrelenebilir tekli seçim.
+ * `<mf-combobox multiple [options]="opts" [(values)]="tags" creatable (create)="add($event)" />`
+ * — çoklu seçim (çipler), isteğe bağlı "oluştur" satırı.
  *
- * `Select`'in (bkz. select.ts) genişletilmiş hâli — filtrelenebilir/typeahead
- * seçim. `@angular/aria/combobox` + `@angular/aria/listbox` zincirini
- * KULLANMADI, bilinçli bir tercih: o zincir kendi popup pozisyonlamasını
- * taşımıyor (headless), `Select`'in ZATEN kanıtlanmış CDK Overlay + elle ARIA
- * deseni (highlighted index, `role="listbox"`/`role="option"`) buraya
- * genişletmek, dört ayrı directive'i (Combobox/ComboboxPopup/ComboboxWidget/
- * Listbox/Option) doğru sırayla bağlamaktan daha az riskli.
+ * ARIA 1.2 combobox deseni: input `role="combobox"` + `aria-controls` (listbox)
+ * + `aria-activedescendant` (vurgulanan satır; odak input'ta kalır). Çoklu
+ * modda listbox `aria-multiselectable`, seçim sonrası panel AÇIK kalır ve
+ * sorgu temizlenir; boş sorguda Backspace son çipi kaldırır.
  *
- * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU —
- * aksi halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır
- * (klasik combobox tuzağı).
+ * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU — aksi
+ * halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır.
  */
 class Combobox {
     options = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Çoklu modda seçili değerler. */
+    values = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Sorgu hiçbir etiketle birebir eşleşmezse listenin sonunda "oluştur" satırı. */
+    creatable = input(false, { ...(ngDevMode ? { debugName: "creatable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     placeholder = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    hasError = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Harici `<label for>` / `mf-field for` için input id'si. */
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /** "Oluştur" satırı seçildi — tüketici seçeneği ekleyip seçer. */
+    create = output();
     onChange = () => { };
     onTouched = () => { };
-    comboboxLabels = inject(MF_COMBOBOX_LABELS);
-    effectivePlaceholder = computed(() => this.placeholder() ?? this.comboboxLabels().placeholder, /* @ts-ignore */
+    labels = inject(MF_COMBOBOX_LABELS);
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.labels().placeholder, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('inputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     query = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     highlighted = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-    triggerClasses = computed(() => cn(comboboxTriggerVariants({ size: this.size(), hasError: this.hasError() })), /* @ts-ignore */
+    listboxId = nextId('mf-combobox-listbox');
+    optionIdPrefix = nextId('mf-combobox-option');
+    triggerClasses = computed(() => cn(comboboxTriggerVariants({ size: this.size(), hasError: this.hasError() }), this.multiple() && 'flex flex-wrap items-center gap-1 cursor-text focus-within:border-accent'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
-    /** ARIA 1.2 combobox deseni: input'un `aria-controls`'ü panel listbox'ına işaret etmeli. */
-    listboxId = `mf-combobox-listbox-${++comboboxIdSeq}`;
     selectedLabel = computed(() => this.options().find((o) => o.value === this.value())?.label ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
-    filteredOptions = computed(() => {
-        const q = this.query().trim().toLowerCase();
-        if (!q)
-            return this.options();
-        return this.options().filter((o) => o.label.toLowerCase().includes(q));
+    selectedOptions = computed(() => {
+        const values = this.values();
+        return values
+            .map((v) => this.options().find((o) => o.value === v))
+            .filter((o) => !!o);
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const q = this.query().trim().toLocaleLowerCase();
+        const matches = !q
+            ? this.options()
+            : this.options().filter((o) => `${o.label} ${o.description ?? ''}`.toLocaleLowerCase().includes(q));
+        const rows = matches.map((option) => ({ kind: 'option', option }));
+        const exact = this.options().some((o) => o.label.toLocaleLowerCase() === q);
+        if (this.creatable() && q && !exact)
+            rows.push({ kind: 'create', query: this.query().trim() });
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    activeDescendant = computed(() => this.open() && this.rows().length ? `${this.optionIdPrefix}-${this.highlighted()}` : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    createLabel(query) {
+        return this.labels().create.replace('{query}', query);
+    }
+    removeLabel(label) {
+        return this.labels().remove.replace('{label}', label);
+    }
     writeValue(value) {
-        this.value.set(value);
+        if (this.multiple())
+            this.values.set(Array.isArray(value) ? value : []);
+        else
+            this.value.set(value ?? null);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -112,66 +145,113 @@ class Combobox {
         this.highlighted.set(0);
         this.open.set(true);
     }
+    focusInput() {
+        this.inputEl()?.nativeElement.focus();
+    }
     onQueryInput(raw) {
         this.query.set(raw);
         this.highlighted.set(0);
         if (!this.open())
             this.open.set(true);
     }
-    select(option) {
+    choose(row) {
+        if (row.kind === 'create') {
+            this.create.emit(row.query);
+            this.query.set('');
+            if (!this.multiple())
+                this.close();
+            return;
+        }
+        const option = row.option;
+        if (option.disabled)
+            return;
+        if (this.multiple()) {
+            const values = this.values();
+            const next = values.includes(option.value)
+                ? values.filter((v) => v !== option.value)
+                : [...values, option.value];
+            this.values.set(next);
+            this.onChange(next);
+            this.query.set('');
+            this.focusInput();
+            return;
+        }
         this.value.set(option.value);
         this.onChange(option.value);
         this.close();
     }
+    removeValue(value) {
+        const next = this.values().filter((v) => v !== value);
+        this.values.set(next);
+        this.onChange(next);
+        this.focusInput();
+    }
     close() {
         this.open.set(false);
         this.query.set('');
         this.onTouched();
     }
     isSelected(option) {
-        return option.value === this.value();
+        return this.multiple() ? this.values().includes(option.value) : option.value === this.value();
     }
-    optionClasses(option, index) {
-        return cn(comboboxOptionVariants({
-            highlighted: index === this.highlighted() && !this.isSelected(option),
-            selected: this.isSelected(option),
-        }));
+    rowClasses(row, index) {
+        const selected = row.kind === 'option' && this.isSelected(row.option);
+        return cn(comboboxOptionVariants({ highlighted: index === this.highlighted() && !selected, selected }), row.kind === 'option' && row.option.disabled && 'pointer-events-none opacity-50', selected && index === this.highlighted() && 'outline-1 -outline-offset-1 outline-accent/40');
     }
     onKeydown(event) {
-        const options = this.filteredOptions();
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            this.close();
-            return;
-        }
-        if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            if (!this.open()) {
-                this.open.set(true);
+        const rows = this.rows();
+        switch (event.key) {
+            case 'Escape':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                return;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.open()) {
+                    this.open.set(true);
+                    return;
+                }
+                this.highlighted.update((i) => Math.min(rows.length - 1, i + 1));
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlighted.update((i) => Math.max(0, i - 1));
+                return;
+            case 'Home':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.highlighted.set(0);
+                }
+                return;
+            case 'End':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.highlighted.set(Math.max(0, rows.length - 1));
+                }
+                return;
+            case 'Enter': {
+                event.preventDefault();
+                const row = rows[this.highlighted()];
+                if (row)
+                    this.choose(row);
                 return;
             }
-            this.highlighted.update((i) => Math.min(options.length - 1, i + 1));
-            return;
-        }
-        if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            this.highlighted.update((i) => Math.max(0, i - 1));
-            return;
-        }
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            const option = options[this.highlighted()];
-            if (option)
-                this.select(option);
+            case 'Backspace':
+                if (this.multiple() && !this.query() && this.values().length) {
+                    this.removeValue(this.values()[this.values().length - 1]);
+                }
+                return;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Combobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Combobox, isStandalone: true, selector: "mf-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], exportAs: ["mfCombobox"], ngImport: i0, template: "<div class=\"relative\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [class]=\"triggerClasses()\"\r\n    [value]=\"open() ? query() : selectedLabel()\"\r\n    [placeholder]=\"effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul [id]=\"listboxId\" role=\"listbox\" class=\"max-h-64 min-w-[8rem] text-sm\">\r\n    @for (option of filteredOptions(); track option.label; let i = $index) {\r\n      <!--\r\n        `role=\"option\"` sat\u0131rlar\u0131 B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi\r\n        input'un `(keydown)` i\u015Fleyicisinde (yukar\u0131da) merkezi olarak y\u00F6netiliyor\r\n        (roving-highlight deseni); `(click)` yaln\u0131zca fare/dokunma i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"isSelected(option)\"\r\n        [class]=\"optionClasses(option, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(option)\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        @if (isSelected(option)) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ comboboxLabels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Combobox, isStandalone: true, selector: "mf-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", create: "create" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["mfCombobox"], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Sat\u0131rlar B\u0130LEREK odaklanabilir de\u011Fil \u2014 odak input'ta kal\u0131r, vurgulanan\r\n        sat\u0131r aria-activedescendant ile duyurulur.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Combobox, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-combobox', exportAs: 'mfCombobox', host: { class: 'block' }, imports: [OverlayModule, Icon, Popover], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], template: "<div class=\"relative\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [class]=\"triggerClasses()\"\r\n    [value]=\"open() ? query() : selectedLabel()\"\r\n    [placeholder]=\"effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul [id]=\"listboxId\" role=\"listbox\" class=\"max-h-64 min-w-[8rem] text-sm\">\r\n    @for (option of filteredOptions(); track option.label; let i = $index) {\r\n      <!--\r\n        `role=\"option\"` sat\u0131rlar\u0131 B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi\r\n        input'un `(keydown)` i\u015Fleyicisinde (yukar\u0131da) merkezi olarak y\u00F6netiliyor\r\n        (roving-highlight deseni); `(click)` yaln\u0131zca fare/dokunma i\u00E7in.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"isSelected(option)\"\r\n        [class]=\"optionClasses(option, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(option)\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        @if (isSelected(option)) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ comboboxLabels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+            args: [{ selector: 'mf-combobox', exportAs: 'mfCombobox', host: { class: 'block' }, imports: [OverlayModule, Icon, Popover], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Sat\u0131rlar B\u0130LEREK odaklanabilir de\u011Fil \u2014 odak input'ta kal\u0131r, vurgulanan\r\n        sat\u0131r aria-activedescendant ile duyurulur.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], create: [{ type: i0.Output, args: ["create"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-combobox.mjs","sources":["../../../projects/ui-kit/combobox/combobox.variants.ts","../../../projects/ui-kit/combobox/combobox.ts","../../../projects/ui-kit/combobox/combobox.html","../../../projects/ui-kit/combobox/mesgflow-ui-kit-combobox.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/** `Select`'in trigger/option görsel diliyle AYNI — bkz. select.variants.ts / `core/recipes.ts`. */\r\nexport const comboboxTriggerVariants = cva(\r\n  'w-full rounded-md border border-border bg-surface pe-9 text-sm text-fg shadow-control ' +\r\n    'transition-colors duration-fast ease-emphasis placeholder:text-fg-subtle ' +\r\n    'hover:border-border-strong ' +\r\n    'focus:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:hover:border-border',\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: 'min-h-(--control-h-sm) px-2.5 py-1',\r\n        md: 'min-h-(--control-h-md) px-3 py-1.5',\r\n        lg: 'min-h-(--control-h-lg) px-3.5 py-2 text-base',\r\n      },\r\n      hasError: {\r\n        true: 'border-danger focus:border-danger focus-visible:outline-danger',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { size: 'md', hasError: false },\r\n  },\r\n);\r\n\r\nexport type ComboboxSize = VariantProps<typeof comboboxTriggerVariants>['size'];\r\nexport type ComboboxHasError = VariantProps<typeof comboboxTriggerVariants>['hasError'];\r\n\r\nexport const comboboxOptionVariants = cva(\r\n  'flex cursor-pointer items-center justify-between gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis',\r\n  {\r\n    variants: {\r\n      highlighted: {\r\n        true: 'bg-surface-alt',\r\n        false: '',\r\n      },\r\n      selected: {\r\n        true: 'bg-primary-tint text-primary-tint-fg',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { highlighted: false, selected: false },\r\n  },\r\n);\r\n","import { OverlayModule } from '@angular/cdk/overlay';\r\nimport { Component, computed, forwardRef, inject, input, model, signal } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { cn, MF_COMBOBOX_LABELS, type MfSize } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Popover } from '@mesgflow/ui-kit/popover';\r\nimport { comboboxOptionVariants, comboboxTriggerVariants } from './combobox.variants';\r\n\r\nexport interface ComboboxOption<T> {\r\n  label: string;\r\n  value: T;\r\n}\r\n\r\nlet comboboxIdSeq = 0;\r\n\r\n/**\r\n * `<mf-combobox [options]=\"opts\" [(value)]=\"chosen\" placeholder=\"Ara...\" />`\r\n *\r\n * `Select`'in (bkz. select.ts) genişletilmiş hâli — filtrelenebilir/typeahead\r\n * seçim. `@angular/aria/combobox` + `@angular/aria/listbox` zincirini\r\n * KULLANMADI, bilinçli bir tercih: o zincir kendi popup pozisyonlamasını\r\n * taşımıyor (headless), `Select`'in ZATEN kanıtlanmış CDK Overlay + elle ARIA\r\n * deseni (highlighted index, `role=\"listbox\"`/`role=\"option\"`) buraya\r\n * genişletmek, dört ayrı directive'i (Combobox/ComboboxPopup/ComboboxWidget/\r\n * Listbox/Option) doğru sırayla bağlamaktan daha az riskli.\r\n *\r\n * `(mousedown)=\"$event.preventDefault()\"` seçenek satırında ZORUNLU —\r\n * aksi halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır\r\n * (klasik combobox tuzağı).\r\n */\r\n@Component({\r\n  selector: 'mf-combobox',\r\n  exportAs: 'mfCombobox',\r\n  host: { class: 'block' },\r\n  imports: [OverlayModule, Icon, Popover],\r\n  templateUrl: './combobox.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }],\r\n})\r\nexport class Combobox<T> implements ControlValueAccessor {\r\n  readonly options = input.required<ComboboxOption<T>[]>();\r\n  readonly value = model<T | null>(null);\r\n  readonly placeholder = input<string>();\r\n  readonly disabled = input(false);\r\n  readonly size = input<MfSize>('md');\r\n  readonly hasError = input(false);\r\n  readonly ariaLabel = input('');\r\n\r\n  private onChange: (value: T | null) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  protected readonly comboboxLabels = inject(MF_COMBOBOX_LABELS);\r\n  protected readonly effectivePlaceholder = computed(\r\n    () => this.placeholder() ?? this.comboboxLabels().placeholder,\r\n  );\r\n\r\n  protected readonly open = signal(false);\r\n  protected readonly query = signal('');\r\n  protected readonly highlighted = signal(0);\r\n\r\n  protected readonly triggerClasses = computed(() =>\r\n    cn(comboboxTriggerVariants({ size: this.size(), hasError: this.hasError() })),\r\n  );\r\n  /** ARIA 1.2 combobox deseni: input'un `aria-controls`'ü panel listbox'ına işaret etmeli. */\r\n  protected readonly listboxId = `mf-combobox-listbox-${++comboboxIdSeq}`;\r\n\r\n  protected readonly selectedLabel = computed(\r\n    () => this.options().find((o) => o.value === this.value())?.label ?? '',\r\n  );\r\n\r\n  protected readonly filteredOptions = computed(() => {\r\n    const q = this.query().trim().toLowerCase();\r\n    if (!q) return this.options();\r\n    return this.options().filter((o) => o.label.toLowerCase().includes(q));\r\n  });\r\n\r\n  writeValue(value: T | null): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: (value: T | null) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  protected onFocus(): void {\r\n    if (this.disabled()) return;\r\n    this.query.set('');\r\n    this.highlighted.set(0);\r\n    this.open.set(true);\r\n  }\r\n\r\n  protected onQueryInput(raw: string): void {\r\n    this.query.set(raw);\r\n    this.highlighted.set(0);\r\n    if (!this.open()) this.open.set(true);\r\n  }\r\n\r\n  protected select(option: ComboboxOption<T>): void {\r\n    this.value.set(option.value);\r\n    this.onChange(option.value);\r\n    this.close();\r\n  }\r\n\r\n  protected close(): void {\r\n    this.open.set(false);\r\n    this.query.set('');\r\n    this.onTouched();\r\n  }\r\n\r\n  protected isSelected(option: ComboboxOption<T>): boolean {\r\n    return option.value === this.value();\r\n  }\r\n\r\n  protected optionClasses(option: ComboboxOption<T>, index: number): string {\r\n    return cn(\r\n      comboboxOptionVariants({\r\n        highlighted: index === this.highlighted() && !this.isSelected(option),\r\n        selected: this.isSelected(option),\r\n      }),\r\n    );\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    const options = this.filteredOptions();\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.close();\r\n      return;\r\n    }\r\n    if (event.key === 'ArrowDown') {\r\n      event.preventDefault();\r\n      if (!this.open()) {\r\n        this.open.set(true);\r\n        return;\r\n      }\r\n      this.highlighted.update((i) => Math.min(options.length - 1, i + 1));\r\n      return;\r\n    }\r\n    if (event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      this.highlighted.update((i) => Math.max(0, i - 1));\r\n      return;\r\n    }\r\n    if (event.key === 'Enter') {\r\n      event.preventDefault();\r\n      const option = options[this.highlighted()];\r\n      if (option) this.select(option);\r\n    }\r\n  }\r\n}\r\n","<div class=\"relative\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [class]=\"triggerClasses()\"\r\n    [value]=\"open() ? query() : selectedLabel()\"\r\n    [placeholder]=\"effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul [id]=\"listboxId\" role=\"listbox\" class=\"max-h-64 min-w-[8rem] text-sm\">\r\n    @for (option of filteredOptions(); track option.label; let i = $index) {\r\n      <!--\r\n        `role=\"option\"` satırları BİLEREK odaklanabilir değil — klavye gezinmesi\r\n        input'un `(keydown)` işleyicisinde (yukarıda) merkezi olarak yönetiliyor\r\n        (roving-highlight deseni); `(click)` yalnızca fare/dokunma için.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"isSelected(option)\"\r\n        [class]=\"optionClasses(option, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(option)\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        @if (isSelected(option)) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ comboboxLabels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-combobox.mjs","sources":["../../../projects/ui-kit/combobox/combobox.variants.ts","../../../projects/ui-kit/combobox/combobox.ts","../../../projects/ui-kit/combobox/combobox.html","../../../projects/ui-kit/combobox/mesgflow-ui-kit-combobox.ts"],"sourcesContent":["import { focusRecipe } from '@mesgflow/ui-kit/core';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/** `Select`'in trigger/option görsel diliyle AYNI — bkz. select.variants.ts / `core/recipes.ts`. */\r\nexport const comboboxTriggerVariants = cva(\r\n  'w-full rounded-md border border-border bg-surface pe-9 text-sm text-fg shadow-control ' +\r\n    'transition-colors duration-fast ease-emphasis placeholder:text-fg-subtle ' +\r\n    'hover:border-border-strong ' +\r\n    'focus:border-accent ' +\r\n    focusRecipe +\r\n    ' ' +\r\n    'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:hover:border-border',\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: 'min-h-(--control-h-sm) px-2.5 py-1',\r\n        md: 'min-h-(--control-h-md) px-3 py-1.5',\r\n        lg: 'min-h-(--control-h-lg) px-3.5 py-2 text-base',\r\n      },\r\n      hasError: {\r\n        true: 'border-danger focus:border-danger focus-visible:outline-danger',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { size: 'md', hasError: false },\r\n  },\r\n);\r\n\r\nexport type ComboboxSize = VariantProps<typeof comboboxTriggerVariants>['size'];\r\nexport type ComboboxHasError = VariantProps<typeof comboboxTriggerVariants>['hasError'];\r\n\r\nexport const comboboxOptionVariants = cva(\r\n  'flex cursor-pointer items-center justify-between gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis',\r\n  {\r\n    variants: {\r\n      highlighted: {\r\n        true: 'bg-state-hover text-fg',\r\n        false: '',\r\n      },\r\n      selected: {\r\n        true: 'bg-primary-tint text-primary-tint-fg',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { highlighted: false, selected: false },\r\n  },\r\n);\r\n","import { OverlayModule } from '@angular/cdk/overlay';\r\nimport {\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  forwardRef,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { cn, MF_COMBOBOX_LABELS, nextId, type MfSize } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Popover } from '@mesgflow/ui-kit/popover';\r\nimport { comboboxOptionVariants, comboboxTriggerVariants } from './combobox.variants';\r\n\r\nexport interface ComboboxOption<T> {\r\n  label: string;\r\n  value: T;\r\n  /** İkincil satır (e-posta, açıklama) — aramaya da dahildir. */\r\n  description?: string;\r\n  disabled?: boolean;\r\n}\r\n\r\n/** Listede gösterilen satır — gerçek bir seçenek ya da \"oluştur\" satırı. */\r\ntype Row<T> = { kind: 'option'; option: ComboboxOption<T> } | { kind: 'create'; query: string };\r\n\r\n/**\r\n * `<mf-combobox [options]=\"opts\" [(value)]=\"chosen\" />` — filtrelenebilir tekli seçim.\r\n * `<mf-combobox multiple [options]=\"opts\" [(values)]=\"tags\" creatable (create)=\"add($event)\" />`\r\n * — çoklu seçim (çipler), isteğe bağlı \"oluştur\" satırı.\r\n *\r\n * ARIA 1.2 combobox deseni: input `role=\"combobox\"` + `aria-controls` (listbox)\r\n * + `aria-activedescendant` (vurgulanan satır; odak input'ta kalır). Çoklu\r\n * modda listbox `aria-multiselectable`, seçim sonrası panel AÇIK kalır ve\r\n * sorgu temizlenir; boş sorguda Backspace son çipi kaldırır.\r\n *\r\n * `(mousedown)=\"$event.preventDefault()\"` seçenek satırında ZORUNLU — aksi\r\n * halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır.\r\n */\r\n@Component({\r\n  selector: 'mf-combobox',\r\n  exportAs: 'mfCombobox',\r\n  host: { class: 'block' },\r\n  imports: [OverlayModule, Icon, Popover],\r\n  templateUrl: './combobox.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }],\r\n})\r\nexport class Combobox<T> implements ControlValueAccessor {\r\n  readonly options = input.required<ComboboxOption<T>[]>();\r\n  readonly value = model<T | null>(null);\r\n  /** Çoklu modda seçili değerler. */\r\n  readonly values = model<T[]>([]);\r\n  readonly multiple = input(false, { transform: booleanAttribute });\r\n  /** Sorgu hiçbir etiketle birebir eşleşmezse listenin sonunda \"oluştur\" satırı. */\r\n  readonly creatable = input(false, { transform: booleanAttribute });\r\n  readonly placeholder = input<string>();\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly size = input<MfSize>('md');\r\n  readonly hasError = input(false, { transform: booleanAttribute });\r\n  readonly ariaLabel = input('');\r\n  /** Harici `<label for>` / `mf-field for` için input id'si. */\r\n  readonly inputId = input<string>();\r\n\r\n  /** \"Oluştur\" satırı seçildi — tüketici seçeneği ekleyip seçer. */\r\n  readonly create = output<string>();\r\n\r\n  private onChange: (value: T | T[] | null) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  protected readonly labels = inject(MF_COMBOBOX_LABELS);\r\n  protected readonly effectivePlaceholder = computed(\r\n    () => this.placeholder() ?? this.labels().placeholder,\r\n  );\r\n\r\n  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\r\n  protected readonly open = signal(false);\r\n  protected readonly query = signal('');\r\n  protected readonly highlighted = signal(0);\r\n\r\n  protected readonly listboxId = nextId('mf-combobox-listbox');\r\n  protected readonly optionIdPrefix = nextId('mf-combobox-option');\r\n\r\n  protected readonly triggerClasses = computed(() =>\r\n    cn(\r\n      comboboxTriggerVariants({ size: this.size(), hasError: this.hasError() }),\r\n      this.multiple() && 'flex flex-wrap items-center gap-1 cursor-text focus-within:border-accent',\r\n    ),\r\n  );\r\n\r\n  protected readonly selectedLabel = computed(\r\n    () => this.options().find((o) => o.value === this.value())?.label ?? '',\r\n  );\r\n\r\n  protected readonly selectedOptions = computed(() => {\r\n    const values = this.values();\r\n    return values\r\n      .map((v) => this.options().find((o) => o.value === v))\r\n      .filter((o): o is ComboboxOption<T> => !!o);\r\n  });\r\n\r\n  protected readonly rows = computed<Row<T>[]>(() => {\r\n    const q = this.query().trim().toLocaleLowerCase();\r\n    const matches = !q\r\n      ? this.options()\r\n      : this.options().filter((o) =>\r\n          `${o.label} ${o.description ?? ''}`.toLocaleLowerCase().includes(q),\r\n        );\r\n    const rows: Row<T>[] = matches.map((option) => ({ kind: 'option', option }));\r\n    const exact = this.options().some((o) => o.label.toLocaleLowerCase() === q);\r\n    if (this.creatable() && q && !exact) rows.push({ kind: 'create', query: this.query().trim() });\r\n    return rows;\r\n  });\r\n\r\n  protected readonly activeDescendant = computed(() =>\r\n    this.open() && this.rows().length ? `${this.optionIdPrefix}-${this.highlighted()}` : null,\r\n  );\r\n\r\n  protected createLabel(query: string): string {\r\n    return this.labels().create.replace('{query}', query);\r\n  }\r\n\r\n  protected removeLabel(label: string): string {\r\n    return this.labels().remove.replace('{label}', label);\r\n  }\r\n\r\n  writeValue(value: T | T[] | null): void {\r\n    if (this.multiple()) this.values.set(Array.isArray(value) ? value : []);\r\n    else this.value.set((value as T | null) ?? null);\r\n  }\r\n\r\n  registerOnChange(fn: (value: T | T[] | null) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  protected onFocus(): void {\r\n    if (this.disabled()) return;\r\n    this.query.set('');\r\n    this.highlighted.set(0);\r\n    this.open.set(true);\r\n  }\r\n\r\n  protected focusInput(): void {\r\n    this.inputEl()?.nativeElement.focus();\r\n  }\r\n\r\n  protected onQueryInput(raw: string): void {\r\n    this.query.set(raw);\r\n    this.highlighted.set(0);\r\n    if (!this.open()) this.open.set(true);\r\n  }\r\n\r\n  protected choose(row: Row<T>): void {\r\n    if (row.kind === 'create') {\r\n      this.create.emit(row.query);\r\n      this.query.set('');\r\n      if (!this.multiple()) this.close();\r\n      return;\r\n    }\r\n    const option = row.option;\r\n    if (option.disabled) return;\r\n    if (this.multiple()) {\r\n      const values = this.values();\r\n      const next = values.includes(option.value)\r\n        ? values.filter((v) => v !== option.value)\r\n        : [...values, option.value];\r\n      this.values.set(next);\r\n      this.onChange(next);\r\n      this.query.set('');\r\n      this.focusInput();\r\n      return;\r\n    }\r\n    this.value.set(option.value);\r\n    this.onChange(option.value);\r\n    this.close();\r\n  }\r\n\r\n  protected removeValue(value: T): void {\r\n    const next = this.values().filter((v) => v !== value);\r\n    this.values.set(next);\r\n    this.onChange(next);\r\n    this.focusInput();\r\n  }\r\n\r\n  protected close(): void {\r\n    this.open.set(false);\r\n    this.query.set('');\r\n    this.onTouched();\r\n  }\r\n\r\n  protected isSelected(option: ComboboxOption<T>): boolean {\r\n    return this.multiple() ? this.values().includes(option.value) : option.value === this.value();\r\n  }\r\n\r\n  protected rowClasses(row: Row<T>, index: number): string {\r\n    const selected = row.kind === 'option' && this.isSelected(row.option);\r\n    return cn(\r\n      comboboxOptionVariants({ highlighted: index === this.highlighted() && !selected, selected }),\r\n      row.kind === 'option' && row.option.disabled && 'pointer-events-none opacity-50',\r\n      selected && index === this.highlighted() && 'outline-1 -outline-offset-1 outline-accent/40',\r\n    );\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    const rows = this.rows();\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        if (this.open()) {\r\n          event.preventDefault();\r\n          this.close();\r\n        }\r\n        return;\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        if (!this.open()) {\r\n          this.open.set(true);\r\n          return;\r\n        }\r\n        this.highlighted.update((i) => Math.min(rows.length - 1, i + 1));\r\n        return;\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        this.highlighted.update((i) => Math.max(0, i - 1));\r\n        return;\r\n      case 'Home':\r\n        if (this.open()) {\r\n          event.preventDefault();\r\n          this.highlighted.set(0);\r\n        }\r\n        return;\r\n      case 'End':\r\n        if (this.open()) {\r\n          event.preventDefault();\r\n          this.highlighted.set(Math.max(0, rows.length - 1));\r\n        }\r\n        return;\r\n      case 'Enter': {\r\n        event.preventDefault();\r\n        const row = rows[this.highlighted()];\r\n        if (row) this.choose(row);\r\n        return;\r\n      }\r\n      case 'Backspace':\r\n        if (this.multiple() && !this.query() && this.values().length) {\r\n          this.removeValue(this.values()[this.values().length - 1]!);\r\n        }\r\n        return;\r\n    }\r\n  }\r\n}\r\n","<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Satırlar BİLEREK odaklanabilir değil — odak input'ta kalır, vurgulanan\r\n        satır aria-activedescendant ile duyurulur.\r\n      -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\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-context-menu.mjs

@@ -2,6 +2,7 @@ import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
 import { input, inject, ViewContainerRef, Directive } from '@angular/core';
+import { pointerPositions } from '@mesgflow/ui-kit/core';
 
 /**
  * `<div [mfContextMenu]="menuTpl" #ctx="mfContextMenu">Sağ tıkla</div>
@@ -42,18 +43,15 @@ class ContextMenu {
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo({ x: event.clientX, y: event.clientY })
-            .withPositions([
-            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },
-            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
-            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
-        ])
+            .withPositions(pointerPositions())
             .withPush(true);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.close(),
             hasBackdrop: true,
             backdropClass: 'cdk-overlay-transparent-backdrop',
+            // İmlece bakan köşeden büyür (`mf-origin-*`, bkz. pointerPositions).
+            panelClass: 'animate-overlay-in',
         });
         this.overlayRef.backdropClick().subscribe(() => this.close());
         this.overlayRef.keydownEvents().subscribe((e) => {

package/fesm2022/mesgflow-ui-kit-context-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-context-menu.mjs","sources":["../../../projects/ui-kit/context-menu/context-menu.ts","../../../projects/ui-kit/context-menu/mesgflow-ui-kit-context-menu.ts"],"sourcesContent":["import { Overlay, type OverlayRef } from '@angular/cdk/overlay';\r\nimport { TemplatePortal } from '@angular/cdk/portal';\r\nimport { Directive, OnDestroy, TemplateRef, ViewContainerRef, inject, input } from '@angular/core';\r\n\r\n/**\r\n * `<div [mfContextMenu]=\"menuTpl\" #ctx=\"mfContextMenu\">Sağ tıkla</div>\r\n *  <ng-template #menuTpl>\r\n *    <mf-menu (itemSelected)=\"onSelect($event); ctx.close()\">\r\n *      <button mfMenuItem value=\"edit\">Düzenle</button>\r\n *      <button mfMenuItem value=\"delete\">Sil</button>\r\n *    </mf-menu>\r\n *  </ng-template>`\r\n *\r\n * Sağ tıkla İMLEÇ KONUMUNDA bir menü açar — native tarayıcı bağlam menüsü\r\n * `event.preventDefault()` ile bastırılır. Kitteki ilk \"gerçek DOM elemanına\r\n * değil bir NOKTAYA sabitlenen\" overlay (bkz. `Tooltip`'in aynı\r\n * `flexibleConnectedTo` + elle `Overlay.create()` deseni) — `mf-popover`\r\n * KULLANILMADI çünkü `Popover.origin` bir `CdkOverlayOrigin` (gerçek bir\r\n * DOM elemanı) şart koşuyor, imleç noktası değil; CDK'nın\r\n * `flexibleConnectedTo` stratejisi bir `{x, y}` noktasını da DOĞRUDAN kabul\r\n * ediyor, ayrı bir \"görünmez sanal anchor elemanı\" hilesi GEREKMİYOR.\r\n *\r\n * Menü seçimi/kapanışı çağıranın kendi sorumluluğunda — `mfMenuTrigger`\r\n * deseniyle AYNI ilke (bkz. `menu-trigger.ts`): `itemSelected`'te\r\n * `ctx.close()`'u KENDİ elle çağırırsın.\r\n */\r\n@Directive({\r\n  selector: '[mfContextMenu]',\r\n  exportAs: 'mfContextMenu',\r\n  host: {\r\n    '(contextmenu)': 'onContextMenu($event)',\r\n  },\r\n})\r\nexport class ContextMenu implements OnDestroy {\r\n  readonly mfContextMenu = input<TemplateRef<unknown> | null>(null);\r\n  readonly disabled = input(false);\r\n\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly viewContainerRef = inject(ViewContainerRef);\r\n  private overlayRef?: OverlayRef;\r\n\r\n  protected onContextMenu(event: MouseEvent): void {\r\n    const template = this.mfContextMenu();\r\n    if (this.disabled() || !template) return;\r\n    event.preventDefault();\r\n    this.close();\r\n\r\n    const positionStrategy = this.overlay\r\n      .position()\r\n      .flexibleConnectedTo({ x: event.clientX, y: event.clientY })\r\n      .withPositions([\r\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },\r\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },\r\n        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },\r\n        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'bottom' },\r\n      ])\r\n      .withPush(true);\r\n\r\n    this.overlayRef = this.overlay.create({\r\n      positionStrategy,\r\n      scrollStrategy: this.overlay.scrollStrategies.close(),\r\n      hasBackdrop: true,\r\n      backdropClass: 'cdk-overlay-transparent-backdrop',\r\n    });\r\n    this.overlayRef.backdropClick().subscribe(() => this.close());\r\n    this.overlayRef.keydownEvents().subscribe((e) => {\r\n      if (e.key === 'Escape') this.close();\r\n    });\r\n    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\r\n  }\r\n\r\n  /** Public — menü içeriğinden (bkz. sınıf üstündeki JSDoc örneği) elle kapatmak için. */\r\n  close(): void {\r\n    this.overlayRef?.dispose();\r\n    this.overlayRef = undefined;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.close();\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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"}
+{"version":3,"file":"mesgflow-ui-kit-context-menu.mjs","sources":["../../../projects/ui-kit/context-menu/context-menu.ts","../../../projects/ui-kit/context-menu/mesgflow-ui-kit-context-menu.ts"],"sourcesContent":["import { Overlay, type OverlayRef } from '@angular/cdk/overlay';\r\nimport { TemplatePortal } from '@angular/cdk/portal';\r\nimport { Directive, OnDestroy, TemplateRef, ViewContainerRef, inject, input } from '@angular/core';\r\nimport { pointerPositions } from '@mesgflow/ui-kit/core';\r\n\r\n/**\r\n * `<div [mfContextMenu]=\"menuTpl\" #ctx=\"mfContextMenu\">Sağ tıkla</div>\r\n *  <ng-template #menuTpl>\r\n *    <mf-menu (itemSelected)=\"onSelect($event); ctx.close()\">\r\n *      <button mfMenuItem value=\"edit\">Düzenle</button>\r\n *      <button mfMenuItem value=\"delete\">Sil</button>\r\n *    </mf-menu>\r\n *  </ng-template>`\r\n *\r\n * Sağ tıkla İMLEÇ KONUMUNDA bir menü açar — native tarayıcı bağlam menüsü\r\n * `event.preventDefault()` ile bastırılır. Kitteki ilk \"gerçek DOM elemanına\r\n * değil bir NOKTAYA sabitlenen\" overlay (bkz. `Tooltip`'in aynı\r\n * `flexibleConnectedTo` + elle `Overlay.create()` deseni) — `mf-popover`\r\n * KULLANILMADI çünkü `Popover.origin` bir `CdkOverlayOrigin` (gerçek bir\r\n * DOM elemanı) şart koşuyor, imleç noktası değil; CDK'nın\r\n * `flexibleConnectedTo` stratejisi bir `{x, y}` noktasını da DOĞRUDAN kabul\r\n * ediyor, ayrı bir \"görünmez sanal anchor elemanı\" hilesi GEREKMİYOR.\r\n *\r\n * Menü seçimi/kapanışı çağıranın kendi sorumluluğunda — `mfMenuTrigger`\r\n * deseniyle AYNI ilke (bkz. `menu-trigger.ts`): `itemSelected`'te\r\n * `ctx.close()`'u KENDİ elle çağırırsın.\r\n */\r\n@Directive({\r\n  selector: '[mfContextMenu]',\r\n  exportAs: 'mfContextMenu',\r\n  host: {\r\n    '(contextmenu)': 'onContextMenu($event)',\r\n  },\r\n})\r\nexport class ContextMenu implements OnDestroy {\r\n  readonly mfContextMenu = input<TemplateRef<unknown> | null>(null);\r\n  readonly disabled = input(false);\r\n\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly viewContainerRef = inject(ViewContainerRef);\r\n  private overlayRef?: OverlayRef;\r\n\r\n  protected onContextMenu(event: MouseEvent): void {\r\n    const template = this.mfContextMenu();\r\n    if (this.disabled() || !template) return;\r\n    event.preventDefault();\r\n    this.close();\r\n\r\n    const positionStrategy = this.overlay\r\n      .position()\r\n      .flexibleConnectedTo({ x: event.clientX, y: event.clientY })\r\n      .withPositions(pointerPositions())\r\n      .withPush(true);\r\n\r\n    this.overlayRef = this.overlay.create({\r\n      positionStrategy,\r\n      scrollStrategy: this.overlay.scrollStrategies.close(),\r\n      hasBackdrop: true,\r\n      backdropClass: 'cdk-overlay-transparent-backdrop',\r\n      // İmlece bakan köşeden büyür (`mf-origin-*`, bkz. pointerPositions).\r\n      panelClass: 'animate-overlay-in',\r\n    });\r\n    this.overlayRef.backdropClick().subscribe(() => this.close());\r\n    this.overlayRef.keydownEvents().subscribe((e) => {\r\n      if (e.key === 'Escape') this.close();\r\n    });\r\n    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\r\n  }\r\n\r\n  /** Public — menü içeriğinden (bkz. sınıf üstündeki JSDoc örneği) elle kapatmak için. */\r\n  close(): void {\r\n    this.overlayRef?.dispose();\r\n    this.overlayRef = undefined;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.close();\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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"}