ngwr 10.2.1 → 11.1.0

package/types/ngwr-input-testing.d.ts

@@ -0,0 +1,84 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @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
+ */
+
+/** Narrows which `[wrInput]` a harness query matches. */
+interface WrInputHarnessFilters extends BaseHarnessFilters {
+    /** Match the current value — a string is an exact match, a RegExp is tested. */
+    readonly value?: string | RegExp;
+    /** Match the placeholder — a string is an exact match, a RegExp is tested. */
+    readonly placeholder?: string | RegExp;
+    /** Match only enabled (`false`) or only disabled (`true`) fields. */
+    readonly disabled?: boolean;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Test harness for `[wrInput]` — the directive form, on a real `<input>` or
+ * `<textarea>`.
+ *
+ * There is no `<wr-input>` component to wrap: ngwr styles the native control in
+ * place, which is why the value, the placeholder and the disabled state are all
+ * read straight off the host. {@link setValue} dispatches `input` AND `change`,
+ * because a signal-forms control listens to the first and classic `[(ngModel)]`
+ * setups to the second — typing into only one of them makes a harness that works
+ * in some consumers' specs and not others.
+ *
+ * @example
+ * ```ts
+ * const email = await loader.getHarness(WrInputHarness.with({ placeholder: 'Email' }));
+ * await email.setValue('ada@example.test');
+ * expect(await email.getValue()).toBe('ada@example.test');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrInputHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrInputHarnessFilters): HarnessPredicate<WrInputHarness>;
+    getValue(): Promise<string>;
+    /**
+     * Type a value in, the way a user would as far as the framework can tell.
+     *
+     * `input` is the one that carries the value — a signal-forms control listens to
+     * it, and so does Angular's `DefaultValueAccessor`, which is what `[(ngModel)]`
+     * and a reactive form bind through (its listeners are `input`, `blur` and the
+     * two composition events; `change` is NOT among them). `change` is dispatched
+     * after it for the consumer's own `(change)` handler: a browser defers that
+     * event to the commit — blur, or Enter — which a harness write never reaches, so
+     * a spec binding it would otherwise never see it fire.
+     */
+    setValue(value: string): Promise<void>;
+    /** Clear the field, dispatching the same pair of events as {@link setValue}. */
+    clear(): Promise<void>;
+    getPlaceholder(): Promise<string>;
+    isDisabled(): Promise<boolean>;
+    isReadonly(): Promise<boolean>;
+    /** `input` or `textarea` — the directive styles both. */
+    getTagName(): Promise<string>;
+    /**
+     * Whether the field is marked invalid.
+     *
+     * `<wr-form-field>` sets `aria-invalid` when it has an error to describe, so
+     * this answers what a screen reader is told rather than what the model thinks.
+     */
+    isInvalid(): Promise<boolean>;
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    isFocused(): Promise<boolean>;
+}
+
+export { WrInputHarness };
+export type { WrInputHarnessFilters };

package/types/ngwr-input.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 /**
  * @license
@@ -56,6 +57,7 @@ declare class WrInput {
      * referenced an id that existed nowhere and the input had no label at all.
      */
     protected readonly resolvedId: _angular_core.Signal<string | null>;
+    constructor();
     /**
      * Announced state, taken from the surrounding `<wr-form-field>`.
      *
@@ -68,11 +70,18 @@ declare class WrInput {
     protected readonly describedBy: _angular_core.Signal<string | null>;
     /**
      * Control size. Named `wrSize` (not `size`) so it never clashes with the
-     * native `<input size>` attribute. @default 'md'
+     * native `<input size>` attribute. Unset, it falls back to
+     * `provideWrConfig({ input: { size } })`. @default 'md'
      */
-    readonly wrSize: _angular_core.InputSignal<WrInputSize>;
-    /** Pill-shaped corners. @default false */
-    readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    readonly wrSize: _angular_core.InputSignal<WrInputSize | null>;
+    /**
+     * Pill-shaped corners. Unset, it falls back to
+     * `provideWrConfig({ input: { rounded } })`; `[rounded]="false"` turns a
+     * configured `true` back off. @default false
+     */
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean | null, BooleanInput>;
+    protected readonly resolvedSize: _angular_core.Signal<"sm" | "md" | "lg">;
+    protected readonly resolvedRounded: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInput, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrInput, "input[wrInput], textarea[wrInput]", never, { "wrSize": { "alias": "wrSize"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -135,8 +144,13 @@ declare class WrInputSuffix {
  * @see https://ngwr.dev/reference/components/input
  */
 declare class WrInputGroup {
-    /** Pill-shaped corners. @default false */
-    readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Pill-shaped corners. Unset, it falls back to
+     * `provideWrConfig({ input: { rounded } })` — the same key the inner `[wrInput]`
+     * reads. @default false
+     */
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean | null, BooleanInput>;
+    protected readonly resolvedRounded: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputGroup, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputGroup, "wr-input-group", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;

package/types/ngwr-knob.d.ts

@@ -74,7 +74,25 @@ declare class WrKnob implements FormValueControl<number> {
     protected onPointerDown(event: PointerEvent): void;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerUp(event: PointerEvent): void;
+    /**
+     * A bound field learns it may show its validation copy from `touch`, and
+     * pointer-up cannot be the only source: a knob reached by Tab and moved with
+     * the arrows would leave the field untouched forever. `wr-rating`, whose
+     * template this one otherwise mirrors, emits on blur for exactly this reason.
+     */
+    protected onBlur(): void;
     protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * Nearest step, measured FROM `min`. A grid anchored at zero offers values the
+     * arrows can never reach whenever `min` is not a multiple of `step` — with
+     * `min: 5, step: 10` the middle of the arc used to commit 60, off a grid whose
+     * points are 5, 15, … 55, 65. Rounded at six decimals because a tenth is not a
+     * binary fraction: three arrow presses at `step: 0.1` otherwise announce
+     * `aria-valuenow="0.30000000000000004"` and print it in the dial. Same shape as
+     * `wr-slider`'s `snap`, deliberately — including Home / End, so a range that is
+     * not a whole number of steps stops at the last reachable value.
+     */
+    private snap;
     private updateFromPointer;
     private commit;
     private arcPath;

package/types/ngwr-layout.d.ts

@@ -25,6 +25,7 @@ declare class WrLayoutSider {
     readonly reverse: i0.InputSignalWithTransform<boolean, any>;
     /** Emits whenever `collapsed` changes (in addition to the two-way `[(collapsed)]`). */
     readonly collapsedChanged: i0.OutputEmitterRef<boolean>;
+    constructor();
     protected readonly classes: i0.Signal<string>;
     /** Imperative toggle helper — `[(collapsed)]` still works alongside this. */
     toggle(): void;

package/types/ngwr-lightbox.d.ts

@@ -20,14 +20,22 @@ import { TemplateRef } from '@angular/core';
  */
 declare class WrLightbox {
     /** Accessible name. Falls back to `image.close`, then `'Close preview'`. */
+    /** Accessible name of the thumbnail button. Falls back to `alt`, then `image.open`. */
+    readonly openLabel: _angular_core.InputSignal<string | null>;
     readonly closeLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedCloseLabel: _angular_core.Signal<string>;
     /** Image source. */
     readonly src: _angular_core.InputSignal<string>;
     /** Alt text. Required for a11y; falls back to an empty string. @default '' */
     readonly alt: _angular_core.InputSignal<string>;
-    /** Optional preview src — shown until the full image loads. */
+    /**
+     * Lighter source for the THUMBNAIL — a small or blurred copy, so the grid does not
+     * pull full-size images. The viewer always shows `src`; the thumbnail does not swap
+     * to it later.
+     */
     readonly preview: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedOpenLabel: _angular_core.Signal<string>;
+    protected readonly resolvedViewerLabel: _angular_core.Signal<string>;
     /** Disable the click-to-zoom lightbox. @default false */
     readonly disablePreview: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Caption shown under the full image in the lightbox. */
@@ -59,11 +67,17 @@ declare class WrLightbox {
     protected onViewerSwipeStart(event: TouchEvent): void;
     protected onViewerSwipeMove(event: TouchEvent, viewer: HTMLElement): void;
     protected onViewerSwipeEnd(event: TouchEvent, viewer: HTMLElement): void;
-    protected onLoad(): void;
+    /**
+     * The thumbnail has settled, one way or the other. A failure counts: `--loading`
+     * animates a shimmer AND sets `opacity: 0` on the image, so a broken `src` with no
+     * error path left an invisible box shimmering for ever instead of showing its alt
+     * text.
+     */
+    protected onSettled(): void;
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrLightbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "disablePreview": { "alias": "disablePreview"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "openLabel": { "alias": "openLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "disablePreview": { "alias": "disablePreview"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrLightbox };

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

@@ -25,6 +25,13 @@ interface WrLineSeries {
  */
 declare class WrLineChart {
     readonly series: _angular_core.InputSignal<readonly WrLineSeries[]>;
+    /**
+     * Accessible name of the chart. The legend carries the series NAMES only — the numbers
+     * are nowhere in text — so without this the plot is nothing at all to a screen reader.
+     * Falls back to `lineChart.label`.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Labels for the X axis (one per data point). */
     readonly xLabels: _angular_core.InputSignal<readonly string[]>;
     /** Chart pixel height. @default 240 */
@@ -48,7 +55,7 @@ declare class WrLineChart {
     protected readonly hoveredIndex: _angular_core.WritableSignal<number | null>;
     protected readonly resolvedSeries: _angular_core.Signal<{
         label: string;
-        data: readonly number[];
+        data: number[];
         color: string;
     }[]>;
     protected readonly bounds: _angular_core.Signal<{
@@ -83,7 +90,7 @@ declare class WrLineChart {
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly hostEl: HTMLElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrLineChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLineChart, "wr-line-chart", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; "xLabels": { "alias": "xLabels"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLineChart, "wr-line-chart", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "xLabels": { "alias": "xLabels"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrLineChart };