@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -0,0 +1,283 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { input, output, inject, Component, ElementRef, signal, computed, DestroyRef, Directive } from '@angular/core';
+import { Avatar } from '@mesgflow/ui-kit/avatar';
+import { MF_MENTION_LABELS, nextId, pointerPositions } from '@mesgflow/ui-kit/core';
+
+/** İmlecin öğeye göre piksel konumu — gizli bir "ayna" div ile ölçülür. */
+function caretCoordinates(el, position) {
+    const style = getComputedStyle(el);
+    const mirror = document.createElement('div');
+    const props = [
+        'boxSizing',
+        'width',
+        'height',
+        'overflowX',
+        'overflowY',
+        'borderTopWidth',
+        'borderRightWidth',
+        'borderBottomWidth',
+        'borderLeftWidth',
+        'paddingTop',
+        'paddingRight',
+        'paddingBottom',
+        'paddingLeft',
+        'fontStyle',
+        'fontVariant',
+        'fontWeight',
+        'fontStretch',
+        'fontSize',
+        'lineHeight',
+        'fontFamily',
+        'textAlign',
+        'textTransform',
+        'textIndent',
+        'letterSpacing',
+        'wordSpacing',
+        'direction',
+    ];
+    for (const p of props)
+        mirror.style[p] = style[p];
+    mirror.style.position = 'absolute';
+    mirror.style.visibility = 'hidden';
+    mirror.style.whiteSpace = el instanceof HTMLTextAreaElement ? 'pre-wrap' : 'pre';
+    mirror.style.overflowWrap = 'break-word';
+    mirror.textContent = el.value.slice(0, position);
+    const marker = document.createElement('span');
+    marker.textContent = el.value.slice(position) || '.';
+    mirror.appendChild(marker);
+    document.body.appendChild(mirror);
+    const top = marker.offsetTop - el.scrollTop + parseFloat(style.borderTopWidth || '0');
+    const left = marker.offsetLeft - el.scrollLeft + parseFloat(style.borderLeftWidth || '0');
+    const height = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.3;
+    mirror.remove();
+    return { top, left, height };
+}
+/** Öneri paneli — `mfMention` direktifi açar. */
+class MentionPanel {
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    active = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    listId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
+    pick = output();
+    labels = inject(MF_MENTION_LABELS);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MentionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MentionPanel, isStandalone: true, selector: "mf-mention-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pick: "pick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <ul
+      [id]="listId()"
+      role="listbox"
+      [attr.aria-label]="labels().suggestions"
+      class="m-0 max-h-64 w-64 list-none overflow-y-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2 animate-overlay-in"
+    >
+      @for (item of items(); track item.value; let i = $index) {
+        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+        <li
+          role="option"
+          [id]="listId() + '-' + i"
+          [attr.aria-selected]="i === active()"
+          class="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-fg-muted"
+          [class.bg-state-hover]="i === active()"
+          [class.text-fg]="i === active()"
+          (mousedown)="$event.preventDefault()"
+          (click)="pick.emit(item)"
+        >
+          <mf-avatar [name]="item.label" size="sm" [colorful]="true" />
+          <span class="min-w-0">
+            <span class="block truncate font-medium">{{ item.label }}</span>
+            @if (item.description) {
+              <span class="block truncate text-xs text-fg-subtle">{{ item.description }}</span>
+            }
+          </span>
+        </li>
+      } @empty {
+        <li class="px-2 py-3 text-center text-fg-subtle">{{ labels().noResults }}</li>
+      }
+    </ul>
+  `, isInline: true, dependencies: [{ kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MentionPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-mention-panel',
+                    imports: [Avatar],
+                    host: { class: 'block' },
+                    template: `
+    <ul
+      [id]="listId()"
+      role="listbox"
+      [attr.aria-label]="labels().suggestions"
+      class="m-0 max-h-64 w-64 list-none overflow-y-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2 animate-overlay-in"
+    >
+      @for (item of items(); track item.value; let i = $index) {
+        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+        <li
+          role="option"
+          [id]="listId() + '-' + i"
+          [attr.aria-selected]="i === active()"
+          class="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-fg-muted"
+          [class.bg-state-hover]="i === active()"
+          [class.text-fg]="i === active()"
+          (mousedown)="$event.preventDefault()"
+          (click)="pick.emit(item)"
+        >
+          <mf-avatar [name]="item.label" size="sm" [colorful]="true" />
+          <span class="min-w-0">
+            <span class="block truncate font-medium">{{ item.label }}</span>
+            @if (item.description) {
+              <span class="block truncate text-xs text-fg-subtle">{{ item.description }}</span>
+            }
+          </span>
+        </li>
+      } @empty {
+        <li class="px-2 py-3 text-center text-fg-subtle">{{ labels().noResults }}</li>
+      }
+    </ul>
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], pick: [{ type: i0.Output, args: ["pick"] }] } });
+/**
+ * `<textarea mfInput [mfMention]="people" (mentionAdd)="notify($event)"></textarea>`
+ *
+ * `@` (ya da `trigger`) yazınca imlecin hemen altında filtrelenmiş öneriler
+ * açar; ↑/↓ gezinir, Enter/Tab seçer, Escape kapatır. Seçim `@Ad ` olarak
+ * metne eklenir ve `mentionAdd` yayar. Erişilebilirlik: `aria-autocomplete`,
+ * `aria-controls` ve vurgulanan öneri için `aria-activedescendant` (odak
+ * metin alanında kalır).
+ */
+class Mention {
+    mfMention = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mfMention" }] : /* istanbul ignore next */ []));
+    trigger = input('@', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    mentionAdd = output();
+    listId = nextId('mf-mention');
+    el = inject(ElementRef).nativeElement;
+    overlay = inject(Overlay);
+    ref = null;
+    panel = null;
+    query = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    queryStart = 0;
+    active = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.query() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    filtered = computed(() => {
+        const q = (this.query() ?? '').toLocaleLowerCase();
+        return this.mfMention()
+            .filter((i) => `${i.label} ${i.value}`.toLocaleLowerCase().includes(q))
+            .slice(0, 8);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.ref?.dispose());
+    }
+    onInput() {
+        const caret = this.el.selectionStart ?? this.el.value.length;
+        const before = this.el.value.slice(0, caret);
+        const t = this.trigger();
+        const at = before.lastIndexOf(t);
+        const token = at >= 0 ? before.slice(at + t.length) : '';
+        const boundaryOk = at === 0 || (at > 0 && /\s/.test(before[at - 1]));
+        if (at < 0 || !boundaryOk || /\s/.test(token))
+            return this.close();
+        this.queryStart = at;
+        this.query.set(token);
+        this.active.set(0);
+        this.render();
+    }
+    onKeydown(e) {
+        const event = e;
+        if (!this.isOpen())
+            return;
+        const n = this.filtered().length;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!n)
+                return;
+            this.active.update((i) => (i + (event.key === 'ArrowDown' ? 1 : -1) + n) % n);
+            this.render();
+        }
+        else if ((event.key === 'Enter' || event.key === 'Tab') && n) {
+            event.preventDefault();
+            this.insert(this.filtered()[this.active()]);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    close() {
+        this.query.set(null);
+        this.ref?.detach();
+    }
+    insert(item) {
+        const caret = this.el.selectionStart ?? this.el.value.length;
+        const text = `${this.trigger()}${item.label} `;
+        const value = this.el.value;
+        this.el.value = value.slice(0, this.queryStart) + text + value.slice(caret);
+        const pos = this.queryStart + text.length;
+        this.el.setSelectionRange(pos, pos);
+        this.el.dispatchEvent(new Event('input', { bubbles: true }));
+        this.close();
+        this.mentionAdd.emit(item);
+    }
+    render() {
+        const coords = caretCoordinates(this.el, this.queryStart);
+        const rect = this.el.getBoundingClientRect();
+        const point = { x: rect.left + coords.left, y: rect.top + coords.top + coords.height };
+        if (!this.ref) {
+            this.ref = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(point)
+                    .withPositions(pointerPositions())
+                    .withPush(true),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            });
+        }
+        else {
+            this.ref.updatePositionStrategy(this.overlay
+                .position()
+                .flexibleConnectedTo(point)
+                .withPositions(pointerPositions())
+                .withPush(true));
+        }
+        if (!this.ref.hasAttached()) {
+            this.panel = this.ref.attach(new ComponentPortal(MentionPanel));
+            this.panel.instance.pick.subscribe((item) => this.insert(item));
+        }
+        this.panel.setInput('items', this.filtered());
+        this.panel.setInput('active', this.active());
+        this.panel.setInput('listId', this.listId);
+        this.panel.changeDetectorRef.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Mention, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: Mention, isStandalone: true, selector: "textarea[mfMention], input[mfMention]", inputs: { mfMention: { classPropertyName: "mfMention", publicName: "mfMention", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mentionAdd: "mentionAdd" }, host: { attributes: { "aria-autocomplete": "list" }, listeners: { "input": "onInput()", "keydown": "onKeydown($event)", "blur": "close()", "click": "onInput()" }, properties: { "attr.aria-controls": "isOpen() ? listId : null", "attr.aria-activedescendant": "isOpen() && filtered().length ? listId + \"-\" + active() : null" } }, exportAs: ["mfMention"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Mention, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[mfMention], input[mfMention]',
+                    exportAs: 'mfMention',
+                    host: {
+                        'aria-autocomplete': 'list',
+                        '[attr.aria-controls]': 'isOpen() ? listId : null',
+                        '[attr.aria-activedescendant]': 'isOpen() && filtered().length ? listId + "-" + active() : null',
+                        '(input)': 'onInput()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(blur)': 'close()',
+                        '(click)': 'onInput()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { mfMention: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfMention", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], mentionAdd: [{ type: i0.Output, args: ["mentionAdd"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Mention, MentionPanel, caretCoordinates };
+//# sourceMappingURL=mesgflow-ui-kit-mention.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-mention.mjs","sources":["../../../projects/ui-kit/mention/mention.ts","../../../projects/ui-kit/mention/mesgflow-ui-kit-mention.ts"],"sourcesContent":["import { Overlay, type OverlayRef } from '@angular/cdk/overlay';\r\nimport { ComponentPortal } from '@angular/cdk/portal';\r\nimport {\r\n  Component,\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  type ComponentRef,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { Avatar } from '@mesgflow/ui-kit/avatar';\r\nimport { MF_MENTION_LABELS, nextId, pointerPositions } from '@mesgflow/ui-kit/core';\r\n\r\nexport interface MentionItem {\r\n  label: string;\r\n  value: string;\r\n  description?: string;\r\n}\r\n\r\n/** İmlecin öğeye göre piksel konumu — gizli bir \"ayna\" div ile ölçülür. */\r\nexport function caretCoordinates(\r\n  el: HTMLTextAreaElement | HTMLInputElement,\r\n  position: number,\r\n): { top: number; left: number; height: number } {\r\n  const style = getComputedStyle(el);\r\n  const mirror = document.createElement('div');\r\n  const props = [\r\n    'boxSizing',\r\n    'width',\r\n    'height',\r\n    'overflowX',\r\n    'overflowY',\r\n    'borderTopWidth',\r\n    'borderRightWidth',\r\n    'borderBottomWidth',\r\n    'borderLeftWidth',\r\n    'paddingTop',\r\n    'paddingRight',\r\n    'paddingBottom',\r\n    'paddingLeft',\r\n    'fontStyle',\r\n    'fontVariant',\r\n    'fontWeight',\r\n    'fontStretch',\r\n    'fontSize',\r\n    'lineHeight',\r\n    'fontFamily',\r\n    'textAlign',\r\n    'textTransform',\r\n    'textIndent',\r\n    'letterSpacing',\r\n    'wordSpacing',\r\n    'direction',\r\n  ] as const;\r\n  for (const p of props) mirror.style[p] = style[p];\r\n  mirror.style.position = 'absolute';\r\n  mirror.style.visibility = 'hidden';\r\n  mirror.style.whiteSpace = el instanceof HTMLTextAreaElement ? 'pre-wrap' : 'pre';\r\n  mirror.style.overflowWrap = 'break-word';\r\n  mirror.textContent = el.value.slice(0, position);\r\n  const marker = document.createElement('span');\r\n  marker.textContent = el.value.slice(position) || '.';\r\n  mirror.appendChild(marker);\r\n  document.body.appendChild(mirror);\r\n  const top = marker.offsetTop - el.scrollTop + parseFloat(style.borderTopWidth || '0');\r\n  const left = marker.offsetLeft - el.scrollLeft + parseFloat(style.borderLeftWidth || '0');\r\n  const height = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.3;\r\n  mirror.remove();\r\n  return { top, left, height };\r\n}\r\n\r\n/** Öneri paneli — `mfMention` direktifi açar. */\r\n@Component({\r\n  selector: 'mf-mention-panel',\r\n  imports: [Avatar],\r\n  host: { class: 'block' },\r\n  template: `\r\n    <ul\r\n      [id]=\"listId()\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"labels().suggestions\"\r\n      class=\"m-0 max-h-64 w-64 list-none overflow-y-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2 animate-overlay-in\"\r\n    >\r\n      @for (item of items(); track item.value; let i = $index) {\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]=\"listId() + '-' + i\"\r\n          [attr.aria-selected]=\"i === active()\"\r\n          class=\"flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-fg-muted\"\r\n          [class.bg-state-hover]=\"i === active()\"\r\n          [class.text-fg]=\"i === active()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"pick.emit(item)\"\r\n        >\r\n          <mf-avatar [name]=\"item.label\" size=\"sm\" [colorful]=\"true\" />\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate font-medium\">{{ item.label }}</span>\r\n            @if (item.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{ item.description }}</span>\r\n            }\r\n          </span>\r\n        </li>\r\n      } @empty {\r\n        <li class=\"px-2 py-3 text-center text-fg-subtle\">{{ labels().noResults }}</li>\r\n      }\r\n    </ul>\r\n  `,\r\n})\r\nexport class MentionPanel {\r\n  readonly items = input<MentionItem[]>([]);\r\n  readonly active = input(0);\r\n  readonly listId = input('');\r\n  readonly pick = output<MentionItem>();\r\n  protected readonly labels = inject(MF_MENTION_LABELS);\r\n}\r\n\r\n/**\r\n * `<textarea mfInput [mfMention]=\"people\" (mentionAdd)=\"notify($event)\"></textarea>`\r\n *\r\n * `@` (ya da `trigger`) yazınca imlecin hemen altında filtrelenmiş öneriler\r\n * açar; ↑/↓ gezinir, Enter/Tab seçer, Escape kapatır. Seçim `@Ad ` olarak\r\n * metne eklenir ve `mentionAdd` yayar. Erişilebilirlik: `aria-autocomplete`,\r\n * `aria-controls` ve vurgulanan öneri için `aria-activedescendant` (odak\r\n * metin alanında kalır).\r\n */\r\n@Directive({\r\n  selector: 'textarea[mfMention], input[mfMention]',\r\n  exportAs: 'mfMention',\r\n  host: {\r\n    'aria-autocomplete': 'list',\r\n    '[attr.aria-controls]': 'isOpen() ? listId : null',\r\n    '[attr.aria-activedescendant]':\r\n      'isOpen() && filtered().length ? listId + \"-\" + active() : null',\r\n    '(input)': 'onInput()',\r\n    '(keydown)': 'onKeydown($event)',\r\n    '(blur)': 'close()',\r\n    '(click)': 'onInput()',\r\n  },\r\n})\r\nexport class Mention {\r\n  readonly mfMention = input.required<MentionItem[]>();\r\n  readonly trigger = input('@');\r\n  readonly mentionAdd = output<MentionItem>();\r\n\r\n  protected readonly listId = nextId('mf-mention');\r\n  private readonly el =\r\n    inject<ElementRef<HTMLTextAreaElement | HTMLInputElement>>(ElementRef).nativeElement;\r\n  private readonly overlay = inject(Overlay);\r\n  private ref: OverlayRef | null = null;\r\n  private panel: ComponentRef<MentionPanel> | null = null;\r\n\r\n  private readonly query = signal<string | null>(null);\r\n  private queryStart = 0;\r\n  protected readonly active = signal(0);\r\n  protected readonly isOpen = computed(() => this.query() !== null);\r\n  protected readonly filtered = computed(() => {\r\n    const q = (this.query() ?? '').toLocaleLowerCase();\r\n    return this.mfMention()\r\n      .filter((i) => `${i.label} ${i.value}`.toLocaleLowerCase().includes(q))\r\n      .slice(0, 8);\r\n  });\r\n\r\n  constructor() {\r\n    inject(DestroyRef).onDestroy(() => this.ref?.dispose());\r\n  }\r\n\r\n  protected onInput(): void {\r\n    const caret = this.el.selectionStart ?? this.el.value.length;\r\n    const before = this.el.value.slice(0, caret);\r\n    const t = this.trigger();\r\n    const at = before.lastIndexOf(t);\r\n    const token = at >= 0 ? before.slice(at + t.length) : '';\r\n    const boundaryOk = at === 0 || (at > 0 && /\\s/.test(before[at - 1]!));\r\n    if (at < 0 || !boundaryOk || /\\s/.test(token)) return this.close();\r\n    this.queryStart = at;\r\n    this.query.set(token);\r\n    this.active.set(0);\r\n    this.render();\r\n  }\r\n\r\n  protected onKeydown(e: Event): void {\r\n    const event = e as KeyboardEvent;\r\n    if (!this.isOpen()) return;\r\n    const n = this.filtered().length;\r\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      if (!n) return;\r\n      this.active.update((i) => (i + (event.key === 'ArrowDown' ? 1 : -1) + n) % n);\r\n      this.render();\r\n    } else if ((event.key === 'Enter' || event.key === 'Tab') && n) {\r\n      event.preventDefault();\r\n      this.insert(this.filtered()[this.active()]!);\r\n    } else if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.close();\r\n    }\r\n  }\r\n\r\n  close(): void {\r\n    this.query.set(null);\r\n    this.ref?.detach();\r\n  }\r\n\r\n  private insert(item: MentionItem): void {\r\n    const caret = this.el.selectionStart ?? this.el.value.length;\r\n    const text = `${this.trigger()}${item.label} `;\r\n    const value = this.el.value;\r\n    this.el.value = value.slice(0, this.queryStart) + text + value.slice(caret);\r\n    const pos = this.queryStart + text.length;\r\n    this.el.setSelectionRange(pos, pos);\r\n    this.el.dispatchEvent(new Event('input', { bubbles: true }));\r\n    this.close();\r\n    this.mentionAdd.emit(item);\r\n  }\r\n\r\n  private render(): void {\r\n    const coords = caretCoordinates(this.el, this.queryStart);\r\n    const rect = this.el.getBoundingClientRect();\r\n    const point = { x: rect.left + coords.left, y: rect.top + coords.top + coords.height };\r\n    if (!this.ref) {\r\n      this.ref = this.overlay.create({\r\n        positionStrategy: this.overlay\r\n          .position()\r\n          .flexibleConnectedTo(point)\r\n          .withPositions(pointerPositions())\r\n          .withPush(true),\r\n        scrollStrategy: this.overlay.scrollStrategies.reposition(),\r\n      });\r\n    } else {\r\n      this.ref.updatePositionStrategy(\r\n        this.overlay\r\n          .position()\r\n          .flexibleConnectedTo(point)\r\n          .withPositions(pointerPositions())\r\n          .withPush(true),\r\n      );\r\n    }\r\n    if (!this.ref.hasAttached()) {\r\n      this.panel = this.ref.attach(new ComponentPortal(MentionPanel));\r\n      this.panel.instance.pick.subscribe((item) => this.insert(item));\r\n    }\r\n    this.panel!.setInput('items', this.filtered());\r\n    this.panel!.setInput('active', this.active());\r\n    this.panel!.setInput('listId', this.listId);\r\n    this.panel!.changeDetectorRef.detectChanges();\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-menu.mjs

@@ -1,9 +1,13 @@
 import * as i1 from '@angular/aria/menu';
-import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger as MenuTrigger$1 } from '@angular/aria/menu';
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger as MenuTrigger$1, MenuBar, MenuContent } from '@angular/aria/menu';
 import * as i0 from '@angular/core';
-import { Component, inject, computed, Directive } from '@angular/core';
-import { cn } from '@mesgflow/ui-kit/core';
+import { Component, inject, computed, Directive, input, output, signal, viewChildren } from '@angular/core';
+import { cn, overlayPositions } from '@mesgflow/ui-kit/core';
 import { cva } from 'class-variance-authority';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Kbd } from '@mesgflow/ui-kit/kbd';
 
 /**
  * `<mf-menu #menu="ngMenu" (itemSelected)="onSelect($event)"><button mfMenuItem value="a">A</button></mf-menu>`
@@ -45,7 +49,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 const menuItemVariants = cva('flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99]', {
     variants: {
         active: {
-            true: 'bg-surface-alt text-fg',
+            true: 'bg-state-hover text-fg',
             false: '',
         },
         disabled: {
@@ -97,9 +101,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }] });
 
+/**
+ * `<mf-menubar [menus]="menus" (itemSelect)="run($event)" ariaLabel="Editör" />`
+ *
+ * Masaüstü uygulama tarzı kalıcı menü çubuğu (Dosya · Düzen · Görünüm) —
+ * WAI-ARIA APG "Menubar": `@angular/aria/menu`'nün `ngMenuBar`/`ngMenu`
+ * desenleri. Klavye: ←/→ üst menüler arası (açık menü eşlik eder), ↓/Enter
+ * açar, ↑/↓ öğeler, typeahead, Escape kapatır ve odağı çubuğa döndürür.
+ *
+ * Alt menüler CDK bağlı overlay'lerinde; çubuğa ilk odak/hover'da bir kez
+ * render edilir (`rendered`), görünürlüğü `ngMenu`'nün `data-visible`'ı yönetir.
+ */
+class Menubar {
+    menus = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    itemSelect = output();
+    rendered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
+    submenus = viewChildren((Menu$1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submenus" }] : /* istanbul ignore next */ []));
+    positions = overlayPositions('bottom-start', 4);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Menubar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Menubar, isStandalone: true, selector: "mf-menubar", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "submenus", predicate: (Menu$1), descendants: true, isSignal: true }], exportAs: ["mfMenubar"], ngImport: i0, template: `
+    <div
+      ngMenuBar
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex items-center gap-0.5 rounded-lg border border-hairline bg-surface p-1 shadow-control"
+      (focusin)="rendered.set(true)"
+      (pointerenter)="rendered.set(true)"
+      (itemSelected)="itemSelect.emit($any($event))"
+    >
+      @for (menu of menus(); track menu.label; let i = $index) {
+        <div
+          ngMenuItem
+          #origin
+          #top="ngMenuItem"
+          [value]="menu.label"
+          [submenu]="$any(submenus()[i])"
+          class="cursor-default rounded-md px-3 py-1 text-sm font-medium text-fg-muted outline-none select-none transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-expanded:bg-state-selected aria-expanded:text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring"
+        >
+          {{ menu.label }}
+        </div>
+
+        <ng-template
+          [cdkConnectedOverlayOpen]="rendered()"
+          [cdkConnectedOverlay]="{ origin: origin, usePopover: 'inline' }"
+          [cdkConnectedOverlayPositions]="positions"
+          [cdkConnectedOverlayDisableClose]="true"
+          cdkAttachPopoverAsChild
+        >
+          <div
+            ngMenu
+            class="min-w-[13rem] rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2 data-[visible=false]:hidden data-[visible=true]:animate-overlay-in"
+          >
+            <ng-template ngMenuContent>
+              @for (action of menu.items; track action.value) {
+                <div
+                  ngMenuItem
+                  [value]="action.value"
+                  [disabled]="!!action.disabled"
+                  class="flex cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted outline-none select-none data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-disabled:pointer-events-none aria-disabled:opacity-50"
+                  [class.text-danger]="action.danger"
+                >
+                  <span
+                    mfIcon
+                    [size]="16"
+                    class="text-fg-subtle"
+                    [class.invisible]="!action.icon"
+                    >{{ action.icon || 'circle' }}</span
+                  >
+                  <span class="flex-1">{{ action.label }}</span>
+                  @if (action.shortcut) {
+                    <kbd mfKbd class="ms-6">{{ action.shortcut }}</kbd>
+                  }
+                </div>
+                @if (action.separatorAfter) {
+                  <div role="separator" class="mx-1 my-1 h-px bg-hairline"></div>
+                }
+              }
+            </ng-template>
+          </div>
+        </ng-template>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: MenuBar, selector: "[ngMenuBar]", inputs: ["disabled", "softDisabled", "value", "wrap", "typeaheadDelay"], outputs: ["valueChange", "itemSelected"], exportAs: ["ngMenuBar"] }, { kind: "directive", type: Menu$1, selector: "[ngMenu]", inputs: ["id", "wrap", "typeaheadDelay", "disabled", "softDisabled", "expansionDelay"], outputs: ["itemSelected"], exportAs: ["ngMenu"] }, { kind: "directive", type: MenuItem$1, selector: "[ngMenuItem]", inputs: ["id", "value", "disabled", "searchTerm", "role", "submenu"], outputs: ["searchTermChange"], exportAs: ["ngMenuItem"] }, { kind: "directive", type: MenuContent, selector: "ng-template[ngMenuContent]", exportAs: ["ngMenuContent"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Kbd, selector: "kbd[mfKbd]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Menubar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-menubar',
+                    exportAs: 'mfMenubar',
+                    imports: [OverlayModule, MenuBar, Menu$1, MenuItem$1, MenuContent, Icon, Kbd],
+                    host: { class: 'block' },
+                    template: `
+    <div
+      ngMenuBar
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex items-center gap-0.5 rounded-lg border border-hairline bg-surface p-1 shadow-control"
+      (focusin)="rendered.set(true)"
+      (pointerenter)="rendered.set(true)"
+      (itemSelected)="itemSelect.emit($any($event))"
+    >
+      @for (menu of menus(); track menu.label; let i = $index) {
+        <div
+          ngMenuItem
+          #origin
+          #top="ngMenuItem"
+          [value]="menu.label"
+          [submenu]="$any(submenus()[i])"
+          class="cursor-default rounded-md px-3 py-1 text-sm font-medium text-fg-muted outline-none select-none transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-expanded:bg-state-selected aria-expanded:text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring"
+        >
+          {{ menu.label }}
+        </div>
+
+        <ng-template
+          [cdkConnectedOverlayOpen]="rendered()"
+          [cdkConnectedOverlay]="{ origin: origin, usePopover: 'inline' }"
+          [cdkConnectedOverlayPositions]="positions"
+          [cdkConnectedOverlayDisableClose]="true"
+          cdkAttachPopoverAsChild
+        >
+          <div
+            ngMenu
+            class="min-w-[13rem] rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2 data-[visible=false]:hidden data-[visible=true]:animate-overlay-in"
+          >
+            <ng-template ngMenuContent>
+              @for (action of menu.items; track action.value) {
+                <div
+                  ngMenuItem
+                  [value]="action.value"
+                  [disabled]="!!action.disabled"
+                  class="flex cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted outline-none select-none data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-disabled:pointer-events-none aria-disabled:opacity-50"
+                  [class.text-danger]="action.danger"
+                >
+                  <span
+                    mfIcon
+                    [size]="16"
+                    class="text-fg-subtle"
+                    [class.invisible]="!action.icon"
+                    >{{ action.icon || 'circle' }}</span
+                  >
+                  <span class="flex-1">{{ action.label }}</span>
+                  @if (action.shortcut) {
+                    <kbd mfKbd class="ms-6">{{ action.shortcut }}</kbd>
+                  }
+                </div>
+                @if (action.separatorAfter) {
+                  <div role="separator" class="mx-1 my-1 h-px bg-hairline"></div>
+                }
+              }
+            </ng-template>
+          </div>
+        </ng-template>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], submenus: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => Menu$1), { isSignal: true }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Menu, MenuItem, MenuTrigger, menuItemVariants };
+export { Menu, MenuItem, MenuTrigger, Menubar, menuItemVariants };
 //# sourceMappingURL=mesgflow-ui-kit-menu.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-menu.mjs","sources":["../../../projects/ui-kit/menu/menu.ts","../../../projects/ui-kit/menu/menu.variants.ts","../../../projects/ui-kit/menu/menu-item.ts","../../../projects/ui-kit/menu/menu-trigger.ts","../../../projects/ui-kit/menu/mesgflow-ui-kit-menu.ts"],"sourcesContent":["import { Menu as AriaMenu } from '@angular/aria/menu';\r\nimport { Component } from '@angular/core';\r\n\r\n/**\r\n * `<mf-menu #menu=\"ngMenu\" (itemSelected)=\"onSelect($event)\"><button mfMenuItem value=\"a\">A</button></mf-menu>`\r\n * — genelde bir `mf-popover` içine konur, tetikleyici için `mfMenuTrigger`\r\n * kullanılır (bkz. `menu-trigger.ts`). ARIA/klavye (ok tuşu navigasyonu,\r\n * typeahead, alt-menü açma) `@angular/aria/menu`'nün `Menu` pattern'inden\r\n * `hostDirectives` ile geliyor — `Select`'in listbox'ıyla AYNI görsel dil\r\n * (rounded-lg, shadow-2, bg-overlay).\r\n *\r\n * `hostDirectives` uygulanan bir directive'in KENDİ `exportAs`'ı (`ngMenu`)\r\n * host elemanda hâlâ kullanılabilir (Angular directive composition API'sinin\r\n * dokümante edilmiş davranışı) — bu yüzden `MenuTrigger`'ın `[menu]`\r\n * girdisine doğrudan `#menu=\"ngMenu\"` verilebiliyor, ayrı bir forward'a\r\n * gerek yok.\r\n */\r\n@Component({\r\n  selector: 'mf-menu',\r\n  exportAs: 'mfMenu',\r\n  hostDirectives: [\r\n    {\r\n      directive: AriaMenu,\r\n      inputs: ['wrap', 'disabled', 'typeaheadDelay'],\r\n      outputs: ['itemSelected'],\r\n    },\r\n  ],\r\n  host: {\r\n    class:\r\n      'block max-h-64 min-w-[10rem] overflow-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Menu {}\r\n","import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const menuItemVariants = cva(\r\n  'flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99]',\r\n  {\r\n    variants: {\r\n      active: {\r\n        true: 'bg-surface-alt text-fg',\r\n        false: '',\r\n      },\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50 active:scale-100',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { active: false, disabled: false },\r\n  },\r\n);\r\n\r\nexport type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];\r\n","import { MenuItem as AriaMenuItem } from '@angular/aria/menu';\r\nimport { Directive, computed, inject } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { menuItemVariants } from './menu.variants';\r\n\r\n/** `<button mfMenuItem value=\"delete\">Sil</button>` — `mf-menu` içine konur. */\r\n@Directive({\r\n  selector: 'button[mfMenuItem], div[mfMenuItem]',\r\n  hostDirectives: [{ directive: AriaMenuItem, inputs: ['value', 'disabled', 'id'] }],\r\n  host: { '[class]': 'classes()' },\r\n})\r\nexport class MenuItem<V> {\r\n  private readonly ariaMenuItem = inject<AriaMenuItem<V>>(AriaMenuItem);\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      menuItemVariants({\r\n        active: this.ariaMenuItem.active(),\r\n        disabled: this.ariaMenuItem.disabled(),\r\n      }),\r\n    ),\r\n  );\r\n}\r\n","import { MenuTrigger as AriaMenuTrigger } from '@angular/aria/menu';\r\nimport { Directive } from '@angular/core';\r\n\r\n/**\r\n * `<button mfMenuTrigger [menu]=\"menuRef\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">Aç</button>`\r\n * — `[menu]`'ye `mf-menu`'nün `#ref=\"ngMenu\"` template referansını ver.\r\n * Pozisyonlama (floating panel) bu directive'in İŞİ DEĞİL — `@angular/aria/menu`\r\n * headless, konum bilgisi taşımıyor; `mf-popover`'ın `[open]=\"trigger.expanded()\"`\r\n * ile beslenmesi gerekiyor (bkz. playground'daki Menu demosu, `(closed)`\r\n * çıktısında `trigger.close()` çağırarak iki state'i senkron tutma deseni).\r\n */\r\n@Directive({\r\n  selector: '[mfMenuTrigger]',\r\n  exportAs: 'mfMenuTrigger',\r\n  hostDirectives: [{ directive: AriaMenuTrigger, inputs: ['menu', 'disabled'] }],\r\n})\r\nexport class MenuTrigger {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaMenu","AriaMenuItem","AriaMenuTrigger"],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-menu.mjs","sources":["../../../projects/ui-kit/menu/menu.ts","../../../projects/ui-kit/menu/menu.variants.ts","../../../projects/ui-kit/menu/menu-item.ts","../../../projects/ui-kit/menu/menu-trigger.ts","../../../projects/ui-kit/menu/menubar.ts","../../../projects/ui-kit/menu/mesgflow-ui-kit-menu.ts"],"sourcesContent":["import { Menu as AriaMenu } from '@angular/aria/menu';\r\nimport { Component } from '@angular/core';\r\n\r\n/**\r\n * `<mf-menu #menu=\"ngMenu\" (itemSelected)=\"onSelect($event)\"><button mfMenuItem value=\"a\">A</button></mf-menu>`\r\n * — genelde bir `mf-popover` içine konur, tetikleyici için `mfMenuTrigger`\r\n * kullanılır (bkz. `menu-trigger.ts`). ARIA/klavye (ok tuşu navigasyonu,\r\n * typeahead, alt-menü açma) `@angular/aria/menu`'nün `Menu` pattern'inden\r\n * `hostDirectives` ile geliyor — `Select`'in listbox'ıyla AYNI görsel dil\r\n * (rounded-lg, shadow-2, bg-overlay).\r\n *\r\n * `hostDirectives` uygulanan bir directive'in KENDİ `exportAs`'ı (`ngMenu`)\r\n * host elemanda hâlâ kullanılabilir (Angular directive composition API'sinin\r\n * dokümante edilmiş davranışı) — bu yüzden `MenuTrigger`'ın `[menu]`\r\n * girdisine doğrudan `#menu=\"ngMenu\"` verilebiliyor, ayrı bir forward'a\r\n * gerek yok.\r\n */\r\n@Component({\r\n  selector: 'mf-menu',\r\n  exportAs: 'mfMenu',\r\n  hostDirectives: [\r\n    {\r\n      directive: AriaMenu,\r\n      inputs: ['wrap', 'disabled', 'typeaheadDelay'],\r\n      outputs: ['itemSelected'],\r\n    },\r\n  ],\r\n  host: {\r\n    class:\r\n      'block max-h-64 min-w-[10rem] overflow-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Menu {}\r\n","import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const menuItemVariants = cva(\r\n  'flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99]',\r\n  {\r\n    variants: {\r\n      active: {\r\n        true: 'bg-state-hover text-fg',\r\n        false: '',\r\n      },\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50 active:scale-100',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { active: false, disabled: false },\r\n  },\r\n);\r\n\r\nexport type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];\r\n","import { MenuItem as AriaMenuItem } from '@angular/aria/menu';\r\nimport { Directive, computed, inject } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { menuItemVariants } from './menu.variants';\r\n\r\n/** `<button mfMenuItem value=\"delete\">Sil</button>` — `mf-menu` içine konur. */\r\n@Directive({\r\n  selector: 'button[mfMenuItem], div[mfMenuItem]',\r\n  hostDirectives: [{ directive: AriaMenuItem, inputs: ['value', 'disabled', 'id'] }],\r\n  host: { '[class]': 'classes()' },\r\n})\r\nexport class MenuItem<V> {\r\n  private readonly ariaMenuItem = inject<AriaMenuItem<V>>(AriaMenuItem);\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      menuItemVariants({\r\n        active: this.ariaMenuItem.active(),\r\n        disabled: this.ariaMenuItem.disabled(),\r\n      }),\r\n    ),\r\n  );\r\n}\r\n","import { MenuTrigger as AriaMenuTrigger } from '@angular/aria/menu';\r\nimport { Directive } from '@angular/core';\r\n\r\n/**\r\n * `<button mfMenuTrigger [menu]=\"menuRef\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">Aç</button>`\r\n * — `[menu]`'ye `mf-menu`'nün `#ref=\"ngMenu\"` template referansını ver.\r\n * Pozisyonlama (floating panel) bu directive'in İŞİ DEĞİL — `@angular/aria/menu`\r\n * headless, konum bilgisi taşımıyor; `mf-popover`'ın `[open]=\"trigger.expanded()\"`\r\n * ile beslenmesi gerekiyor (bkz. playground'daki Menu demosu, `(closed)`\r\n * çıktısında `trigger.close()` çağırarak iki state'i senkron tutma deseni).\r\n */\r\n@Directive({\r\n  selector: '[mfMenuTrigger]',\r\n  exportAs: 'mfMenuTrigger',\r\n  hostDirectives: [{ directive: AriaMenuTrigger, inputs: ['menu', 'disabled'] }],\r\n})\r\nexport class MenuTrigger {}\r\n","import { OverlayModule } from '@angular/cdk/overlay';\r\nimport {\r\n  Menu as AriaMenu,\r\n  MenuBar as AriaMenuBar,\r\n  MenuContent,\r\n  MenuItem as AriaMenuItem,\r\n} from '@angular/aria/menu';\r\nimport { Component, input, output, signal, viewChildren } from '@angular/core';\r\nimport { overlayPositions } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Kbd } from '@mesgflow/ui-kit/kbd';\r\n\r\nexport interface MenubarAction<V = string> {\r\n  label: string;\r\n  value: V;\r\n  icon?: string;\r\n  /** Görsel kısayol ipucu (ör. `Ctrl+S`) — kısayolu KAYDETMEZ, yalnızca gösterir. */\r\n  shortcut?: string;\r\n  disabled?: boolean;\r\n  danger?: boolean;\r\n  /** Bu öğeden SONRA ayırıcı çizgi. */\r\n  separatorAfter?: boolean;\r\n}\r\n\r\nexport interface MenubarMenu<V = string> {\r\n  label: string;\r\n  items: MenubarAction<V>[];\r\n}\r\n\r\n/**\r\n * `<mf-menubar [menus]=\"menus\" (itemSelect)=\"run($event)\" ariaLabel=\"Editör\" />`\r\n *\r\n * Masaüstü uygulama tarzı kalıcı menü çubuğu (Dosya · Düzen · Görünüm) —\r\n * WAI-ARIA APG \"Menubar\": `@angular/aria/menu`'nün `ngMenuBar`/`ngMenu`\r\n * desenleri. Klavye: ←/→ üst menüler arası (açık menü eşlik eder), ↓/Enter\r\n * açar, ↑/↓ öğeler, typeahead, Escape kapatır ve odağı çubuğa döndürür.\r\n *\r\n * Alt menüler CDK bağlı overlay'lerinde; çubuğa ilk odak/hover'da bir kez\r\n * render edilir (`rendered`), görünürlüğü `ngMenu`'nün `data-visible`'ı yönetir.\r\n */\r\n@Component({\r\n  selector: 'mf-menubar',\r\n  exportAs: 'mfMenubar',\r\n  imports: [OverlayModule, AriaMenuBar, AriaMenu, AriaMenuItem, MenuContent, Icon, Kbd],\r\n  host: { class: 'block' },\r\n  template: `\r\n    <div\r\n      ngMenuBar\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      class=\"flex items-center gap-0.5 rounded-lg border border-hairline bg-surface p-1 shadow-control\"\r\n      (focusin)=\"rendered.set(true)\"\r\n      (pointerenter)=\"rendered.set(true)\"\r\n      (itemSelected)=\"itemSelect.emit($any($event))\"\r\n    >\r\n      @for (menu of menus(); track menu.label; let i = $index) {\r\n        <div\r\n          ngMenuItem\r\n          #origin\r\n          #top=\"ngMenuItem\"\r\n          [value]=\"menu.label\"\r\n          [submenu]=\"$any(submenus()[i])\"\r\n          class=\"cursor-default rounded-md px-3 py-1 text-sm font-medium text-fg-muted outline-none select-none transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-expanded:bg-state-selected aria-expanded:text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring\"\r\n        >\r\n          {{ menu.label }}\r\n        </div>\r\n\r\n        <ng-template\r\n          [cdkConnectedOverlayOpen]=\"rendered()\"\r\n          [cdkConnectedOverlay]=\"{ origin: origin, usePopover: 'inline' }\"\r\n          [cdkConnectedOverlayPositions]=\"positions\"\r\n          [cdkConnectedOverlayDisableClose]=\"true\"\r\n          cdkAttachPopoverAsChild\r\n        >\r\n          <div\r\n            ngMenu\r\n            class=\"min-w-[13rem] rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2 data-[visible=false]:hidden data-[visible=true]:animate-overlay-in\"\r\n          >\r\n            <ng-template ngMenuContent>\r\n              @for (action of menu.items; track action.value) {\r\n                <div\r\n                  ngMenuItem\r\n                  [value]=\"action.value\"\r\n                  [disabled]=\"!!action.disabled\"\r\n                  class=\"flex cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted outline-none select-none data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-disabled:pointer-events-none aria-disabled:opacity-50\"\r\n                  [class.text-danger]=\"action.danger\"\r\n                >\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"16\"\r\n                    class=\"text-fg-subtle\"\r\n                    [class.invisible]=\"!action.icon\"\r\n                    >{{ action.icon || 'circle' }}</span\r\n                  >\r\n                  <span class=\"flex-1\">{{ action.label }}</span>\r\n                  @if (action.shortcut) {\r\n                    <kbd mfKbd class=\"ms-6\">{{ action.shortcut }}</kbd>\r\n                  }\r\n                </div>\r\n                @if (action.separatorAfter) {\r\n                  <div role=\"separator\" class=\"mx-1 my-1 h-px bg-hairline\"></div>\r\n                }\r\n              }\r\n            </ng-template>\r\n          </div>\r\n        </ng-template>\r\n      }\r\n    </div>\r\n  `,\r\n})\r\nexport class Menubar<V = string> {\r\n  readonly menus = input.required<MenubarMenu<V>[]>();\r\n  readonly ariaLabel = input('');\r\n  readonly itemSelect = output<V>();\r\n\r\n  protected readonly rendered = signal(false);\r\n  protected readonly submenus = viewChildren(AriaMenu<V>);\r\n  protected readonly positions = overlayPositions('bottom-start', 4);\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaMenu","AriaMenuItem","AriaMenuTrigger","i1","AriaMenuBar"],"mappings":"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"}