ngwr 6.0.0 → 7.0.0

package/types/ngwr-mention.d.ts

@@ -0,0 +1,110 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** A mentionable item — extend with whatever metadata your app needs. */
+interface WrMentionItem {
+    readonly label: string;
+    readonly [key: string]: unknown;
+}
+/** Payload emitted by `(wrMentionSelected)` on commit. */
+interface WrMentionCommit<T extends WrMentionItem = WrMentionItem> {
+    /** The selected item. */
+    readonly item: T;
+    /** The trigger character that opened the panel (e.g. `'@'`). */
+    readonly trigger: string;
+    /** The query text the user typed after the trigger. */
+    readonly query: string;
+}
+
+/**
+ * `@`-style mention picker for `<textarea>` and `<input>`. Listens for
+ * trigger characters (default `'@'`); when typed at a word boundary, an
+ * overlay panel opens at the caret and shows filtered options. Pick with
+ * Enter / Tab / click — the trigger + query is replaced with the inserted
+ * value plus a trailing space.
+ *
+ * @example
+ * ```html
+ * <textarea
+ *   wrMention
+ *   [wrMentionItems]="users"
+ *   [displayWith]="userLabel"
+ *   (wrMentionSelected)="onMention($event)"
+ * ></textarea>
+ * ```
+ *
+ * @see https://ngwr.dev/components/mention
+ */
+declare class WrMention<T extends WrMentionItem = WrMentionItem> {
+    /** Items to filter against the typed query. */
+    readonly wrMentionItems: _angular_core.InputSignal<readonly T[]>;
+    /** Trigger characters that open the panel. @default ['@'] */
+    readonly triggers: _angular_core.InputSignal<readonly string[]>;
+    /** Maps an item to its display label. @default `item.label` */
+    readonly displayWith: _angular_core.InputSignal<(item: T) => string>;
+    /**
+     * Returns the text to insert into the textarea on commit. Receives the
+     * picked item and the trigger char. @default `${trigger}${displayWith(item)}`
+     */
+    readonly valueWith: _angular_core.InputSignal<((item: T, trigger: string) => string) | null>;
+    /** Custom filter. @default case-insensitive `includes` over `displayWith(item)`. */
+    readonly filterWith: _angular_core.InputSignal<((query: string, item: T) => boolean) | null>;
+    /** Maximum number of items shown in the panel. @default 8 */
+    readonly maxResults: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Emits the selected item, trigger, and query whenever the user commits. */
+    readonly wrMentionSelected: _angular_core.OutputEmitterRef<WrMentionCommit<T>>;
+    private readonly host;
+    private readonly overlay;
+    private readonly scrollStrategies;
+    private readonly destroyRef;
+    private overlayRef;
+    private panelRef;
+    private state;
+    private readonly activeIndex;
+    private readonly filteredItems;
+    constructor();
+    /** @internal */
+    protected onInput(): void;
+    /** @internal */
+    protected onClick(): void;
+    /** @internal */
+    protected onCaretMove(event: KeyboardEvent): void;
+    /** @internal */
+    protected onKeydown(event: KeyboardEvent): void;
+    /** @internal */
+    protected onBlur(): void;
+    private detect;
+    private activate;
+    private filter;
+    private setActive;
+    private open;
+    private close;
+    private commit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMention<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrMention<any>, "[wrMention]", never, { "wrMentionItems": { "alias": "wrMentionItems"; "required": false; "isSignal": true; }; "triggers": { "alias": "triggers"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "valueWith": { "alias": "valueWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; }, { "wrMentionSelected": "wrMentionSelected"; }, never, never, true, never>;
+}
+
+/**
+ * Overlay panel rendered by {@link WrMention}. Not intended for
+ * direct use — the directive instantiates it via a ComponentPortal.
+ */
+declare class WrMentionPanel {
+    readonly items: _angular_core.InputSignal<readonly WrMentionItem[]>;
+    readonly activeIndex: _angular_core.InputSignal<number>;
+    readonly displayWith: _angular_core.InputSignal<(item: WrMentionItem) => string>;
+    /** Emitted when the user picks an item (click). */
+    readonly picked: _angular_core.OutputEmitterRef<WrMentionItem>;
+    /** Emitted on mouseenter — used by the directive to track hover. */
+    readonly hovered: _angular_core.OutputEmitterRef<number>;
+    protected onPick(item: WrMentionItem, event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMentionPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMentionPanel, "wr-mention-panel", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; }, { "picked": "picked"; "hovered": "hovered"; }, never, never, true, never>;
+}
+
+export { WrMention, WrMentionPanel };
+export type { WrMentionCommit, WrMentionItem };

package/types/ngwr-meta.d.ts

@@ -0,0 +1,164 @@
+import * as i0 from '@angular/core';
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Open Graph (`og:*`) tag values. */
+interface WrMetaOg {
+    readonly title?: string;
+    readonly description?: string;
+    readonly image?: string;
+    readonly url?: string;
+    readonly type?: string;
+    readonly siteName?: string;
+}
+/** Twitter card (`twitter:*`) tag values. */
+interface WrMetaTwitter {
+    readonly card?: 'summary' | 'summary_large_image' | 'app' | 'player';
+    readonly title?: string;
+    readonly description?: string;
+    readonly image?: string;
+    readonly creator?: string;
+}
+/**
+ * Declarative description of `<head>` metadata. Every field is optional —
+ * unset values inherit from the layer below or fall back to defaults
+ * registered via {@link provideWrMeta}.
+ */
+interface WrMetaConfig {
+    readonly title?: string;
+    /** Template applied to `title` when set — `{{ title }}` (or `%s`) is replaced with the page title. */
+    readonly titleTemplate?: string;
+    readonly description?: string;
+    readonly keywords?: readonly string[];
+    readonly canonical?: string;
+    readonly themeColor?: string;
+    readonly og?: WrMetaOg;
+    readonly twitter?: WrMetaTwitter;
+}
+/** Returned by {@link WrMeta.push} — call `.pop()` to remove the layer. */
+interface WrMetaHandle {
+    readonly pop: () => void;
+}
+
+/**
+ * Centralised `<head>` metadata manager — title, description, keywords,
+ * canonical, Open Graph and Twitter Card tags.
+ *
+ * Stack-based: `push(config)` adds a layer (returned handle pops it),
+ * `set(config)` replaces the current top, `reset()` clears all overrides.
+ * Layers merge via shallow merge for scalars and a one-level deep merge
+ * for `og` / `twitter` groups.
+ *
+ * The resolved metadata is applied diff-style — only changed tags are
+ * touched in the DOM, so reads of `document.head` stay cheap.
+ *
+ * @example
+ * ```ts
+ * const meta = inject(WrMeta);
+ * meta.set({ title: 'Pricing', description: 'Plans for every team.' });
+ *
+ * // From a route component — auto-pop on destroy via the directive:
+ * <div [wrMeta]="{ title: 'Pricing' }">
+ * ```
+ *
+ * @see https://ngwr.dev/services/meta
+ */
+declare class WrMeta {
+    private readonly title;
+    private readonly meta;
+    private readonly doc;
+    private readonly defaults;
+    /** Stack of meta layers. Bottom = defaults, top = currently applied. */
+    private readonly stack;
+    /** Resolved (merged) metadata at the top of the stack. */
+    readonly resolved: i0.Signal<WrMetaConfig>;
+    /** Last applied snapshot — used to diff against the next resolution. */
+    private applied;
+    constructor();
+    /** Snapshot of the resolved metadata currently in the DOM. */
+    current(): Readonly<WrMetaConfig>;
+    /** Replace the top layer (or create one if only defaults are present). */
+    set(config: WrMetaConfig): void;
+    /** Push a new layer. Returns a handle whose `.pop()` removes it. */
+    push(config: WrMetaConfig): WrMetaHandle;
+    /** Pop the most recently pushed layer (defaults remain). */
+    pop(): void;
+    /** Clear all overrides, restore the defaults registered via `provideWrMeta`. */
+    reset(): void;
+    private apply;
+    private diffTitle;
+    private diffMeta;
+    private updateName;
+    private updateProp;
+    private diffLink;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrMeta, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrMeta>;
+}
+
+/**
+ * Declarative wrapper around {@link WrMeta}.
+ *
+ * - Pushes the bound config on init.
+ * - Re-pushes (replacing) when the config reference changes.
+ * - Pops the layer on destroy — perfect for route-level meta overrides.
+ *
+ * @example
+ * ```html
+ * <div [wrMeta]="{ title: 'Pricing', description: 'Plans for every team.' }">
+ * ```
+ */
+declare class WrMetaBinding {
+    readonly wrMeta: i0.InputSignal<WrMetaConfig>;
+    private readonly metaService;
+    private handle;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrMetaBinding, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrMetaBinding, "[wrMeta]", never, { "wrMeta": { "alias": "wrMeta"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Register app-wide defaults for {@link WrMeta}. Use to set a
+ * consistent baseline `title` / `titleTemplate` / `og` / `twitter` for every
+ * route — individual routes / components can override via
+ * `metaService.push(...)` or the `[wrMeta]` directive.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideWrMeta({
+ *       titleTemplate: '{{ title }} · NGWR',
+ *       description: 'Angular UI components library',
+ *       og: { siteName: 'NGWR', type: 'website' },
+ *       twitter: { card: 'summary_large_image', creator: '@thekhegay' },
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function provideWrMeta(defaults?: WrMetaConfig): EnvironmentProviders;
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/** App-wide defaults registered via {@link provideWrMeta}. */
+declare const WR_META_DEFAULTS: InjectionToken<WrMetaConfig>;
+
+export { WR_META_DEFAULTS, WrMeta, WrMetaBinding, provideWrMeta };
+export type { WrMetaConfig, WrMetaHandle, WrMetaOg, WrMetaTwitter };

package/types/ngwr-meter-group.d.ts

@@ -0,0 +1,57 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** One segment of a {@link WrMeterGroup}. */
+interface WrMeterSegment {
+    /** Label shown in the legend. */
+    readonly label: string;
+    /** Magnitude — interpreted as a portion of the sum of all segments. */
+    readonly value: number;
+    /** CSS color for the bar slice and legend swatch. Defaults to `--wr-color-primary` etc. */
+    readonly color?: string;
+}
+
+/**
+ * Stacked-segment progress bar. Visualises a breakdown of a total —
+ * disk usage, budget, vote share, etc. Each segment contributes a slice
+ * proportional to its `value` relative to the sum (or the explicit `max`).
+ *
+ * @example
+ * ```html
+ * <wr-meter-group
+ *   [segments]="[
+ *     { label: 'Used', value: 60 },
+ *     { label: 'Reserved', value: 25, color: 'var(--wr-color-warning)' }
+ *   ]"
+ *   [max]="100"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/components/meter-group
+ */
+declare class WrMeterGroup {
+    readonly segments: _angular_core.InputSignal<readonly WrMeterSegment[]>;
+    /** Explicit total. When `0` (default), `max = sum(values)`. @default 0 */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Show the labelled legend under the bar. @default true */
+    readonly showLegend: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Show each segment's percent value in the legend. @default true */
+    readonly showValues: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly resolvedMax: _angular_core.Signal<number>;
+    protected readonly slices: _angular_core.Signal<{
+        label: string;
+        value: number;
+        color: string;
+        percent: number;
+    }[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMeterGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMeterGroup, "wr-meter-group", never, { "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrMeterGroup };
+export type { WrMeterSegment };

package/types/ngwr-overlay.d.ts

@@ -0,0 +1,110 @@
+import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Custom CDK `OverlayContainer` subclass that tags its DOM element with
+ * `.wr-overlay-container` in addition to CDK's own `.cdk-overlay-container`.
+ *
+ * Why: CDK uses a single overlay container per app — every CDK consumer
+ * (this lib, Angular Material, NG-ZORRO, etc.) puts its overlays in the
+ * same root element. With this class applied you can scope NGWR-specific
+ * overlay styles via the tag, e.g.:
+ *
+ * ```scss
+ * .wr-overlay-container .cdk-overlay-pane { z-index: 1100; }
+ * ```
+ *
+ * It does **not** isolate two libraries that both subclass OverlayContainer
+ * — the last provider wins. It does give NGWR overlays a stable CSS hook.
+ */
+declare class WrOverlayContainer extends OverlayContainer {
+    protected _createContainer(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrOverlayContainer, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrOverlayContainer>;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Isolates NGWR overlays from other CDK consumers in the app.
+ *
+ * Without this call, NGWR overlays use CDK's root `Overlay` — they
+ * render into the same `.cdk-overlay-container` element as Angular
+ * Material, NG-ZORRO, etc. With it, NGWR gets its own `OverlayContainer`
+ * (marked `.wr-overlay-container`) **and** its own `Overlay` service
+ * instance — so styles, z-index, and lifecycle never collide.
+ *
+ * It does this by replacing two injection tokens:
+ * - `WR_OVERLAY_CONTAINER` → custom `WrOverlayContainer` subclass
+ * - `WR_OVERLAY` → a fresh `Overlay` instance built in a child injector
+ *   that resolves `OverlayContainer` to the custom subclass
+ *
+ * CDK's own root `Overlay` / `OverlayContainer` are left untouched, so
+ * other libraries keep working with their original container.
+ *
+ * @example
+ * ```ts
+ * import { provideWrOverlay } from 'ngwr/overlay';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideWrOverlay(),
+ *   ],
+ * });
+ * ```
+ */
+declare function provideWrOverlay(): EnvironmentProviders;
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Injection token for the CDK `Overlay` service NGWR components should
+ * use to open panels.
+ *
+ * Defaults to CDK's root `Overlay` (shared with every other CDK consumer
+ * in the app). Call `provideWrOverlay()` to bind it to an isolated
+ * `Overlay` instance backed by a separate `OverlayContainer` — that way
+ * NGWR overlays don't share the same DOM root with other libraries.
+ *
+ * @internal — directives/services inside the lib inject this instead of
+ * CDK's `Overlay` directly.
+ */
+declare const WR_OVERLAY: InjectionToken<Overlay>;
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Injection token for the overlay container NGWR components should use.
+ *
+ * Defaults to CDK's `OverlayContainer` — i.e. the same root element every
+ * CDK consumer shares. Call `provideWrOverlay()` to replace it with an
+ * isolated instance so NGWR overlays don't collide with other libraries.
+ *
+ * @internal
+ */
+declare const WR_OVERLAY_CONTAINER: InjectionToken<OverlayContainer>;
+
+export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WrOverlayContainer, provideWrOverlay };

package/types/ngwr-page-header.d.ts

@@ -0,0 +1,35 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Top-of-page heading block. Three named slots via attribute selectors:
+ * `[wrPageHeaderBreadcrumbs]` (top row), `[wrPageHeaderActions]` (right
+ * side), `[wrPageHeaderExtra]` (bottom row of tags / metadata). Title +
+ * subtitle come from inputs.
+ *
+ * @example
+ * ```html
+ * <wr-page-header title="Settings" subtitle="Manage your workspace">
+ *   <nav wrPageHeaderBreadcrumbs>…</nav>
+ *   <div wrPageHeaderActions>
+ *     <button wrButton>Invite</button>
+ *     <button wrButton color="primary">Save</button>
+ *   </div>
+ *   <div wrPageHeaderExtra>
+ *     <wr-tag>v2.4</wr-tag>
+ *     <wr-tag color="success">Stable</wr-tag>
+ *   </div>
+ * </wr-page-header>
+ * ```
+ *
+ * @see https://ngwr.dev/components/page-header
+ */
+declare class WrPageHeader {
+    /** Primary title shown as an h1. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Secondary line below the title. */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPageHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPageHeader, "wr-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, never, ["[wrPageHeaderBreadcrumbs]", "[wrPageHeaderActions]", "[wrPageHeaderExtra]"], true, never>;
+}
+
+export { WrPageHeader };

package/types/ngwr-pagination.d.ts

@@ -0,0 +1,119 @@
+import * as _angular_core from '@angular/core';
+import { WrButtonSize } from 'ngwr/button';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Horizontal alignment of the pagination row.
+ */
+type WrPaginationAlign = 'start' | 'center' | 'end';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Corner treatment for pagination cells.
+ *
+ * - `rounded` (default) — matches the rest of the form vocabulary.
+ * - `square` — sharp corners; reads as a tighter numeric grid.
+ */
+type WrPaginationShape = 'rounded' | 'square';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Size variant. The middle three (`sm` / `md` / `lg`) cascade the
+ * matching `<wr-btn>` size directly; `xs` and `xl` reuse the closest
+ * button size and overlay tighter / chunkier padding + font tokens so
+ * the cells read smaller / bigger than the button's own scale.
+ */
+type WrPaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+declare const ELLIPSIS: "\u2026";
+type PageEntry = number | typeof ELLIPSIS;
+/**
+ * Numbered page navigator with optional total / page-size controls.
+ *
+ * Two-way binds `currentPage` and `pageSize` via signal `model()` inputs.
+ *
+ * @example
+ * ```html
+ * <wr-pagination
+ *   [total]="120"
+ *   [(currentPage)]="page"
+ *   [(pageSize)]="size"
+ *   showTotal
+ *   showSizeChanger
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/components/pagination
+ */
+declare class WrPagination {
+    /** Currently displayed page (1-based). Two-way bindable. */
+    readonly currentPage: _angular_core.ModelSignal<number>;
+    /** Items per page. Two-way bindable. */
+    readonly pageSize: _angular_core.ModelSignal<number>;
+    /** Total item count across all pages. */
+    readonly total: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Options shown in the page-size dropdown. */
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
+    /** Render the page-size dropdown. @default false */
+    readonly showSizeChanger: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Render the "X–Y of Z" total label. @default false */
+    readonly showTotal: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Horizontal alignment. @default 'start' */
+    readonly align: _angular_core.InputSignal<WrPaginationAlign>;
+    /** Size variant — cascades to every internal button. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrPaginationSize>;
+    /** Resolved button size — clamps xs/xl to the closest button size. @internal */
+    protected readonly buttonSize: _angular_core.Signal<WrButtonSize>;
+    /** Cell corner treatment. @default 'rounded' */
+    readonly shape: _angular_core.InputSignal<WrPaginationShape>;
+    /** Disable interaction. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Localised text between range and total ("X–Y of Z"). Falls back to `pagination.of` then `'of'`. */
+    readonly ofLabel: _angular_core.InputSignal<string | null>;
+    /** Previous-page button aria-label. Falls back to `pagination.prev`. */
+    readonly prevLabel: _angular_core.InputSignal<string | null>;
+    /** Next-page button aria-label. Falls back to `pagination.next`. */
+    readonly nextLabel: _angular_core.InputSignal<string | null>;
+    /** "Items per page" label. Falls back to `pagination.itemsPerPage`. */
+    readonly itemsPerPageLabel: _angular_core.InputSignal<string | null>;
+    /** Resolved labels. */
+    protected readonly resolvedOf: _angular_core.Signal<string>;
+    protected readonly resolvedPrev: _angular_core.Signal<string>;
+    protected readonly resolvedNext: _angular_core.Signal<string>;
+    protected readonly resolvedItemsPerPage: _angular_core.Signal<string>;
+    /** Internal: total page count. */
+    protected readonly totalPages: _angular_core.Signal<number>;
+    /** Internal: "X–Y of Z" string. */
+    protected readonly rangeLabel: _angular_core.Signal<string>;
+    /**
+     * Internal: page list with ellipses. Window of 7 visible page slots.
+     *
+     *   1 … 5 6 [7] 8 9 … 20
+     */
+    protected readonly pages: _angular_core.Signal<readonly PageEntry[]>;
+    protected readonly ellipsis: "…";
+    protected readonly classes: _angular_core.Signal<string>;
+    protected isCurrent(page: number): boolean;
+    protected goTo(page: number | typeof ELLIPSIS): void;
+    protected onSizeChange(size: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPagination, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPagination, "wr-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "itemsPerPageLabel": { "alias": "itemsPerPageLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
+}
+
+export { WrPagination };
+export type { WrPaginationAlign };