@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,569 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, signal, DestroyRef, afterNextRender, effect, Directive, viewChild, afterRenderEffect, Component, model, output } from '@angular/core';
+import * as i1 from '@angular/aria/tabs';
+import { TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from '@angular/aria/tabs';
+import { isRtl, scrollFromInlineStart, MF_TABS_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { cva } from 'class-variance-authority';
+
+/**
+ * `<div mfTabScroller>` — taşan bir sekme şeridini kaydırılabilir yapar:
+ * native scrollbar'ı gizler, kenar "solma" maskesini (`mask-image`)
+ * kaydırılabilir yöne göre günceller, `canScrollStart`/`canScrollEnd`
+ * sinyallerini dışarı verir (ok butonlarının görünürlüğü için — bkz.
+ * `tab-list.html`/`tab-strip.html`, ikisi de bu directive'i paylaşıyor).
+ *
+ * `orientation` varsayılanı `'horizontal'` — `TabStrip` (üst sekme çubuğu)
+ * bunu hiç geçmez, davranışı DEĞİŞMEZ. Dikey bir grup rayı gerektiren
+ * tüketiciler `orientation="vertical"` geçer (bkz. `tab-list.ts`).
+ *
+ * `mask-image` template'te `[style.mask-image]` ile DEĞİL, doğrudan
+ * `style.setProperty` ile yazılıyor — Angular'ın stil binding sözdizimi
+ * tire içeren (`-webkit-`) property adlarını binding adı olarak kabul
+ * etmiyor, ikisini TEK yerden (burada) senkron yazmak için imperatif yol
+ * daha güvenli (bkz. Tooltip'in de DOM'a doğrudan yazdığı emsal).
+ */
+class TabScroller {
+    el = inject(ElementRef);
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    vertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    canScrollStart = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollStart" }] : /* istanbul ignore next */ []));
+    canScrollEnd = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollEnd" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            this.updateEdges();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(() => this.updateEdges());
+            observer.observe(this.el.nativeElement);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+        effect(() => {
+            const start = this.canScrollStart() ? 24 : 0;
+            const end = this.canScrollEnd() ? 24 : 0;
+            // Maske satır başından sonuna — RTL'de başlangıç sağ kenar.
+            const direction = this.vertical()
+                ? 'to bottom'
+                : isRtl(this.el.nativeElement)
+                    ? 'to left'
+                    : 'to right';
+            const mask = `linear-gradient(${direction}, transparent, black ${start}px, black calc(100% - ${end}px), transparent 100%)`;
+            this.el.nativeElement.style.setProperty('mask-image', mask);
+            this.el.nativeElement.style.setProperty('-webkit-mask-image', mask);
+        });
+    }
+    scrollByDir(dir) {
+        const node = this.el.nativeElement;
+        if (this.vertical())
+            node.scrollBy({ top: dir * node.clientHeight * 0.8, behavior: 'smooth' });
+        else {
+            // `dir` mantıksal (−1 başa, +1 sona); RTL'de sona gitmek scrollLeft'i AZALTIR.
+            const sign = isRtl(node) ? -1 : 1;
+            node.scrollBy({ left: sign * dir * node.clientWidth * 0.8, behavior: 'smooth' });
+        }
+    }
+    scrollIntoViewIfNeeded(target) {
+        // jsdom (birim testleri) Element.scrollIntoView'ı UYGULAMIYOR — ResizeObserver'daki
+        // AYNI savunma deseni (bkz. constructor), gerçek tarayıcıda etkisiz bir NO-OP.
+        target.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }
+    updateEdges() {
+        const node = this.el.nativeElement;
+        if (this.vertical()) {
+            const max = node.scrollHeight - node.clientHeight;
+            this.canScrollStart.set(node.scrollTop > 1);
+            this.canScrollEnd.set(max > 1 && node.scrollTop < max - 1);
+            return;
+        }
+        const max = node.scrollWidth - node.clientWidth;
+        const offset = scrollFromInlineStart(node); // RTL'de scrollLeft negatif
+        this.canScrollStart.set(offset > 1);
+        this.canScrollEnd.set(max > 1 && offset < max - 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabScroller, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TabScroller, isStandalone: true, selector: "[mfTabScroller]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "scroll": "updateEdges()" }, properties: { "class.flex": "orientation() === \"horizontal\"", "class.min-w-0": "orientation() === \"horizontal\"", "class.overflow-x-auto": "orientation() === \"horizontal\"", "class.min-h-0": "orientation() === \"vertical\"", "class.overflow-y-auto": "orientation() === \"vertical\"" }, classAttribute: "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabScroller, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfTabScroller]',
+                    host: {
+                        class: '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                        '[class.flex]': 'orientation() === "horizontal"',
+                        '[class.min-w-0]': 'orientation() === "horizontal"',
+                        '[class.overflow-x-auto]': 'orientation() === "horizontal"',
+                        '[class.min-h-0]': 'orientation() === "vertical"',
+                        '[class.overflow-y-auto]': 'orientation() === "vertical"',
+                        '(scroll)': 'updateEdges()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+/**
+ * Bkz. `tab-list.ts`. `underline`'da ray AYRI, kayan bir `<span>` (JS ile
+ * konumlanır — bkz. `TabList.positionIndicator`); `card`'da ray HER sekmenin
+ * kendi `box-shadow`'unda yaşar (bkz. `tabVariants` compound'u), çünkü
+ * `card` görünümünde her sekme zaten kendi kenarlığıyla ayrık bir kutu —
+ * kayan tek bir gösterge o kutuların üstünden "kayarak" geçmezdi, doğal
+ * durmazdı. `relative` — kayan gösterge `absolute` konumlanıyor buna göre.
+ *
+ * `orientation` ekseni sol dikey grup rayı gerektiren ekranlar için eklendi —
+ * `@angular/aria/tabs`'ın ARIA/klavye desteği zaten yön-agnostik
+ * (`hostDirectives`'in `orientation` girdisi, bkz. `tab-list.ts`), eksik
+ * olan sadece bu görsel katmandı.
+ */
+const tabListVariants = cva('relative flex', {
+    variants: {
+        variant: {
+            underline: 'gap-1',
+            card: 'gap-1.5',
+        },
+        orientation: {
+            horizontal: 'min-w-max items-center',
+            vertical: 'w-full flex-col items-stretch',
+        },
+    },
+    defaultVariants: { variant: 'underline', orientation: 'horizontal' },
+});
+/**
+ * `selected`/`disabled` burada `aria-selected`/`aria-disabled` CSS
+ * seçicileriyle DEĞİL, `Tab`'ın kendi `computed()`'ıyla (bkz. `tab.ts`)
+ * okunan sinyal değerleriyle besleniyor — kod tabanındaki yerleşik desen
+ * (Select'in `optionClasses`, Table'ın `rowClasses`) TS'te hesaplanan koşullu
+ * class, CSS attribute-selector değil.
+ */
+const tabVariants = cva('relative inline-flex shrink-0 cursor-pointer appearance-none items-center gap-1.5 whitespace-nowrap border-0 bg-transparent text-sm text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring', {
+    variants: {
+        variant: {
+            underline: 'rounded-sm px-3 py-2',
+            card: 'rounded-sm border border-transparent px-3 py-1.5',
+        },
+        orientation: {
+            horizontal: '',
+            vertical: 'w-full justify-start text-start',
+        },
+        selected: {
+            true: '',
+            false: 'hover:bg-surface-alt hover:text-fg',
+        },
+        disabled: {
+            true: 'pointer-events-none opacity-50 active:scale-100',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        { variant: 'underline', selected: true, class: 'text-fg font-semibold' },
+        /*
+         * `card` — aktif sekme `bg-canvas` (içerik zeminiyle birleşir) + 2px dolu
+         * ray. Yatayda alt kenar, dikeyde ön (sol) kenar — dikey grup rayı bunu
+         * kullanıyor. Ray rengi `--mf-accent-fill` (mode-swapped: light 900 /
+         * dark 400) — diğer TÜM "ray" kullanımlarıyla (Sidebar aktif nav,
+         * Table seçili satır, ikisi de `border-s-accent-fill`) TUTARLI. `var()`
+         * `@theme inline`'ın `--color-accent-fill` katmanını DEĞİL doğrudan
+         * `--mf-*`'i hedefliyor — `box-shadow` arbitrary value'su bir utility
+         * DEĞİL, Tailwind'in "bu inline değişkeni emit et" taramasına
+         * güvenmek yerine kaynağa doğrudan bağlanmak daha sağlam.
+         */
+        {
+            variant: 'card',
+            orientation: 'horizontal',
+            selected: true,
+            class: 'border-border bg-canvas text-fg font-semibold shadow-[inset_0_-2px_0_0_var(--mf-accent-fill)]',
+        },
+        {
+            variant: 'card',
+            orientation: 'vertical',
+            selected: true,
+            class: 'border-border bg-canvas text-fg font-semibold shadow-[inset_2px_0_0_0_var(--mf-accent-fill)]',
+        },
+    ],
+    defaultVariants: {
+        variant: 'underline',
+        orientation: 'horizontal',
+        selected: false,
+        disabled: false,
+    },
+});
+
+/**
+ * `<mf-tab-list [(selectedTab)]="active" variant="underline">…</mf-tab-list>`
+ * — `mf-tabs` içine konur, `mfTab` butonlarını sarar. ARIA/klavye
+ * (Ok tuşları/Home/End) `@angular/aria/tabs`'ın `TabList` pattern'inden
+ * `hostDirectives` ile geliyor (bkz. `tabs.ts` üstündeki not).
+ *
+ * İki premium detay burada yaşıyor:
+ * 1. **Kayan ray göstergesi** (`underline` varyantı) — aktif sekme
+ *    değişince `positionIndicator()` DOM'dan `[aria-selected="true"]`
+ *    elemanın `offsetLeft`/`offsetWidth`'ini (yatayda) ya da `offsetTop`/
+ *    `offsetHeight`'ını (dikeyde) ölçüp göstergeyi kaydırıyor (emsal:
+ *    `table-pagination.ts`'in odak restorasyonundaki `afterRenderEffect` +
+ *    `viewChild(ElementRef)` deseni). `ResizeObserver` yeniden boyutlanmada
+ *    (font yüklenmesi, viewport) yeniden ölçer. `card` varyantında AYRI bir
+ *    gösterge YOK — ray her sekmenin kendi `box-shadow`'unda yaşıyor
+ *    (bkz. tabs.variants.ts).
+ * 2. **Taşma yönetimi** — `mfTabScroller` (bkz. o dosya) kaydırma+kenar
+ *    solma maskesi sağlıyor; ok butonları SADECE o yönde taşma varken
+ *    render edilir. Aktif sekme değişince görünür alana kaydırılır.
+ *
+ * `tab-list.html`'deki sarmalayıcı `<div>`'in çapraz eksen hizalaması BİLEREK
+ * yöne göre koşullu: dikeyde (`flex-col`) çapraz eksen GENİŞLİK olur, `items-
+ * center` orada "çocukları raya GERME, kendi içerik genişliğine küçült" demek
+ * — bu, genişliğin `mfTabScroller`/`#row`/butonlara hiç iletilmemesine ve
+ * `truncate`'in (role-form.html'deki İngilizce grup adlarıyla canlı
+ * doğrulandı) hiç devreye girmeden ham/elipsissiz kırpılmasına yol açan
+ * GERÇEK bir bugdu. `items-stretch` çapraz ekseni doğru şekilde geriyor —
+ * bunu tekrar `items-center`'a "sadeleştirme".
+ *
+ * `orientation` girdisi `@angular/aria`'nın `TabList` pattern'inden
+ * `hostDirectives` ile geliyor (ARIA/klavye zaten yön-agnostik) — burada
+ * ikinci kez `input()` olarak TANIMLANMIYOR (NG2017, bkz. `TabPanel.
+ * preserveContent`'teki aynı kısıt), `ariaTabList.orientation()` üzerinden
+ * `protected readonly orientation` olarak okunuyor; `Tab` (tab.ts) bunu
+ * `variant()` ile aynı `inject()` deseniyle ebeveynden alıyor.
+ */
+class TabList {
+    variant = input('underline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    scrollStartLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "scrollStartLabel" }] : /* istanbul ignore next */ []));
+    scrollEndLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "scrollEndLabel" }] : /* istanbul ignore next */ []));
+    tabsLabels = inject(MF_TABS_LABELS);
+    effectiveScrollStartLabel = computed(() => this.scrollStartLabel() ?? this.tabsLabels().scrollStart, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveScrollStartLabel" }] : /* istanbul ignore next */ []));
+    effectiveScrollEndLabel = computed(() => this.scrollEndLabel() ?? this.tabsLabels().scrollEnd, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveScrollEndLabel" }] : /* istanbul ignore next */ []));
+    /** `mfTab` (bkz. tab.ts) varyantı buradan `inject()` ile okuyor — tek kaynak. */
+    ariaTabList = inject(TabList$1);
+    /** `Tab` (tab.ts) bunu `variant()` ile aynı `inject()` deseniyle okuyor — bu yüzden `public`. */
+    orientation = computed(() => this.ariaTabList.orientation(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => cn(tabListVariants({ variant: this.variant(), orientation: this.orientation() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    indicatorClasses = computed(() => cn('pointer-events-none absolute rounded-full bg-accent-fill opacity-0 transition-[transform,width,height,opacity] duration-base ease-emphasis', this.isVertical() ? 'top-0 left-0 w-0.5' : 'bottom-0 left-0 h-0.5'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : /* istanbul ignore next */ []));
+    scroller = viewChild(TabScroller, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    showStartArrow = computed(() => this.scroller()?.canScrollStart() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showStartArrow" }] : /* istanbul ignore next */ []));
+    showEndArrow = computed(() => this.scroller()?.canScrollEnd() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEndArrow" }] : /* istanbul ignore next */ []));
+    rowEl = viewChild('row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowEl" }] : /* istanbul ignore next */ []));
+    indicatorEl = viewChild('indicator', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorEl" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterRenderEffect(() => {
+            this.ariaTabList.selectedTab();
+            this.positionIndicator();
+        });
+        afterNextRender(() => {
+            const row = this.rowEl()?.nativeElement;
+            if (!row || typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(() => this.positionIndicator());
+            observer.observe(row);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    positionIndicator() {
+        const row = this.rowEl()?.nativeElement;
+        const indicator = this.indicatorEl()?.nativeElement;
+        if (!row || !indicator)
+            return;
+        const active = row.querySelector('[aria-selected="true"]');
+        if (!active) {
+            indicator.style.opacity = '0';
+            return;
+        }
+        indicator.style.opacity = '1';
+        if (this.isVertical()) {
+            indicator.style.transform = `translateY(${active.offsetTop}px)`;
+            indicator.style.height = `${active.offsetHeight}px`;
+        }
+        else {
+            indicator.style.transform = `translateX(${active.offsetLeft}px)`;
+            indicator.style.width = `${active.offsetWidth}px`;
+        }
+        this.scroller()?.scrollIntoViewIfNeeded(active);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabList, isStandalone: true, selector: "mf-tab-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: TabScroller, descendants: true, isSignal: true }, { propertyName: "rowEl", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "indicatorEl", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.TabList, inputs: ["orientation", "orientation", "wrap", "wrap", "softDisabled", "softDisabled", "focusMode", "focusMode", "selectionMode", "selectionMode", "disabled", "disabled", "selectedTab", "selectedTab"], outputs: ["selectedTabChange", "selectedTabChange"] }], ngImport: i0, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.items-stretch]=\"isVertical()\"\r\n>\r\n  @if (showStartArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_up' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n\r\n  <div mfTabScroller [orientation]=\"orientation()\">\r\n    <div #row [class]=\"listClasses()\">\r\n      <ng-content />\r\n      @if (variant() === 'underline') {\r\n        <span #indicator [class]=\"indicatorClasses()\"></span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_down' : 'chevron_right'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: TabScroller, selector: "[mfTabScroller]", inputs: ["orientation"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabList, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-tab-list', imports: [Button, Icon, TabScroller], hostDirectives: [
+                        {
+                            directive: TabList$1,
+                            inputs: [
+                                'orientation',
+                                'wrap',
+                                'softDisabled',
+                                'focusMode',
+                                'selectionMode',
+                                'disabled',
+                                'selectedTab',
+                            ],
+                            outputs: ['selectedTabChange'],
+                        },
+                    ], host: { class: 'block' }, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.items-stretch]=\"isVertical()\"\r\n>\r\n  @if (showStartArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_up' : 'chevron_left'\r\n      }}</span>\r\n    </button>\r\n  }\r\n\r\n  <div mfTabScroller [orientation]=\"orientation()\">\r\n    <div #row [class]=\"listClasses()\">\r\n      <ng-content />\r\n      @if (variant() === 'underline') {\r\n        <span #indicator [class]=\"indicatorClasses()\"></span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      class=\"shrink-0\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">{{\r\n        isVertical() ? 'keyboard_arrow_down' : 'chevron_right'\r\n      }}</span>\r\n    </button>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], scrollStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStartLabel", required: false }] }], scrollEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndLabel", required: false }] }], scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabScroller), { isSignal: true }] }], rowEl: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }], indicatorEl: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }] } });
+
+/**
+ * `<button mfTab value="genel">Genel</button>` — bir `mf-tab-list` içine
+ * konur. ARIA/klavye/seçim davranışı `@angular/aria/tabs`'ın `Tab`
+ * pattern'inden `hostDirectives` ile geliyor (bkz. `tabs.ts` üstündeki not);
+ * bu directive sadece görsel katmanı ekliyor. `value`/`disabled`/`id`
+ * girdileri `hostDirectives`'in `inputs` listesiyle dışarı açıldı — tüketici
+ * doğrudan `[value]`/`[disabled]` bağlar, `ngTab` attribute'unu YAZMAZ.
+ *
+ * Varyant (`underline`/`card`) ebeveyn `mf-tab-list`'ten `inject()` ile
+ * okunuyor — `Tab` kendi varyant girdisini TAŞIMIYOR, tek kaynak listede.
+ */
+class Tab {
+    ariaTab = inject(Tab$1);
+    tabList = inject(TabList, { optional: true });
+    classes = computed(() => cn(tabVariants({
+        variant: this.tabList?.variant() ?? 'underline',
+        orientation: this.tabList?.orientation() ?? 'horizontal',
+        selected: this.ariaTab.selected(),
+        disabled: this.ariaTab.disabled(),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: Tab, isStandalone: true, selector: "button[mfTab]", host: { properties: { "attr.type": "'button'", "class": "classes()" } }, hostDirectives: [{ directive: i1.Tab, inputs: ["value", "value", "disabled", "disabled", "id", "id"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tab, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[mfTab]',
+                    hostDirectives: [{ directive: Tab$1, inputs: ['value', 'disabled', 'id'] }],
+                    host: { '[attr.type]': "'button'", '[class]': 'classes()' },
+                }]
+        }] });
+
+/**
+ * ```html
+ * <mf-tab-panel value="genel">
+ *   <ng-template ngTabContent>İçerik…</ng-template>
+ * </mf-tab-panel>
+ * ```
+ *
+ * `ngTabContent` (`@angular/aria/tabs`'ın `TabContent`'i) doğrudan
+ * kullanılır — ayrı bir `appTabContent` sarmalayıcı YOK, tek katmanlı bir
+ * yapıya sarmalayıcı eklemenin karşılığı yok (bkz. `TabContent`'in kendi
+ * `DeferredContent` mekanizması, panel aktif olana kadar içeriği hiç
+ * oluşturmaz — lazy). `<ng-content />` bilerek TEK satır: panelin kendi
+ * `role="tabpanel"`/`tabindex`/`inert` host bağlamaları `hostDirectives`'ten
+ * geliyor, ekstra bir sarmalayıcıya gerek yok.
+ *
+ * `[class.hidden]` ELLE eklendi — `AriaTabPanel`'in `inert` attribute'u
+ * elemanı erişilebilirlik ağacından/etkileşimden çıkarıyor ama GÖRSEL olarak
+ * gizlemiyor (kütüphanenin kendi dokümantasyonu: "Proper styling is required
+ * for visual hiding" — gerçek bulgu, ui-kit'te pasif panellerin boş
+ * dolgulu kutular olarak GÖRÜNÜR kaldığı görüldü).
+ */
+class TabPanel {
+    ariaTabPanel = inject(TabPanel$1);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TabPanel, isStandalone: true, selector: "mf-tab-panel", host: { properties: { "class.hidden": "!ariaTabPanel.visible()" }, classAttribute: "block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring" }, hostDirectives: [{ directive: i1.TabPanel, inputs: ["value", "value", "id", "id"] }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-tab-panel',
+                    hostDirectives: [{ directive: TabPanel$1, inputs: ['value', 'id'] }],
+                    host: {
+                        class: 'block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',
+                        '[class.hidden]': '!ariaTabPanel.visible()',
+                    },
+                    template: '<ng-content />',
+                }]
+        }] });
+
+/**
+ * `<mf-tab-strip [items]="items()" [(activeKey)]="active" (close)="onClose($event)" />`
+ *
+ * `mf-tabs`/`mf-tab-list` (bkz. `tabs.ts`) ARIA `tabs` pattern'i PANEL
+ * varsayar (`aria-controls` gerçek bir `role=tabpanel`'e işaret eder) — bu
+ * şerit ise bir ROTA/DOKÜMAN şeridi: panel yok, içerik `router-outlet`'ten
+ * gelir, sekmeler kapatılabilir. Bu yüzden `@angular/aria/tabs`'ı DEĞİL,
+ * elle roving tabindex kullanıyor (emsal: `table-pagination.ts`'in
+ * `onNavKeydown`'ı) — ARIA `tab` rolü/`aria-selected` yine de elle
+ * uygulanıyor, sadece pattern motoru YOK.
+ *
+ * Ok tuşları SADECE odağı taşır (`activeKey` DEĞİŞMEZ) — her ok vuruşunda
+ * gerçek bir router navigasyonu tetiklemek (bkz. `TabsStore.activate`)
+ * pahalı/istenmeyen bir yan etki olurdu. `Enter`/`Space` ya da tık asıl
+ * seçimi commit eder. `Delete` odaktaki (kapatılabilir) sekmeyi kapatır.
+ *
+ * Kapatma butonu gerçek bir `<button>` ama tab elemanının kendisi `role=tab`
+ * taşıyan bir `<div>` — `mfTab`'ın (aria Tabs sisteminin) aksine burada bir
+ * `<button>` İÇİNE başka bir interaktif eleman GÖMÜLMÜYOR (geçersiz HTML
+ * olurdu, bkz. `table-filter-bar.html`'deki chip deseni — aynı gerekçeyle
+ * orada da İKİ KARDEŞ buton var, iç içe değil). Kapatma butonu bilerek
+ * `tabindex="-1"` — birincil roving-tabindex sırasının parçası değil (fare/
+ * dokunma birincil, `Delete` tuşu klavye eşdeğeri).
+ *
+ * Sağ tık menüsü TAMAMEN tüketiciye ait — bu bileşen belirli bir dropdown
+ * kütüphanesini BİLMİYOR (bkz. projects/ui-kit/README.md "Directive mi, component
+ * mi?" ruhu — dropdown-agnostik kalma), sadece ham `(itemContextMenu)` olayını
+ * yukarı veriyor.
+ */
+class TabStrip {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    activeKey = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    /** Verilirse aktif sekmenin `aria-controls`'ü buna işaret eder (tek bir paylaşımlı içerik bölgesi — router-outlet). */
+    contentId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    scrollStartLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "scrollStartLabel" }] : /* istanbul ignore next */ []));
+    scrollEndLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "scrollEndLabel" }] : /* istanbul ignore next */ []));
+    /** Kapatma butonunun `aria-label`'ı — sekmenin kendi etiketiyle birleştirilir (ör. "Close: Roles"). */
+    closeLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    tabsLabels = inject(MF_TABS_LABELS);
+    effectiveScrollStartLabel = computed(() => this.scrollStartLabel() ?? this.tabsLabels().scrollStart, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveScrollStartLabel" }] : /* istanbul ignore next */ []));
+    effectiveScrollEndLabel = computed(() => this.scrollEndLabel() ?? this.tabsLabels().scrollEnd, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveScrollEndLabel" }] : /* istanbul ignore next */ []));
+    effectiveCloseLabel = computed(() => this.closeLabel() ?? this.tabsLabels().close, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveCloseLabel" }] : /* istanbul ignore next */ []));
+    // `close` adı native DOM `close` olayıyla çakışıyor (@angular-eslint/no-output-native);
+    // mevcut public API — yeniden adlandırma kırıcı, ileri bir sürümde ele alınacak.
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    close = output();
+    itemContextMenu = output();
+    focusedKey = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedKey" }] : /* istanbul ignore next */ []));
+    scroller = viewChild(TabScroller, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    showStartArrow = computed(() => this.scroller()?.canScrollStart() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showStartArrow" }] : /* istanbul ignore next */ []));
+    showEndArrow = computed(() => this.scroller()?.canScrollEnd() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEndArrow" }] : /* istanbul ignore next */ []));
+    rowEl = viewChild('row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowEl" }] : /* istanbul ignore next */ []));
+    tabClasses(item) {
+        return cn(tabVariants({ variant: 'card', selected: item.key === this.activeKey(), disabled: false }), 'pe-1.5');
+    }
+    tabIndexFor(item) {
+        const focused = this.focusedKey() ?? this.activeKey();
+        return item.key === focused ? 0 : -1;
+    }
+    select(key) {
+        this.focusedKey.set(key);
+        this.activeKey.set(key);
+    }
+    onCloseClick(event, key) {
+        event.stopPropagation();
+        this.close.emit(key);
+    }
+    onContextMenu(event, item) {
+        event.preventDefault();
+        this.itemContextMenu.emit({ event, item });
+    }
+    onKeydown(event) {
+        const items = this.items();
+        if (items.length === 0)
+            return;
+        const currentKey = this.focusedKey() ?? this.activeKey();
+        const index = items.findIndex((i) => i.key === currentKey);
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusIndex(index <= 0 ? items.length - 1 : index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusIndex(index === -1 || index === items.length - 1 ? 0 : index + 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusIndex(items.length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (index !== -1)
+                    this.select(items[index].key);
+                break;
+            case 'Delete':
+                if (index !== -1 && items[index].closable) {
+                    event.preventDefault();
+                    this.close.emit(items[index].key);
+                }
+                break;
+        }
+    }
+    focusIndex(index) {
+        const item = this.items()[index];
+        if (!item)
+            return;
+        this.focusedKey.set(item.key);
+        queueMicrotask(() => {
+            const btn = this.rowEl()?.nativeElement.querySelector(`[data-tab-key="${item.key}"]`);
+            btn?.focus();
+            if (btn)
+                this.scroller()?.scrollIntoViewIfNeeded(btn);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabStrip, isStandalone: true, selector: "mf-tab-strip", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null }, scrollStartLabel: { classPropertyName: "scrollStartLabel", publicName: "scrollStartLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollEndLabel: { classPropertyName: "scrollEndLabel", publicName: "scrollEndLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange", close: "close", itemContextMenu: "itemContextMenu" }, host: { attributes: { "role": "tablist" }, classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: TabScroller, descendants: true, isSignal: true }, { propertyName: "rowEl", first: true, predicate: ["row"], descendants: true, isSignal: true }], exportAs: ["mfTabStrip"], ngImport: i0, template: "<div class=\"flex items-center gap-1\">\r\n  @if (showStartArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n    </button>\r\n  }\r\n\r\n  <!-- Kayd\u0131rma kapsay\u0131c\u0131s\u0131 odaklanabilir de\u011Fil \u2014 ok tu\u015Fu gezinmesi burada delege; ger\u00E7ek odak roving tabindex ile alt sekmelerde. -->\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n  <div mfTabScroller (keydown)=\"onKeydown($event)\">\r\n    <div #row class=\"flex items-center gap-1 py-1\">\r\n      @for (item of items(); track item.key) {\r\n        <!-- Enter/Space se\u00E7imi \u00FCstteki kapsay\u0131c\u0131n\u0131n (keydown)'\u0131nda y\u00F6netiliyor (roving tabindex deseni). -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n        <div\r\n          role=\"tab\"\r\n          [attr.data-tab-key]=\"item.key\"\r\n          [attr.aria-selected]=\"item.key === activeKey()\"\r\n          [attr.aria-controls]=\"item.key === activeKey() ? contentId() : null\"\r\n          [tabindex]=\"tabIndexFor(item)\"\r\n          [class]=\"tabClasses(item)\"\r\n          (click)=\"select(item.key)\"\r\n          (contextmenu)=\"onContextMenu($event, item)\"\r\n        >\r\n          @if (item.icon) {\r\n            <span mfIcon [size]=\"14\">{{ item.icon }}</span>\r\n          }\r\n          <span class=\"truncate\">{{ item.label }}</span>\r\n          @if (item.closable) {\r\n            <button\r\n              type=\"button\"\r\n              tabindex=\"-1\"\r\n              class=\"ms-0.5 inline-flex h-4 w-4 shrink-0 appearance-none items-center justify-center rounded-xs border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-active hover:text-fg\"\r\n              [attr.aria-label]=\"effectiveCloseLabel() + ': ' + item.label\"\r\n              (click)=\"onCloseClick($event, item.key)\"\r\n            >\r\n              <span mfIcon [size]=\"13\">close</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: TabScroller, selector: "[mfTabScroller]", inputs: ["orientation"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabStrip, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-tab-strip', exportAs: 'mfTabStrip', imports: [Icon, TabScroller], host: { class: 'block', role: 'tablist' }, template: "<div class=\"flex items-center gap-1\">\r\n  @if (showStartArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollStartLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(-1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n    </button>\r\n  }\r\n\r\n  <!-- Kayd\u0131rma kapsay\u0131c\u0131s\u0131 odaklanabilir de\u011Fil \u2014 ok tu\u015Fu gezinmesi burada delege; ger\u00E7ek odak roving tabindex ile alt sekmelerde. -->\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n  <div mfTabScroller (keydown)=\"onKeydown($event)\">\r\n    <div #row class=\"flex items-center gap-1 py-1\">\r\n      @for (item of items(); track item.key) {\r\n        <!-- Enter/Space se\u00E7imi \u00FCstteki kapsay\u0131c\u0131n\u0131n (keydown)'\u0131nda y\u00F6netiliyor (roving tabindex deseni). -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n        <div\r\n          role=\"tab\"\r\n          [attr.data-tab-key]=\"item.key\"\r\n          [attr.aria-selected]=\"item.key === activeKey()\"\r\n          [attr.aria-controls]=\"item.key === activeKey() ? contentId() : null\"\r\n          [tabindex]=\"tabIndexFor(item)\"\r\n          [class]=\"tabClasses(item)\"\r\n          (click)=\"select(item.key)\"\r\n          (contextmenu)=\"onContextMenu($event, item)\"\r\n        >\r\n          @if (item.icon) {\r\n            <span mfIcon [size]=\"14\">{{ item.icon }}</span>\r\n          }\r\n          <span class=\"truncate\">{{ item.label }}</span>\r\n          @if (item.closable) {\r\n            <button\r\n              type=\"button\"\r\n              tabindex=\"-1\"\r\n              class=\"ms-0.5 inline-flex h-4 w-4 shrink-0 appearance-none items-center justify-center rounded-xs border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-active hover:text-fg\"\r\n              [attr.aria-label]=\"effectiveCloseLabel() + ': ' + item.label\"\r\n              (click)=\"onCloseClick($event, item.key)\"\r\n            >\r\n              <span mfIcon [size]=\"13\">close</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showEndArrow()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shrink-0 appearance-none border-0 bg-transparent p-1 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      [attr.aria-label]=\"effectiveScrollEndLabel()\"\r\n      (click)=\"scroller()?.scrollByDir(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n    </button>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }, { type: i0.Output, args: ["activeKeyChange"] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], scrollStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStartLabel", required: false }] }], scrollEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], itemContextMenu: [{ type: i0.Output, args: ["itemContextMenu"] }], scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabScroller), { isSignal: true }] }], rowEl: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }] } });
+
+/**
+ * `<mf-tabs><mf-tab-list>...</mf-tab-list><mf-tab-panel>...</mf-tab-panel></mf-tabs>`
+ *
+ * Salt bir kapsayıcı — tüm ARIA/klavye/state mantığı `@angular/aria/tabs`'ın
+ * `Tabs` pattern'inden `hostDirectives` ile ödünç alınıyor (bkz.
+ * projects/ui-kit/README.md "a11y checklist": "mümkün olduğunca `@angular/aria`...
+ * elle ARIA yazmak son çare"). `hostDirectives`, ana bileşenin (`mf-tabs`)
+ * host elemanına `Tabs`'ın DI sağlayıcısını (`TABS` token) ekliyor — alttaki
+ * `mf-tab-list`/`mf-tab-panel` bunu `inject()` ile bulup kendini
+ * kaydediyor, template'te `ngTabs` attribute'unu ELLE yazmaya gerek yok
+ * (`hostDirectives`'te selector yok sayılır, bkz. Angular directive
+ * composition API).
+ */
+class Tabs {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: Tabs, isStandalone: true, selector: "mf-tabs", host: { classAttribute: "block" }, exportAs: ["mfTabs"], hostDirectives: [{ directive: i1.Tabs }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-tabs',
+                    exportAs: 'mfTabs',
+                    hostDirectives: [Tabs$1],
+                    host: { class: 'block' },
+                    template: '<ng-content />',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tab, TabList, TabPanel, TabScroller, TabStrip, Tabs, tabListVariants, tabVariants };
+//# sourceMappingURL=mesgflow-ui-kit-tabs.mjs.map