monkey-style-guide 21.2.7 → 21.2.9

package/types/monkey-style-guide.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, ComponentRef, InputSignal, OutputEmitterRef, AfterContentInit, AfterContentChecked, OnDestroy, ElementRef, EventEmitter, ChangeDetectorRef, OnChanges, OnInit, InputSignalWithTransform, AfterViewInit, SimpleChanges, Renderer2, QueryList, StaticProvider, Injector, InjectionToken, ViewContainerRef, ApplicationRef } from '@angular/core';
+import { TemplateRef, EventEmitter, ElementRef, ComponentRef, InputSignal, OutputEmitterRef, AfterContentInit, AfterContentChecked, OnDestroy, ChangeDetectorRef, OnChanges, OnInit, InputSignalWithTransform, AfterViewInit, SimpleChanges, Renderer2, QueryList, StaticProvider, Injector, InjectionToken, ViewContainerRef, ApplicationRef } from '@angular/core';
 import { NgControl, AbstractControlDirective, ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as rxjs from 'rxjs';
 import { Observable, Subject, BehaviorSubject } from 'rxjs';
@@ -10,6 +10,7 @@ import { CurrencyPipe } from '@angular/common';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { OverlayRef, Overlay } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
+import { VirtualScrollStrategy, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 declare class MonkeyAccordionComponent {
     open: boolean;
@@ -129,6 +130,35 @@ interface MonkeyTableScrollConfig {
     y?: string;
 }
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+declare class MonkeyToastComponent {
+    private host;
+    message: string | undefined;
+    icon: string | undefined;
+    type: MonkeyToastType;
+    isClosable: boolean;
+    actionLabel: string | undefined;
+    actionIcon: string | undefined;
+    onActionClick: EventEmitter<string>;
+    onClose: EventEmitter<string>;
+    protected _uid: string;
+    protected _id: string;
+    get id(): string;
+    set id(value: string);
+    get class(): string;
+    constructor(host: ElementRef<HTMLElement>);
+    close(): void;
+    onAnimationEnd(event: AnimationEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyToastComponent, "monkey-toast", never, { "message": { "alias": "message"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "type": { "alias": "type"; "required": false; }; "isClosable": { "alias": "isClosable"; "required": false; }; "actionLabel": { "alias": "actionLabel"; "required": false; }; "actionIcon": { "alias": "actionIcon"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "onActionClick": "onActionClick"; "onClose": "onClose"; }, never, never, true, never>;
+    static ngAcceptInputType_isClosable: unknown;
+}
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -884,6 +914,469 @@ declare class MonkeyFilterBarService {
     static ɵprov: i0.ɵɵInjectableDeclaration<MonkeyFilterBarService>;
 }
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+/**
+ * Has the page painted its first frame?
+ *
+ * Use it to decide whether an `animate.enter` should apply:
+ *
+ *   [animate.enter]="appPainted() ? 'mecx-x--entering' : ''"
+ *
+ * A component already on screen at the first paint comes in without animation;
+ * one the consumer mounts later animates normally.
+ */
+declare function appPainted(): boolean;
+
+/** Which panel of which chip is open. Only one is ever open at a time. */
+interface OpenPanel {
+    readonly key: string;
+    readonly part: 'category' | 'value';
+}
+/** One slot of the row: an active filter, or the one being built. */
+interface MonkeyFilterBarV2Row {
+    readonly key: string;
+    readonly label: string;
+    readonly icon?: string;
+    readonly type: FilterType;
+    /** What the value segment shows. Empty while the answer is pending. */
+    readonly value: string;
+    /** True while the filter is being built and is not in the service yet. */
+    readonly pending: boolean;
+}
+declare class MonkeyFilterBarV2Component {
+    private readonly _service;
+    private readonly _hostEl;
+    private readonly _injector;
+    /** Storage key of this bar's state inside MonkeyFilterBarService. */
+    readonly key: i0.InputSignal<string>;
+    readonly config: i0.InputSignal<FilterBarConfig | undefined>;
+    /** Label of the trigger while the bar is still empty. */
+    readonly addFilterLabel: i0.InputSignal<string>;
+    readonly clearAllLabel: i0.InputSignal<string>;
+    readonly filtersChange: i0.OutputEmitterRef<{
+        search?: string;
+        filters: ActiveFilter[];
+    }>;
+    readonly searchChange: i0.OutputEmitterRef<string>;
+    /** A chip seeded by the consumer does not animate; one the user made does. */
+    readonly appPainted: typeof appPainted;
+    /**
+     * The filter being built — chosen from the trigger, not yet confirmed, so
+     * not yet in the service.
+     *
+     * It exists so the chip can be BORN where the trigger was, which is the
+     * whole point of the row's animation, without the bar reporting a filter
+     * that has no answer. Closing the panel without confirming drops it again:
+     * monkey-filter-bar has no half-filled state and neither does this one.
+     */
+    protected readonly pending: i0.WritableSignal<FilterOption | null>;
+    protected readonly openPanel: i0.WritableSignal<OpenPanel | null>;
+    protected readonly triggerOpen: i0.WritableSignal<boolean>;
+    /**
+     * The filter whose date panel is showing the CALENDAR instead of the
+     * shortcuts, or `null`.
+     *
+     * It is the same panel, anchored to the same segment — "Personalizado" only
+     * swaps its content. No modal: the dialog would be almost all frame around a
+     * calendar, and frame is not an answer to anything.
+     */
+    protected readonly calendarOpen: i0.WritableSignal<string | null>;
+    /** Search of the category panel. */
+    protected readonly categorySearch: i0.WritableSignal<string>;
+    /**
+     * Turns off the fade on the trigger's panel. It is written BEFORE the
+     * mutation on purpose: `animate.leave` is read the instant the node leaves,
+     * and turning it on afterwards would arrive too late.
+     */
+    protected readonly immediateTriggerExit: i0.WritableSignal<boolean>;
+    protected textValue: string;
+    protected currencyValue: number | null;
+    protected currencyMode: 'from' | 'until';
+    protected statusValues: string[];
+    protected dateRange: {
+        startDate: string;
+        endDate: string;
+    };
+    protected readonly serviceConfig: i0.Signal<FilterBarConfig | undefined>;
+    protected readonly activeFilters: i0.Signal<ActiveFilter[]>;
+    protected readonly searchValue: i0.Signal<string>;
+    protected readonly searchPlaceholder: i0.Signal<string>;
+    /** The slots of the row, in order: the confirmed ones, then the draft. */
+    protected readonly rows: i0.Signal<MonkeyFilterBarV2Row[]>;
+    /**
+     * What the TRIGGER offers: only what can still be added.
+     *
+     * This is monkey-filter-bar's rule — a filter already on the row is not on
+     * offer, because the bar holds one filter per key.
+     */
+    protected readonly addOptions: i0.Signal<FilterOption[]>;
+    /**
+     * What a chip's CATEGORY segment offers: the whole list.
+     *
+     * A different list from the trigger's on purpose. Here the question is "what
+     * else could this chip be", so the current category has to be visible — it
+     * is the one carrying the check — and the other filters already on the row
+     * are shown greyed out rather than hidden, which is what tells the user the
+     * category they were looking for is already in use.
+     */
+    protected readonly changeOptions: i0.Signal<FilterOption[]>;
+    /**
+     * While the bar is empty the trigger is the CALL and earns the label. With
+     * filters on screen a 28px square is enough.
+     */
+    protected readonly triggerVariant: i0.Signal<"text" | "icon">;
+    /**
+     * The glyph of the collapsed trigger is a `+`, not the funnel.
+     *
+     * The variant says what the button IS; the glyph says what it DOES. With
+     * filters already on screen the button does not open "the filters", it ADDS
+     * one more — and a funnel there reads as the wrong thing. With the bar empty
+     * the funnel is exact.
+     */
+    protected readonly triggerIcon: i0.Signal<"filter" | "add-plus">;
+    /**
+     * The FLIP identity changes along with the variant, and that is the fix: the
+     * text trigger is REMOVED and the icon one is BORN in its place, instead of
+     * one button sliding to the right. Before this, the button dragged along the
+     * panel that was closing — the list vanished travelling sideways.
+     *
+     * From the second filter on the identity holds, and then the `+` really does
+     * slide: that movement is what says "the row grew".
+     */
+    protected readonly triggerFlipId: i0.Signal<"trigger-text" | "trigger-icon">;
+    constructor();
+    protected isOpen(rowKey: string, part: OpenPanel['part']): boolean;
+    protected isFilterActive(optionKey: string): boolean;
+    /** A divider goes where the type changes relative to the row above. */
+    protected needsDivider(options: readonly FilterOption[], index: number): boolean;
+    protected valuePlaceholder(row: MonkeyFilterBarV2Row): string;
+    protected statusOptionsOf(row: MonkeyFilterBarV2Row): monkey_style_guide.StatusOption[];
+    protected minDateOf(row: MonkeyFilterBarV2Row): Date | string;
+    protected maxDateOf(row: MonkeyFilterBarV2Row): Date | string;
+    /**
+     * `index` is the position in the list the template walked — the one the
+     * search filtered. Indexing the full list would pick the wrong option.
+     */
+    protected onSelectCategory(index: number): void;
+    /**
+     * Swaps the category of a chip that already exists, from its first segment.
+     *
+     * The answer always falls: it belongs to the old category's domain — a list
+     * of statuses means nothing inside a date range — so the chip goes back to
+     * waiting, with its value panel open.
+     */
+    protected onChangeCategory(row: MonkeyFilterBarV2Row, index: number): void;
+    /**
+     * Opening the trigger closes whatever chip panel was open: only one panel is
+     * ever on screen, and a draft chip whose panel was abandoned goes with it.
+     */
+    protected onTriggerOpenChange(open: boolean): void;
+    protected onCategoryOpenChange(row: MonkeyFilterBarV2Row, open: boolean): void;
+    protected onValueOpenChange(row: MonkeyFilterBarV2Row, open: boolean): void;
+    /**
+     * The same shortcuts monkey-filter-bar offers. "Personalizado" is the only
+     * one that does not resolve the interval on its own: it swaps the panel's
+     * content for the calendar, in the same place.
+     */
+    protected onQuickDate(row: MonkeyFilterBarV2Row, preset: string): void;
+    protected onDateChange(row: MonkeyFilterBarV2Row, event: {
+        startDate: string;
+        endDate: string;
+    }): void;
+    /** Cancel inside the calendar goes back to the shortcuts, panel still open. */
+    protected onBackToShortcuts(): void;
+    protected onStatusChange(value: string, checked: boolean): void;
+    protected onToggleStatus(value: string): void;
+    /**
+     * The one place where an answer is written. Same validation as
+     * monkey-filter-bar: an empty answer is not an answer, and the panel stays
+     * open instead of writing a filter with nothing in it.
+     */
+    protected onApply(row: MonkeyFilterBarV2Row): void;
+    protected onRemove(row: MonkeyFilterBarV2Row): void;
+    /** Zeroes the whole bar. The trigger goes back to being the call with a label. */
+    protected onClearAll(): void;
+    protected onSearchChange(value: string): void;
+    /**
+     * Opens a chip's answer panel, pre-filled with the answer it already holds —
+     * this is the edit path the active-filter tag used to be.
+     */
+    private _openValuePanel;
+    /**
+     * Closing the value panel of a chip that was never confirmed drops the chip:
+     * monkey-filter-bar adds nothing until Apply, and a chip left on the row
+     * with no answer would be a state it does not have.
+     *
+     * Closing the panel of a CONFIRMED chip changes no width — the segment shows
+     * the same text it did before — so that path needs no FLIP.
+     */
+    private _closePanel;
+    /** Takes the draft chip off the row, ghost and all. */
+    private _dropPending;
+    private _optionFor;
+    private _matchingSearch;
+    private _resetDraft;
+    private _emit;
+    /**
+     * Takes the slots that are about to leave out of the flow, at the exact
+     * place where they are.
+     *
+     * This is done HERE and not by the `animate.leave` class because of ORDER:
+     * Angular only applies the exit class the instant it removes the node, and
+     * that happens AFTER the `afterNextRender` that runs the FLIP. The FLIP
+     * would then measure a layout that had not collapsed yet, see no
+     * displacement at all, and the neighbours would snap into their new place
+     * with no animation — the chip's exit worked and the neighbours' arrival did
+     * not.
+     *
+     * Released from the flow BEFORE the mutation, the row collapses in the same
+     * pass: the FLIP measures a real before and a real after, and the ghost
+     * fades out on top, in place. Explicit `left`/`top` are mandatory — the
+     * static position of an absolute element inside a flex container is the
+     * container's corner, not where the element was.
+     */
+    private _releaseFromFlow;
+    /**
+     * Takes the row to the end of its travel, so that what has just come in is
+     * not left hidden — and with it the trigger, which is always last in line.
+     *
+     * It runs BEFORE the "after" measurement on purpose. FLIP works in VIEWPORT
+     * coordinates, so scrolling first folds the scroll offset into the same sum:
+     * every piece slides from where the eye saw it to where it ended up, pan
+     * included. One single synchronised movement.
+     *
+     * It is also what makes `scroll-behavior: smooth` unnecessary, which has no
+     * token, guarantees nothing under reduced motion, and stalls in a throttled
+     * tab.
+     *
+     * The sum comes from the LAST SLOT, never from `scrollWidth`. `scrollWidth`
+     * at this instant is a poisoned measurement: the chip that has just been
+     * born brings its answer panel already open, and the panel has not been
+     * anchored yet — it is at its static position, far ahead, and counts as
+     * overflow. The scroll would go hundreds of pixels chasing a ghost, the FLIP
+     * would animate the whole row that distance, and the browser would clamp the
+     * scroll back when the panel got anchored — a hard jump with no animation,
+     * right in the middle of the chip's entrance.
+     *
+     * The slots do not have that problem: they are flow content, already at
+     * their final position on the first render, and none of them is `fixed`.
+     */
+    private _followEnd;
+    /**
+     * Measures, lets the state change, then makes everything slide from its old
+     * position.
+     *
+     * `afterNextRender` and not a `setTimeout`: we need the first instant at
+     * which the DOM ALREADY reflects the new state, and that is exactly what it
+     * delivers.
+     */
+    private _withFlip;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterBarV2Component, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterBarV2Component, "monkey-filter-bar-v2", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "addFilterLabel": { "alias": "addFilterLabel"; "required": false; "isSignal": true; }; "clearAllLabel": { "alias": "clearAllLabel"; "required": false; "isSignal": true; }; }, { "filtersChange": "filtersChange"; "searchChange": "searchChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * The segmented row that replaces the trigger once the user has picked a
+ * filter. Two segments and a bin:
+ *
+ *   [ icon  Data de Emissão | 01/01/2025 - 31/01/2025 | 🗑 ]
+ *     category               value                      action
+ *
+ * How many segments there are is the consumer's decision — the value segment
+ * is projected as soon as there is something to answer:
+ *
+ *   <monkey-filter-chip (remove)="drop()">
+ *     <monkey-filter-segment icon="calendar-box" text="Data" readonlySegment />
+ *     <monkey-filter-segment placeholder="Selecione" [(open)]="open" />
+ *   </monkey-filter-chip>
+ *
+ * The chip carries NO `overflow: hidden`. It would clip the panels the
+ * segments open right below themselves; the ends are rounded by radius, not by
+ * clipping.
+ */
+declare class MonkeyFilterChipComponent {
+    /** Icon font name of the remove action, without the `mk-i-` prefix. */
+    readonly removeIcon: i0.InputSignal<string>;
+    readonly removeLabel: i0.InputSignal<string>;
+    readonly remove: i0.OutputEmitterRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterChipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterChipComponent, "monkey-filter-chip", never, { "removeIcon": { "alias": "removeIcon"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, ["*"], true, never>;
+}
+
+/**
+ * The panel every dropdown of monkey-filter-bar-v2 opens: a surface with an
+ * optional search field on top and the projected rows below it.
+ *
+ * Only the WIDTH changes from one panel to the next, and it is set from the
+ * bar's own stylesheet through a class on this host — the panel component has
+ * no opinion on how wide a company list should be.
+ *
+ * `width` and not `min-width` on those classes: each panel is a fixed-width
+ * frame in the design and a long label ellipsizes inside it. With a floor the
+ * content would win, and the measurement would turn into a suggestion.
+ */
+declare class MonkeyFilterMenuComponent implements OnDestroy {
+    readonly showSearch: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly searchPlaceholder: i0.InputSignal<string>;
+    /** Lets the row list scroll instead of growing past the viewport. */
+    readonly showScroll: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Ceiling of the scrolling list, in px. */
+    readonly maxHeight: i0.InputSignal<number>;
+    readonly searchChange: i0.OutputEmitterRef<string>;
+    protected searchValue: string;
+    private readonly _zone;
+    private readonly _items;
+    /** Is the list actually overflowing right now? */
+    private readonly _overflowing;
+    /**
+     * Draw the track only when the content OVERFLOWS.
+     *
+     * Tied to `showScroll` alone, a three-row panel lost 12px of width to a
+     * track that was never going to appear.
+     */
+    protected readonly scrolling: i0.Signal<boolean>;
+    private _observer?;
+    constructor();
+    ngOnDestroy(): void;
+    protected onSearchInput(value: string): void;
+    private _disconnect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterMenuComponent, "monkey-filter-menu", never, { "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "showScroll": { "alias": "showScroll"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "searchChange": "searchChange"; }, never, ["*"], true, never>;
+}
+
+/** `text` is a plain row; `checkbox` puts a box in front of the label. */
+type MonkeyFilterMenuItemProperty = 'text' | 'checkbox';
+/**
+ * One row of a monkey-filter-menu.
+ *
+ * The ROW is the click target, which is why the checkbox inside it does not
+ * grow one of its own: the boxes sit 18px apart inside rows of 32px that touch
+ * each other, so a 40px floor on each would make two targets OVERLAP by 8px —
+ * inside rows that are already clickable end to end.
+ */
+declare class MonkeyFilterMenuItemComponent {
+    readonly property: i0.InputSignal<MonkeyFilterMenuItemProperty>;
+    /** Icon font name, without the `mk-i-` prefix. */
+    readonly leadIcon: i0.InputSignal<string | null>;
+    readonly label: i0.InputSignal<string>;
+    /** Secondary line under the label — a document number, a key. */
+    readonly description: i0.InputSignal<string | null>;
+    readonly checked: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Already answered elsewhere: the row shows a check and stops responding. */
+    readonly selected: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly itemClick: i0.OutputEmitterRef<void>;
+    protected onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterMenuItemComponent, "monkey-filter-menu-item", never, { "property": { "alias": "property"; "required": false; "isSignal": true; }; "leadIcon": { "alias": "leadIcon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+/**
+ * One segment of a monkey-filter-chip.
+ *
+ * ONE component for the two roles the chip has — the category name and the
+ * answer. Both share the same state table, the same padding, the same
+ * typography and the same height; what changes between them is the content
+ * (the first has an icon) and the rounding of the ends, which belongs to the
+ * chip and not to the segment. Two components would be two copies of the same
+ * stylesheet waiting to drift apart.
+ *
+ * `filled` is not an input: it is `text() !== ''`. Letting the consumer
+ * declare "filled" with an empty text would be a state impossible to draw.
+ *
+ * The projected panel is `position: fixed` and anchored by script — see
+ * `anchored-menu.ts` for why an `absolute` one cannot survive inside a row
+ * that scrolls.
+ */
+declare class MonkeyFilterSegmentComponent {
+    /** Category icon — usually only the chip's first segment has one. */
+    readonly icon: i0.InputSignal<string | null>;
+    /** The chosen value. Empty means the segment is still waiting. */
+    readonly text: i0.InputSignal<string>;
+    /** Waiting text, in the complement colour. */
+    readonly placeholder: i0.InputSignal<string>;
+    /** A segment with no panel to open. */
+    readonly readonlySegment: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly open: i0.ModelSignal<boolean>;
+    readonly segmentClick: i0.OutputEmitterRef<void>;
+    readonly filled: i0.Signal<boolean>;
+    /** What is shown: the value when there is one, the waiting text when not. */
+    readonly label: i0.Signal<string>;
+    private readonly _hostEl;
+    private readonly _menuEl;
+    constructor();
+    toggle(): void;
+    /**
+     * A click outside closes. Without it the panel would only close by clicking
+     * the segment again — behaviour no system menu has, and which left two
+     * panels open at once on a row with several chips.
+     */
+    onDocumentPointerdown(event: PointerEvent): void;
+    /**
+     * Escape closes and hands the focus back to the segment's button. Without
+     * the hand-back the focus falls to `<body>` and Tab restarts from the top of
+     * the page: whoever opened the panel from the keyboard loses their place in
+     * the middle of the row.
+     */
+    onEscape(): void;
+    /** Closes and returns the focus. Public for whoever needs to close from outside. */
+    closeAndFocus(): void;
+    private focusButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterSegmentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterSegmentComponent, "monkey-filter-segment", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonlySegment": { "alias": "readonlySegment"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "segmentClick": "segmentClick"; }, never, ["*"], true, never>;
+}
+
+/** `text` is the 28px button with a label; `icon` is the 28px square. */
+type MonkeyFilterTriggerVariant = 'text' | 'icon';
+/**
+ * The button that adds a filter, and the panel of categories it opens.
+ *
+ * It is always the LAST slot of the row. While the bar is empty the trigger is
+ * the CALL to action and earns its label; with filters on screen it becomes
+ * the ADDITION, and a 28px square is enough.
+ *
+ * Both are 28px tall — the same as a chip segment — because the button turns
+ * into a chip in place, and 1px of difference would show up as a jump at the
+ * moment of the swap.
+ */
+declare class MonkeyFilterTriggerComponent {
+    readonly variant: i0.InputSignal<MonkeyFilterTriggerVariant>;
+    /** Icon font name, without the `mk-i-` prefix. */
+    readonly icon: i0.InputSignal<string>;
+    readonly text: i0.InputSignal<string>;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The panel leaves with no exit animation.
+     *
+     * It exists for ONE case: when the closing goes along with the trigger
+     * itself changing place. The panel is a child of the button, so it travels
+     * with it — and a fade on an element that has just teleported 160px does not
+     * read as an exit, it reads as a glitch. Closing by Escape or by an outside
+     * click is not that case and keeps its fade.
+     */
+    readonly immediateExit: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly open: i0.ModelSignal<boolean>;
+    /**
+     * `aria-label` only on the variant with no visible label. Where there is a
+     * label, an `aria-label` over it would swap the name the user reads for one
+     * they cannot see — breaking voice control and the "Label in Name" criterion.
+     */
+    readonly ariaLabelAttr: i0.Signal<string | null>;
+    private readonly _hostEl;
+    private readonly _menuEl;
+    constructor();
+    toggle(): void;
+    onDocumentPointerdown(event: PointerEvent): void;
+    onEscape(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterTriggerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterTriggerComponent, "monkey-filter-trigger", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "immediateExit": { "alias": "immediateExit"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+}
+
 declare class MonkeyIconButtonComponent {
     type: 'primary' | 'secondary' | 'tertiary';
     size: 'sm' | 'md' | 'lg';
@@ -1517,6 +2010,83 @@ declare class MonkeyRadioButtonComponent implements MonkeyFormFieldControl, Cont
     static ngAcceptInputType_required: unknown;
 }
 
+type MonkeyScrollbarOrientation = 'horizontal' | 'vertical';
+/** `small` = 8px track (menus) · `medium` = 16px (page bar, what the table uses). */
+type MonkeyScrollbarSize = 'small' | 'medium';
+/**
+ * A DRAWN scrollbar, not the native one styled — a native scrollbar can't
+ * live outside the element that scrolls (e.g. below a table's rows, next to
+ * its footer), and cross-browser track styling (radius, border) is
+ * inconsistent enough that matching a design exactly isn't reliable with
+ * `::-webkit-scrollbar`/`scrollbar-color` alone.
+ *
+ * It does NOT replace real scrolling: `target` keeps its own
+ * `overflow: auto`, so keyboard, wheel and trackpad scrolling all keep
+ * working — this is a draggable mirror drawn on top. That's also why it's
+ * `aria-hidden`: a screen reader user scrolls the real region, and a second
+ * widget announcing the same position would only add noise.
+ */
+declare class MonkeyScrollbarComponent implements OnDestroy {
+    private readonly _zone;
+    readonly orientation: i0.InputSignal<MonkeyScrollbarOrientation>;
+    readonly size: i0.InputSignal<MonkeyScrollbarSize>;
+    /** The element that actually scrolls. */
+    readonly target: i0.InputSignal<HTMLElement>;
+    private readonly trackEl;
+    /** Scrollable length of the content, in px. */
+    private readonly total;
+    /** Visible length of the viewport, in px. */
+    private readonly visible;
+    /** How far the target is scrolled, in px. */
+    private readonly scrolled;
+    /** Length of the track the thumb slides along, in px. */
+    private readonly trackLength;
+    protected readonly scrollable: i0.Signal<boolean>;
+    protected readonly thumbSize: i0.Signal<string>;
+    /**
+     * A px distance, applied as a `translate`, not as `left`/`top`: moving the
+     * thumb then costs a composited transform instead of a layout pass on every
+     * scroll frame. It has to be px rather than a percentage of the thumb
+     * because the thumb has a minimum length — once that kicks in, a
+     * percentage of its own (clamped) size no longer maps to track distance.
+     */
+    protected readonly thumbOffset: i0.Signal<string>;
+    private resizeObserver?;
+    private observedTarget?;
+    /** Pending animation frame, 0 when none is queued. */
+    private frame;
+    /** Whether the cached lengths need re-reading on the next frame. */
+    private sizeStale;
+    private readonly onScroll;
+    /** Drag state. `null` = nobody is dragging. */
+    private drag;
+    constructor();
+    ngOnDestroy(): void;
+    private attach;
+    private detach;
+    /**
+     * Scroll events fire far more often than the screen refreshes, and each
+     * measurement reads layout. Coalescing to one read per frame is what keeps
+     * a long table from thrashing layout while it scrolls.
+     */
+    private schedule;
+    private measure;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    /** Clicking the track outside the thumb jumps the content there, centered on the click. */
+    protected onTrackPointerDown(event: PointerEvent): void;
+    /**
+     * Manual re-measure. Public on purpose: the automatic triggers (scroll,
+     * ResizeObserver on the target and its children) cover what the browser
+     * reports on its own — this is the escape hatch for what it doesn't, e.g.
+     * a target swapped out from under the component.
+     */
+    remeasure(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyScrollbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyScrollbarComponent, "monkey-scrollbar", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class MonkeySecurityLevelComponent {
     label: i0.InputSignal<string | undefined>;
     score: i0.InputSignal<number>;
@@ -1727,84 +2297,98 @@ declare class MonkeyPaginationSizeComponent {
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-
-declare class MonkeyTableComponent implements AfterContentInit, OnChanges {
-    scroll: MonkeyTableScrollConfig;
-    loading: boolean;
-    loadingRef: TemplateRef<any>;
-    sortChange: EventEmitter<any>;
-    private _headerEl;
-    private _tableHeaderEl;
-    private _tableContentEl;
-    private _tableLoadingEl;
-    private _tableScrollEl;
-    private _paginationActionChildren;
-    private _paginationSizeChildren;
-    private _sortOptions;
-    private _loadingInitialized;
-    stateChanges: EventEmitter<any>;
-    private updateScrollStyle;
-    private initializeComponents;
-    private initializeLoadingComponent;
-    ngAfterContentInit(): void;
-    updateSortableOptions(name: string, sortable: string): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyTableComponent, "monkey-table, table[monkey-table]", ["monkeyTable"], { "scroll": { "alias": "scroll"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingRef": { "alias": "loadingRef"; "required": false; }; }, { "sortChange": "sortChange"; }, ["_paginationActionChildren", "_paginationSizeChildren"], ["thead", "tbody", "monkey-pagination-size", "monkey-pagination-label", "monkey-pagination-action"], false, never>;
+type SortDirection = 'ascending' | 'descending';
+interface SortState {
+    column: string;
+    direction: SortDirection;
+}
+type SelectionState = 'none' | 'partial' | 'all';
+type ColumnAlign = 'start' | 'end';
+type ColumnPinned = 'none' | 'left' | 'right';
+interface MonkeyTableColumnState {
+    name: string;
+    hidden: boolean;
+    pinned: ColumnPinned;
+}
+declare function sameColumnState(a: readonly MonkeyTableColumnState[], b: readonly MonkeyTableColumnState[]): boolean;
+declare function ariaSortOf(sort: SortState | null, column: string): SortDirection | null;
+declare function interpolate(template: string, values: Record<string, string | number>): string;
+declare function toggleKey(current: ReadonlySet<string>, key: string): ReadonlySet<string>;
+declare function selectionState(current: ReadonlySet<string>, keys: readonly string[]): SelectionState;
+declare function addKeys(current: ReadonlySet<string>, keys: readonly string[], limit?: number): ReadonlySet<string>;
+declare function removeKeys(current: ReadonlySet<string>, keys: readonly string[]): ReadonlySet<string>;
+declare function sortByOrder<T>(items: readonly T[], nameOf: (item: T) => string, order: readonly string[]): T[];
+declare function mergeOrder(previous: readonly string[], next: readonly string[]): string[];
+interface RowMetrics {
+    count: number;
+    rowHeight: number;
+    detailHeight: number;
+    openIndices: readonly number[];
+}
+declare function totalHeight(metrics: RowMetrics): number;
+declare function offsetOfIndex(index: number, metrics: RowMetrics): number;
+declare function indexAtOffset(offset: number, metrics: RowMetrics): number;
+declare function toPx(width: string | null | undefined): number;
+
+interface MonkeyTableCellContext<T> {
+    $implicit: T;
+    row: T;
+    index: number;
+    first: boolean;
+    last: boolean;
 }
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-
-declare class MonkeyColumnChecked implements OnInit, AfterViewInit, OnChanges, OnDestroy {
-    private el;
-    private renderer;
-    private viewContainerRef;
-    table: MonkeyTableComponent;
-    checked: boolean;
-    disabled: boolean;
-    checkedChange: EventEmitter<any>;
-    private _cdr;
-    private _injector;
-    private _subscriptions;
-    checkboxRef: ComponentRef<MonkeyCheckboxComponent>;
-    constructor(el: ElementRef, renderer: Renderer2, viewContainerRef: ViewContainerRef, table: MonkeyTableComponent);
-    private renderCheckbox;
-    private handleDisableFromStateChanges;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    initializeComponent(checked: boolean, disabled: boolean): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyColumnChecked, [null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyColumnChecked, "[mkChecked]", never, { "checked": { "alias": "mkChecked"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, false, never>;
+type MonkeyTableSortKind = 'text' | 'number' | 'date';
+declare class MonkeyTableCellDirective<T> {
+    readonly template: TemplateRef<MonkeyTableCellContext<T>>;
+    static ngTemplateContextGuard<T>(_dir: MonkeyTableCellDirective<T>, _ctx: unknown): _ctx is MonkeyTableCellContext<T>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableCellDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyTableCellDirective<any>, "ng-template[mkCell]", never, {}, {}, never, never, true, never>;
+}
+declare class MonkeyTableHeaderCellDirective {
+    readonly template: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableHeaderCellDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyTableHeaderCellDirective, "ng-template[mkHeaderCell]", never, {}, {}, never, never, true, never>;
+}
+declare class MonkeyTableColumnDirective<T = any> {
+    readonly name: i0.InputSignal<string>;
+    readonly label: i0.InputSignal<string>;
+    readonly labelHidden: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly unit: i0.InputSignal<string>;
+    readonly width: i0.InputSignal<string>;
+    readonly align: i0.InputSignal<ColumnAlign>;
+    readonly sortable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly sortKind: i0.InputSignal<MonkeyTableSortKind>;
+    readonly hideable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly movable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly pinnable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly pinned: i0.ModelSignal<ColumnPinned>;
+    readonly hidden: i0.ModelSignal<boolean>;
+    readonly cell: i0.Signal<MonkeyTableCellDirective<any> | undefined>;
+    readonly headerCell: i0.Signal<MonkeyTableHeaderCellDirective | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableColumnDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyTableColumnDirective<any>, "ng-container[mkColumn]", never, { "name": { "alias": "mkColumn"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "sortKind": { "alias": "sortKind"; "required": false; "isSignal": true; }; "hideable": { "alias": "hideable"; "required": false; "isSignal": true; }; "movable": { "alias": "movable"; "required": false; "isSignal": true; }; "pinnable": { "alias": "pinnable"; "required": false; "isSignal": true; }; "pinned": { "alias": "pinned"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "pinned": "pinnedChange"; "hidden": "hiddenChange"; }, ["cell", "headerCell"], never, true, never>;
+}
+declare class MonkeyTableRowDetailDirective<T> {
+    readonly template: TemplateRef<{
+        $implicit: T;
+        row: T;
+    }>;
+    static ngTemplateContextGuard<T>(_dir: MonkeyTableRowDetailDirective<T>, _ctx: unknown): _ctx is {
+        $implicit: T;
+        row: T;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableRowDetailDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyTableRowDetailDirective<any>, "ng-template[mkRowDetail]", never, {}, {}, never, never, true, never>;
 }
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-
-declare class MonkeyColumnExpansible implements OnInit, OnDestroy {
-    private el;
-    private renderer;
-    table: MonkeyTableComponent;
-    expansionChange: EventEmitter<any>;
-    private _opened;
-    private _subscriptions;
-    private _enableAnimation;
-    disabled: boolean;
-    constructor(el: ElementRef, renderer: Renderer2, table: MonkeyTableComponent);
-    private createSvgElement;
-    ngOnInit(): void;
-    onClick(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyColumnExpansible, [null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyColumnExpansible, "[mkExpansible]", never, {}, { "expansionChange": "expansionChange"; }, never, never, false, never>;
+declare class MonkeyTableEmptyDirective {
+    readonly template: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableEmptyDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyTableEmptyDirective, "ng-template[mkEmpty]", never, {}, {}, never, never, true, never>;
+}
+declare class MonkeyTableLoadingDirective {
+    readonly template: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableLoadingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyTableLoadingDirective, "ng-template[mkLoading]", never, {}, {}, never, never, true, never>;
 }
 
 /** ************************
@@ -1813,33 +2397,189 @@ declare class MonkeyColumnExpansible implements OnInit, OnDestroy {
  * MIT Licence
  ************************* */
 
-declare class MonkeyColumnSortable implements OnInit, OnDestroy {
-    private el;
-    private renderer;
-    table: MonkeyTableComponent;
-    name: string;
-    private _sortableDirection;
-    private subscriptions;
-    get disabled(): boolean;
-    constructor(el: ElementRef, renderer: Renderer2, table: MonkeyTableComponent);
-    private createSvgElement;
-    ngOnInit(): void;
-    onClick(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyColumnSortable, [null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyColumnSortable, "[mkSortable]", never, { "name": { "alias": "mkSortable"; "required": true; }; }, {}, never, never, false, never>;
+declare class MonkeyTableVirtualScroll implements VirtualScrollStrategy {
+    private readonly _indexChange;
+    readonly scrolledIndexChange: Observable<number>;
+    private _viewport;
+    private _metrics;
+    private _buffer;
+    attach(viewport: CdkVirtualScrollViewport): void;
+    detach(): void;
+    onContentScrolled(): void;
+    onDataLengthChanged(): void;
+    onContentRendered(): void;
+    onRenderedOffsetChanged(): void;
+    scrollToIndex(index: number, behavior: ScrollBehavior): void;
+    setMetrics(metrics: RowMetrics, buffer: number): void;
+    private update;
+}
+
+type Column<T> = MonkeyTableColumnDirective<T>;
+interface SlotBase {
+    key: string;
+    width: string | null;
+    px: number;
+    pinned: ColumnPinned;
+    offset: number;
+    align: ColumnAlign;
+}
+type Slot<T> = (SlotBase & {
+    kind: 'data';
+    column: Column<T>;
+}) | (SlotBase & {
+    kind: 'selection' | 'expand';
+    column: null;
+});
+interface RowView<T> {
+    row: T;
+    key: string;
+    index: number;
+    selectable: boolean;
 }
-
-declare class MonkeyColumnStick {
-    position: 'left' | 'right';
-    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyColumnStick, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MonkeyColumnStick, "[mkStick]", never, { "position": { "alias": "mkStick"; "required": true; }; }, {}, never, never, false, never>;
+interface RenderRow<T> extends RowView<T> {
+    selected: boolean;
+    open: boolean;
+    blockedReason: string | null;
+    selectLabel: string;
+    expandLabel: string;
 }
-
-declare class MonkeyTableModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MonkeyTableModule, [typeof MonkeyTableComponent, typeof MonkeyColumnStick, typeof MonkeyColumnChecked, typeof MonkeyColumnSortable, typeof MonkeyColumnExpansible], [typeof i2.CommonModule, typeof MonkeyButtonComponent, typeof MonkeyPaginationSizeComponent, typeof MonkeyPaginationLabelComponent, typeof MonkeyPaginationActionComponent], [typeof MonkeyTableComponent, typeof MonkeyColumnStick, typeof MonkeyColumnChecked, typeof MonkeyColumnSortable, typeof MonkeyColumnExpansible]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MonkeyTableModule>;
+declare class MonkeyTableComponent<T> implements OnDestroy {
+    readonly virtualStrategy: MonkeyTableVirtualScroll;
+    private readonly _zone;
+    private readonly _text;
+    private readonly _columns;
+    private readonly _columnByName;
+    private readonly _visibleColumns;
+    private readonly _selectableKeys;
+    private readonly _selection;
+    private readonly _narrow;
+    private readonly _detailHeight;
+    private readonly _headHeight;
+    private readonly _host;
+    private _scroller?;
+    private _observer?;
+    private _frame;
+    private _sizeStale;
+    private _clientWidth;
+    private _scrollWidth;
+    private readonly _layout;
+    readonly rows: i0.InputSignal<readonly T[]>;
+    readonly rowKey: i0.InputSignal<(row: T) => string>;
+    readonly rowLabel: i0.InputSignal<((row: T) => string) | undefined>;
+    readonly rowSelectable: i0.InputSignal<((row: T) => boolean) | undefined>;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly caption: i0.InputSignal<string>;
+    readonly selectionMode: i0.InputSignal<"none" | "multiple">;
+    readonly selected: i0.ModelSignal<ReadonlySet<string>>;
+    readonly maxSelected: i0.InputSignal<number>;
+    readonly sort: i0.InputSignal<SortState | null>;
+    readonly expandable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly expanded: i0.ModelSignal<ReadonlySet<string>>;
+    readonly reorderable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly hideable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly pinnable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly rowHeight: i0.InputSignal<number>;
+    readonly maxVisibleRows: i0.InputSignal<number | "none">;
+    readonly virtualScroll: i0.InputSignal<"auto" | "off">;
+    readonly columnOrder: i0.ModelSignal<readonly string[]>;
+    readonly columnState: i0.InputSignal<readonly MonkeyTableColumnState[]>;
+    readonly striped: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly loading: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly emptyText: i0.InputSignal<string>;
+    readonly skeletonRows: i0.InputSignal<number | "auto">;
+    readonly onSortChange: i0.OutputEmitterRef<SortState | null>;
+    readonly onColumnHidden: i0.OutputEmitterRef<{
+        name: string;
+        label: string;
+    }>;
+    readonly onColumnStateChange: i0.OutputEmitterRef<MonkeyTableColumnState[]>;
+    readonly onSelectionChange: i0.OutputEmitterRef<string[]>;
+    readonly onExpandChange: i0.OutputEmitterRef<{
+        row: T;
+        key: string;
+        expanded: boolean;
+    }>;
+    protected readonly emptyTemplate: i0.Signal<MonkeyTableEmptyDirective | undefined>;
+    protected readonly loadingTemplate: i0.Signal<MonkeyTableLoadingDirective | undefined>;
+    protected readonly rowDetailTemplate: i0.Signal<MonkeyTableRowDetailDirective<any> | undefined>;
+    protected readonly plainScroller: i0.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly headClip: i0.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly virtualViewport: i0.Signal<CdkVirtualScrollViewport | undefined>;
+    protected readonly scrollTarget: i0.Signal<HTMLElement | null>;
+    private readonly _rowCap;
+    protected readonly bounded: i0.Signal<boolean>;
+    protected readonly virtual: i0.Signal<boolean>;
+    protected readonly effectiveHeight: i0.Signal<string>;
+    protected readonly rowMetrics: i0.Signal<{
+        openIndices: number[];
+        count: number;
+        rowHeight: number;
+        detailHeight: number;
+    }>;
+    protected readonly overflowing: i0.WritableSignal<boolean>;
+    protected readonly atStart: i0.WritableSignal<boolean>;
+    protected readonly atEnd: i0.WritableSignal<boolean>;
+    protected readonly openMenu: i0.WritableSignal<string | null>;
+    protected readonly slots: i0.Signal<Slot<T>[]>;
+    protected readonly pinnedStartWidth: i0.Signal<number>;
+    protected readonly pinnedEndWidth: i0.Signal<number>;
+    protected readonly totalWidth: i0.Signal<number>;
+    protected readonly allSelected: i0.Signal<boolean>;
+    protected readonly someSelected: i0.Signal<boolean>;
+    protected readonly atSelectionLimit: i0.Signal<boolean>;
+    protected readonly hasSelectable: i0.Signal<boolean>;
+    protected readonly rowViews: i0.Signal<RowView<T>[]>;
+    protected readonly renderRows: i0.Signal<RenderRow<T>[]>;
+    protected readonly skeletonRange: i0.Signal<number[]>;
+    protected readonly labels: i0.Signal<{
+        moveLeft: string;
+        moveRight: string;
+        hide: string;
+        pin: string;
+        unpin: string;
+        selectAll: string;
+        detail: string;
+        limit: string;
+        notSelectable: string;
+        empty: string;
+    }>;
+    constructor();
+    private word;
+    private effectivePinned;
+    private schedule;
+    private cancelFrame;
+    private measure;
+    private closeMenuWhenColumnGone;
+    private currentOrder;
+    private currentColumnState;
+    private commitSelection;
+    private applyOrder;
+    private restoreColumnState;
+    ngOnDestroy(): void;
+    protected closeMenu: () => void;
+    protected trackKey: (_index: number, view: RowView<T>) => string;
+    protected toggleMenu(column: Column<T>): void;
+    protected hasMenu(column: Column<T> | null): boolean;
+    protected canHide(column: Column<T>): boolean;
+    protected canReorder(column: Column<T>): boolean;
+    protected canPin(column: Column<T>): boolean;
+    protected isLastColumn(): boolean;
+    protected sortLabels(column: Column<T>): {
+        asc: string;
+        desc: string;
+    };
+    protected ariaSortFor(column: Column<T> | null): string | null;
+    protected isSortedBy(column: Column<T>, direction: SortDirection): boolean;
+    protected sortBy(column: Column<T>, direction: SortDirection): void;
+    protected canMove(column: Column<T>, delta: -1 | 1): boolean;
+    protected move(column: Column<T>, delta: -1 | 1): void;
+    protected hide(column: Column<T>): void;
+    protected togglePin(column: Column<T>): void;
+    protected toggleRow(view: RowView<T>): void;
+    protected toggleAllRows(): void;
+    protected toggleOpen(view: RowView<T>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyTableComponent<any>, "monkey-table", never, { "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": true; "isSignal": true; }; "rowLabel": { "alias": "rowLabel"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "maxSelected": { "alias": "maxSelected"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "hideable": { "alias": "hideable"; "required": false; "isSignal": true; }; "pinnable": { "alias": "pinnable"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "maxVisibleRows": { "alias": "maxVisibleRows"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "columnOrder": { "alias": "columnOrder"; "required": false; "isSignal": true; }; "columnState": { "alias": "columnState"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "expanded": "expandedChange"; "columnOrder": "columnOrderChange"; "onSortChange": "onSortChange"; "onColumnHidden": "onColumnHidden"; "onColumnStateChange": "onColumnStateChange"; "onSelectionChange": "onSelectionChange"; "onExpandChange": "onExpandChange"; }, ["_columns", "emptyTemplate", "loadingTemplate", "rowDetailTemplate"], ["monkey-pagination-size", "monkey-pagination-label", "monkey-pagination-action"], true, never>;
 }
 
 /** ************************
@@ -1923,35 +2663,6 @@ declare class MonkeyTabsModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MonkeyTabsModule>;
 }
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-
-declare class MonkeyToastComponent {
-    private host;
-    message: string | undefined;
-    icon: string | undefined;
-    type: MonkeyToastType;
-    isClosable: boolean;
-    actionLabel: string | undefined;
-    actionIcon: string | undefined;
-    onActionClick: EventEmitter<string>;
-    onClose: EventEmitter<string>;
-    protected _uid: string;
-    protected _id: string;
-    get id(): string;
-    set id(value: string);
-    get class(): string;
-    constructor(host: ElementRef<HTMLElement>);
-    close(): void;
-    onAnimationEnd(event: AnimationEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyToastComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyToastComponent, "monkey-toast", never, { "message": { "alias": "message"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "type": { "alias": "type"; "required": false; }; "isClosable": { "alias": "isClosable"; "required": false; }; "actionLabel": { "alias": "actionLabel"; "required": false; }; "actionIcon": { "alias": "actionIcon"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "onActionClick": "onActionClick"; "onClose": "onClose"; }, never, never, true, never>;
-    static ngAcceptInputType_isClosable: unknown;
-}
-
 declare class MonkeyToggleComponent {
     disabled: boolean;
     size: 'lg' | 'md' | 'sm';
@@ -2316,5 +3027,5 @@ declare const MECX_COUNTRY_ISO_CODE: InjectionToken<string>;
 declare const MECX_GOOGLE_API_KEY: InjectionToken<string>;
 declare function injectTokenWithWarning<T>(token: InjectionToken<T>, name?: string): T | null;
 
-export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, getCurrencySymbol, injectTokenWithWarning };
-export type { ActiveFilter, AutocompleteSuggestion, AutocompleteSuggestionType, ComplexFilterCondition, ComplexFilterGroup, ComplexFilterOperator, ComplexFilterResult, FilterBarConfig, FilterBarState, FilterOption, FilterType, GoogleApiPlaces, GoogleApiPlacesAddressComponents, GoogleApiPlacesResponse, MonkeyAlertType, MonkeyAutocompleteData, MonkeyAutocompleteResponse, MonkeyBreadcrumb, MonkeyButtonColor, MonkeyButtonType, MonkeyDownloadButtonChangeEvent, MonkeyInputUploadChangeEvent, MonkeyModalConfirmationConfig, MonkeyModalDefaultConfig, MonkeyPopoverDir, MonkeyPopoverOptions, MonkeySize, MonkeyTableScrollConfig, MonkeyToastPosition, MonkeyToastType, StatusOption, ToastConfig };
+export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterBarV2Component, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, ariaSortOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, mergeOrder, offsetOfIndex, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight };
+export type { ActiveFilter, AutocompleteSuggestion, AutocompleteSuggestionType, ColumnAlign, ColumnPinned, ComplexFilterCondition, ComplexFilterGroup, ComplexFilterOperator, ComplexFilterResult, FilterBarConfig, FilterBarState, FilterOption, FilterType, GoogleApiPlaces, GoogleApiPlacesAddressComponents, GoogleApiPlacesResponse, MonkeyAlertType, MonkeyAutocompleteData, MonkeyAutocompleteResponse, MonkeyBreadcrumb, MonkeyButtonColor, MonkeyButtonType, MonkeyDownloadButtonChangeEvent, MonkeyFilterBarV2Row, MonkeyFilterMenuItemProperty, MonkeyFilterTriggerVariant, MonkeyInputUploadChangeEvent, MonkeyModalConfirmationConfig, MonkeyModalDefaultConfig, MonkeyPopoverDir, MonkeyPopoverOptions, MonkeyScrollbarOrientation, MonkeyScrollbarSize, MonkeySize, MonkeyTableCellContext, MonkeyTableColumnState, MonkeyTableScrollConfig, MonkeyTableSortKind, MonkeyToastPosition, MonkeyToastType, RowMetrics, SelectionState, SortDirection, SortState, StatusOption, ToastConfig };