ngwr 7.1.0 → 7.2.0

package/types/ngwr-overlay.d.ts

@@ -68,6 +68,74 @@ declare class WrOverlayContainer extends OverlayContainer {
  */
 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
+ */
+
+/** Configuration for responsive (bottom-sheet) overlay presentation. */
+interface WrResponsiveOverlaysConfig {
+    /**
+     * Viewport width (CSS px) at or below which overlays present as a
+     * bottom-sheet instead of a floating panel. @default 640
+     */
+    readonly breakpoint: number;
+}
+/**
+ * When set, overlay services (dialog, select, dropdown, …) present as a
+ * slide-up bottom-sheet on viewports at or below `breakpoint`. `null`
+ * (the default) keeps every overlay floating. Configure via
+ * {@link provideWrResponsiveOverlays}; override per call with a
+ * component's `responsive` option.
+ *
+ * @internal
+ */
+declare const WR_RESPONSIVE_OVERLAYS: InjectionToken<WrResponsiveOverlaysConfig | null>;
+/**
+ * Decide whether an overlay should present as a bottom-sheet for the
+ * current viewport.
+ *
+ * - `responsive === true` — sheet on small viewports regardless of config.
+ * - `responsive === false` — never a sheet.
+ * - `responsive === undefined` — follow the global config (sheet when
+ *   {@link provideWrResponsiveOverlays} is configured).
+ *
+ * SSR-safe: returns `false` when there's no `window`.
+ *
+ * @internal
+ */
+declare function wrPresentAsSheet(responsive: boolean | undefined, config: WrResponsiveOverlaysConfig | null): 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
+ */
+
+/**
+ * Opt every NGWR overlay into responsive presentation — on viewports at or
+ * below `breakpoint`, dialogs / selects / dropdowns and friends slide up as
+ * a full-width bottom-sheet instead of a floating panel. Built on the same
+ * overlay plumbing, so focus-trap, backdrop and scroll-blocking carry over.
+ *
+ * Individual components can still opt out (or in) per instance via their
+ * `responsive` option.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideWrOverlay(), provideWrResponsiveOverlays()],
+ * });
+ *
+ * // Custom breakpoint:
+ * provideWrResponsiveOverlays({ breakpoint: 768 });
+ * ```
+ */
+declare function provideWrResponsiveOverlays(config?: Partial<WrResponsiveOverlaysConfig>): EnvironmentProviders;
+
 /**
  * @license
  *
@@ -107,4 +175,4 @@ declare const WR_OVERLAY: InjectionToken<Overlay>;
  */
 declare const WR_OVERLAY_CONTAINER: InjectionToken<OverlayContainer>;
 
-export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WrOverlayContainer, provideWrOverlay };
+export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, wrPresentAsSheet };

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

@@ -28,8 +28,15 @@ declare class WrPageHeader {
     readonly title: _angular_core.InputSignal<string>;
     /** Secondary line below the title. */
     readonly subtitle: _angular_core.InputSignal<string>;
+    /**
+     * Stack the title and actions vertically when the header's own box is too
+     * narrow to sit them side by side (a container query on its own width, not
+     * the viewport — so it adapts inside a narrow column or split pane).
+     * @default false
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPageHeader, "wr-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, {}, never, ["[wrPageHeaderBreadcrumbs]", "[wrPageHeaderActions]", "[wrPageHeaderExtra]"], true, never>;
 }
 
 export { WrPageHeader };

package/types/ngwr-popover.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 /**
  * @license
@@ -37,12 +38,20 @@ declare class WrPopover {
     readonly showDelay: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Tooltip only — delay before hiding, in ms. @default 60 */
     readonly hideDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Popover mode only — present the panel as a full-width bottom-sheet on
+     * small viewports instead of an anchored panel. `undefined` follows the
+     * app-wide `provideWrResponsiveOverlays()` setting; `true`/`false`
+     * overrides it. Tooltips never become sheets. @default undefined
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
     /** Fires after the panel opens. */
     readonly opened: _angular_core.OutputEmitterRef<void>;
     /** Fires after the panel closes. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
     private readonly host;
     private readonly overlay;
+    private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
@@ -83,7 +92,7 @@ declare class WrPopover {
     private scheduleHoverClose;
     private clearHoverClose;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPopover, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopover, "[wrPopover]", never, { "content": { "alias": "wrPopover"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopover, "[wrPopover]", never, { "content": { "alias": "wrPopover"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 export { WrPopover };

package/types/ngwr-select.d.ts

@@ -1,6 +1,7 @@
 import * as ngwr_i18n from 'ngwr/i18n';
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal, TemplateRef, ElementRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';
 
@@ -154,6 +155,13 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Pill-shaped corners on the trigger. @default false */
     readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Present the option panel as a full-width bottom-sheet on small
+     * viewports instead of an anchored dropdown. `undefined` follows the
+     * app-wide `provideWrResponsiveOverlays()` setting; `true`/`false`
+     * overrides it. @default undefined
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
     /**
      * Behavior mode. `<wr-select>` is the unified combobox primitive —
      * pick the shape via `[mode]`:
@@ -309,6 +317,7 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     protected readonly searchDisplay: _angular_core.Signal<string>;
     private readonly host;
     private readonly overlay;
+    private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
@@ -346,7 +355,7 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**

package/types/ngwr-stepper.d.ts

@@ -80,6 +80,13 @@ declare class WrStepper implements WrStepperContext {
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Lock steps after the latest completed one. @default false */
     readonly linear: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Drop a horizontal stepper to a vertical layout when its own box is too
+     * narrow for the row (a container query on its own width, not the
+     * viewport — so it adapts inside a narrow column or side panel). No effect
+     * when `orientation` is already `vertical`. @default false
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly steps: _angular_core.Signal<readonly WrStep[]>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
@@ -92,7 +99,7 @@ declare class WrStepper implements WrStepperContext {
     next(): void;
     prev(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrStepper, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStepper, "wr-stepper", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["steps"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStepper, "wr-stepper", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["steps"], ["*"], true, never>;
 }
 
 export { WR_STEPPER, WrStep, WrStepper };

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. `'21.2.13'`), not ngwr's.
  */
-declare const NGWR_VERSION = "7.1.0";
+declare const NGWR_VERSION = "7.2.0";
 
 /**
  * @license