@mesgflow/ui-kit 0.6.0 → 0.7.0

package/fesm2022/mesgflow-ui-kit-transfer-list.mjs

@@ -0,0 +1,288 @@
+import * as i0 from '@angular/core';
+import { input, model, inject, signal, computed, Component } from '@angular/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { MF_TRANSFER_LIST_LABELS } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Listbox } from '@mesgflow/ui-kit/listbox';
+
+/**
+ * `<mf-transfer-list [options]="permissions" [(value)]="granted" />`
+ *
+ * İki listeli seçim (izinler, alan eşleme, sütun seçimi): solda seçilebilir,
+ * sağda seçilmiş öğeler. Her panel kendi araması ve çoklu seçimli
+ * `mf-listbox`'ı (ok tuşları, Shift+ok aralık, typeahead) ile gelir; ortadaki
+ * düğmeler işaretlileri ya da tümünü taşır. `value` sağ taraftaki değerler.
+ */
+class TransferList {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Sağ taraftaki (seçilmiş) değerler. */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    labels = inject(MF_TRANSFER_LIST_LABELS);
+    sides = ['left', 'right'];
+    query = signal({ left: '', right: '' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    checked = signal({ left: [], right: [] }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    leftOptions = computed(() => this.options().filter((o) => !this.value().includes(o.value)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftOptions" }] : /* istanbul ignore next */ []));
+    rightOptions = computed(() => this.value()
+        .map((v) => this.options().find((o) => o.value === v))
+        .filter((o) => !!o), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightOptions" }] : /* istanbul ignore next */ []));
+    filtered = computed(() => {
+        const q = this.query();
+        const match = (o, text) => !text ||
+            `${o.label} ${o.description ?? ''}`.toLocaleLowerCase().includes(text.toLocaleLowerCase());
+        return {
+            left: this.leftOptions().filter((o) => match(o, q.left)),
+            right: this.rightOptions().filter((o) => match(o, q.right)),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    countText(side) {
+        const total = side === 'left' ? this.leftOptions().length : this.rightOptions().length;
+        return this.labels()
+            .count.replace('{selected}', String(this.checked()[side].length))
+            .replace('{total}', String(total));
+    }
+    setQuery(side, text) {
+        this.query.update((q) => ({ ...q, [side]: text }));
+    }
+    setChecked(side, values) {
+        this.checked.update((c) => ({ ...c, [side]: values }));
+    }
+    move(from) {
+        const moving = this.checked()[from];
+        if (from === 'left')
+            this.value.set([...this.value(), ...moving]);
+        else
+            this.value.set(this.value().filter((v) => !moving.includes(v)));
+        this.checked.set({ left: [], right: [] });
+    }
+    moveAll(from) {
+        if (from === 'left') {
+            const visible = this.filtered()
+                .left.filter((o) => !o.disabled)
+                .map((o) => o.value);
+            this.value.set([...this.value(), ...visible]);
+        }
+        else {
+            const visible = new Set(this.filtered().right.map((o) => o.value));
+            this.value.set(this.value().filter((v) => !visible.has(v)));
+        }
+        this.checked.set({ left: [], right: [] });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TransferList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TransferList, isStandalone: true, selector: "mf-transfer-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-stretch" }, exportAs: ["mfTransferList"], ngImport: i0, template: `
+    @for (side of sides; track side) {
+      @if (side === 'right') {
+        <div class="flex flex-row items-center justify-center gap-1.5 sm:flex-col">
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveRight"
+            [disabled]="!checked().left.length"
+            (click)="move('left')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100"
+              >chevron_right</span
+            >
+          </button>
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveAllRight"
+            [disabled]="!leftOptions().length"
+            (click)="moveAll('left')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100">last_page</span>
+          </button>
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveLeft"
+            [disabled]="!checked().right.length"
+            (click)="move('right')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100"
+              >chevron_left</span
+            >
+          </button>
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveAllLeft"
+            [disabled]="!value().length"
+            (click)="moveAll('right')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100"
+              >first_page</span
+            >
+          </button>
+        </div>
+      }
+      <section
+        class="flex min-w-0 flex-col overflow-hidden rounded-xl border border-hairline bg-surface-sunken"
+      >
+        <header class="flex items-center justify-between gap-2 px-3 pt-3">
+          <h3 class="text-sm font-semibold text-fg">
+            {{ side === 'left' ? labels().available : labels().selected }}
+          </h3>
+          <span class="text-xs text-fg-subtle tabular-nums">{{ countText(side) }}</span>
+        </header>
+        <div class="px-3 py-2">
+          <input
+            type="search"
+            class="h-control-sm w-full rounded-md border border-border bg-surface px-2.5 text-sm text-fg outline-none placeholder:text-fg-subtle focus:border-accent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring"
+            [placeholder]="labels().search"
+            [attr.aria-label]="
+              labels().search + ' — ' + (side === 'left' ? labels().available : labels().selected)
+            "
+            [value]="query()[side]"
+            (input)="setQuery(side, $any($event.target).value)"
+          />
+        </div>
+        <div class="min-h-48 flex-1 px-1.5 pb-1.5">
+          @if (filtered()[side].length) {
+            <mf-listbox
+              [options]="filtered()[side]"
+              [multi]="true"
+              [value]="checked()[side]"
+              (valueChange)="setChecked(side, $event)"
+              [ariaLabel]="side === 'left' ? labels().available : labels().selected"
+            />
+          } @else {
+            <p class="py-8 text-center text-sm text-fg-subtle">{{ labels().empty }}</p>
+          }
+        </div>
+      </section>
+    }
+  `, isInline: true, 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: "component", type: Listbox, selector: "mf-listbox", inputs: ["options", "value", "multi", "disabled", "ariaLabel"], outputs: ["valueChange"], exportAs: ["mfListbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TransferList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-transfer-list',
+                    exportAs: 'mfTransferList',
+                    imports: [Button, Icon, Listbox],
+                    host: { class: 'grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-stretch' },
+                    template: `
+    @for (side of sides; track side) {
+      @if (side === 'right') {
+        <div class="flex flex-row items-center justify-center gap-1.5 sm:flex-col">
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveRight"
+            [disabled]="!checked().left.length"
+            (click)="move('left')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100"
+              >chevron_right</span
+            >
+          </button>
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveAllRight"
+            [disabled]="!leftOptions().length"
+            (click)="moveAll('left')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100">last_page</span>
+          </button>
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveLeft"
+            [disabled]="!checked().right.length"
+            (click)="move('right')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100"
+              >chevron_left</span
+            >
+          </button>
+          <button
+            mfButton
+            size="icon-sm"
+            shape="square"
+            appearance="outlined"
+            tone="neutral"
+            [attr.aria-label]="labels().moveAllLeft"
+            [disabled]="!value().length"
+            (click)="moveAll('right')"
+          >
+            <span mfIcon [size]="16" class="rotate-90 sm:rotate-0 rtl:-scale-x-100"
+              >first_page</span
+            >
+          </button>
+        </div>
+      }
+      <section
+        class="flex min-w-0 flex-col overflow-hidden rounded-xl border border-hairline bg-surface-sunken"
+      >
+        <header class="flex items-center justify-between gap-2 px-3 pt-3">
+          <h3 class="text-sm font-semibold text-fg">
+            {{ side === 'left' ? labels().available : labels().selected }}
+          </h3>
+          <span class="text-xs text-fg-subtle tabular-nums">{{ countText(side) }}</span>
+        </header>
+        <div class="px-3 py-2">
+          <input
+            type="search"
+            class="h-control-sm w-full rounded-md border border-border bg-surface px-2.5 text-sm text-fg outline-none placeholder:text-fg-subtle focus:border-accent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring"
+            [placeholder]="labels().search"
+            [attr.aria-label]="
+              labels().search + ' — ' + (side === 'left' ? labels().available : labels().selected)
+            "
+            [value]="query()[side]"
+            (input)="setQuery(side, $any($event.target).value)"
+          />
+        </div>
+        <div class="min-h-48 flex-1 px-1.5 pb-1.5">
+          @if (filtered()[side].length) {
+            <mf-listbox
+              [options]="filtered()[side]"
+              [multi]="true"
+              [value]="checked()[side]"
+              (valueChange)="setChecked(side, $event)"
+              [ariaLabel]="side === 'left' ? labels().available : labels().selected"
+            />
+          } @else {
+            <p class="py-8 text-center text-sm text-fg-subtle">{{ labels().empty }}</p>
+          }
+        </div>
+      </section>
+    }
+  `,
+                }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TransferList };
+//# sourceMappingURL=mesgflow-ui-kit-transfer-list.mjs.map

package/fesm2022/mesgflow-ui-kit-transfer-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-transfer-list.mjs","sources":["../../../projects/ui-kit/transfer-list/transfer-list.ts","../../../projects/ui-kit/transfer-list/mesgflow-ui-kit-transfer-list.ts"],"sourcesContent":["import { Component, computed, inject, input, model, signal } from '@angular/core';\r\nimport { Button } from '@mesgflow/ui-kit/button';\r\nimport { MF_TRANSFER_LIST_LABELS } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Listbox, type ListboxOption } from '@mesgflow/ui-kit/listbox';\r\n\r\ntype Side = 'left' | 'right';\r\n\r\n/**\r\n * `<mf-transfer-list [options]=\"permissions\" [(value)]=\"granted\" />`\r\n *\r\n * İki listeli seçim (izinler, alan eşleme, sütun seçimi): solda seçilebilir,\r\n * sağda seçilmiş öğeler. Her panel kendi araması ve çoklu seçimli\r\n * `mf-listbox`'ı (ok tuşları, Shift+ok aralık, typeahead) ile gelir; ortadaki\r\n * düğmeler işaretlileri ya da tümünü taşır. `value` sağ taraftaki değerler.\r\n */\r\n@Component({\r\n  selector: 'mf-transfer-list',\r\n  exportAs: 'mfTransferList',\r\n  imports: [Button, Icon, Listbox],\r\n  host: { class: 'grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-stretch' },\r\n  template: `\r\n    @for (side of sides; track side) {\r\n      @if (side === 'right') {\r\n        <div class=\"flex flex-row items-center justify-center gap-1.5 sm:flex-col\">\r\n          <button\r\n            mfButton\r\n            size=\"icon-sm\"\r\n            shape=\"square\"\r\n            appearance=\"outlined\"\r\n            tone=\"neutral\"\r\n            [attr.aria-label]=\"labels().moveRight\"\r\n            [disabled]=\"!checked().left.length\"\r\n            (click)=\"move('left')\"\r\n          >\r\n            <span mfIcon [size]=\"16\" class=\"rotate-90 sm:rotate-0 rtl:-scale-x-100\"\r\n              >chevron_right</span\r\n            >\r\n          </button>\r\n          <button\r\n            mfButton\r\n            size=\"icon-sm\"\r\n            shape=\"square\"\r\n            appearance=\"outlined\"\r\n            tone=\"neutral\"\r\n            [attr.aria-label]=\"labels().moveAllRight\"\r\n            [disabled]=\"!leftOptions().length\"\r\n            (click)=\"moveAll('left')\"\r\n          >\r\n            <span mfIcon [size]=\"16\" class=\"rotate-90 sm:rotate-0 rtl:-scale-x-100\">last_page</span>\r\n          </button>\r\n          <button\r\n            mfButton\r\n            size=\"icon-sm\"\r\n            shape=\"square\"\r\n            appearance=\"outlined\"\r\n            tone=\"neutral\"\r\n            [attr.aria-label]=\"labels().moveLeft\"\r\n            [disabled]=\"!checked().right.length\"\r\n            (click)=\"move('right')\"\r\n          >\r\n            <span mfIcon [size]=\"16\" class=\"rotate-90 sm:rotate-0 rtl:-scale-x-100\"\r\n              >chevron_left</span\r\n            >\r\n          </button>\r\n          <button\r\n            mfButton\r\n            size=\"icon-sm\"\r\n            shape=\"square\"\r\n            appearance=\"outlined\"\r\n            tone=\"neutral\"\r\n            [attr.aria-label]=\"labels().moveAllLeft\"\r\n            [disabled]=\"!value().length\"\r\n            (click)=\"moveAll('right')\"\r\n          >\r\n            <span mfIcon [size]=\"16\" class=\"rotate-90 sm:rotate-0 rtl:-scale-x-100\"\r\n              >first_page</span\r\n            >\r\n          </button>\r\n        </div>\r\n      }\r\n      <section\r\n        class=\"flex min-w-0 flex-col overflow-hidden rounded-xl border border-hairline bg-surface-sunken\"\r\n      >\r\n        <header class=\"flex items-center justify-between gap-2 px-3 pt-3\">\r\n          <h3 class=\"text-sm font-semibold text-fg\">\r\n            {{ side === 'left' ? labels().available : labels().selected }}\r\n          </h3>\r\n          <span class=\"text-xs text-fg-subtle tabular-nums\">{{ countText(side) }}</span>\r\n        </header>\r\n        <div class=\"px-3 py-2\">\r\n          <input\r\n            type=\"search\"\r\n            class=\"h-control-sm w-full rounded-md border border-border bg-surface px-2.5 text-sm text-fg outline-none placeholder:text-fg-subtle focus:border-accent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring\"\r\n            [placeholder]=\"labels().search\"\r\n            [attr.aria-label]=\"\r\n              labels().search + ' — ' + (side === 'left' ? labels().available : labels().selected)\r\n            \"\r\n            [value]=\"query()[side]\"\r\n            (input)=\"setQuery(side, $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"min-h-48 flex-1 px-1.5 pb-1.5\">\r\n          @if (filtered()[side].length) {\r\n            <mf-listbox\r\n              [options]=\"filtered()[side]\"\r\n              [multi]=\"true\"\r\n              [value]=\"checked()[side]\"\r\n              (valueChange)=\"setChecked(side, $event)\"\r\n              [ariaLabel]=\"side === 'left' ? labels().available : labels().selected\"\r\n            />\r\n          } @else {\r\n            <p class=\"py-8 text-center text-sm text-fg-subtle\">{{ labels().empty }}</p>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  `,\r\n})\r\nexport class TransferList<V> {\r\n  readonly options = input.required<ListboxOption<V>[]>();\r\n  /** Sağ taraftaki (seçilmiş) değerler. */\r\n  readonly value = model<V[]>([]);\r\n\r\n  protected readonly labels = inject(MF_TRANSFER_LIST_LABELS);\r\n  protected readonly sides: Side[] = ['left', 'right'];\r\n  protected readonly query = signal<Record<Side, string>>({ left: '', right: '' });\r\n  protected readonly checked = signal<Record<Side, V[]>>({ left: [], right: [] });\r\n\r\n  protected readonly leftOptions = computed(() =>\r\n    this.options().filter((o) => !this.value().includes(o.value)),\r\n  );\r\n  protected readonly rightOptions = computed(() =>\r\n    this.value()\r\n      .map((v) => this.options().find((o) => o.value === v))\r\n      .filter((o): o is ListboxOption<V> => !!o),\r\n  );\r\n\r\n  protected readonly filtered = computed<Record<Side, ListboxOption<V>[]>>(() => {\r\n    const q = this.query();\r\n    const match = (o: ListboxOption<V>, text: string) =>\r\n      !text ||\r\n      `${o.label} ${o.description ?? ''}`.toLocaleLowerCase().includes(text.toLocaleLowerCase());\r\n    return {\r\n      left: this.leftOptions().filter((o) => match(o, q.left)),\r\n      right: this.rightOptions().filter((o) => match(o, q.right)),\r\n    };\r\n  });\r\n\r\n  protected countText(side: Side): string {\r\n    const total = side === 'left' ? this.leftOptions().length : this.rightOptions().length;\r\n    return this.labels()\r\n      .count.replace('{selected}', String(this.checked()[side].length))\r\n      .replace('{total}', String(total));\r\n  }\r\n\r\n  protected setQuery(side: Side, text: string): void {\r\n    this.query.update((q) => ({ ...q, [side]: text }));\r\n  }\r\n\r\n  protected setChecked(side: Side, values: V[]): void {\r\n    this.checked.update((c) => ({ ...c, [side]: values }));\r\n  }\r\n\r\n  protected move(from: Side): void {\r\n    const moving = this.checked()[from];\r\n    if (from === 'left') this.value.set([...this.value(), ...moving]);\r\n    else this.value.set(this.value().filter((v) => !moving.includes(v)));\r\n    this.checked.set({ left: [], right: [] });\r\n  }\r\n\r\n  protected moveAll(from: Side): void {\r\n    if (from === 'left') {\r\n      const visible = this.filtered()\r\n        .left.filter((o) => !o.disabled)\r\n        .map((o) => o.value);\r\n      this.value.set([...this.value(), ...visible]);\r\n    } else {\r\n      const visible = new Set(this.filtered().right.map((o) => o.value));\r\n      this.value.set(this.value().filter((v) => !visible.has(v)));\r\n    }\r\n    this.checked.set({ left: [], right: [] });\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-tree.mjs

@@ -12,7 +12,7 @@ const treeRowVariants = cva('flex cursor-pointer items-center gap-1 rounded-sm p
     variants: {
         selected: {
             true: 'bg-primary-tint text-primary-tint-fg',
-            false: 'hover:bg-surface-alt hover:text-fg',
+            false: 'hover:bg-state-hover hover:text-fg',
         },
         disabled: {
             true: 'pointer-events-none opacity-50',

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

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-tree.mjs","sources":["../../../projects/ui-kit/tree/tree.variants.ts","../../../projects/ui-kit/tree/tree.ts","../../../projects/ui-kit/tree/tree.html","../../../projects/ui-kit/tree/mesgflow-ui-kit-tree.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const treeRowVariants = cva(\r\n  'flex cursor-pointer items-center gap-1 rounded-sm py-1 pe-2 text-fg-muted transition-colors duration-fast ease-emphasis ' +\r\n    'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring',\r\n  {\r\n    variants: {\r\n      selected: {\r\n        true: 'bg-primary-tint text-primary-tint-fg',\r\n        false: 'hover:bg-surface-alt hover:text-fg',\r\n      },\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { selected: false, disabled: false },\r\n  },\r\n);\r\n\r\nexport type TreeRowSelected = VariantProps<typeof treeRowVariants>['selected'];\r\n","import {\r\n  Tree as AriaTree,\r\n  TreeItem as AriaTreeItem,\r\n  TreeItemGroup as AriaTreeItemGroup,\r\n} from '@angular/aria/tree';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, effect, forwardRef, input, model } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { ValueAccessorBase, cn } from '@mesgflow/ui-kit/core';\r\nimport { treeRowVariants } from './tree.variants';\r\n\r\nexport interface TreeNode<T> {\r\n  id: string;\r\n  label: string;\r\n  value: T;\r\n  children?: TreeNode<T>[];\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * `<mf-tree [nodes]=\"layers\" [(value)]=\"selectedIds\" />` — katman/yapı\r\n * paneli gibi iç içe, klavye gezintili ağaçlar için. ARIA/klavye (ok\r\n * tuşları, typeahead, seviyeye göre girinti) `@angular/aria/tree`'nin\r\n * `Tree`/`TreeItem`/`TreeItemGroup` pattern'inden geliyor — dokümantasyonun\r\n * KENDİ önerdiği ÖZYİNELEMELİ (`ngTemplateOutlet` + kendi kendine referans\r\n * veren `#treeNodes` template) render deseni birebir izlendi, çünkü veri\r\n * derinliği (`TreeNode.children`) derleme zamanında bilinmiyor.\r\n */\r\n@Component({\r\n  selector: 'mf-tree',\r\n  exportAs: 'mfTree',\r\n  host: { class: 'block' },\r\n  imports: [AriaTree, AriaTreeItem, AriaTreeItemGroup, NgTemplateOutlet, Icon],\r\n  templateUrl: './tree.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Tree), multi: true }],\r\n})\r\nexport class Tree<T> extends ValueAccessorBase<T[]> implements ControlValueAccessor {\r\n  readonly nodes = input.required<TreeNode<T>[]>();\r\n  readonly value = model<T[]>([]);\r\n  readonly multi = input(false);\r\n  readonly ariaLabel = input('');\r\n  /** Tüm dalları açık başlatır (ör. arama sonuçları) — kullanıcı yine tek tek kapatabilir. */\r\n  readonly expandAll = input(false);\r\n\r\n  constructor() {\r\n    super();\r\n    // `value()` `ngTree`'nin KENDİ iç seçim mantığından İKİ-YÖNLÜ bağlamayla\r\n    // (tree.html `[(value)]`) değişiyor — tek bir \"seçim değişti\" metodu YOK,\r\n    // bu yüzden CVA bildirimini bir effect ile köprülüyoruz. İLK çalışma\r\n    // (kurulumda, henüz gerçek bir kullanıcı etkileşimi YOKKEN) atlanır.\r\n    let first = true;\r\n    effect(() => {\r\n      const v = this.value();\r\n      if (first) {\r\n        first = false;\r\n        return;\r\n      }\r\n      this.onChange(v);\r\n      this.onTouched();\r\n    });\r\n  }\r\n\r\n  writeValue(value: T[]): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  protected rowClasses(selected: boolean | undefined, disabled: boolean): string {\r\n    return cn(treeRowVariants({ selected: !!selected, disabled }));\r\n  }\r\n}\r\n","<ul\r\n  ngTree\r\n  #treeRef=\"ngTree\"\r\n  [(value)]=\"value\"\r\n  [multi]=\"multi()\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  class=\"text-sm\"\r\n>\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"treeNodes\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: nodes(), parent: treeRef }\"\r\n  />\r\n</ul>\r\n\r\n<ng-template #treeNodes let-nodes let-parent=\"parent\">\r\n  @for (node of nodes; track node.id) {\r\n    <li\r\n      ngTreeItem\r\n      #item=\"ngTreeItem\"\r\n      [parent]=\"parent\"\r\n      [value]=\"node.value\"\r\n      [label]=\"node.label\"\r\n      [disabled]=\"!!node.disabled\"\r\n      [expanded]=\"expandAll()\"\r\n    >\r\n      <span\r\n        [class]=\"rowClasses(item.selected(), !!node.disabled)\"\r\n        [style.padding-inline-start.px]=\"item.level() * 16\"\r\n      >\r\n        @if (node.children && node.children.length > 0) {\r\n          <span\r\n            mfIcon\r\n            [size]=\"16\"\r\n            class=\"shrink-0 transition-transform duration-fast rtl:-scale-x-100\"\r\n            [class.rotate-90]=\"item.expanded()\"\r\n            [class.rtl:-rotate-90]=\"item.expanded()\"\r\n            >chevron_right</span\r\n          >\r\n        } @else {\r\n          <span class=\"w-4 shrink-0\" aria-hidden=\"true\"></span>\r\n        }\r\n        <span class=\"truncate\">{{ node.label }}</span>\r\n      </span>\r\n      @if (node.children && node.children.length > 0) {\r\n        <ul role=\"group\">\r\n          <ng-template ngTreeItemGroup [ownedBy]=\"item\" #group=\"ngTreeItemGroup\">\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"treeNodes\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: node.children, parent: group }\"\r\n            />\r\n          </ng-template>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaTree","AriaTreeItem","AriaTreeItemGroup"],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-tree.mjs","sources":["../../../projects/ui-kit/tree/tree.variants.ts","../../../projects/ui-kit/tree/tree.ts","../../../projects/ui-kit/tree/tree.html","../../../projects/ui-kit/tree/mesgflow-ui-kit-tree.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const treeRowVariants = cva(\r\n  'flex cursor-pointer items-center gap-1 rounded-sm py-1 pe-2 text-fg-muted transition-colors duration-fast ease-emphasis ' +\r\n    'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring',\r\n  {\r\n    variants: {\r\n      selected: {\r\n        true: 'bg-primary-tint text-primary-tint-fg',\r\n        false: 'hover:bg-state-hover hover:text-fg',\r\n      },\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { selected: false, disabled: false },\r\n  },\r\n);\r\n\r\nexport type TreeRowSelected = VariantProps<typeof treeRowVariants>['selected'];\r\n","import {\r\n  Tree as AriaTree,\r\n  TreeItem as AriaTreeItem,\r\n  TreeItemGroup as AriaTreeItemGroup,\r\n} from '@angular/aria/tree';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, effect, forwardRef, input, model } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { ValueAccessorBase, cn } from '@mesgflow/ui-kit/core';\r\nimport { treeRowVariants } from './tree.variants';\r\n\r\nexport interface TreeNode<T> {\r\n  id: string;\r\n  label: string;\r\n  value: T;\r\n  children?: TreeNode<T>[];\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * `<mf-tree [nodes]=\"layers\" [(value)]=\"selectedIds\" />` — katman/yapı\r\n * paneli gibi iç içe, klavye gezintili ağaçlar için. ARIA/klavye (ok\r\n * tuşları, typeahead, seviyeye göre girinti) `@angular/aria/tree`'nin\r\n * `Tree`/`TreeItem`/`TreeItemGroup` pattern'inden geliyor — dokümantasyonun\r\n * KENDİ önerdiği ÖZYİNELEMELİ (`ngTemplateOutlet` + kendi kendine referans\r\n * veren `#treeNodes` template) render deseni birebir izlendi, çünkü veri\r\n * derinliği (`TreeNode.children`) derleme zamanında bilinmiyor.\r\n */\r\n@Component({\r\n  selector: 'mf-tree',\r\n  exportAs: 'mfTree',\r\n  host: { class: 'block' },\r\n  imports: [AriaTree, AriaTreeItem, AriaTreeItemGroup, NgTemplateOutlet, Icon],\r\n  templateUrl: './tree.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Tree), multi: true }],\r\n})\r\nexport class Tree<T> extends ValueAccessorBase<T[]> implements ControlValueAccessor {\r\n  readonly nodes = input.required<TreeNode<T>[]>();\r\n  readonly value = model<T[]>([]);\r\n  readonly multi = input(false);\r\n  readonly ariaLabel = input('');\r\n  /** Tüm dalları açık başlatır (ör. arama sonuçları) — kullanıcı yine tek tek kapatabilir. */\r\n  readonly expandAll = input(false);\r\n\r\n  constructor() {\r\n    super();\r\n    // `value()` `ngTree`'nin KENDİ iç seçim mantığından İKİ-YÖNLÜ bağlamayla\r\n    // (tree.html `[(value)]`) değişiyor — tek bir \"seçim değişti\" metodu YOK,\r\n    // bu yüzden CVA bildirimini bir effect ile köprülüyoruz. İLK çalışma\r\n    // (kurulumda, henüz gerçek bir kullanıcı etkileşimi YOKKEN) atlanır.\r\n    let first = true;\r\n    effect(() => {\r\n      const v = this.value();\r\n      if (first) {\r\n        first = false;\r\n        return;\r\n      }\r\n      this.onChange(v);\r\n      this.onTouched();\r\n    });\r\n  }\r\n\r\n  writeValue(value: T[]): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  protected rowClasses(selected: boolean | undefined, disabled: boolean): string {\r\n    return cn(treeRowVariants({ selected: !!selected, disabled }));\r\n  }\r\n}\r\n","<ul\r\n  ngTree\r\n  #treeRef=\"ngTree\"\r\n  [(value)]=\"value\"\r\n  [multi]=\"multi()\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  class=\"text-sm\"\r\n>\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"treeNodes\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: nodes(), parent: treeRef }\"\r\n  />\r\n</ul>\r\n\r\n<ng-template #treeNodes let-nodes let-parent=\"parent\">\r\n  @for (node of nodes; track node.id) {\r\n    <li\r\n      ngTreeItem\r\n      #item=\"ngTreeItem\"\r\n      [parent]=\"parent\"\r\n      [value]=\"node.value\"\r\n      [label]=\"node.label\"\r\n      [disabled]=\"!!node.disabled\"\r\n      [expanded]=\"expandAll()\"\r\n    >\r\n      <span\r\n        [class]=\"rowClasses(item.selected(), !!node.disabled)\"\r\n        [style.padding-inline-start.px]=\"item.level() * 16\"\r\n      >\r\n        @if (node.children && node.children.length > 0) {\r\n          <span\r\n            mfIcon\r\n            [size]=\"16\"\r\n            class=\"shrink-0 transition-transform duration-fast rtl:-scale-x-100\"\r\n            [class.rotate-90]=\"item.expanded()\"\r\n            [class.rtl:-rotate-90]=\"item.expanded()\"\r\n            >chevron_right</span\r\n          >\r\n        } @else {\r\n          <span class=\"w-4 shrink-0\" aria-hidden=\"true\"></span>\r\n        }\r\n        <span class=\"truncate\">{{ node.label }}</span>\r\n      </span>\r\n      @if (node.children && node.children.length > 0) {\r\n        <ul role=\"group\">\r\n          <ng-template ngTreeItemGroup [ownedBy]=\"item\" #group=\"ngTreeItemGroup\">\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"treeNodes\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: node.children, parent: group }\"\r\n            />\r\n          </ng-template>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaTree","AriaTreeItem","AriaTreeItemGroup"],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-virtual-list.mjs

@@ -0,0 +1,109 @@
+import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, contentChild, TemplateRef, viewChild, Component } from '@angular/core';
+
+/**
+ * `<mf-virtual-list [items]="logs" [itemSize]="44" height="24rem" ariaLabel="Olay kaydı">
+ *    <ng-template let-log let-i="index">…</ng-template>
+ *  </mf-virtual-list>`
+ *
+ * On binlerce satırı akıcı kaydıran sanal liste — yalnızca görünür satırlar
+ * DOM'da (`@angular/cdk/scrolling`). Table'ın dahili `virtual` modunun
+ * bağımsız hâli: sohbet geçmişi, günlükler, uzun seçim listeleri.
+ *
+ * Erişilebilirlik: kap `role="list"`, satırlar `role="listitem"` +
+ * `aria-setsize`/`aria-posinset` — ekran okuyucu toplam sayıyı ve konumu bilir
+ * (DOM'da yalnızca bir kısmı olsa bile).
+ */
+class VirtualList {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Satır yüksekliği (px) — sabit. */
+    itemSize = input(44, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemSize" }] : /* istanbul ignore next */ []));
+    height = input('24rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    trackBy = input((i) => i, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    /** İlk görünür satırın indeksi değişince. */
+    indexChange = output();
+    template = contentChild((TemplateRef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    viewport = viewChild.required(CdkVirtualScrollViewport, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    trackFn = (index, item) => this.trackBy()(index, item);
+    /** Belirli bir satıra kaydırır (ör. arama sonucu). */
+    scrollToIndex(index, behavior = 'smooth') {
+        this.viewport().scrollToIndex(index, behavior);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VirtualList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: VirtualList, isStandalone: true, selector: "mf-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], exportAs: ["mfVirtualList"], ngImport: i0, template: `
+    <cdk-virtual-scroll-viewport
+      [itemSize]="itemSize()"
+      [style.height]="height()"
+      class="rounded-lg border border-hairline bg-surface [scrollbar-gutter:stable]"
+      role="list"
+      [attr.aria-label]="ariaLabel() || null"
+      tabindex="0"
+      (scrolledIndexChange)="indexChange.emit($event)"
+    >
+      <div
+        *cdkVirtualFor="let item of items(); let i = index; trackBy: trackFn"
+        role="listitem"
+        [attr.aria-setsize]="items().length"
+        [attr.aria-posinset]="i + 1"
+        class="flex items-center border-b border-hairline px-3 last:border-b-0"
+        [style.height.px]="itemSize()"
+      >
+        <ng-container
+          [ngTemplateOutlet]="template() ?? null"
+          [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+        />
+      </div>
+    </cdk-virtual-scroll-viewport>
+  `, isInline: true, dependencies: [{ kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VirtualList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-virtual-list',
+                    exportAs: 'mfVirtualList',
+                    imports: [CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, NgTemplateOutlet],
+                    host: { class: 'block' },
+                    template: `
+    <cdk-virtual-scroll-viewport
+      [itemSize]="itemSize()"
+      [style.height]="height()"
+      class="rounded-lg border border-hairline bg-surface [scrollbar-gutter:stable]"
+      role="list"
+      [attr.aria-label]="ariaLabel() || null"
+      tabindex="0"
+      (scrolledIndexChange)="indexChange.emit($event)"
+    >
+      <div
+        *cdkVirtualFor="let item of items(); let i = index; trackBy: trackFn"
+        role="listitem"
+        [attr.aria-setsize]="items().length"
+        [attr.aria-posinset]="i + 1"
+        class="flex items-center border-b border-hairline px-3 last:border-b-0"
+        [style.height.px]="itemSize()"
+      >
+        <ng-container
+          [ngTemplateOutlet]="template() ?? null"
+          [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+        />
+      </div>
+    </cdk-virtual-scroll-viewport>
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VirtualList };
+//# sourceMappingURL=mesgflow-ui-kit-virtual-list.mjs.map

package/fesm2022/mesgflow-ui-kit-virtual-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-virtual-list.mjs","sources":["../../../projects/ui-kit/virtual-list/virtual-list.ts","../../../projects/ui-kit/virtual-list/mesgflow-ui-kit-virtual-list.ts"],"sourcesContent":["import {\r\n  CdkFixedSizeVirtualScroll,\r\n  CdkVirtualForOf,\r\n  CdkVirtualScrollViewport,\r\n} from '@angular/cdk/scrolling';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, TemplateRef, contentChild, input, output, viewChild } from '@angular/core';\r\n\r\n/**\r\n * `<mf-virtual-list [items]=\"logs\" [itemSize]=\"44\" height=\"24rem\" ariaLabel=\"Olay kaydı\">\r\n *    <ng-template let-log let-i=\"index\">…</ng-template>\r\n *  </mf-virtual-list>`\r\n *\r\n * On binlerce satırı akıcı kaydıran sanal liste — yalnızca görünür satırlar\r\n * DOM'da (`@angular/cdk/scrolling`). Table'ın dahili `virtual` modunun\r\n * bağımsız hâli: sohbet geçmişi, günlükler, uzun seçim listeleri.\r\n *\r\n * Erişilebilirlik: kap `role=\"list\"`, satırlar `role=\"listitem\"` +\r\n * `aria-setsize`/`aria-posinset` — ekran okuyucu toplam sayıyı ve konumu bilir\r\n * (DOM'da yalnızca bir kısmı olsa bile).\r\n */\r\n@Component({\r\n  selector: 'mf-virtual-list',\r\n  exportAs: 'mfVirtualList',\r\n  imports: [CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, NgTemplateOutlet],\r\n  host: { class: 'block' },\r\n  template: `\r\n    <cdk-virtual-scroll-viewport\r\n      [itemSize]=\"itemSize()\"\r\n      [style.height]=\"height()\"\r\n      class=\"rounded-lg border border-hairline bg-surface [scrollbar-gutter:stable]\"\r\n      role=\"list\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      tabindex=\"0\"\r\n      (scrolledIndexChange)=\"indexChange.emit($event)\"\r\n    >\r\n      <div\r\n        *cdkVirtualFor=\"let item of items(); let i = index; trackBy: trackFn\"\r\n        role=\"listitem\"\r\n        [attr.aria-setsize]=\"items().length\"\r\n        [attr.aria-posinset]=\"i + 1\"\r\n        class=\"flex items-center border-b border-hairline px-3 last:border-b-0\"\r\n        [style.height.px]=\"itemSize()\"\r\n      >\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template() ?? null\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\r\n        />\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  `,\r\n})\r\nexport class VirtualList<T> {\r\n  readonly items = input.required<readonly T[]>();\r\n  /** Satır yüksekliği (px) — sabit. */\r\n  readonly itemSize = input(44);\r\n  readonly height = input('24rem');\r\n  readonly ariaLabel = input('');\r\n  readonly trackBy = input<(index: number, item: T) => unknown>((i) => i);\r\n  /** İlk görünür satırın indeksi değişince. */\r\n  readonly indexChange = output<number>();\r\n\r\n  protected readonly template = contentChild(TemplateRef<{ $implicit: T; index: number }>);\r\n  private readonly viewport = viewChild.required(CdkVirtualScrollViewport);\r\n\r\n  protected readonly trackFn = (index: number, item: T) => this.trackBy()(index, item);\r\n\r\n  /** Belirli bir satıra kaydırır (ör. arama sonucu). */\r\n  scrollToIndex(index: number, behavior: ScrollBehavior = 'smooth'): void {\r\n    this.viewport().scrollToIndex(index, behavior);\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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"}