@mesgflow/ui-kit 0.7.0 → 0.8.0

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

@@ -237,10 +237,10 @@ class TableResizeHandle {
         const start = this.width() ?? this.cellWidth();
         this.widthChange.emit(Math.max(this.min(), Math.round(start + delta)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TableResizeHandle, isStandalone: true, selector: "[mfTableResizeHandle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeStart: "resizeStart", widthChange: "widthChange", autofit: "autofit" }, host: { attributes: { "role": "separator", "aria-orientation": "vertical", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "keydown": "onKeydown($event)", "dblclick": "autofit.emit()", "click": "$event.stopPropagation()" }, properties: { "attr.aria-label": "label()", "attr.aria-valuenow": "width() ?? null", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()" }, classAttribute: "absolute inset-y-0 end-0 z-[3] w-2 cursor-col-resize touch-none select-none outline-none before:absolute before:inset-y-1.5 before:end-0 before:w-0.5 before:rounded-full before:bg-transparent before:transition-colors before:duration-fast hover:before:bg-border-strong focus-visible:before:bg-focus-ring active:before:bg-accent-fill" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: TableResizeHandle, isStandalone: true, selector: "[mfTableResizeHandle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeStart: "resizeStart", widthChange: "widthChange", autofit: "autofit" }, host: { attributes: { "role": "separator", "aria-orientation": "vertical", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "keydown": "onKeydown($event)", "dblclick": "autofit.emit()", "click": "$event.stopPropagation()" }, properties: { "attr.aria-label": "label()", "attr.aria-valuenow": "width() ?? null", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()" }, classAttribute: "absolute inset-y-0 end-0 z-[3] w-2 cursor-col-resize touch-none select-none outline-none before:absolute before:inset-y-1.5 before:end-0 before:w-0.5 before:rounded-full before:bg-transparent before:transition-colors before:duration-fast hover:before:bg-border-strong focus-visible:before:bg-focus-ring active:before:bg-accent-fill" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableResizeHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableResizeHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mfTableResizeHandle]',
@@ -303,10 +303,10 @@ class TableColumnsMenu {
     close() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableColumnsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableColumnsMenu, isStandalone: true, selector: "mf-table-columns-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenChange: "hiddenChange", closed: "closed" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-end\"\r\n  padding=\"md\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1 px-1.5 py-1 text-eyebrow text-fg-subtle\">{{ effectiveLabel() }}</p>\r\n  <ul class=\"flex list-none flex-col gap-0.5\">\r\n    @for (column of toggleable(); track column.field) {\r\n      <li>\r\n        <label\r\n          class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            mfCheckbox\r\n            [checked]=\"!isHidden(column.field)\"\r\n            (change)=\"toggle(column.field)\"\r\n          />\r\n          <span class=\"truncate\">{{ column.header }}</span>\r\n        </label>\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableColumnsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TableColumnsMenu, isStandalone: true, selector: "mf-table-columns-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenChange: "hiddenChange", closed: "closed" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-end\"\r\n  padding=\"md\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1 px-1.5 py-1 text-eyebrow text-fg-subtle\">{{ effectiveLabel() }}</p>\r\n  <ul class=\"flex list-none flex-col gap-0.5\">\r\n    @for (column of toggleable(); track column.field) {\r\n      <li>\r\n        <label\r\n          class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            mfCheckbox\r\n            [checked]=\"!isHidden(column.field)\"\r\n            (change)=\"toggle(column.field)\"\r\n          />\r\n          <span class=\"truncate\">{{ column.header }}</span>\r\n        </label>\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "directive", type: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableColumnsMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableColumnsMenu, decorators: [{
             type: Component,
             args: [{ selector: 'mf-table-columns-menu', imports: [Checkbox, Popover], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-end\"\r\n  padding=\"md\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1 px-1.5 py-1 text-eyebrow text-fg-subtle\">{{ effectiveLabel() }}</p>\r\n  <ul class=\"flex list-none flex-col gap-0.5\">\r\n    @for (column of toggleable(); track column.field) {\r\n      <li>\r\n        <label\r\n          class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            mfCheckbox\r\n            [checked]=\"!isHidden(column.field)\"\r\n            (change)=\"toggle(column.field)\"\r\n          />\r\n          <span class=\"truncate\">{{ column.header }}</span>\r\n        </label>\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: true }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hiddenChange: [{ type: i0.Output, args: ["hiddenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
@@ -764,10 +764,10 @@ class TableFilterMenu {
     close() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableFilterMenu, isStandalone: true, selector: "mf-table-filter-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", remove: "remove", closed: "closed" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "fieldSearchEl", first: true, predicate: ["fieldSearchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"md\"\r\n  panelClass=\"w-72\"\r\n  (closed)=\"close()\"\r\n>\r\n  @if (step() === 'field') {\r\n    <div class=\"relative mb-1.5\">\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"pointer-events-none absolute top-1/2 start-2 -translate-y-1/2 text-fg-subtle\"\r\n        >search</span\r\n      >\r\n      <input\r\n        mfInput\r\n        #fieldSearchEl\r\n        type=\"text\"\r\n        class=\"ps-7 text-sm\"\r\n        [placeholder]=\"effectiveLabels().searchField\"\r\n        [value]=\"fieldQuery()\"\r\n        (input)=\"fieldQuery.set($any($event.target).value)\"\r\n        (keydown)=\"onFieldQueryKeydown($event)\"\r\n      />\r\n    </div>\r\n    @if (filteredColumns().length === 0) {\r\n      <p class=\"px-1.5 py-2 text-sm text-fg-subtle\">{{ effectiveLabels().noField }}</p>\r\n    } @else {\r\n      <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n        @for (column of filteredColumns(); track column.field; let i = $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"fieldOptionClasses(i)\"\r\n              (mouseenter)=\"fieldHighlighted.set(i)\"\r\n              (click)=\"selectField(column.field)\"\r\n            >\r\n              {{ column.header }}\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  } @else {\r\n    <div class=\"mb-1.5 flex items-center gap-1 px-0.5\">\r\n      @if (!initial()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().back\"\r\n          (click)=\"backToField()\"\r\n        >\r\n          <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">arrow_back</span>\r\n        </button>\r\n      }\r\n      <span class=\"text-sm font-medium text-fg\">{{ fieldHeader(selectedField() ?? '') }}</span>\r\n    </div>\r\n\r\n    @switch (filterTypeFor(selectedField() ?? '')) {\r\n      @case ('select') {\r\n        <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('boolean') {\r\n        <ul class=\"flex list-none flex-col gap-0.5\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('date') {\r\n        <div class=\"flex flex-col gap-1\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('today')\"\r\n          >\r\n            {{ effectiveLabels().dateToday }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last7')\"\r\n          >\r\n            {{ effectiveLabels().dateLast7 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last30')\"\r\n          >\r\n            {{ effectiveLabels().dateLast30 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('thisMonth')\"\r\n          >\r\n            {{ effectiveLabels().dateThisMonth }}\r\n          </button>\r\n          @if (!customDateOpen()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-accent transition-colors duration-fast ease-emphasis hover:bg-accent/5\"\r\n              (click)=\"openCustomRange()\"\r\n            >\r\n              {{ effectiveLabels().dateCustom }}\r\n            </button>\r\n          } @else {\r\n            <div class=\"mt-1 flex flex-col gap-2 border-t border-border pt-2\">\r\n              <mf-calendar\r\n                mode=\"range\"\r\n                [(month)]=\"calendarMonth\"\r\n                [rangeStart]=\"dateFrom()\"\r\n                [rangeEnd]=\"dateTo()\"\r\n                [hoverEnd]=\"dateHoverEnd()\"\r\n                (dayPick)=\"onCalendarDayPick($event)\"\r\n                (dayHover)=\"onCalendarDayHover($event)\"\r\n              />\r\n              <div class=\"flex justify-end\">\r\n                <button\r\n                  mfButton\r\n                  tone=\"primary\"\r\n                  appearance=\"filled\"\r\n                  size=\"sm\"\r\n                  type=\"button\"\r\n                  [disabled]=\"!dateFrom()\"\r\n                  (click)=\"commitCustomRange()\"\r\n                >\r\n                  {{ effectiveLabels().apply }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @default {\r\n        <div class=\"flex flex-col gap-2\">\r\n          <mf-select\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"operator()\"\r\n            (valueChange)=\"onOperatorChange($event)\"\r\n            size=\"sm\"\r\n            [ariaLabel]=\"effectiveLabels().operator\"\r\n          />\r\n          @if (currentOperatorNeedsValue()) {\r\n            <input\r\n              mfInput\r\n              type=\"text\"\r\n              class=\"text-sm\"\r\n              [attr.aria-label]=\"effectiveLabels().value\"\r\n              [placeholder]=\"effectiveLabels().value\"\r\n              [value]=\"textValue()\"\r\n              (input)=\"onTextInput($any($event.target).value)\"\r\n              (keydown.enter)=\"commitText()\"\r\n            />\r\n            <div class=\"flex items-center justify-between\">\r\n              <span class=\"text-xs text-fg-subtle\">{{ effectiveLabels().enterHint }}</span>\r\n              <button\r\n                mfButton\r\n                tone=\"primary\"\r\n                appearance=\"filled\"\r\n                size=\"sm\"\r\n                type=\"button\"\r\n                (click)=\"commitText()\"\r\n              >\r\n                {{ effectiveLabels().apply }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mf-popover>\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: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableFilterMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TableFilterMenu, isStandalone: true, selector: "mf-table-filter-menu", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", remove: "remove", closed: "closed" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "fieldSearchEl", first: true, predicate: ["fieldSearchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"md\"\r\n  panelClass=\"w-72\"\r\n  (closed)=\"close()\"\r\n>\r\n  @if (step() === 'field') {\r\n    <div class=\"relative mb-1.5\">\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"pointer-events-none absolute top-1/2 start-2 -translate-y-1/2 text-fg-subtle\"\r\n        >search</span\r\n      >\r\n      <input\r\n        mfInput\r\n        #fieldSearchEl\r\n        type=\"text\"\r\n        class=\"ps-7 text-sm\"\r\n        [placeholder]=\"effectiveLabels().searchField\"\r\n        [value]=\"fieldQuery()\"\r\n        (input)=\"fieldQuery.set($any($event.target).value)\"\r\n        (keydown)=\"onFieldQueryKeydown($event)\"\r\n      />\r\n    </div>\r\n    @if (filteredColumns().length === 0) {\r\n      <p class=\"px-1.5 py-2 text-sm text-fg-subtle\">{{ effectiveLabels().noField }}</p>\r\n    } @else {\r\n      <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n        @for (column of filteredColumns(); track column.field; let i = $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"fieldOptionClasses(i)\"\r\n              (mouseenter)=\"fieldHighlighted.set(i)\"\r\n              (click)=\"selectField(column.field)\"\r\n            >\r\n              {{ column.header }}\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  } @else {\r\n    <div class=\"mb-1.5 flex items-center gap-1 px-0.5\">\r\n      @if (!initial()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().back\"\r\n          (click)=\"backToField()\"\r\n        >\r\n          <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">arrow_back</span>\r\n        </button>\r\n      }\r\n      <span class=\"text-sm font-medium text-fg\">{{ fieldHeader(selectedField() ?? '') }}</span>\r\n    </div>\r\n\r\n    @switch (filterTypeFor(selectedField() ?? '')) {\r\n      @case ('select') {\r\n        <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('boolean') {\r\n        <ul class=\"flex list-none flex-col gap-0.5\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('date') {\r\n        <div class=\"flex flex-col gap-1\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('today')\"\r\n          >\r\n            {{ effectiveLabels().dateToday }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last7')\"\r\n          >\r\n            {{ effectiveLabels().dateLast7 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last30')\"\r\n          >\r\n            {{ effectiveLabels().dateLast30 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('thisMonth')\"\r\n          >\r\n            {{ effectiveLabels().dateThisMonth }}\r\n          </button>\r\n          @if (!customDateOpen()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-accent transition-colors duration-fast ease-emphasis hover:bg-accent/5\"\r\n              (click)=\"openCustomRange()\"\r\n            >\r\n              {{ effectiveLabels().dateCustom }}\r\n            </button>\r\n          } @else {\r\n            <div class=\"mt-1 flex flex-col gap-2 border-t border-border pt-2\">\r\n              <mf-calendar\r\n                mode=\"range\"\r\n                [(month)]=\"calendarMonth\"\r\n                [rangeStart]=\"dateFrom()\"\r\n                [rangeEnd]=\"dateTo()\"\r\n                [hoverEnd]=\"dateHoverEnd()\"\r\n                (dayPick)=\"onCalendarDayPick($event)\"\r\n                (dayHover)=\"onCalendarDayHover($event)\"\r\n              />\r\n              <div class=\"flex justify-end\">\r\n                <button\r\n                  mfButton\r\n                  tone=\"primary\"\r\n                  appearance=\"filled\"\r\n                  size=\"sm\"\r\n                  type=\"button\"\r\n                  [disabled]=\"!dateFrom()\"\r\n                  (click)=\"commitCustomRange()\"\r\n                >\r\n                  {{ effectiveLabels().apply }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @default {\r\n        <div class=\"flex flex-col gap-2\">\r\n          <mf-select\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"operator()\"\r\n            (valueChange)=\"onOperatorChange($event)\"\r\n            size=\"sm\"\r\n            [ariaLabel]=\"effectiveLabels().operator\"\r\n          />\r\n          @if (currentOperatorNeedsValue()) {\r\n            <input\r\n              mfInput\r\n              type=\"text\"\r\n              class=\"text-sm\"\r\n              [attr.aria-label]=\"effectiveLabels().value\"\r\n              [placeholder]=\"effectiveLabels().value\"\r\n              [value]=\"textValue()\"\r\n              (input)=\"onTextInput($any($event.target).value)\"\r\n              (keydown.enter)=\"commitText()\"\r\n            />\r\n            <div class=\"flex items-center justify-between\">\r\n              <span class=\"text-xs text-fg-subtle\">{{ effectiveLabels().enterHint }}</span>\r\n              <button\r\n                mfButton\r\n                tone=\"primary\"\r\n                appearance=\"filled\"\r\n                size=\"sm\"\r\n                type=\"button\"\r\n                (click)=\"commitText()\"\r\n              >\r\n                {{ effectiveLabels().apply }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mf-popover>\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: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "component", type: Calendar, selector: "mf-calendar", inputs: ["month", "mode", "selected", "rangeStart", "rangeEnd", "hoverEnd", "min", "max", "locale", "labels", "navigable"], outputs: ["monthChange", "dayPick", "dayHover"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableFilterMenu, decorators: [{
             type: Component,
             args: [{ selector: 'mf-table-filter-menu', imports: [Button, Icon, Checkbox, Input, Popover, Select, Calendar], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"md\"\r\n  panelClass=\"w-72\"\r\n  (closed)=\"close()\"\r\n>\r\n  @if (step() === 'field') {\r\n    <div class=\"relative mb-1.5\">\r\n      <span\r\n        mfIcon\r\n        [size]=\"16\"\r\n        class=\"pointer-events-none absolute top-1/2 start-2 -translate-y-1/2 text-fg-subtle\"\r\n        >search</span\r\n      >\r\n      <input\r\n        mfInput\r\n        #fieldSearchEl\r\n        type=\"text\"\r\n        class=\"ps-7 text-sm\"\r\n        [placeholder]=\"effectiveLabels().searchField\"\r\n        [value]=\"fieldQuery()\"\r\n        (input)=\"fieldQuery.set($any($event.target).value)\"\r\n        (keydown)=\"onFieldQueryKeydown($event)\"\r\n      />\r\n    </div>\r\n    @if (filteredColumns().length === 0) {\r\n      <p class=\"px-1.5 py-2 text-sm text-fg-subtle\">{{ effectiveLabels().noField }}</p>\r\n    } @else {\r\n      <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n        @for (column of filteredColumns(); track column.field; let i = $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"fieldOptionClasses(i)\"\r\n              (mouseenter)=\"fieldHighlighted.set(i)\"\r\n              (click)=\"selectField(column.field)\"\r\n            >\r\n              {{ column.header }}\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  } @else {\r\n    <div class=\"mb-1.5 flex items-center gap-1 px-0.5\">\r\n      @if (!initial()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().back\"\r\n          (click)=\"backToField()\"\r\n        >\r\n          <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">arrow_back</span>\r\n        </button>\r\n      }\r\n      <span class=\"text-sm font-medium text-fg\">{{ fieldHeader(selectedField() ?? '') }}</span>\r\n    </div>\r\n\r\n    @switch (filterTypeFor(selectedField() ?? '')) {\r\n      @case ('select') {\r\n        <ul class=\"flex max-h-64 list-none flex-col gap-0.5 overflow-auto\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('boolean') {\r\n        <ul class=\"flex list-none flex-col gap-0.5\">\r\n          @for (option of selectOptions(); track option.label) {\r\n            <li>\r\n              <label\r\n                class=\"flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  mfCheckbox\r\n                  [checked]=\"isSelected(option.value)\"\r\n                  (change)=\"toggleSelection(option.value)\"\r\n                />\r\n                <span class=\"truncate\">{{ option.label }}</span>\r\n              </label>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n      @case ('date') {\r\n        <div class=\"flex flex-col gap-1\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('today')\"\r\n          >\r\n            {{ effectiveLabels().dateToday }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last7')\"\r\n          >\r\n            {{ effectiveLabels().dateLast7 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('last30')\"\r\n          >\r\n            {{ effectiveLabels().dateLast30 }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n            (click)=\"applyPreset('thisMonth')\"\r\n          >\r\n            {{ effectiveLabels().dateThisMonth }}\r\n          </button>\r\n          @if (!customDateOpen()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"appearance-none border-0 bg-transparent rounded-sm px-2.5 py-1.5 text-start text-sm text-accent transition-colors duration-fast ease-emphasis hover:bg-accent/5\"\r\n              (click)=\"openCustomRange()\"\r\n            >\r\n              {{ effectiveLabels().dateCustom }}\r\n            </button>\r\n          } @else {\r\n            <div class=\"mt-1 flex flex-col gap-2 border-t border-border pt-2\">\r\n              <mf-calendar\r\n                mode=\"range\"\r\n                [(month)]=\"calendarMonth\"\r\n                [rangeStart]=\"dateFrom()\"\r\n                [rangeEnd]=\"dateTo()\"\r\n                [hoverEnd]=\"dateHoverEnd()\"\r\n                (dayPick)=\"onCalendarDayPick($event)\"\r\n                (dayHover)=\"onCalendarDayHover($event)\"\r\n              />\r\n              <div class=\"flex justify-end\">\r\n                <button\r\n                  mfButton\r\n                  tone=\"primary\"\r\n                  appearance=\"filled\"\r\n                  size=\"sm\"\r\n                  type=\"button\"\r\n                  [disabled]=\"!dateFrom()\"\r\n                  (click)=\"commitCustomRange()\"\r\n                >\r\n                  {{ effectiveLabels().apply }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @default {\r\n        <div class=\"flex flex-col gap-2\">\r\n          <mf-select\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"operator()\"\r\n            (valueChange)=\"onOperatorChange($event)\"\r\n            size=\"sm\"\r\n            [ariaLabel]=\"effectiveLabels().operator\"\r\n          />\r\n          @if (currentOperatorNeedsValue()) {\r\n            <input\r\n              mfInput\r\n              type=\"text\"\r\n              class=\"text-sm\"\r\n              [attr.aria-label]=\"effectiveLabels().value\"\r\n              [placeholder]=\"effectiveLabels().value\"\r\n              [value]=\"textValue()\"\r\n              (input)=\"onTextInput($any($event.target).value)\"\r\n              (keydown.enter)=\"commitText()\"\r\n            />\r\n            <div class=\"flex items-center justify-between\">\r\n              <span class=\"text-xs text-fg-subtle\">{{ effectiveLabels().enterHint }}</span>\r\n              <button\r\n                mfButton\r\n                tone=\"primary\"\r\n                appearance=\"filled\"\r\n                size=\"sm\"\r\n                type=\"button\"\r\n                (click)=\"commitText()\"\r\n              >\r\n                {{ effectiveLabels().apply }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mf-popover>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], initial: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], remove: [{ type: i0.Output, args: ["remove"] }], closed: [{ type: i0.Output, args: ["closed"] }], fieldSearchEl: [{ type: i0.ViewChild, args: ['fieldSearchEl', { isSignal: true }] }] } });
@@ -876,10 +876,10 @@ class TableFilterBar {
         this.filtersChange.emit([]);
         this.editingId.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableFilterBar, isStandalone: true, selector: "mf-table-filter-bar", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", logicChange: "logicChange" }, host: { classAttribute: "block" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-1.5 border-b border-border bg-surface-sunken px-4 py-2\">\r\n  @if (filters().length > 1) {\r\n    <mf-select\r\n      [options]=\"logicOptions()\"\r\n      [value]=\"logic()\"\r\n      (valueChange)=\"onLogicChange($event)\"\r\n      size=\"sm\"\r\n      class=\"w-20\"\r\n    />\r\n  }\r\n\r\n  @for (filter of filters(); track filter.id) {\r\n    <mf-chip\r\n      [removable]=\"true\"\r\n      [removeLabel]=\"effectiveLabels().remove\"\r\n      (removed)=\"removeFilter(filter.id)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        cdkOverlayOrigin\r\n        #chipOrigin=\"cdkOverlayOrigin\"\r\n        class=\"max-w-[16rem] cursor-pointer appearance-none truncate border-0 bg-transparent p-0 text-start transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        (click)=\"editingId.set(filter.id)\"\r\n      >\r\n        {{ chipText(filter) }}\r\n      </button>\r\n    </mf-chip>\r\n    <mf-table-filter-menu\r\n      [columns]=\"columns()\"\r\n      [origin]=\"chipOrigin\"\r\n      [open]=\"editingId() === filter.id\"\r\n      [initial]=\"filter\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (apply)=\"onMenuApply($event)\"\r\n      (remove)=\"removeFilter($event)\"\r\n      (closed)=\"editingId.set(null)\"\r\n    />\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    cdkOverlayOrigin\r\n    #addOrigin=\"cdkOverlayOrigin\"\r\n    class=\"inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full border border-dashed border-border bg-transparent py-1 pe-2.5 ps-2 text-xs font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:border-border-strong hover:text-fg\"\r\n    (click)=\"addOpen.set(!addOpen())\"\r\n  >\r\n    <span mfIcon [size]=\"14\">add</span>\r\n    {{ effectiveLabels().addFilter }}\r\n  </button>\r\n  <mf-table-filter-menu\r\n    [columns]=\"columns()\"\r\n    [origin]=\"addOrigin\"\r\n    [open]=\"addOpen()\"\r\n    [labels]=\"effectiveLabels()\"\r\n    (apply)=\"onMenuApply($event)\"\r\n    (remove)=\"removeFilter($event)\"\r\n    (closed)=\"addOpen.set(false)\"\r\n  />\r\n\r\n  @if (filters().length > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ms-auto appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clearAll()\"\r\n    >\r\n      {{ effectiveLabels().clearAll }}\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Chip, selector: "mf-chip", inputs: ["tone", "size", "selected", "disabled", "removable", "removeLabel"], outputs: ["removed"], exportAs: ["mfChip"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "component", type: TableFilterMenu, selector: "mf-table-filter-menu", inputs: ["columns", "origin", "open", "initial", "labels"], outputs: ["apply", "remove", "closed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TableFilterBar, isStandalone: true, selector: "mf-table-filter-bar", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", logicChange: "logicChange" }, host: { classAttribute: "block" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-1.5 border-b border-border bg-surface-sunken px-4 py-2\">\r\n  @if (filters().length > 1) {\r\n    <mf-select\r\n      [options]=\"logicOptions()\"\r\n      [value]=\"logic()\"\r\n      (valueChange)=\"onLogicChange($event)\"\r\n      size=\"sm\"\r\n      class=\"w-20\"\r\n    />\r\n  }\r\n\r\n  @for (filter of filters(); track filter.id) {\r\n    <mf-chip\r\n      [removable]=\"true\"\r\n      [removeLabel]=\"effectiveLabels().remove\"\r\n      (removed)=\"removeFilter(filter.id)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        cdkOverlayOrigin\r\n        #chipOrigin=\"cdkOverlayOrigin\"\r\n        class=\"max-w-[16rem] cursor-pointer appearance-none truncate border-0 bg-transparent p-0 text-start transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        (click)=\"editingId.set(filter.id)\"\r\n      >\r\n        {{ chipText(filter) }}\r\n      </button>\r\n    </mf-chip>\r\n    <mf-table-filter-menu\r\n      [columns]=\"columns()\"\r\n      [origin]=\"chipOrigin\"\r\n      [open]=\"editingId() === filter.id\"\r\n      [initial]=\"filter\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (apply)=\"onMenuApply($event)\"\r\n      (remove)=\"removeFilter($event)\"\r\n      (closed)=\"editingId.set(null)\"\r\n    />\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    cdkOverlayOrigin\r\n    #addOrigin=\"cdkOverlayOrigin\"\r\n    class=\"inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full border border-dashed border-border bg-transparent py-1 pe-2.5 ps-2 text-xs font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:border-border-strong hover:text-fg\"\r\n    (click)=\"addOpen.set(!addOpen())\"\r\n  >\r\n    <span mfIcon [size]=\"14\">add</span>\r\n    {{ effectiveLabels().addFilter }}\r\n  </button>\r\n  <mf-table-filter-menu\r\n    [columns]=\"columns()\"\r\n    [origin]=\"addOrigin\"\r\n    [open]=\"addOpen()\"\r\n    [labels]=\"effectiveLabels()\"\r\n    (apply)=\"onMenuApply($event)\"\r\n    (remove)=\"removeFilter($event)\"\r\n    (closed)=\"addOpen.set(false)\"\r\n  />\r\n\r\n  @if (filters().length > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ms-auto appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clearAll()\"\r\n    >\r\n      {{ effectiveLabels().clearAll }}\r\n    </button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Chip, selector: "mf-chip", inputs: ["tone", "size", "selected", "disabled", "removable", "removeLabel"], outputs: ["removed"], exportAs: ["mfChip"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "component", type: TableFilterMenu, selector: "mf-table-filter-menu", inputs: ["columns", "origin", "open", "initial", "labels"], outputs: ["apply", "remove", "closed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableFilterBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TableFilterBar, decorators: [{
             type: Component,
             args: [{ selector: 'mf-table-filter-bar', host: { class: 'block' }, imports: [OverlayModule, Chip, Icon, Select, TableFilterMenu], template: "<div class=\"flex flex-wrap items-center gap-1.5 border-b border-border bg-surface-sunken px-4 py-2\">\r\n  @if (filters().length > 1) {\r\n    <mf-select\r\n      [options]=\"logicOptions()\"\r\n      [value]=\"logic()\"\r\n      (valueChange)=\"onLogicChange($event)\"\r\n      size=\"sm\"\r\n      class=\"w-20\"\r\n    />\r\n  }\r\n\r\n  @for (filter of filters(); track filter.id) {\r\n    <mf-chip\r\n      [removable]=\"true\"\r\n      [removeLabel]=\"effectiveLabels().remove\"\r\n      (removed)=\"removeFilter(filter.id)\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        cdkOverlayOrigin\r\n        #chipOrigin=\"cdkOverlayOrigin\"\r\n        class=\"max-w-[16rem] cursor-pointer appearance-none truncate border-0 bg-transparent p-0 text-start transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        (click)=\"editingId.set(filter.id)\"\r\n      >\r\n        {{ chipText(filter) }}\r\n      </button>\r\n    </mf-chip>\r\n    <mf-table-filter-menu\r\n      [columns]=\"columns()\"\r\n      [origin]=\"chipOrigin\"\r\n      [open]=\"editingId() === filter.id\"\r\n      [initial]=\"filter\"\r\n      [labels]=\"effectiveLabels()\"\r\n      (apply)=\"onMenuApply($event)\"\r\n      (remove)=\"removeFilter($event)\"\r\n      (closed)=\"editingId.set(null)\"\r\n    />\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    cdkOverlayOrigin\r\n    #addOrigin=\"cdkOverlayOrigin\"\r\n    class=\"inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full border border-dashed border-border bg-transparent py-1 pe-2.5 ps-2 text-xs font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:border-border-strong hover:text-fg\"\r\n    (click)=\"addOpen.set(!addOpen())\"\r\n  >\r\n    <span mfIcon [size]=\"14\">add</span>\r\n    {{ effectiveLabels().addFilter }}\r\n  </button>\r\n  <mf-table-filter-menu\r\n    [columns]=\"columns()\"\r\n    [origin]=\"addOrigin\"\r\n    [open]=\"addOpen()\"\r\n    [labels]=\"effectiveLabels()\"\r\n    (apply)=\"onMenuApply($event)\"\r\n    (remove)=\"removeFilter($event)\"\r\n    (closed)=\"addOpen.set(false)\"\r\n  />\r\n\r\n  @if (filters().length > 0) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ms-auto appearance-none border-0 bg-transparent p-0 text-xs font-medium text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clearAll()\"\r\n    >\r\n      {{ effectiveLabels().clearAll }}\r\n    </button>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: true }] }], logic: [{ type: i0.Input, args: [{ isSignal: true, alias: "logic", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], logicChange: [{ type: i0.Output, args: ["logicChange"] }] } });
@@ -933,10 +933,10 @@ class TablePageJump {
     close() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePageJump, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: TablePageJump, isStandalone: true, selector: "mf-table-page-jump", inputs: { origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", closed: "closed" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "valueEl", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom\"\r\n  padding=\"md\"\r\n  panelClass=\"w-44\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1.5 px-0.5 text-eyebrow text-fg-subtle\">{{ effectiveLabels().jumpToPage }}</p>\r\n  <div class=\"flex items-center gap-1.5\">\r\n    <input\r\n      mfInput\r\n      #valueEl\r\n      type=\"number\"\r\n      class=\"text-sm\"\r\n      min=\"1\"\r\n      [max]=\"totalPages()\"\r\n      [placeholder]=\"'1\u2013' + totalPages()\"\r\n      [value]=\"value()\"\r\n      (input)=\"onValueInput($any($event.target).value)\"\r\n      (keydown.enter)=\"commit()\"\r\n    />\r\n    <button mfButton tone=\"primary\" appearance=\"filled\" size=\"sm\" type=\"button\" (click)=\"commit()\">\r\n      {{ effectiveLabels().go }}\r\n    </button>\r\n  </div>\r\n</mf-popover>\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: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TablePageJump, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: TablePageJump, isStandalone: true, selector: "mf-table-page-jump", inputs: { origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", closed: "closed" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "valueEl", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom\"\r\n  padding=\"md\"\r\n  panelClass=\"w-44\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1.5 px-0.5 text-eyebrow text-fg-subtle\">{{ effectiveLabels().jumpToPage }}</p>\r\n  <div class=\"flex items-center gap-1.5\">\r\n    <input\r\n      mfInput\r\n      #valueEl\r\n      type=\"number\"\r\n      class=\"text-sm\"\r\n      min=\"1\"\r\n      [max]=\"totalPages()\"\r\n      [placeholder]=\"'1\u2013' + totalPages()\"\r\n      [value]=\"value()\"\r\n      (input)=\"onValueInput($any($event.target).value)\"\r\n      (keydown.enter)=\"commit()\"\r\n    />\r\n    <button mfButton tone=\"primary\" appearance=\"filled\" size=\"sm\" type=\"button\" (click)=\"commit()\">\r\n      {{ effectiveLabels().go }}\r\n    </button>\r\n  </div>\r\n</mf-popover>\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: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePageJump, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TablePageJump, decorators: [{
             type: Component,
             args: [{ selector: 'mf-table-page-jump', imports: [Button, Input, Popover], host: { class: 'contents' }, template: "<mf-popover\r\n  [origin]=\"origin()\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom\"\r\n  padding=\"md\"\r\n  panelClass=\"w-44\"\r\n  (closed)=\"close()\"\r\n>\r\n  <p class=\"mb-1.5 px-0.5 text-eyebrow text-fg-subtle\">{{ effectiveLabels().jumpToPage }}</p>\r\n  <div class=\"flex items-center gap-1.5\">\r\n    <input\r\n      mfInput\r\n      #valueEl\r\n      type=\"number\"\r\n      class=\"text-sm\"\r\n      min=\"1\"\r\n      [max]=\"totalPages()\"\r\n      [placeholder]=\"'1\u2013' + totalPages()\"\r\n      [value]=\"value()\"\r\n      (input)=\"onValueInput($any($event.target).value)\"\r\n      (keydown.enter)=\"commit()\"\r\n    />\r\n    <button mfButton tone=\"primary\" appearance=\"filled\" size=\"sm\" type=\"button\" (click)=\"commit()\">\r\n      {{ effectiveLabels().go }}\r\n    </button>\r\n  </div>\r\n</mf-popover>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], closed: [{ type: i0.Output, args: ["closed"] }], valueEl: [{ type: i0.ViewChild, args: ['valueEl', { isSignal: true }] }] } });
@@ -1085,10 +1085,10 @@ class TablePagination {
         this.jumpOpenIndex.set(null);
         this.goTo(page);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TablePagination, isStandalone: true, selector: "mf-table-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "navEl", first: true, predicate: ["nav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3\">\r\n  <div class=\"flex items-center gap-2 text-sm text-fg-subtle\">\r\n    <span class=\"tabular-nums\"\r\n      >{{ rangeStart() }}\u2013{{ rangeEnd() }} / {{ total() }} {{ effectiveLabels().records }}</span\r\n    >\r\n    <span class=\"text-fg-subtle\">{{ effectiveLabels().perPage }}</span>\r\n    <mf-select\r\n      [options]=\"pageSizeSelectOptions()\"\r\n      [value]=\"pageSize()\"\r\n      (valueChange)=\"onPageSizeChange($event)\"\r\n      size=\"sm\"\r\n      [ariaLabel]=\"effectiveLabels().pageSizeAriaLabel\"\r\n      class=\"w-20\"\r\n    />\r\n  </div>\r\n\r\n  <nav\r\n    #nav\r\n    tabindex=\"-1\"\r\n    class=\"flex shrink-0 flex-nowrap items-center gap-1.5 outline-none\"\r\n    [attr.aria-label]=\"effectiveLabels().navAriaLabel\"\r\n    (keydown)=\"onNavKeydown($event)\"\r\n    (focusin)=\"onNavFocusIn()\"\r\n    (focusout)=\"onNavFocusOut()\"\r\n  >\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().first\"\r\n        (click)=\"goTo(1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().previous\"\r\n        (click)=\"goTo(page() - 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"hidden items-center gap-0.5 sm:flex\">\r\n      @for (item of pageItems(); track $index) {\r\n        @if (item === 'ellipsis') {\r\n          <button\r\n            type=\"button\"\r\n            cdkOverlayOrigin\r\n            #jumpOrigin=\"cdkOverlayOrigin\"\r\n            [class]=\"cellClasses(false)\"\r\n            [attr.aria-label]=\"effectiveLabels().jumpToPage\"\r\n            (click)=\"toggleJump($index)\"\r\n          >\r\n            \u2026\r\n          </button>\r\n          <mf-table-page-jump\r\n            [origin]=\"jumpOrigin\"\r\n            [open]=\"jumpOpenIndex() === $index\"\r\n            [totalPages]=\"totalPages()\"\r\n            [labels]=\"effectiveLabels()\"\r\n            (apply)=\"onJumpApply($event)\"\r\n            (closed)=\"jumpOpenIndex.set(null)\"\r\n          />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(item === page())\"\r\n            [attr.aria-current]=\"item === page() ? 'page' : null\"\r\n            (click)=\"goTo(item)\"\r\n          >\r\n            {{ item }}\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <span class=\"flex h-9 shrink-0 items-center px-3 text-sm tabular-nums text-fg-muted sm:hidden\">\r\n      {{ effectiveLabels().page }} {{ page() }} / {{ totalPages() }}\r\n    </span>\r\n\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().next\"\r\n        (click)=\"goTo(page() + 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().last\"\r\n        (click)=\"goTo(totalPages())\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TablePageJump, selector: "mf-table-page-jump", inputs: ["origin", "open", "totalPages", "labels"], outputs: ["apply", "closed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TablePagination, isStandalone: true, selector: "mf-table-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "navEl", first: true, predicate: ["nav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3\">\r\n  <div class=\"flex items-center gap-2 text-sm text-fg-subtle\">\r\n    <span class=\"tabular-nums\"\r\n      >{{ rangeStart() }}\u2013{{ rangeEnd() }} / {{ total() }} {{ effectiveLabels().records }}</span\r\n    >\r\n    <span class=\"text-fg-subtle\">{{ effectiveLabels().perPage }}</span>\r\n    <mf-select\r\n      [options]=\"pageSizeSelectOptions()\"\r\n      [value]=\"pageSize()\"\r\n      (valueChange)=\"onPageSizeChange($event)\"\r\n      size=\"sm\"\r\n      [ariaLabel]=\"effectiveLabels().pageSizeAriaLabel\"\r\n      class=\"w-20\"\r\n    />\r\n  </div>\r\n\r\n  <nav\r\n    #nav\r\n    tabindex=\"-1\"\r\n    class=\"flex shrink-0 flex-nowrap items-center gap-1.5 outline-none\"\r\n    [attr.aria-label]=\"effectiveLabels().navAriaLabel\"\r\n    (keydown)=\"onNavKeydown($event)\"\r\n    (focusin)=\"onNavFocusIn()\"\r\n    (focusout)=\"onNavFocusOut()\"\r\n  >\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().first\"\r\n        (click)=\"goTo(1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().previous\"\r\n        (click)=\"goTo(page() - 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"hidden items-center gap-0.5 sm:flex\">\r\n      @for (item of pageItems(); track $index) {\r\n        @if (item === 'ellipsis') {\r\n          <button\r\n            type=\"button\"\r\n            cdkOverlayOrigin\r\n            #jumpOrigin=\"cdkOverlayOrigin\"\r\n            [class]=\"cellClasses(false)\"\r\n            [attr.aria-label]=\"effectiveLabels().jumpToPage\"\r\n            (click)=\"toggleJump($index)\"\r\n          >\r\n            \u2026\r\n          </button>\r\n          <mf-table-page-jump\r\n            [origin]=\"jumpOrigin\"\r\n            [open]=\"jumpOpenIndex() === $index\"\r\n            [totalPages]=\"totalPages()\"\r\n            [labels]=\"effectiveLabels()\"\r\n            (apply)=\"onJumpApply($event)\"\r\n            (closed)=\"jumpOpenIndex.set(null)\"\r\n          />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(item === page())\"\r\n            [attr.aria-current]=\"item === page() ? 'page' : null\"\r\n            (click)=\"goTo(item)\"\r\n          >\r\n            {{ item }}\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <span class=\"flex h-9 shrink-0 items-center px-3 text-sm tabular-nums text-fg-muted sm:hidden\">\r\n      {{ effectiveLabels().page }} {{ page() }} / {{ totalPages() }}\r\n    </span>\r\n\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().next\"\r\n        (click)=\"goTo(page() + 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().last\"\r\n        (click)=\"goTo(totalPages())\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Select, selector: "mf-select", inputs: ["options", "value", "multiple", "values", "maxVisibleChips", "placeholder", "disabled", "size", "hasError", "ariaLabel"], outputs: ["valueChange", "valuesChange"], exportAs: ["mfSelect"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TablePageJump, selector: "mf-table-page-jump", inputs: ["origin", "open", "totalPages", "labels"], outputs: ["apply", "closed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TablePagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TablePagination, decorators: [{
             type: Component,
             args: [{ selector: 'mf-table-pagination', host: { class: 'block' }, imports: [Select, Icon, OverlayModule, TablePageJump], template: "<div class=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3\">\r\n  <div class=\"flex items-center gap-2 text-sm text-fg-subtle\">\r\n    <span class=\"tabular-nums\"\r\n      >{{ rangeStart() }}\u2013{{ rangeEnd() }} / {{ total() }} {{ effectiveLabels().records }}</span\r\n    >\r\n    <span class=\"text-fg-subtle\">{{ effectiveLabels().perPage }}</span>\r\n    <mf-select\r\n      [options]=\"pageSizeSelectOptions()\"\r\n      [value]=\"pageSize()\"\r\n      (valueChange)=\"onPageSizeChange($event)\"\r\n      size=\"sm\"\r\n      [ariaLabel]=\"effectiveLabels().pageSizeAriaLabel\"\r\n      class=\"w-20\"\r\n    />\r\n  </div>\r\n\r\n  <nav\r\n    #nav\r\n    tabindex=\"-1\"\r\n    class=\"flex shrink-0 flex-nowrap items-center gap-1.5 outline-none\"\r\n    [attr.aria-label]=\"effectiveLabels().navAriaLabel\"\r\n    (keydown)=\"onNavKeydown($event)\"\r\n    (focusin)=\"onNavFocusIn()\"\r\n    (focusout)=\"onNavFocusOut()\"\r\n  >\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().first\"\r\n        (click)=\"goTo(1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === 1\"\r\n        [attr.aria-label]=\"effectiveLabels().previous\"\r\n        (click)=\"goTo(page() - 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"hidden items-center gap-0.5 sm:flex\">\r\n      @for (item of pageItems(); track $index) {\r\n        @if (item === 'ellipsis') {\r\n          <button\r\n            type=\"button\"\r\n            cdkOverlayOrigin\r\n            #jumpOrigin=\"cdkOverlayOrigin\"\r\n            [class]=\"cellClasses(false)\"\r\n            [attr.aria-label]=\"effectiveLabels().jumpToPage\"\r\n            (click)=\"toggleJump($index)\"\r\n          >\r\n            \u2026\r\n          </button>\r\n          <mf-table-page-jump\r\n            [origin]=\"jumpOrigin\"\r\n            [open]=\"jumpOpenIndex() === $index\"\r\n            [totalPages]=\"totalPages()\"\r\n            [labels]=\"effectiveLabels()\"\r\n            (apply)=\"onJumpApply($event)\"\r\n            (closed)=\"jumpOpenIndex.set(null)\"\r\n          />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"cellClasses(item === page())\"\r\n            [attr.aria-current]=\"item === page() ? 'page' : null\"\r\n            (click)=\"goTo(item)\"\r\n          >\r\n            {{ item }}\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <span class=\"flex h-9 shrink-0 items-center px-3 text-sm tabular-nums text-fg-muted sm:hidden\">\r\n      {{ effectiveLabels().page }} {{ page() }} / {{ totalPages() }}\r\n    </span>\r\n\r\n    <div class=\"flex items-center gap-0.5\">\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().next\"\r\n        (click)=\"goTo(page() + 1)\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"cellClasses(false)\"\r\n        [disabled]=\"page() === totalPages()\"\r\n        [attr.aria-label]=\"effectiveLabels().last\"\r\n        (click)=\"goTo(totalPages())\"\r\n      >\r\n        <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], navEl: [{ type: i0.ViewChild, args: ['nav', { isSignal: true }] }] } });
@@ -1759,10 +1759,10 @@ class Table {
             filter: this.buildFilter(),
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Table, isStandalone: true, selector: "mf-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, clientSide: { classPropertyName: "clientSide", publicName: "clientSide", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualHeight: { classPropertyName: "virtualHeight", publicName: "virtualHeight", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { density: "densityChange", columnWidths: "columnWidthsChange", queryChange: "queryChange", selectionChange: "selectionChange", edit: "edit", delete: "delete", rowDblClick: "rowDblClick", rowExpandedChange: "rowExpandedChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], exportAs: ["mfTable"], ngImport: i0, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\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          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\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          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\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: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Skeleton, selector: "[mfSkeleton]", inputs: ["variant", "lines"] }, { kind: "component", type: EmptyState, selector: "mf-empty-state", inputs: ["title", "description"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TableFilterBar, selector: "mf-table-filter-bar", inputs: ["columns", "filters", "logic", "labels"], outputs: ["filtersChange", "logicChange"] }, { kind: "component", type: TableColumnsMenu, selector: "mf-table-columns-menu", inputs: ["columns", "hidden", "origin", "open", "label"], outputs: ["hiddenChange", "closed"] }, { kind: "component", type: TablePagination, selector: "mf-table-pagination", inputs: ["page", "pageSize", "total", "pageSizeOptions", "labels"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TableResizeHandle, selector: "[mfTableResizeHandle]", inputs: ["label", "width", "min", "max"], outputs: ["resizeStart", "widthChange", "autofit"] }, { kind: "component", type: SearchInput, selector: "mf-search-input", inputs: ["value", "placeholder", "inputId", "ariaLabel", "tooltipLabel", "loading", "debounceMs", "collapsible", "fullWidth"], outputs: ["valueChange"], exportAs: ["mfSearchInput"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Table, isStandalone: true, selector: "mf-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, clientSide: { classPropertyName: "clientSide", publicName: "clientSide", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualHeight: { classPropertyName: "virtualHeight", publicName: "virtualHeight", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { density: "densityChange", columnWidths: "columnWidthsChange", queryChange: "queryChange", selectionChange: "selectionChange", edit: "edit", delete: "delete", rowDblClick: "rowDblClick", rowExpandedChange: "rowExpandedChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], exportAs: ["mfTable"], ngImport: i0, template: "<div class=\"relative overflow-hidden rounded-lg border border-hairline bg-surface\">\r\n  @if (showStaleOverlay()) {\r\n    <div\r\n      class=\"pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary-tint\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <div class=\"h-full w-1/4 animate-progress-slide bg-accent-fill\"></div>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Sat\u0131r 1 \u2014 toolbar. Se\u00E7im modunda da AYNI kal\u0131r: eskiden bir sat\u0131r\r\n    se\u00E7ilince ba\u015Fl\u0131k+arama+filtre tamamen kaybolup yerine \"N se\u00E7ildi\"\r\n    geliyordu (ger\u00E7ek bug, kullan\u0131c\u0131 arama/filtre ba\u011Flam\u0131n\u0131 kaybediyordu).\r\n    Art\u0131k sadece Sat\u0131r 2 (a\u015Fa\u011F\u0131da) se\u00E7im aksiyonlar\u0131na devrediliyor.\r\n  -->\r\n  <div class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3\">\r\n    <div class=\"flex min-w-0 items-center gap-2.5\">\r\n      @if (title()) {\r\n        <h3 class=\"truncate font-display text-title text-fg\">{{ title() }}</h3>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex flex-1 flex-wrap items-center justify-end gap-2\">\r\n      @if (searchable()) {\r\n        <mf-search-input\r\n          [collapsible]=\"false\"\r\n          [value]=\"searchTerm()\"\r\n          [placeholder]=\"effectiveLabels().searchPlaceholder\"\r\n          [ariaLabel]=\"effectiveLabels().searchPlaceholder\"\r\n          [loading]=\"loading()\"\r\n          (valueChange)=\"onSearchCommit($event)\"\r\n        />\r\n      }\r\n\r\n      <!-- Kolonlar + Yo\u011Funluk: B\u0130LEREK hayalet (text/icon) kal\u0131yor \u2014 g\u00F6z [tableActions]'daki ger\u00E7ek CTA'ya gitsin diye (bkz. table.ts s\u0131n\u0131f yorumu, toolbar hiyerar\u015Fisi bulgusu). -->\r\n      <div class=\"flex items-center gap-0.5\">\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          cdkOverlayOrigin\r\n          #columnsOrigin=\"cdkOverlayOrigin\"\r\n          [mfTooltip]=\"effectiveLabels().columns\"\r\n          [attr.aria-label]=\"effectiveLabels().columns\"\r\n          (click)=\"columnsMenuOpen.set(!columnsMenuOpen())\"\r\n        >\r\n          <span mfIcon [size]=\"18\">view_column</span>\r\n        </button>\r\n        <mf-table-columns-menu\r\n          [columns]=\"columns()\"\r\n          [hidden]=\"hiddenColumns()\"\r\n          [origin]=\"columnsOrigin\"\r\n          [open]=\"columnsMenuOpen()\"\r\n          [label]=\"effectiveLabels().columns\"\r\n          (hiddenChange)=\"onHiddenColumnsChange($event)\"\r\n          (closed)=\"columnsMenuOpen.set(false)\"\r\n        />\r\n\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          [mfTooltip]=\"densityToggleTooltip()\"\r\n          [attr.aria-label]=\"densityToggleTooltip()\"\r\n          (click)=\"toggleDensity()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">{{\r\n            density() === 'comfortable' ? 'density_medium' : 'density_small'\r\n          }}</span>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-content select=\"[tableActions]\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Sat\u0131r 2 \u2014 ya filtre \u00E7ubu\u011Fu ya se\u00E7im \u00E7ubu\u011Fu, ASLA ikisi birden. -->\r\n  @if (selectedCount() > 0) {\r\n    <div\r\n      class=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface-sunken px-4 py-2\"\r\n    >\r\n      <div class=\"flex items-center gap-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"inline-flex items-center justify-center appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n          [attr.aria-label]=\"effectiveLabels().clearSelection\"\r\n          (click)=\"clearSelection()\"\r\n        >\r\n          <span mfIcon [size]=\"18\">close</span>\r\n        </button>\r\n        <span class=\"text-sm font-medium text-fg-muted tabular-nums\"\r\n          >{{ selectedCount() }} {{ effectiveLabels().selectedCount }}</span\r\n        >\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        <ng-content select=\"[tableBulkActions]\" />\r\n        @if (activeFilterCount() > 0) {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 rounded-full bg-surface-alt px-2 py-0.5 text-xs text-fg-subtle\"\r\n          >\r\n            <span mfIcon [size]=\"12\">filter_list</span>\r\n            {{ activeFilterCount() }} {{ effectiveLabels().filterCount }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (hasFilterableColumns()) {\r\n    <mf-table-filter-bar\r\n      [columns]=\"columns()\"\r\n      [filters]=\"appliedFilters()\"\r\n      [logic]=\"filterLogic()\"\r\n      [labels]=\"effectiveLabels().filter\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (logicChange)=\"onFilterLogicChange($event)\"\r\n    />\r\n  }\r\n\r\n  <div\r\n    #scroller\r\n    [class]=\"scrollWrapperClasses()\"\r\n    [style.max-height]=\"virtual() ? virtualHeight() : null\"\r\n    (scroll)=\"onScroll($event)\"\r\n  >\r\n    <table\r\n      [class]=\"cn('border-collapse text-sm', fixedLayout() ? 'min-w-full table-fixed' : 'w-full')\"\r\n      [style.width.px]=\"tableWidth()\"\r\n      [attr.aria-rowcount]=\"virtual() ? rows().length + 1 : null\"\r\n    >\r\n      <thead\r\n        [class]=\"\r\n          cn(\r\n            'bg-surface-sunken',\r\n            isStickyHeader() ? 'sticky top-0 z-10 border-b border-border-strong' : ''\r\n          )\r\n        \"\r\n      >\r\n        <tr class=\"border-b border-hairline\" [attr.aria-rowindex]=\"virtual() ? 1 : null\">\r\n          @if (selectable()) {\r\n            <th\r\n              data-pin=\"__select\"\r\n              [class]=\"cn('w-10 px-4', headerCellPad(), pinHeadClasses('__select'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n            >\r\n              <input\r\n                type=\"checkbox\"\r\n                mfCheckbox\r\n                [checked]=\"allChecked()\"\r\n                [indeterminate]=\"indeterminate()\"\r\n                [attr.aria-label]=\"effectiveLabels().selectAllAriaLabel\"\r\n                (change)=\"onCheckAll($any($event.target).checked)\"\r\n              />\r\n            </th>\r\n          }\r\n          @if (expandable()) {\r\n            <th\r\n              data-pin=\"__expand\"\r\n              [class]=\"cn('w-10 px-1.5', headerCellPad(), pinHeadClasses('__expand'))\"\r\n              [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n            >\r\n              <span class=\"sr-only\">{{ effectiveLabels().expandRow }}</span>\r\n            </th>\r\n          }\r\n          @for (col of visibleColumns(); track col.field) {\r\n            <th\r\n              [attr.data-col]=\"col.field\"\r\n              [attr.aria-sort]=\"col.sortable ? ariaSortFor(col.field) : null\"\r\n              [attr.data-pin]=\"col.pinned === 'left' ? col.field : null\"\r\n              [class]=\"\r\n                cn(\r\n                  'group/th relative truncate px-4 text-eyebrow text-fg-subtle',\r\n                  headerCellPad(),\r\n                  alignClass(resolvedAlign(col)),\r\n                  pinHeadClasses(col.field)\r\n                )\r\n              \"\r\n              [style.width]=\"widthStyle(col)\"\r\n              [style.min-width.px]=\"col.minWidth ?? null\"\r\n              [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n            >\r\n              @if (col.sortable) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"inline-flex appearance-none items-center gap-1 rounded-xs border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"onSortClick(col, $event)\"\r\n                >\r\n                  <span>{{ col.header }}</span>\r\n                  @if (sortOrderFor(col.field); as order) {\r\n                    <span class=\"text-caption font-bold text-accent tabular-nums\">{{ order }}</span>\r\n                  }\r\n                  <span\r\n                    mfIcon\r\n                    [size]=\"14\"\r\n                    [class]=\"\r\n                      sortDirectionFor(col.field) !== null\r\n                        ? 'text-accent'\r\n                        : 'text-fg-subtle opacity-0 transition-opacity duration-fast group-hover/th:opacity-100'\r\n                    \"\r\n                  >\r\n                    @switch (sortDirectionFor(col.field)) {\r\n                      @case (0) {\r\n                        arrow_upward\r\n                      }\r\n                      @case (1) {\r\n                        arrow_downward\r\n                      }\r\n                      @default {\r\n                        unfold_more\r\n                      }\r\n                    }\r\n                  </span>\r\n                </button>\r\n              } @else {\r\n                <span>{{ col.header }}</span>\r\n              }\r\n              @if (isResizable(col)) {\r\n                <span\r\n                  mfTableResizeHandle\r\n                  [label]=\"resizeAriaLabel(col)\"\r\n                  [width]=\"currentWidth(col)\"\r\n                  [min]=\"col.minWidth ?? 80\"\r\n                  (resizeStart)=\"freezeWidths()\"\r\n                  (widthChange)=\"onColumnResize(col, $event)\"\r\n                  (autofit)=\"autofitColumn(col)\"\r\n                ></span>\r\n              }\r\n            </th>\r\n          }\r\n          @if (hasRowActions()) {\r\n            <th [class]=\"cn('sticky end-0 z-[1] w-20 bg-surface-sunken px-4', headerCellPad())\">\r\n              <span class=\"sr-only\">{{ effectiveLabels().actionsColumnLabel }}</span>\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (showSkeleton()) {\r\n          @for (i of skeletonIndexes(); track i) {\r\n            <tr class=\"border-b border-hairline\">\r\n              @if (selectable()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"><div mfSkeleton class=\"h-4 w-4\"></div></td>\r\n              }\r\n              @if (expandable()) {\r\n                <td [class]=\"cn('px-1.5', bodyCellPad())\"></td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\">\r\n                  <div mfSkeleton class=\"h-4 w-full max-w-[10rem]\"></div>\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"cn('px-4', bodyCellPad())\"></td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (rows().length === 0) {\r\n          <tr>\r\n            <td [attr.colspan]=\"columnSpan()\" class=\"px-4 py-6\">\r\n              <mf-empty-state\r\n                class=\"block\"\r\n                [title]=\"\r\n                  isFiltered() ? effectiveLabels().noResultsTitle : effectiveLabels().emptyTitle\r\n                \"\r\n                [description]=\"\r\n                  isFiltered()\r\n                    ? effectiveLabels().noResultsDescription\r\n                    : effectiveLabels().emptyDescription\r\n                \"\r\n              >\r\n                <span icon mfIcon [size]=\"28\">{{ isFiltered() ? 'search_off' : 'inbox' }}</span>\r\n                @if (isFiltered()) {\r\n                  <button\r\n                    action\r\n                    mfButton\r\n                    appearance=\"text\"\r\n                    tone=\"primary\"\r\n                    type=\"button\"\r\n                    (click)=\"clearAllFilters()\"\r\n                  >\r\n                    {{ effectiveLabels().clearFilters }}\r\n                  </button>\r\n                }\r\n              </mf-empty-state>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          @if (virtualRange(); as range) {\r\n            @if (range.top > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.top\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n          @for (row of displayRows(); track trackByRow($index, row)) {\r\n            <tr\r\n              data-row\r\n              [class]=\"rowClasses(row)\"\r\n              [attr.aria-rowindex]=\"virtual() ? rowIndexOffset() + $index + 2 : null\"\r\n              (dblclick)=\"rowDblClick.emit(row)\"\r\n            >\r\n              @if (selectable()) {\r\n                <td\r\n                  [class]=\"cn('px-4', bodyCellPad(), pinBodyClasses('__select', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__select')\"\r\n                >\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    mfCheckbox\r\n                    [checked]=\"isChecked(row)\"\r\n                    [attr.aria-label]=\"rowSelectAriaLabel(row)\"\r\n                    (change)=\"onCheckRow(row, $any($event.target).checked)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (expandable()) {\r\n                <td\r\n                  [class]=\"cn('px-1.5', bodyCellPad(), pinBodyClasses('__expand', row))\"\r\n                  [style.inset-inline-start.px]=\"pinStart('__expand')\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex size-7 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                    [attr.aria-expanded]=\"isExpanded(row)\"\r\n                    [attr.aria-controls]=\"isExpanded(row) ? expandedRowId($index) : null\"\r\n                    [attr.aria-label]=\"expandAriaLabel(row)\"\r\n                    (click)=\"toggleExpanded(row)\"\r\n                  >\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"18\"\r\n                      class=\"transition-transform duration-base ease-emphasis rtl:-scale-x-100\"\r\n                      [class.rotate-90]=\"isExpanded(row)\"\r\n                      [class.rtl:-rotate-90]=\"isExpanded(row)\"\r\n                      >chevron_right</span\r\n                    >\r\n                  </button>\r\n                </td>\r\n              }\r\n              @for (col of visibleColumns(); track col.field) {\r\n                <td\r\n                  [attr.data-col]=\"col.field\"\r\n                  [class]=\"\r\n                    cn(\r\n                      'max-w-0 px-4',\r\n                      bodyCellPad(),\r\n                      cellClasses(col),\r\n                      alignClass(resolvedAlign(col)),\r\n                      pinBodyClasses(col.field, row)\r\n                    )\r\n                  \"\r\n                  [style.inset-inline-start.px]=\"pinStart(col.field)\"\r\n                  [title]=\"!col.cellTemplate ? cellText(row, col) : null\"\r\n                >\r\n                  @if (col.cellTemplate) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"col.cellTemplate; context: { $implicit: row }\"\r\n                    />\r\n                  } @else {\r\n                    <span>{{ row[col.field] }}</span>\r\n                  }\r\n                </td>\r\n              }\r\n              @if (hasRowActions()) {\r\n                <td [class]=\"stickyActionClasses(row)\">\r\n                  <div\r\n                    class=\"flex items-center justify-end gap-1 opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/row:opacity-100 group-focus-within/row:opacity-100\"\r\n                  >\r\n                    @if (rowActions().edit) {\r\n                      <!--\r\n                        `tone=\"info\"` (mavi) B\u0130LEREK `neutral` DE\u011E\u0130L \u2014 sat\u0131r\r\n                        hover'\u0131 zaten `bg-surface-alt` boyuyor (bkz. rowBg()),\r\n                        `neutral`'\u0131n kendi `hover:bg-state-hover`'\u0131 AYNI renk\r\n                        oldu\u011Fundan buton \u00FCzerine gelince g\u00F6rsel hi\u00E7bir \u015Fey\r\n                        de\u011Fi\u015Fmiyordu (ger\u00E7ek kullan\u0131c\u0131 bulgusu). Delete'in\r\n                        `danger` (k\u0131rm\u0131z\u0131 ton) hover'\u0131 bu sorunu ya\u015Fam\u0131yordu \u2014\r\n                        ayn\u0131 mant\u0131k: Edit'e de arka planla \u00E7ak\u0131\u015Fmayan kendi\r\n                        renk tonu (mavi `info/5`) verildi.\r\n                      -->\r\n                      <button\r\n                        mfButton\r\n                        tone=\"info\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().edit\"\r\n                        [mfTooltip]=\"effectiveLabels().edit\"\r\n                        (click)=\"edit.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">edit</span>\r\n                      </button>\r\n                    }\r\n                    @if (rowActions().delete) {\r\n                      <button\r\n                        mfButton\r\n                        tone=\"danger\"\r\n                        appearance=\"text\"\r\n                        size=\"icon\"\r\n                        shape=\"square\"\r\n                        type=\"button\"\r\n                        [attr.aria-label]=\"effectiveLabels().delete\"\r\n                        [mfTooltip]=\"effectiveLabels().delete\"\r\n                        (click)=\"delete.emit(row)\"\r\n                      >\r\n                        <span mfIcon [size]=\"18\">delete</span>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </td>\r\n              }\r\n            </tr>\r\n            @if (expandable() && isExpanded(row)) {\r\n              <tr [id]=\"expandedRowId($index)\" class=\"border-b border-b-hairline bg-surface-sunken\">\r\n                <td [attr.colspan]=\"columnSpan()\" class=\"p-0\">\r\n                  <!-- Yatay kayd\u0131rmada ayr\u0131nt\u0131 g\u00F6r\u00FCn\u00FCr alanda sabit kal\u0131r (tablo geni\u015Fli\u011Fiyle kaymaz). -->\r\n                  <div\r\n                    class=\"sticky start-0 box-border px-4 py-3\"\r\n                    [style.width.px]=\"viewportWidth() || null\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"expandedRowTemplate()!; context: { $implicit: row }\"\r\n                    />\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (virtualRange(); as range) {\r\n            @if (range.bottom > 0) {\r\n              <tr aria-hidden=\"true\">\r\n                <td\r\n                  class=\"border-0 p-0\"\r\n                  [attr.colspan]=\"columnSpan()\"\r\n                  [style.height.px]=\"range.bottom\"\r\n                ></td>\r\n              </tr>\r\n            }\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"border-t border-border bg-surface-sunken\">\r\n    @if (virtual()) {\r\n      <p class=\"px-4 py-2.5 text-sm text-fg-muted tabular-nums\">\r\n        {{ rowsTotal() }} {{ effectiveLabels().pagination.records }}\r\n      </p>\r\n    } @else {\r\n      <mf-table-pagination\r\n        [page]=\"pageState().pageNumber\"\r\n        [pageSize]=\"pageState().pageSize\"\r\n        [total]=\"rowsTotal()\"\r\n        [pageSizeOptions]=\"pageSizeOptions()\"\r\n        [labels]=\"effectiveLabels().pagination\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\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: Checkbox, selector: "input[type=checkbox][mfCheckbox]", inputs: ["size", "indeterminate"] }, { kind: "component", type: Skeleton, selector: "[mfSkeleton]", inputs: ["variant", "lines"] }, { kind: "component", type: EmptyState, selector: "mf-empty-state", inputs: ["title", "description"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TableFilterBar, selector: "mf-table-filter-bar", inputs: ["columns", "filters", "logic", "labels"], outputs: ["filtersChange", "logicChange"] }, { kind: "component", type: TableColumnsMenu, selector: "mf-table-columns-menu", inputs: ["columns", "hidden", "origin", "open", "label"], outputs: ["hiddenChange", "closed"] }, { kind: "component", type: TablePagination, selector: "mf-table-pagination", inputs: ["page", "pageSize", "total", "pageSizeOptions", "labels"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TableResizeHandle, selector: "[mfTableResizeHandle]", inputs: ["label", "width", "min", "max"], outputs: ["resizeStart", "widthChange", "autofit"] }, { kind: "component", type: SearchInput, selector: "mf-search-input", inputs: ["value", "placeholder", "inputId", "ariaLabel", "tooltipLabel", "loading", "debounceMs", "collapsible", "fullWidth"], outputs: ["valueChange"], exportAs: ["mfSearchInput"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Table, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Table, decorators: [{
             type: Component,
             args: [{ selector: 'mf-table', exportAs: 'mfTable', imports: [
                         Button,