ngwr 13.0.0 → 14.0.0

package/types/ngwr-tabs.d.ts

@@ -8,7 +8,9 @@ import { TemplateRef, InjectionToken, Signal, ElementRef } from '@angular/core';
  *   panel when this tab is active.
  * - **Router tab** — set `routerLink` and the tab becomes a link; the
  *   parent skips its content panel and the consumer drops a
- *   `<router-outlet>` below the tab strip.
+ *   `<router-outlet>` below the tab strip. Router mode needs the
+ *   `WrTabsRouting` directive from `ngwr/tabs/router` in the same
+ *   `imports: []`; without it a strip carrying a `routerLink` throws.
  */
 declare class WrTab {
     /** Visible label on the tab strip. */
@@ -26,7 +28,30 @@ declare class WrTab {
     readonly contentTpl: _angular_core.Signal<TemplateRef<any>>;
     private readonly parent;
     private readonly destroyRef;
+    /**
+     * The routing adapter published by `WrTabsRouting` on the parent `<wr-tabs>`
+     * element. A `<wr-tab>` is DECLARED inside `<wr-tabs>` in the consumer's
+     * template — content projection moves where it renders, not where it injects
+     * — so the parent's element injector is this one's, the same walk that
+     * resolves `WR_TABS` above.
+     */
+    private readonly routing;
     protected readonly isRouter: _angular_core.Signal<boolean>;
+    /**
+     * Resolved href for a router tab — `null` for a content tab, and for a
+     * disabled one, which is how the anchor stops navigating at all.
+     * @internal
+     */
+    readonly routerHref: _angular_core.Signal<string | null>;
+    /**
+     * Whether the current route selects this tab. The strip publishes it as BOTH
+     * `aria-selected` and the `--active` class, off this one read, so the
+     * announced selection and the painted one cannot drift apart.
+     * @internal
+     */
+    readonly routerActive: _angular_core.Signal<boolean>;
+    /** Hand a click on this tab's anchor to the routing adapter. @internal */
+    navigate(event: MouseEvent): void;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTab, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTab, "wr-tab", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -65,6 +90,54 @@ interface WrTabsContext {
  */
 declare const WR_TABS: InjectionToken<WrTabsContext>;
 
+/**
+ * @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
+ */
+
+/**
+ * What a `<wr-tabs>` needs from a router in order to render a router tab, and
+ * nothing more. Three questions — the href to put on the anchor, whether the
+ * current URL selects it, and what a click should do.
+ *
+ * It exists so that `ngwr/tabs` can name the capability without naming
+ * `@angular/router`: a directive listed in `imports: []` lands in the compiled
+ * component's `dependencies` whether or not its branch of the template ever
+ * runs, so `RouterLink` + `RouterLinkActive` on the strip charged every content
+ * tab strip the whole router — 73.9 kB of a 144.8 kB component. The
+ * implementation lives at `ngwr/tabs/router`, which a consumer imports only
+ * when they use router tabs.
+ *
+ * `href` and `isActive` are read from computeds and must both be reactive to
+ * navigation: a RELATIVE `routerLink` resolves against the active route, so its
+ * href changes when the route does, exactly as `RouterLink` recomputes its own.
+ */
+interface WrTabsRoutingAdapter {
+    /**
+     * Serialized href for a tab's `routerLink`, or `null` when the adapter cannot
+     * build one.
+     */
+    href(commands: string | readonly string[]): string | null;
+    /**
+     * Whether the current URL selects this tab. Matched the way `routerLinkActive`
+     * matches without `[routerLinkActiveOptions]`: a path prefix, not an exact URL.
+     */
+    isActive(commands: string | readonly string[]): boolean;
+    /**
+     * Handle a click on a tab anchor. A modified or non-primary click is left to
+     * the browser, so ctrl/cmd-click still opens the tab in a new window.
+     */
+    navigate(commands: string | readonly string[], event: MouseEvent): void;
+}
+/**
+ * Token a `<wr-tabs>` reads to find out whether router tabs are usable. Provided
+ * by the `WrTabsRouting` directive from `ngwr/tabs/router`; absent by default,
+ * which is what keeps `@angular/router` out of a content-only strip.
+ */
+declare const WR_TABS_ROUTING: InjectionToken<WrTabsRoutingAdapter>;
+
 /**
  * Tabbed container. Two modes depending on the child `<wr-tab>`
  * definitions:
@@ -73,7 +146,10 @@ declare const WR_TABS: InjectionToken<WrTabsContext>;
  *   active-tab panel automatically.
  * - **Router** — any child with `routerLink` switches the whole strip
  *   into router mode; the parent skips its panel so the consumer can
- *   drop a `<router-outlet>` after it.
+ *   drop a `<router-outlet>` after it. That mode needs the `WrTabsRouting`
+ *   directive from `ngwr/tabs/router` alongside `WrTabs` in `imports: []`
+ *   — the strip itself names no `@angular/router` symbol, which is what
+ *   keeps a content-only strip free of the router.
  *
  * @example
  * ```html
@@ -83,7 +159,7 @@ declare const WR_TABS: InjectionToken<WrTabsContext>;
  *   <wr-tab key="two" title="Two">Second panel</wr-tab>
  * </wr-tabs>
  *
- * <!-- router tabs -->
+ * <!-- router tabs: imports: [WrTabs, WrTab, WrTabsRouting] -->
  * <wr-tabs>
  *   <wr-tab title="Overview" routerLink="overview" />
  *   <wr-tab title="Details" routerLink="details" />
@@ -108,7 +184,22 @@ declare class WrTabs implements WrTabsContext {
      * directive, which writes `valueSignal`, so the read stays reactive.
      */
     private readonly isRtl;
-    /** When any child has a routerLink, the whole strip switches to router mode. */
+    /**
+     * The routing adapter, when `WrTabsRouting` from `ngwr/tabs/router` is in the
+     * consumer's `imports`. `null` is the default and the whole point: the strip
+     * has no `@angular/router` import of its own, so a content-only tab strip
+     * costs no router bytes.
+     */
+    private readonly routing;
+    /**
+     * When any child has a routerLink, the whole strip switches to router mode.
+     *
+     * Throws rather than degrading when the adapter is missing. Falling back to
+     * content mode would render the tabs as `<button>`s that navigate nowhere and
+     * open an empty panel — a strip that looks right and does nothing, with the
+     * one missing import unnamed. The route is what selects a tab here, so there
+     * is no half of this that still works.
+     */
     protected readonly isRouter: _angular_core.Signal<boolean>;
     /** Content-mode: the tab whose key matches `active()` (or the first tab if none yet). */
     protected readonly activeTab: _angular_core.Signal<WrTab | null>;
@@ -123,6 +214,12 @@ declare class WrTabs implements WrTabsContext {
     /** Recompute which edges can scroll, from the strip's scroll metrics. @internal */
     protected updateFades(): void;
     protected onTabClick(tab: WrTab): void;
+    /**
+     * Click on a router tab's anchor. The anchor carries a real `href`, so a
+     * modified or middle click is left alone and the browser opens it the way it
+     * opens any link; only a plain left click is turned into a navigation.
+     */
+    protected onRouterTabClick(tab: WrTab, event: MouseEvent): void;
     /** Per-instance prefix, so keys only have to be unique within one group. */
     private readonly uid;
     /** Header id for `aria-labelledby` on the panel. @internal */
@@ -135,5 +232,5 @@ declare class WrTabs implements WrTabsContext {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTabs, "wr-tabs", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["tabs"], never, true, never>;
 }
 
-export { WR_TABS, WrTab, WrTabs };
-export type { WrTabsContext };
+export { WR_TABS, WR_TABS_ROUTING, WrTab, WrTabs };
+export type { WrTabsContext, WrTabsRoutingAdapter };

package/types/ngwr-textarea.d.ts

@@ -77,6 +77,15 @@ declare class WrTextarea implements FormValueControl<string> {
     private readonly platformId;
     private readonly isBrowser;
     private readonly hostEl;
+    /**
+     * Ambient reading direction, read by the horizontal half of the resize drag.
+     *
+     * Optional so a bare `TestBed` — or any consumer that never set a direction —
+     * needs no provider; `Directionality` is root-provided, so `null` only ever
+     * means "nobody asked", which is LTR. Read inside the handler rather than
+     * cached, so a runtime flip needs no subscription to `Directionality.change`.
+     */
+    private readonly dir;
     private resizing;
     private resizeStartY;
     private resizeStartX;

package/types/ngwr-tree.d.ts

@@ -205,6 +205,13 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
     protected readonly expandLabel: _angular_core.Signal<string>;
     protected readonly collapseLabel: _angular_core.Signal<string>;
     protected readonly chipRemoveLabel: (params?: ngwr_i18n.WrI18nParams) => string;
+    /**
+     * The overflow chip past `maxTagCount`. It was the literal `+{{ extra }} more`
+     * in the template while `wr-select` — the same chip, the same string — read
+     * `select.more` from the catalog, so a Russian tree rendered
+     * `["Черновик", "+2 more"]`.
+     */
+    protected readonly chipMoreLabel: (params?: ngwr_i18n.WrI18nParams) => string;
     /** Flattened list of currently visible nodes — what the template renders. */
     protected readonly flat: _angular_core.Signal<readonly FlatNode<TId>[]>;
     protected readonly selectedSet: _angular_core.Signal<Set<TId>>;

package/types/ngwr-utils.d.ts

@@ -158,6 +158,52 @@ declare function round(value: number, decimals?: number): number;
  */
 declare const numAttr: (fallback: number) => (value: unknown) => number;
 
+/**
+ * @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
+ */
+/**
+ * Answers whether a value can be composed **into** a larger CSS expression
+ * without escaping the slot it was given — a colour inside a `linear-gradient()`
+ * the component builds, an entry the component joins into a custom property a
+ * stylesheet then substitutes.
+ *
+ * It is a containment check, not a colour parser. It says the value cannot
+ * terminate the construct the library wrapped around it; it says nothing about
+ * whether the value is a colour a browser will accept, and a rejected value
+ * should fall back to the component's own default rather than be repaired.
+ *
+ * **A value bound straight to `[style.background]` needs none of this.** There
+ * is nothing to break out of there, and Angular applies style values through
+ * CSSOM by design — validating those would amount to refusing style values in a
+ * style binding.
+ *
+ * Rejected, and each one is a way out of the slot:
+ *
+ * - a `)` the value never opened — `red), url(…), linear-gradient(red` is the
+ *   shape that turns a colour into an extra background layer the browser fetches;
+ * - a top-level `,` — a `<color>` is one value, so a comma at depth 0 means the
+ *   payload has reached the slot next to the one it was handed;
+ * - `;` `{` `}` a quote, a backslash, `!`, or a CSS comment delimiter;
+ * - any function outside {@link ALLOWED_FUNCTIONS} — `url()` above all.
+ *
+ * Top-level whitespace is allowed: `red 20%` is a legitimate gradient stop, and
+ * without a comma or a bare `)` it cannot reach anything.
+ *
+ * @example
+ * ```ts
+ * isSafeCssValue('var(--wr-color-primary)');                        // true
+ * isSafeCssValue('color-mix(in srgb, red 50%, blue)');              // true
+ * isSafeCssValue('red), url("https://x.test/beacon"), linear-gradient(red'); // false
+ * ```
+ *
+ * @param value Raw value handed to the component.
+ * @returns `true` when the value stays inside its slot.
+ */
+declare function isSafeCssValue(value: string): boolean;
+
 /**
  * @license
  *
@@ -419,6 +465,38 @@ declare function hasModifier(event: KeyboardEvent): boolean;
  * keys like `Backspace` or `Tab`.
  */
 declare function isPrintableKey(event: KeyboardEvent): boolean;
+/**
+ * True while an input method is composing — the key belongs to the IME, not to
+ * your handler. **Return early on it in every `keydown` handler that reads
+ * Enter, Escape or an arrow on, or above, a field that accepts typed text.**
+ *
+ * A Japanese or Chinese user reaches every character through a conversion. From
+ * `compositionstart` until `compositionend` a candidate window is open, and
+ * those keys are how it is driven: Enter accepts the candidate, Escape cancels
+ * the conversion back to kana, the arrows walk the candidate list. A component
+ * that acts on them anyway takes the key away from the IME mid-word — the
+ * overlay closes instead of the candidate window, and the half-composed reading
+ * the user was still choosing between is gone with it.
+ *
+ * Both halves of the test are needed. `isComposing` is the standard flag, but
+ * Safari fires `compositionend` *before* the `keydown` of the Enter that commits
+ * a candidate, so that one arrives with `isComposing === false` and only the
+ * legacy `keyCode` of `229` — the sentinel every engine sets on a key it handed
+ * to the input method — to say where it came from.
+ *
+ * `keydown` is the whole scope. It does NOT answer "is a composition in
+ * progress" for an `input` or `blur` handler: on the committing keystroke the
+ * two disagree by design. A component that needs the state *between* events
+ * tracks it with the `compositionstart` / `compositionend` pair instead.
+ *
+ * ```ts
+ * protected onKeydown(event: KeyboardEvent): void {
+ *   if (isComposing(event)) return;
+ *   // …
+ * }
+ * ```
+ */
+declare function isComposing(event: KeyboardEvent): boolean;
 
 /**
  * @license
@@ -446,5 +524,5 @@ declare function isPrintableKey(event: KeyboardEvent): boolean;
  */
 declare function badgeLog(badgeText: string, color: string, message: unknown): void;
 
-export { KEYS, badgeLog, clamp, debounce, getFocusableElements, getRootFontSize, hasModifier, isDefined, isNonEmptyArray, isObservable, isPrintableKey, noop, numAttr, randomId, resolveCssSize, round, throttle, trapFocus };
+export { KEYS, badgeLog, clamp, debounce, getFocusableElements, getRootFontSize, hasModifier, isComposing, isDefined, isNonEmptyArray, isObservable, isPrintableKey, isSafeCssValue, noop, numAttr, randomId, resolveCssSize, round, throttle, trapFocus };
 export type { Maybe, ResolveCssSizeOptions, ResolvedCssSize, SafeAny, WrDebouncedFn, WrKey, WrThrottledFn };

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-declare const NGWR_VERSION = "13.0.0";
+declare const NGWR_VERSION = "14.0.0";
 
 /**
  * @license

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

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate, ComponentHarness } from '@angular/cdk/testing';
-import { WrWindowState } from 'ngwr/window';
+import { WrWindowState, WrWindowChromeSize } from 'ngwr/window';
 
 /**
  * @license
@@ -101,8 +101,16 @@ declare class WrWindowHarness extends ContentContainerComponentHarness {
      * invariant — see {@link hasMinimizeButton}.
      */
     getOs(): Promise<string>;
-    /** The title-bar density — `normal` or `compact`. */
-    getChromeSize(): Promise<string>;
+    /**
+     * The title-bar density — `sm` or `md`.
+     *
+     * Typed as the union rather than `string`, so a value added to
+     * `WrWindowChromeSize` fails this method's compile instead of quietly
+     * answering `md` for it. Only `sm` carries a modifier class: `md` is the
+     * default and paints from the base block, so its answer is the absence of
+     * the other one.
+     */
+    getChromeSize(): Promise<WrWindowChromeSize>;
     /**
      * Where the window is and how big, in CSS pixels.
      *

package/types/ngwr-window.d.ts

@@ -14,11 +14,18 @@ import * as ngwr_i18n from 'ngwr/i18n';
 /**
  * Chrome bar density.
  *
- * - `normal` (default) — 2.25rem bar, regular title font.
- * - `compact` — 1.625rem bar, smaller title + tighter action dots; useful
- *   for utility / docked panels where vertical space is precious.
+ * - `md` (default) — 2.25rem bar, regular title font.
+ * - `sm` — 1.625rem bar, smaller title + tighter action dots; useful for
+ *   utility / docked panels where vertical space is precious.
+ *
+ * Spelled `sm` / `md` rather than `compact` / `normal` because this is a
+ * density, and v8 renamed every density value in the library to the `sm` /
+ * `md` / `lg` scale. This union was missed by that migration and kept the
+ * retired vocabulary for three majors; `migration-v14` finishes the job.
+ * `WrWindowState`'s own `'normal'` is NOT this word — a window state is not a
+ * size — and stays as it is.
  */
-type WrWindowChromeSize = 'compact' | 'normal';
+type WrWindowChromeSize = 'sm' | 'md';
 
 /**
  * @license

package/window/styles/_index.scss

@@ -69,7 +69,7 @@
 
   // Compact title bar — useful for utility / docked panels where every
   // pixel of vertical space matters.
-  &--chrome-compact {
+  &--chrome-sm {
     --wr-window-chrome-height: 1.625rem;
     --wr-window-title-size: var(--wr-text-xs);
     --wr-window-action-size: 1.125rem;