@ngneers/controls 0.0.1-pre1 → 0.0.1-pre2

package/types/ngneers-controls-list-box.d.ts

@@ -0,0 +1,216 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import { NgnItem, NgnItemsValue, FilterConfig } from '@ngneers/controls/api';
+import { InputGeneric, maybeCallback } from '@ngneers/controls/utils';
+import { ValueControlBase } from '@ngneers/controls/base';
+
+/**
+ * This type determines the value type for the select control.
+ * * If `multiple` is `true`, the value is an array of items: `T[K][]`.
+ * * Else it is the item's value type `T[K]`.
+ */
+type ValueType<Items extends readonly NgnItem[], Multiple extends boolean> = InputGeneric<Multiple, false> extends true ? NgnItemsValue<Items>[] : NgnItemsValue<Items>;
+declare abstract class ListBoxTemplates<Items extends readonly NgnItem[], Multiple extends boolean> extends ValueControlBase<'listBox', ValueType<Items, Multiple> | null> {
+    private readonly _defaultItemTemplate;
+    private readonly _userItemTemplate;
+    /**
+     * Set a custom template for an item of the list box.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    readonly templateItem: _angular_core.InputSignal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }> | null>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }>>;
+    private readonly _defaultGroupTemplate;
+    private readonly _userGroupTemplate;
+    /**
+     * Set a custom template for a group in the list box.
+     * Can also be set using an `<ng-template>` element with `#group` template reference variable.
+     */
+    readonly templateGroup: _angular_core.InputSignal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }> | null>;
+    protected readonly groupTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }>>;
+    private readonly _defaultEmptyTemplate;
+    private readonly _userEmptyTemplate;
+    /**
+     * Set a custom template for the empty state in the list box.
+     * Can also be set using an `<ng-template>` element with `#empty` template reference variable.
+     */
+    readonly templateEmpty: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly emptyTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    /**
+     * Types for the dialog templates.
+     */
+    readonly templateTypes: {
+        item: {
+            $implicit: Items[number] | undefined;
+        };
+    } & {
+        $implicit: {
+            item: Partial<{
+                $implicit: Items[number] | undefined;
+            }>;
+        };
+    };
+    protected readonly templateTypesInternal: {
+        item: {
+            $implicit: Items[number] | undefined;
+            index: number;
+        };
+    } & {
+        $implicit: {
+            item: Partial<{
+                $implicit: Items[number] | undefined;
+                index: number;
+            }>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxTemplates<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListBoxTemplates<any, any>, never, never, { "templateItem": { "alias": "templateItem"; "required": false; "isSignal": true; }; "templateGroup": { "alias": "templateGroup"; "required": false; "isSignal": true; }; "templateEmpty": { "alias": "templateEmpty"; "required": false; "isSignal": true; }; }, {}, ["_userItemTemplate", "_userGroupTemplate", "_userEmptyTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnListBox<Items extends readonly NgnItem[], Multiple extends boolean = false> extends ListBoxTemplates<Items, Multiple> {
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            selectYear: string;
+            weekdays: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            weekdaysShort: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            months: {
+                january: string;
+                february: string;
+                march: string;
+                april: string;
+                may: string;
+                june: string;
+                july: string;
+                august: string;
+                september: string;
+                october: string;
+                november: string;
+                december: string;
+            };
+        };
+        editInplace: {
+            placeholder: string;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            clear: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: string;
+            };
+            selected: string;
+            conditions: string;
+            operators: {
+                isEqual: string;
+                isNotEqual: string;
+                contains: string;
+                startsWith: string;
+                endsWith: string;
+                in: string;
+                isEmpty: string;
+                isNotEmpty: string;
+                greaterThan: string;
+                greaterThanOrEqual: string;
+                lessThan: string;
+                lessThanOrEqual: string;
+                after: string;
+                onOrAfter: string;
+                before: string;
+                onOrBefore: string;
+                isTrue: string;
+                isFalse: string;
+                custom: string;
+            };
+        };
+        splitter: {
+            handleLabel: string;
+        };
+        inputField: {
+            clearInput: string;
+        };
+        drawer: {
+            close: string;
+        };
+    }, "_">;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "scroller", "item-selected", "item-highlighted"], readonly [_ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"scroller", ["root", "virtual", "item", "spacer", "item-sticky"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>>;
+    private readonly _scroller;
+    readonly items: _angular_core.InputSignal<Items>;
+    readonly scrollToSelectedItemOnInit: _angular_core.InputSignal<boolean | ScrollLogicalPosition>;
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selectOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly focussable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly virtual: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly itemHeight: _angular_core.InputSignal<number | undefined>;
+    readonly multiple: _angular_core.InputSignal<Multiple | undefined>;
+    /**
+     * Whether to use a checkbox to indicate selection state.
+     *
+     * This option is true per default when `multiple` is `true`.
+     * @default multiple()
+     */
+    readonly checkbox: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Accepts a boolean value that determines whether the filter is enabled.
+     * Alternatively, you can provide `FilterConfig` to customize the filter behavior.
+     * @default `false`
+     */
+    readonly filter: _angular_core.InputSignal<boolean | FilterConfig<Items[number]>>;
+    /**
+     * Manually set the filter text.
+     */
+    readonly filterText: _angular_core.InputSignal<string | null>;
+    readonly itemClicked: _angular_core.OutputEmitterRef<NgnItemsValue<Items>>;
+    protected readonly maybeCallback: typeof maybeCallback;
+    readonly displayedItems: _angular_core.Signal<NgnItem<any, any>[]>;
+    protected readonly valueArray: _angular_core.Signal<NgnItemsValue<Items>[]>;
+    protected readonly currentHighlightedValue: _angular_core.WritableSignal<NgnItemsValue<Items> | null>;
+    protected readonly filteredItems: {
+        (): readonly NgnItem[];
+        isRunning: _angular_core.Signal<boolean>;
+        firstRunCompleted: _angular_core.Signal<boolean>;
+    };
+    private readonly _appliedFilterOptions;
+    protected readonly filterIsExecuting: _angular_core.Signal<boolean>;
+    protected readonly showCheckboxes: _angular_core.Signal<boolean>;
+    constructor();
+    onKeyDown(event: KeyboardEvent): void;
+    scrollToIndex(index: number): void;
+    protected onSelect(value: NgnItemsValue<Items>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnListBox<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnListBox<any, any>, "ngn-list-box", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "scrollToSelectedItemOnInit": { "alias": "scrollToSelectedItemOnInit"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectOnHover": { "alias": "selectOnHover"; "required": false; "isSignal": true; }; "focussable": { "alias": "focussable"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, never, true, never>;
+}
+
+export { NgnListBox };

package/types/ngneers-controls-menu.d.ts

@@ -0,0 +1,178 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, TemplateRef } from '@angular/core';
+import { NgnActionItem } from '@ngneers/controls/api';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import { Openable, Anchor } from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { maybeCallback } from '@ngneers/controls/utils';
+import { NgnBase } from '@ngneers/controls/base';
+import { Placement } from '@floating-ui/dom';
+
+type MenuItem = MenuItemDefault | MenuItemSeparator;
+type MenuItemDefault = NgnActionItem;
+type MenuItemSeparator = {
+    separator: true;
+};
+
+declare class NgnContextMenu implements OnDestroy {
+    private readonly _elementRef;
+    private readonly _vcr;
+    private _menu?;
+    readonly ngnContextMenu: _angular_core.InputSignal<MenuItem[]>;
+    constructor();
+    ngOnDestroy(): void;
+    private handleClick;
+    private createMenu;
+    private openMenu;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnContextMenu, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnContextMenu, "[ngnContextMenu]", never, { "ngnContextMenu": { "alias": "ngnContextMenu"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare abstract class MenuTemplates extends NgnBase<'menu'> {
+    private readonly _defaultItemTemplate;
+    private readonly _userItemTemplate;
+    /**
+     * Set a custom template for an item of the menu.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    readonly templateItem: _angular_core.InputSignal<TemplateRef<{
+        $implicit: MenuItemDefault;
+    }> | null>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: MenuItemDefault;
+    }>>;
+    private readonly _defaultGroupTemplate;
+    private readonly _userGroupTemplate;
+    /**
+     * Set a custom template for a group of items in the menu.
+     * Can also be set using an `<ng-template>` element with `#group` template reference variable.
+     */
+    readonly templateGroup: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly groupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    /**
+     * Types for the dialog templates.
+     */
+    readonly templateTypes: {
+        item: {
+            $implicit: MenuItemDefault;
+        };
+    } & {
+        $implicit: {
+            item: Partial<{
+                $implicit: MenuItemDefault;
+            }>;
+        };
+    };
+    protected readonly internalTemplateTypes: {
+        regularItem: {
+            $implicit: MenuItemDefault;
+            index: number;
+        };
+    } & {
+        $implicit: {
+            regularItem: Partial<{
+                $implicit: MenuItemDefault;
+                index: number;
+            }>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuTemplates, never, never, { "templateItem": { "alias": "templateItem"; "required": false; "isSignal": true; }; "templateGroup": { "alias": "templateGroup"; "required": false; "isSignal": true; }; }, {}, ["_userItemTemplate", "_userGroupTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnMenu extends MenuTemplates implements Openable {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"menu", ["root", "submenu", "popover", "item", "item-opened", "icon-children", "separator"], readonly [_ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>>;
+    protected readonly elementId: _angular_core.InputSignal<string>;
+    /**
+     * The element to which the menu is anchored. Required if `popover` is true.
+     */
+    readonly anchor: _angular_core.InputSignal<Anchor | undefined>;
+    /**
+     * The menu items to display.
+     */
+    readonly items: _angular_core.InputSignal<MenuItem[]>;
+    /**
+     * Whether to automatically set ARIA attributes on the anchor element.
+     * @default true if anchor is an HTMLButtonElement, false otherwise.
+     */
+    readonly autoAnchorAria: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Whether the menu is a popover. Requires `anchor` to be set.
+     */
+    readonly popover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The placement of the menu relative to the anchor element. Only used if `popover` is true.
+     * @default 'bottom-start'
+     */
+    readonly placement: _angular_core.InputSignal<Placement>;
+    /**
+     * Icon type for children indicator (submenu indicator). If not set, a default icon will be used.
+     */
+    readonly iconSubmenuIndicator: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether this menu is a submenu. Used internally.
+     * @internal
+     */
+    readonly isSubMenu: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to open submenus on hover. Defaults to true in popover mode.
+     * @default popover()
+     */
+    readonly openSubmenuOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emitted when the menu is fully closed.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when the menu is about to close.
+     */
+    readonly closing: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when all menus should be closed (including parent menus). Used internally.
+     * @internal
+     */
+    readonly closeAll: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Shows or hides the menu.
+     *
+     * You probably want to react to openChange events from outside to update your variable accordingly.
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    protected readonly maybeCallback: typeof maybeCallback;
+    private readonly _isTouchDevice;
+    private readonly _popover;
+    private readonly _menuItems;
+    private readonly _childMenus;
+    private readonly _openSubmenuOnHover;
+    protected readonly autofocus: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /**
+     * Shows the menu.
+     * @param focus Whether to focus the menu after showing it. Defaults to `true`.
+     */
+    show(focus?: boolean): void;
+    /**
+     * Hides the menu.
+     * @param emitCloseEvent Whether to emit the close event. Defaults to `true`.
+     */
+    hide(emitCloseEvent?: boolean): void;
+    /**
+     * Toggles the menu open or closed.
+     */
+    toggle(): void;
+    protected handleKeydown(event: KeyboardEvent, subMenu?: NgnMenu): void;
+    protected doCloseAll(): void;
+    protected itemClicked(item: MenuItem): void;
+    protected closeChildMenus(closeBy: 'hover' | 'click' | 'arrow', menuItem: HTMLButtonElement | null): void;
+    protected openChildMenu(childMenu: NgnMenu, menuItem: HTMLButtonElement | null, openBy: 'hover' | 'click' | 'arrow'): void;
+    protected popoverOpenChange(newState: boolean): void;
+    protected popoverClosed(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnMenu, "ngn-menu", never, { "elementId": { "alias": "elementId"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "autoAnchorAria": { "alias": "autoAnchorAria"; "required": false; "isSignal": true; }; "popover": { "alias": "popover"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "iconSubmenuIndicator": { "alias": "iconSubmenuIndicator"; "required": false; "isSignal": true; }; "isSubMenu": { "alias": "isSubMenu"; "required": false; "isSignal": true; }; "openSubmenuOnHover": { "alias": "openSubmenuOnHover"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "closing": "closing"; "closeAll": "closeAll"; "open": "openChange"; }, never, never, true, never>;
+}
+
+export { NgnContextMenu, NgnMenu };
+export type { MenuItem, MenuItemDefault, MenuItemSeparator };

package/types/ngneers-controls-message.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnMessage extends NgnBase<'message'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"message", ["root", "content", "icon", `kind-${string}`, `color-${string}`], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    /**
+     * Set an icon to display before the text.
+     */
+    readonly icon: i0.InputSignal<string | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgnMessage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgnMessage, "ngn-message", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { NgnMessage };

package/types/ngneers-controls-paginator.d.ts

@@ -0,0 +1,162 @@
+import * as _angular_core from '@angular/core';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+import { NgnItem } from '@ngneers/controls/api';
+
+/**
+ * Defines the pagination state including current page and slice information.
+ * Depending on the context or API design, you can choose to use either page-based or slice-based pagination.
+ */
+type PaginationState = {
+    /**
+     * The current pagination state in terms of page size and current page index.
+     */
+    page: {
+        size: number;
+        current: number;
+    };
+    /**
+     * The slice of items to be displayed based on the current page and page size.
+     */
+    slice: {
+        skip: number;
+        take: number;
+    };
+};
+
+/**
+ * @category control
+ */
+declare class NgnPaginator extends NgnBase<'paginator'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"paginator", ["root", "page-size-options"], readonly [_ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>>;
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            selectYear: string;
+            weekdays: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            weekdaysShort: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            months: {
+                january: string;
+                february: string;
+                march: string;
+                april: string;
+                may: string;
+                june: string;
+                july: string;
+                august: string;
+                september: string;
+                october: string;
+                november: string;
+                december: string;
+            };
+        };
+        editInplace: {
+            placeholder: string;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            clear: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: string;
+            };
+            selected: string;
+            conditions: string;
+            operators: {
+                isEqual: string;
+                isNotEqual: string;
+                contains: string;
+                startsWith: string;
+                endsWith: string;
+                in: string;
+                isEmpty: string;
+                isNotEmpty: string;
+                greaterThan: string;
+                greaterThanOrEqual: string;
+                lessThan: string;
+                lessThanOrEqual: string;
+                after: string;
+                onOrAfter: string;
+                before: string;
+                onOrBefore: string;
+                isTrue: string;
+                isFalse: string;
+                custom: string;
+            };
+        };
+        splitter: {
+            handleLabel: string;
+        };
+        inputField: {
+            clearInput: string;
+        };
+        drawer: {
+            close: string;
+        };
+    }, "_">;
+    /**
+     * Total number of items to paginate.
+     */
+    readonly totalItems: _angular_core.InputSignal<number>;
+    /**
+     * Number of items per page. If not set, the first value from `possiblePageSizes` will be used.
+     */
+    readonly pageSize: _angular_core.ModelSignal<number | undefined>;
+    /**
+     * Possible page sizes to choose from.
+     * @default [5, 10, 25, 50]
+     */
+    readonly possiblePageSizes: _angular_core.InputSignalWithTransform<number[], number[]>;
+    /**
+     * If set to `true`, the page size selector will be hidden and the page size cannot be changed by the user.
+     * @default false
+     */
+    readonly fixedPageSize: _angular_core.InputSignal<boolean>;
+    protected readonly appliedPageSize: _angular_core.Signal<number>;
+    protected readonly pageCount: _angular_core.Signal<number>;
+    protected readonly pages: _angular_core.Signal<{
+        page: number;
+    }[]>;
+    protected readonly pageSizeOptions: _angular_core.Signal<NgnItem[]>;
+    /**
+     * Emits the current pagination state whenever the page or page size changes.
+     */
+    readonly value: _angular_core.OutputEmitterRef<PaginationState>;
+    /**
+     * Current page index (zero-based).
+     * @default 0
+     */
+    readonly page: _angular_core.ModelSignal<number>;
+    constructor();
+    protected previousPage(event: PointerEvent): void;
+    protected nextPage(event: PointerEvent): void;
+    protected getButtonFontStyles(page: number): {
+        [klass: string]: string;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnPaginator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnPaginator, "ngn-paginator", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "possiblePageSizes": { "alias": "possiblePageSizes"; "required": false; "isSignal": true; }; "fixedPageSize": { "alias": "fixedPageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "value": "value"; "page": "pageChange"; }, never, never, true, never>;
+}
+
+export { NgnPaginator };
+export type { PaginationState };