ngwr 6.1.1 → 7.1.0

package/types/ngwr-dialog.d.ts

@@ -0,0 +1,210 @@
+import { ComponentType } from '@angular/cdk/portal';
+import { ConfigurableFocusTrap } from '@angular/cdk/a11y';
+import { OverlayRef } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { ComponentRef, InjectionToken, ElementRef } from '@angular/core';
+import { Subject } from 'rxjs';
+
+/**
+ * @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
+ */
+
+/**
+ * Handle returned by `WrDialog.open()`.
+ *
+ * Wraps the underlying `OverlayRef` and tracks the close result.
+ *
+ * @example
+ * ```ts
+ * const ref = dialog.open<ConfirmComponent, boolean>(ConfirmComponent);
+ * const result = await ref.awaitClose(); // boolean | undefined
+ * ```
+ */
+declare class WrDialogRef<C, R = unknown> {
+    private readonly _overlayRef;
+    /** Emits the close result once and completes. */
+    readonly closed: Subject<R | undefined>;
+    /** @internal */
+    componentRef: ComponentRef<C> | null;
+    /** @internal */
+    focusTrap: ConfigurableFocusTrap | null;
+    /** @internal */
+    previouslyFocused: HTMLElement | null;
+    constructor(_overlayRef: OverlayRef);
+    /** The instantiated dialog component. */
+    get componentInstance(): C;
+    /** Close the dialog, optionally returning a result. */
+    close(result?: R): void;
+    /** Resolves with the close result when the dialog is dismissed. */
+    awaitClose(): Promise<R | undefined>;
+    /** Underlying overlay ref — escape hatch for advanced cases. */
+    get overlayRef(): OverlayRef;
+}
+
+/**
+ * @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
+ */
+/**
+ * Options accepted by `WrDialog.open()`.
+ */
+interface WrDialogOptions<D = unknown> {
+    /** Data payload exposed to the dialog content via `WR_DIALOG_DATA`. */
+    readonly data?: D;
+    /** When `true`, clicks on the backdrop close the dialog. @default true */
+    readonly closeOnBackdropClick?: boolean;
+    /** When `true`, the Escape key closes the dialog. @default true */
+    readonly closeOnEscape?: boolean;
+    /** Width applied to the panel — any valid CSS length. */
+    readonly width?: string;
+    /** Maximum width applied to the panel. */
+    readonly maxWidth?: string;
+    /** Extra CSS class(es) added to the panel. */
+    readonly panelClass?: string | readonly string[];
+}
+
+/**
+ * Opens dialog components in an isolated NGWR overlay.
+ *
+ * Uses `WR_OVERLAY` so it composes cleanly with `provideWrOverlay()`
+ * — dialogs render into NGWR's own overlay container and never collide
+ * with other CDK consumers (Material, NG-ZORRO, etc.).
+ *
+ * @example
+ * ```ts
+ * const dialog = inject(WrDialog);
+ *
+ * const ref = dialog.open(ConfirmComponent, {
+ *   data: { message: 'Delete this item?' },
+ *   width: '24rem',
+ * });
+ *
+ * const ok = await ref.awaitClose();
+ * if (ok) remove();
+ * ```
+ *
+ * @see https://ngwr.dev/components/dialog
+ */
+declare class WrDialog {
+    private readonly overlay;
+    private readonly scrollStrategies;
+    private readonly parentInjector;
+    private readonly focusTrapFactory;
+    private readonly isBrowser;
+    open<C, R = unknown, D = unknown>(component: ComponentType<C>, options?: WrDialogOptions<D>): WrDialogRef<C, R>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrDialog, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrDialog>;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Token that exposes the `data` payload passed to `WrDialog.open()`.
+ *
+ * @example
+ * ```ts
+ * @Component({...})
+ * export class ConfirmComponent {
+ *   readonly data = inject<ConfirmData>(WR_DIALOG_DATA);
+ * }
+ * ```
+ */
+declare const WR_DIALOG_DATA: InjectionToken<unknown>;
+
+/**
+ * @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
+ */
+
+/**
+ * Styles a dialog title row. Use on a heading inside an opened dialog.
+ * Auto-assigns an `id` so the dialog panel can reference it via
+ * `aria-labelledby`.
+ *
+ * @example
+ * ```html
+ * <h2 wrDialogTitle>Confirm delete</h2>
+ * ```
+ */
+declare class WrDialogTitle {
+    /** Generated id used for `aria-labelledby` wiring. */
+    readonly id: string;
+    /** @internal */
+    readonly elementRef: ElementRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrDialogTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrDialogTitle, "[wrDialogTitle]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Styles the scrollable body section of a dialog.
+ *
+ * @example
+ * ```html
+ * <div wrDialogContent>…body…</div>
+ * ```
+ */
+declare class WrDialogContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrDialogContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrDialogContent, "[wrDialogContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Footer row, typically holding action buttons.
+ *
+ * @example
+ * ```html
+ * <div wrDialogFooter align="end">
+ *   <wr-btn wrDialogClose>Cancel</wr-btn>
+ *   <wr-btn color="danger" (click)="confirm()">Delete</wr-btn>
+ * </div>
+ * ```
+ */
+declare class WrDialogFooter {
+    /**
+     * Horizontal alignment of the children.
+     *
+     * @default 'end'
+     */
+    readonly align: i0.InputSignal<"center" | "start" | "end">;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrDialogFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrDialogFooter, "[wrDialogFooter]", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Closes the dialog when the host element is clicked.
+ *
+ * Optionally passes a `[wrDialogClose]` value as the close result.
+ *
+ * @example
+ * ```html
+ * <wr-btn wrDialogClose>Cancel</wr-btn>
+ * <wr-btn color="primary" [wrDialogClose]="true">Confirm</wr-btn>
+ * ```
+ */
+declare class WrDialogClose<R = unknown> {
+    /**
+     * Value to pass to `close()`. When unset, the dialog closes with
+     * `undefined`.
+     */
+    readonly result: i0.InputSignal<R | undefined>;
+    private readonly ref;
+    protected onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrDialogClose<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrDialogClose<any>, "[wrDialogClose]", never, { "result": { "alias": "wrDialogClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WR_DIALOG_DATA, WrDialog, WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogRef, WrDialogTitle };
+export type { WrDialogOptions };

package/types/ngwr-directives.d.ts

@@ -0,0 +1,125 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Focus the host element after the first render — or whenever the bound
+ * expression transitions to truthy.
+ *
+ * @example
+ * ```html
+ * <input wrAutofocus />
+ * <input [wrAutofocus]="shouldFocus()" />
+ * ```
+ */
+declare class WrAutofocus {
+    /** Truthy = focus. Defaults to `true` so bare `wrAutofocus` works. */
+    readonly wrAutofocus: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly el;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAutofocus, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAutofocus, "[wrAutofocus]", never, { "wrAutofocus": { "alias": "wrAutofocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Auto-grow a `<textarea>` to fit its content. Optional `minRows` /
+ * `maxRows` bounds the height in rendered rows.
+ *
+ * @example
+ * ```html
+ * <textarea wrAutosize minRows="2" maxRows="8" [(ngModel)]="text"></textarea>
+ * ```
+ */
+declare class WrAutosize {
+    readonly minRows: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly maxRows: _angular_core.InputSignalWithTransform<number, unknown>;
+    private readonly el;
+    private lastValue;
+    constructor();
+    /** @internal */
+    protected onInput(): void;
+    /** Recompute height from `scrollHeight`, clamped to min/max rows. */
+    private resize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAutosize, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAutosize, "textarea[wrAutosize]", never, { "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Fires `(wrClickOutside)` when a pointer event lands outside the host
+ * element. Useful for closing custom poppers / menus.
+ *
+ * @example
+ * ```html
+ * <div class="popup" (wrClickOutside)="close()"> … </div>
+ * ```
+ */
+declare class WrClickOutside {
+    readonly wrClickOutside: _angular_core.OutputEmitterRef<MouseEvent>;
+    private readonly host;
+    private readonly doc;
+    private readonly zone;
+    private readonly destroyRef;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrClickOutside, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrClickOutside, "[wrClickOutside]", never, {}, { "wrClickOutside": "wrClickOutside"; }, never, never, true, never>;
+}
+
+/**
+ * Copy `wrCopyToClipboard` to the system clipboard on host click.
+ *
+ * Uses `navigator.clipboard.writeText` when available, with a hidden
+ * `<textarea>` + `document.execCommand('copy')` fallback for older browsers
+ * and non-secure contexts.
+ *
+ * @example
+ * ```html
+ * <button [wrCopyToClipboard]="value" (copied)="toast('Copied!')">Copy</button>
+ * ```
+ */
+declare class WrCopyToClipboard {
+    /** The text to copy. */
+    readonly wrCopyToClipboard: _angular_core.InputSignal<string>;
+    /** Emitted with the copied text once the write succeeds. */
+    readonly copied: _angular_core.OutputEmitterRef<string>;
+    /** Emitted if the copy fails (denied permission, no clipboard, …). */
+    readonly copyFailed: _angular_core.OutputEmitterRef<unknown>;
+    private readonly doc;
+    /** @internal */
+    protected onClick(): Promise<void>;
+    /** Legacy clipboard write — hidden textarea + execCommand('copy'). */
+    private fallback;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCopyToClipboard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrCopyToClipboard, "[wrCopyToClipboard]", never, { "wrCopyToClipboard": { "alias": "wrCopyToClipboard"; "required": true; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; }, never, never, true, never>;
+}
+
+/**
+ * Reveal-on-scroll directive. Adds the `wr-reveal` host class
+ * immediately and flips it to `wr-reveal--visible` once the element
+ * enters the viewport — pair with the `.wr-reveal` styles in
+ * `ngwr/animations` for a fade-and-slide-up enter.
+ *
+ * SSR-safe: on the server, the host renders in the visible state so
+ * the page isn't blank.
+ *
+ * @example
+ * ```html
+ * <h2 wrReveal>Animates in once visible</h2>
+ * <div wrReveal threshold="0.5" rootMargin="-100px 0px">…</div>
+ * <p wrReveal [once]="false">Re-runs every time it enters the viewport</p>
+ * ```
+ */
+declare class WrReveal {
+    /** Visibility threshold passed to IntersectionObserver. @default 0.1 */
+    readonly threshold: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `rootMargin` passed to IntersectionObserver. @default '0px' */
+    readonly rootMargin: _angular_core.InputSignal<string>;
+    /** Stop observing after the first reveal. @default true */
+    readonly once: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly visible: _angular_core.WritableSignal<boolean>;
+    private readonly el;
+    private readonly destroyRef;
+    private readonly isBrowser;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrReveal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrReveal, "[wrReveal]", never, { "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "rootMargin": { "alias": "rootMargin"; "required": false; "isSignal": true; }; "once": { "alias": "once"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrAutofocus, WrAutosize, WrClickOutside, WrCopyToClipboard, WrReveal };

package/types/ngwr-divider.d.ts

@@ -0,0 +1,73 @@
+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
+ */
+/**
+ * Label alignment on a `<wr-divider>` with projected content.
+ * Ignored when the divider has no label.
+ */
+type WrDividerAlign = '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
+ */
+/**
+ * Line style variant for the divider.
+ */
+type WrDividerType = 'solid' | 'dashed' | 'dotted';
+
+/**
+ * Horizontal separator line. Projected content renders as a label
+ * inline with the line (split into two halves on either side).
+ *
+ * @example
+ * ```html
+ * <wr-divider />
+ * <wr-divider type="dashed" color="primary" [width]="2" />
+ * <wr-divider>OR</wr-divider>
+ * <wr-divider align="start">Section</wr-divider>
+ * ```
+ *
+ * @see https://ngwr.dev/components/divider
+ */
+declare class WrDivider {
+    /**
+     * Color of the divider line. Omit for the neutral default.
+     *
+     * @default null
+     */
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark" | null>;
+    /**
+     * Line style.
+     *
+     * @default 'solid'
+     */
+    readonly type: _angular_core.InputSignal<WrDividerType>;
+    /**
+     * Line width in pixels.
+     *
+     * @default 1
+     */
+    readonly width: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Label position. Only meaningful when the divider has projected
+     * content — otherwise the line is symmetric and alignment has no
+     * visible effect.
+     *
+     * @default 'center'
+     */
+    readonly align: _angular_core.InputSignal<WrDividerAlign>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDivider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDivider, "wr-divider", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrDivider };
+export type { WrDividerType };

package/types/ngwr-donut-chart.d.ts

@@ -0,0 +1,53 @@
+import * as _angular_core from '@angular/core';
+
+interface WrDonutSegment {
+    readonly label: string;
+    readonly value: number;
+    readonly color?: string;
+}
+
+/**
+ * Donut chart. Set `thickness` to 0 for a solid pie. Optional center
+ * text via inputs.
+ *
+ * @example
+ * ```html
+ * <wr-donut-chart [segments]="[
+ *   { label: 'Used', value: 60 },
+ *   { label: 'Free', value: 40 }
+ * ]" centerLabel="Disk" centerValue="60%" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/donut-chart
+ */
+declare class WrDonutChart {
+    readonly segments: _angular_core.InputSignal<readonly WrDonutSegment[]>;
+    /** Diameter in CSS pixels. @default 200 */
+    readonly size: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Inner-ring thickness as a percent of radius (0–100). `0` = solid pie. @default 30 */
+    readonly thickness: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Show the legend under the chart. @default true */
+    readonly showLegend: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Bold value text in the center. */
+    readonly centerValue: _angular_core.InputSignal<string>;
+    /** Smaller label under the value. */
+    readonly centerLabel: _angular_core.InputSignal<string>;
+    private readonly outerR;
+    protected readonly innerR: _angular_core.Signal<number>;
+    protected readonly total: _angular_core.Signal<number>;
+    /** Resolved slices ready for the template — each carries its arc path. */
+    protected readonly slices: _angular_core.Signal<{
+        label: string;
+        value: number;
+        color: string;
+        path: string;
+        percent: number;
+    }[]>;
+    /** SVG path for one donut slice using outer and inner arcs. */
+    private arcPath;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDonutChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDonutChart, "wr-donut-chart", never, { "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrDonutChart };
+export type { WrDonutSegment };

package/types/ngwr-drag-drop.d.ts

@@ -0,0 +1,83 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as i1 from '@angular/cdk/drag-drop';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+
+/** Payload emitted whenever the user finishes a reorder. */
+interface WrSortableReorderEvent<T> {
+    /** The new items array after the move. */
+    readonly items: readonly T[];
+    /** Index the item was dragged from. */
+    readonly previousIndex: number;
+    /** Index the item was dropped at. */
+    readonly currentIndex: number;
+    /** Convenience handle for the dropped item. */
+    readonly item: T;
+}
+
+/**
+ * Drag-to-reorder list. Wraps CDK's `cdkDropList` + `cdkDrag` with a
+ * signal-based items binding — the source array is updated in place and
+ * emitted via 2-way `[(items)]`.
+ *
+ * Drop a single template — it's rendered per item with `let-item
+ * let-index="index"`. Add `[handle]="true"` (or `[wrDragHandle]` inside
+ * your template) to restrict drag start to a handle element.
+ *
+ * @example
+ * ```html
+ * <wr-sortable-list [(items)]="rows" (reorder)="onReorder($event)">
+ *   <ng-template let-row let-i="index">
+ *     <div class="row">
+ *       <span wrDragHandle>≡</span>
+ *       {{ i + 1 }}. {{ row.label }}
+ *     </div>
+ *   </ng-template>
+ * </wr-sortable-list>
+ * ```
+ *
+ * @see https://ngwr.dev/components/drag-drop
+ */
+declare class WrSortableList<T = unknown> {
+    /** Items to render. Two-way — emits the reordered array on drop. */
+    readonly items: _angular_core.ModelSignal<T[]>;
+    /** Layout direction. Drives CDK's `cdkDropListOrientation`. @default 'vertical' */
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    /** Disable all dragging. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Locked axis — restrict drag movement to one axis even diagonally. */
+    readonly lockAxis: _angular_core.InputSignal<"x" | "y" | undefined>;
+    /** `trackBy` for the inner `@for`. Defaults to identity. */
+    readonly trackBy: _angular_core.InputSignal<(index: number, item: T) => unknown>;
+    /** Fired after a successful reorder with the new array + indices. */
+    readonly reorder: _angular_core.OutputEmitterRef<WrSortableReorderEvent<T>>;
+    protected readonly rowTemplate: _angular_core.Signal<TemplateRef<any>>;
+    protected onDrop(event: CdkDragDrop<T[]>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSortableList<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSortableList<any>, "wr-sortable-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "reorder": "reorder"; }, ["rowTemplate"], never, true, never>;
+}
+
+/**
+ * Drag handle for {@link WrSortableList} (and any nested `cdkDrag`).
+ * Composes CDK's `cdkDragHandle` via `hostDirectives` so consumers don't
+ * need to import the CDK selector directly.
+ *
+ * @example
+ * ```html
+ * <wr-sortable-list [(items)]="rows">
+ *   <ng-template let-row>
+ *     <div class="row">
+ *       <span wrDragHandle class="grip">≡</span>
+ *       <span>{{ row.label }}</span>
+ *     </div>
+ *   </ng-template>
+ * </wr-sortable-list>
+ * ```
+ */
+declare class WrDragHandle {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDragHandle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrDragHandle, "[wrDragHandle]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkDragHandle; inputs: {}; outputs: {}; }]>;
+}
+
+export { WrDragHandle, WrSortableList };
+export type { WrSortableReorderEvent };