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; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @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 */ /** 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; /** * 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): 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; /** * @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; export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, wrPresentAsSheet };