mn-angular-lib 1.0.143 → 1.0.145

package/fesm2022/mn-angular-lib.mjs

@@ -9,7 +9,7 @@ import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angu
 import * as i1$1 from '@angular/forms';
 import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import JSON5 from 'json5';
-import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideCalendarDays, LucideChevronLeft, LucideChevronRight, LucideChevronDown, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideInbox, LucideFilter, LucideDynamicIcon, LucideFunnel, LucideTriangleAlert, LucideCircleAlert } from '@lucide/angular';
+import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideCalendarDays, LucideChevronLeft, LucideChevronRight, LucideChevronDown, LucideEllipsisVertical, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideInbox, LucideFilter, LucideDynamicIcon, LucideFunnel, LucideTriangleAlert, LucideCircleAlert } from '@lucide/angular';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -4295,6 +4295,342 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ['window:resize', []]
             }] } });
 
+/**
+ * Layout variants for the ⋯ trigger button. Kept deliberately small: the trigger is
+ * an icon affordance, so it only exposes the knobs a consumer realistically retunes
+ * (size and border radius). Colour/hover come from the underlying mn-button.
+ */
+const mnDropdownTriggerVariants = tv({
+    base: 'inline-flex items-center justify-center text-base-content/70 cursor-pointer',
+    variants: {
+        size: {
+            sm: 'h-7 w-7',
+            md: 'h-9 w-9',
+            lg: 'h-11 w-11',
+        },
+        borderRadius: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            full: 'rounded-full',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'md',
+    },
+});
+
+const MN_DROPDOWN_CONFIG = new InjectionToken('MN_DROPDOWN_CONFIG');
+/**
+ * A ⋯ command menu. The trigger opens a `role="menu"` list of {@link MnDropdownAction}s
+ * that each fire and dismiss on choice — a *command* menu, not a value picker, so it is
+ * intentionally not a ControlValueAccessor.
+ *
+ * Presentation mirrors mn-multi-select: an anchored popover on desktop and the shared
+ * {@link MnBottomSheet} on mobile (< 640px). Both the popover and the sheet host are
+ * portalled to `document.body` so their `position: fixed` anchors to the viewport rather
+ * than any transformed/filtered ancestor (a table cell, a card) — the same root-cause fix
+ * the multi-select applies.
+ */
+class MnDropdown {
+    props;
+    uiConfig = {};
+    configService = inject(MnConfigService);
+    sectionPath = inject(MN_SECTION_PATH, { optional: true }) ?? [];
+    explicitInstanceId = inject(MN_INSTANCE_ID, { optional: true });
+    elRef = inject(ElementRef);
+    lang = inject(MnLanguageService);
+    destroyRef = inject(DestroyRef);
+    renderer = inject(Renderer2);
+    cdr = inject(ChangeDetectorRef);
+    /** Reference to the trigger element for positioning the popover. Read as an
+     *  `ElementRef` because `button[mnButton]` is a component — the default query would
+     *  otherwise return the MnButton instance, which has no `nativeElement`. */
+    triggerRef;
+    /** Layout classes for the anchored popover panel. The mobile sheet is rendered by
+     *  mn-bottom-sheet instead, so it needs no branch here. */
+    panelClasses = 'fixed z-9999 min-w-48 max-w-[min(20rem,90vw)] bg-base-100 border border-base-300 rounded-md shadow-lg py-1 max-h-[60vh] overflow-auto -translate-x-full';
+    /** Tailwind's `sm` breakpoint — below this the menu renders as a bottom sheet.
+     *  Kept in step with the same constant in mn-bottom-sheet / mn-multi-select. */
+    static SHEET_MAX_WIDTH = 639.98;
+    /** The anchored popover panel currently moved into `document.body`, if any. */
+    movedPanel = null;
+    /** The bottom-sheet host currently moved into `document.body`, if any. */
+    movedSheet = null;
+    /** Whether the viewport is currently narrow enough for the sheet layout. */
+    isNarrowViewport = false;
+    /** Live breakpoint match, so rotating the device re-evaluates the layout. */
+    sheetMedia = null;
+    /** The listener registered on `sheetMedia`, retained for teardown. */
+    sheetMediaListener = null;
+    /** `document.body`'s inline `overflow` before the sheet locked it, restored on close. */
+    previousBodyOverflow = null;
+    /** Watches the trigger while open, so the panel closes if the trigger is hidden. */
+    visibilityObserver = null;
+    /** Capture-phase scroll listener installed while open, closing on any ancestor scroll. */
+    scrollCapture = null;
+    isOpen = false;
+    /** Popover position computed from the trigger's bounding rect. */
+    dropdownStyle = { top: '0px', left: '0px' };
+    /**
+     * The popover panel, relocated to `document.body` on appearance (see mn-multi-select's
+     * portal rationale) and detached when the query clears on close/destroy.
+     */
+    set dropdownRef(ref) {
+        this.movedPanel = this.portal(ref?.nativeElement ?? null, this.movedPanel);
+    }
+    /**
+     * The bottom-sheet host, relocated to `document.body` so its `position: fixed`
+     * children anchor to the viewport rather than a transformed ancestor.
+     */
+    set sheetRef(ref) {
+        this.movedSheet = this.portal(ref?.nativeElement ?? null, this.movedSheet);
+    }
+    ngOnInit() {
+        this.resolveConfig();
+        this.startWatchingViewport();
+        const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
+            this.resolveConfig();
+            this.cdr.markForCheck();
+        });
+        this.destroyRef.onDestroy(() => {
+            sub.unsubscribe();
+            this.stopWatchingTrigger();
+            this.stopWatchingViewport();
+            this.unlockBodyScroll();
+            // Guarantee the portalled elements never outlive the component.
+            this.movedPanel = this.portal(null, this.movedPanel);
+            this.movedSheet = this.portal(null, this.movedSheet);
+        });
+    }
+    resolveConfig() {
+        const instanceId = this.explicitInstanceId || `mn-dropdown-${this.props.id}`;
+        this.uiConfig = this.configService.resolve('mn-dropdown', this.sectionPath, instanceId);
+    }
+    // ── Breakpoint watching ──
+    startWatchingViewport() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        this.sheetMedia = window.matchMedia(`(max-width: ${MnDropdown.SHEET_MAX_WIDTH}px)`);
+        this.isNarrowViewport = this.sheetMedia.matches;
+        this.sheetMediaListener = (event) => {
+            this.isNarrowViewport = event.matches;
+            this.close();
+            // The listener fires outside Angular, so a zoneless app needs an explicit nudge.
+            this.cdr.markForCheck();
+        };
+        this.sheetMedia.addEventListener('change', this.sheetMediaListener);
+    }
+    stopWatchingViewport() {
+        if (this.sheetMedia && this.sheetMediaListener) {
+            this.sheetMedia.removeEventListener('change', this.sheetMediaListener);
+        }
+        this.sheetMedia = null;
+        this.sheetMediaListener = null;
+    }
+    // ── Open / close ──
+    toggle() {
+        if (this.isOpen) {
+            this.close();
+            return;
+        }
+        if (this.props.actions.length === 0)
+            return;
+        this.isOpen = true;
+        if (this.isSheet) {
+            // A sheet is anchored to the viewport, so it needs no trigger tracking — only a
+            // scroll lock so the page behind it stays put.
+            this.lockBodyScroll();
+            return;
+        }
+        this.updateDropdownPosition();
+        this.startWatchingTrigger();
+    }
+    /** The single close path, so every open-only listener is torn down with the panel. */
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.stopWatchingTrigger();
+        this.unlockBodyScroll();
+    }
+    /** Whether the menu should currently render as a bottom sheet. */
+    get isSheet() {
+        return this.props.mobileSheet !== false && this.isNarrowViewport;
+    }
+    /** Fires an action and closes. Ignores disabled items defensively. */
+    select(action) {
+        if (action.disabled)
+            return;
+        this.close();
+        action.run();
+    }
+    // ── Positioning ──
+    updateDropdownPosition() {
+        if (!this.triggerRef)
+            return;
+        const rect = this.triggerRef.nativeElement.getBoundingClientRect();
+        // The panel is right-aligned to the trigger via a `-translate-x-full` class, so
+        // `left` is anchored to the trigger's right edge.
+        this.dropdownStyle = {
+            top: `${rect.bottom + 4}px`,
+            left: `${rect.right}px`,
+        };
+    }
+    startWatchingTrigger() {
+        this.stopWatchingTrigger();
+        const trigger = this.triggerRef?.nativeElement;
+        if (trigger && typeof IntersectionObserver !== 'undefined') {
+            this.visibilityObserver = new IntersectionObserver(entries => {
+                if (!entries.some(entry => !entry.isIntersecting))
+                    return;
+                this.close();
+                this.cdr.markForCheck();
+            });
+            this.visibilityObserver.observe(trigger);
+        }
+        this.scrollCapture = (event) => {
+            const target = event.target;
+            if (target && this.movedPanel && (this.movedPanel === target || this.movedPanel.contains(target))) {
+                return;
+            }
+            this.close();
+            this.cdr.markForCheck();
+        };
+        document.addEventListener('scroll', this.scrollCapture, true);
+    }
+    stopWatchingTrigger() {
+        this.visibilityObserver?.disconnect();
+        this.visibilityObserver = null;
+        if (this.scrollCapture) {
+            document.removeEventListener('scroll', this.scrollCapture, true);
+            this.scrollCapture = null;
+        }
+    }
+    // ── Global dismissal ──
+    onDocumentClick(event) {
+        const target = event.target;
+        const insideHost = !!target && this.elRef.nativeElement.contains(target);
+        const insidePanel = !!target && !!this.movedPanel && this.movedPanel.contains(target);
+        const insideSheet = !!target && !!this.movedSheet && this.movedSheet.contains(target);
+        if (!insideHost && !insidePanel && !insideSheet) {
+            this.close();
+        }
+    }
+    onEscape() {
+        if (!this.isOpen)
+            return;
+        this.close();
+        // Return focus to the trigger so keyboard users are not stranded.
+        this.triggerRef?.nativeElement.focus();
+    }
+    onWindowScrollOrResize() {
+        // A sheet is viewport-anchored, so it has no stale position to escape; closing it on
+        // the `resize` a soft keyboard fires would also be wrong. The matchMedia listener
+        // handles a genuine layout switch instead.
+        if (this.isSheet)
+            return;
+        this.close();
+    }
+    // ── Body scroll lock (sheet only) ──
+    lockBodyScroll() {
+        if (this.previousBodyOverflow !== null)
+            return;
+        this.previousBodyOverflow = document.body.style.overflow;
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+    }
+    unlockBodyScroll() {
+        if (this.previousBodyOverflow === null)
+            return;
+        if (this.previousBodyOverflow) {
+            this.renderer.setStyle(document.body, 'overflow', this.previousBodyOverflow);
+        }
+        else {
+            this.renderer.removeStyle(document.body, 'overflow');
+        }
+        this.previousBodyOverflow = null;
+    }
+    // ── Portal helper (see mn-multi-select for the full rationale) ──
+    portal(el, current) {
+        if (el) {
+            if (current === el)
+                return current;
+            this.renderer.appendChild(document.body, el);
+            return el;
+        }
+        if (current) {
+            const parent = current.parentNode;
+            if (parent) {
+                this.renderer.removeChild(parent, current);
+            }
+        }
+        return null;
+    }
+    // ── Resolved presentation ──
+    /** The label shown for an action, preferring a resolved translation key. */
+    actionLabel(action) {
+        const translated = action.labelKey ? this.lang.translateIfPresent(action.labelKey) : undefined;
+        return translated ?? action.label ?? '';
+    }
+    /** Accessible name for the ⋯ trigger button. */
+    get triggerAriaLabel() {
+        const translated = this.props.ariaLabelKey ? this.lang.translateIfPresent(this.props.ariaLabelKey) : undefined;
+        return translated ?? this.props.ariaLabel ?? this.uiConfig.ariaLabel ?? 'Actions';
+    }
+    /** Heading shown above the menu/sheet, or null when none is configured. */
+    get menuLabel() {
+        const translated = this.props.menuLabelKey ? this.lang.translateIfPresent(this.props.menuLabelKey) : undefined;
+        return translated ?? this.props.menuLabel ?? this.uiConfig.menuLabel ?? null;
+    }
+    /** Accessible label for the sheet's close button. */
+    get closeLabel() {
+        return this.uiConfig.closeLabel ?? 'Close';
+    }
+    get triggerClasses() {
+        return mnDropdownTriggerVariants({
+            size: this.props.size,
+            borderRadius: this.props.borderRadius,
+        });
+    }
+    get resolvedId() {
+        return this.props.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDropdown, isStandalone: true, selector: "mn-lib-dropdown", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <!-- Trigger -->\n  <button\n    #trigger\n    mnButton\n    type=\"button\"\n    [id]=\"resolvedId\"\n    [data]=\"{ size: 'sm', variant: 'text', color: 'gray' }\"\n    [ngClass]=\"triggerClasses\"\n    [attr.aria-label]=\"triggerAriaLabel\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-menu' : null\"\n    (click)=\"$event.stopPropagation(); toggle()\"\n  >\n    <svg lucideEllipsisVertical [size]=\"18\"></svg>\n  </button>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the menu is presented as the shared bottom sheet: chrome (backdrop,\n           grabber, swipe-to-dismiss, slide animation) lives in mn-bottom-sheet; this\n           component only projects the item list into it. The host is portalled to\n           document.body (see the `sheet` ViewChild). -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"menuLabel || triggerAriaLabel\"\n        [maxHeightVh]=\"80\"\n      >\n        <div [id]=\"resolvedId + '-menu'\" role=\"menu\" class=\"flex flex-col flex-1 min-h-0 overflow-hidden\">\n          <!-- The sheet covers its own trigger, so it needs a header and an explicit way out. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">{{ menuLabel || triggerAriaLabel }}</p>\n            <button\n              mnButton\n              type=\"button\"\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"closeLabel\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <div class=\"flex-1 overflow-auto overscroll-contain\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          </div>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-menu'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        role=\"menu\"\n      >\n        @if (menuLabel) {\n          <p class=\"px-3 pt-1 pb-1.5 text-xs font-medium text-base-content/50 truncate\">{{ menuLabel }}</p>\n        }\n        <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The item list, shared verbatim by the sheet and the anchored popover. `sheet`\n       only tunes the spacing so touch targets are roomier on mobile. -->\n  <ng-template #items let-sheet=\"sheet\">\n    @for (action of props.actions; track $index) {\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        [disabled]=\"action.disabled\"\n        [class.opacity-50]=\"action.disabled\"\n        [class.pointer-events-none]=\"action.disabled\"\n        [class.text-error]=\"action.danger\"\n        [class.text-base-content]=\"!action.danger\"\n        [ngClass]=\"sheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n        class=\"flex w-full items-center gap-x-2.5 text-left cursor-pointer hover:bg-base-200 focus-visible:bg-base-200 focus:outline-none transition-colors\"\n        (click)=\"select(action)\"\n      >\n        @if (action.icon) {\n          <span class=\"shrink-0 inline-flex items-center\">\n            <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n          </span>\n        }\n        <span class=\"truncate\">{{ actionLabel(action) }}</span>\n      </button>\n    }\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideEllipsisVertical, selector: "svg[lucideEllipsisVertical], svg[lucideMoreVertical]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-lib-dropdown', standalone: true, imports: [NgClass, NgTemplateOutlet, MnButton, MnBottomSheet, LucideEllipsisVertical, LucideX], template: "<div class=\"relative inline-flex\">\n  <!-- Trigger -->\n  <button\n    #trigger\n    mnButton\n    type=\"button\"\n    [id]=\"resolvedId\"\n    [data]=\"{ size: 'sm', variant: 'text', color: 'gray' }\"\n    [ngClass]=\"triggerClasses\"\n    [attr.aria-label]=\"triggerAriaLabel\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-menu' : null\"\n    (click)=\"$event.stopPropagation(); toggle()\"\n  >\n    <svg lucideEllipsisVertical [size]=\"18\"></svg>\n  </button>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the menu is presented as the shared bottom sheet: chrome (backdrop,\n           grabber, swipe-to-dismiss, slide animation) lives in mn-bottom-sheet; this\n           component only projects the item list into it. The host is portalled to\n           document.body (see the `sheet` ViewChild). -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"menuLabel || triggerAriaLabel\"\n        [maxHeightVh]=\"80\"\n      >\n        <div [id]=\"resolvedId + '-menu'\" role=\"menu\" class=\"flex flex-col flex-1 min-h-0 overflow-hidden\">\n          <!-- The sheet covers its own trigger, so it needs a header and an explicit way out. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">{{ menuLabel || triggerAriaLabel }}</p>\n            <button\n              mnButton\n              type=\"button\"\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"closeLabel\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <div class=\"flex-1 overflow-auto overscroll-contain\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          </div>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-menu'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        role=\"menu\"\n      >\n        @if (menuLabel) {\n          <p class=\"px-3 pt-1 pb-1.5 text-xs font-medium text-base-content/50 truncate\">{{ menuLabel }}</p>\n        }\n        <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The item list, shared verbatim by the sheet and the anchored popover. `sheet`\n       only tunes the spacing so touch targets are roomier on mobile. -->\n  <ng-template #items let-sheet=\"sheet\">\n    @for (action of props.actions; track $index) {\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        [disabled]=\"action.disabled\"\n        [class.opacity-50]=\"action.disabled\"\n        [class.pointer-events-none]=\"action.disabled\"\n        [class.text-error]=\"action.danger\"\n        [class.text-base-content]=\"!action.danger\"\n        [ngClass]=\"sheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n        class=\"flex w-full items-center gap-x-2.5 text-left cursor-pointer hover:bg-base-200 focus-visible:bg-base-200 focus:outline-none transition-colors\"\n        (click)=\"select(action)\"\n      >\n        @if (action.icon) {\n          <span class=\"shrink-0 inline-flex items-center\">\n            <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n          </span>\n        }\n        <span class=\"truncate\">{{ actionLabel(action) }}</span>\n      </button>\n    }\n  </ng-template>\n</div>\n" }]
+        }], propDecorators: { props: [{
+                type: Input,
+                args: [{ required: true }]
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger', { static: false, read: ElementRef }]
+            }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdown', { static: false }]
+            }], sheetRef: [{
+                type: ViewChild,
+                args: ['sheet', { static: false, read: ElementRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onWindowScrollOrResize: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }, {
+                type: HostListener,
+                args: ['window:resize', []]
+            }] } });
+
 const mnSelectVariants = tv({
     base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm cursor-pointer hover:bg-base-200 transition-colors duration-300',
     variants: {
@@ -7051,6 +7387,11 @@ class MnTable extends MnSelectableCollectionBase {
             if (col.filterPlaceholderKey) {
                 col.filterPlaceholder = this.lang.t(col.filterPlaceholderKey);
             }
+            for (const action of col.actions ?? []) {
+                if (action.labelKey) {
+                    action.label = this.lang.t(action.labelKey);
+                }
+            }
         }
         if (this.dataSource.filtersLabelKey) {
             this.dataSource.filtersLabel = this.lang.t(this.dataSource.filtersLabelKey);
@@ -7170,6 +7511,47 @@ class MnTable extends MnSelectableCollectionBase {
             return column.cellSm.cell(row);
         return '';
     }
+    // ── Row actions ──
+    /**
+     * Whether an actions column should offer the collapsing ⋯ variant: only when it has at
+     * least its threshold's worth of actions (default 3). Below that, the inline buttons
+     * stay put at every width — one or two fit on a phone. The width switch itself is a
+     * pure container query in the template; this only decides whether to render the ⋯ path
+     * at all.
+     */
+    shouldCollapseActions(column) {
+        const actions = column.actions;
+        if (!actions)
+            return false;
+        return actions.length >= (column.actionsCollapseThreshold ?? 3);
+    }
+    /** The resolved label for an inline action button (translation key wins once resolved). */
+    rowActionLabel(action) {
+        return action.label ?? (action.labelKey ? this.lang.t(action.labelKey) : '');
+    }
+    /** Whether an action is disabled for the given row. */
+    isRowActionDisabled(action, row) {
+        return action.disabled ? action.disabled(row) : false;
+    }
+    /** Invokes an action for a row. */
+    runRowAction(action, row) {
+        action.run(row);
+    }
+    /** A stable, unique element id for a row's actions dropdown (aria wiring). */
+    actionsDropdownId(column, row) {
+        return `mn-table-actions-${column.key}-${this.dataSource.getID(row)}`;
+    }
+    /** Maps a column's actions to mn-dropdown commands, binding the row into each. */
+    rowDropdownActions(column, row) {
+        return (column.actions ?? []).map(action => ({
+            label: action.label,
+            labelKey: action.labelKey,
+            icon: action.icon,
+            danger: action.danger,
+            disabled: this.isRowActionDisabled(action, row),
+            run: () => action.run(row),
+        }));
+    }
     trackByKey = (_index, column) => {
         return column.key;
     };
@@ -7342,11 +7724,11 @@ class MnTable extends MnSelectableCollectionBase {
         return template.replace('{{label}}', this.selectionLabelFor(row));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.actions) {\n                  <!-- Actions column: inline command buttons that collapse into a \u22EF menu\n                       once the table is narrower than 450px (container query), but only\n                       when there are enough of them to warrant it. -->\n                  <div class=\"inline-flex items-center gap-1\"\n                       [class.justify-end]=\"(column.align ?? 'left') === 'right'\">\n                    @if (shouldCollapseActions(column)) {\n                      <span class=\"hidden items-center gap-1 @min-[450px]:inline-flex\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n                      <span class=\"@min-[450px]:hidden\" (click)=\"$event.stopPropagation()\">\n                        <mn-lib-dropdown [props]=\"{\n                          id: actionsDropdownId(column, row),\n                          actions: rowDropdownActions(column, row),\n                          menuLabel: $any(column.header),\n                          size: 'sm'\n                        }\"></mn-lib-dropdown>\n                      </span>\n                    } @else {\n                      <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                    [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                    }\n                  </div>\n                } @else if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n\n<!-- Inline action buttons for an actions column, shared by the wide-table layout and\n     (implicitly) mirrored by the \u22EF menu below 450px. -->\n<ng-template #actionButtons let-column=\"column\" let-row=\"row\">\n  @for (action of column.actions; track $index) {\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ size: 'sm', variant: 'text', color: action.danger ? 'danger' : 'secondary' }\"\n      [disabled]=\"isRowActionDisabled(action, row)\"\n      class=\"cursor-pointer\"\n      (click)=\"$event.stopPropagation(); runRowAction(action, row)\"\n      [attr.aria-label]=\"rowActionLabel(action)\"\n    >\n      @if (action.icon) {\n        <span class=\"inline-flex items-center shrink-0\">\n          <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n        </span>\n      }\n      <span>{{ rowActionLabel(action) }}</span>\n    </button>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnDropdown, selector: "mn-lib-dropdown", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnDropdown, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.actions) {\n                  <!-- Actions column: inline command buttons that collapse into a \u22EF menu\n                       once the table is narrower than 450px (container query), but only\n                       when there are enough of them to warrant it. -->\n                  <div class=\"inline-flex items-center gap-1\"\n                       [class.justify-end]=\"(column.align ?? 'left') === 'right'\">\n                    @if (shouldCollapseActions(column)) {\n                      <span class=\"hidden items-center gap-1 @min-[450px]:inline-flex\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n                      <span class=\"@min-[450px]:hidden\" (click)=\"$event.stopPropagation()\">\n                        <mn-lib-dropdown [props]=\"{\n                          id: actionsDropdownId(column, row),\n                          actions: rowDropdownActions(column, row),\n                          menuLabel: $any(column.header),\n                          size: 'sm'\n                        }\"></mn-lib-dropdown>\n                      </span>\n                    } @else {\n                      <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                    [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                    }\n                  </div>\n                } @else if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n\n<!-- Inline action buttons for an actions column, shared by the wide-table layout and\n     (implicitly) mirrored by the \u22EF menu below 450px. -->\n<ng-template #actionButtons let-column=\"column\" let-row=\"row\">\n  @for (action of column.actions; track $index) {\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ size: 'sm', variant: 'text', color: action.danger ? 'danger' : 'secondary' }\"\n      [disabled]=\"isRowActionDisabled(action, row)\"\n      class=\"cursor-pointer\"\n      (click)=\"$event.stopPropagation(); runRowAction(action, row)\"\n      [attr.aria-label]=\"rowActionLabel(action)\"\n    >\n      @if (action.icon) {\n        <span class=\"inline-flex items-center shrink-0\">\n          <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n        </span>\n      }\n      <span>{{ rowActionLabel(action) }}</span>\n    </button>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { sortChange: [{
                 type: Output
             }], rowClick: [{
@@ -12169,5 +12551,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnBottomSheet, MnBreadcrumbs, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnBreadcrumbsVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_DROPDOWN_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnBottomSheet, MnBreadcrumbs, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDropdown, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnBreadcrumbsVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnDropdownTriggerVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
 //# sourceMappingURL=mn-angular-lib.mjs.map