ngwr 6.0.0 → 7.0.0

package/toolbar/styles/_index.scss

@@ -0,0 +1,65 @@
+@use '../../theme/styles' as theme;
+
+.wr-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  // Make sure the toolbar always claims the full available row, both when
+  // its parent is a block and when it's a flex row item (doc snippets,
+  // grid cells). Without this the host shrinks to its content width and
+  // the start/center/end zones collapse against each other.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  min-height: 3rem;
+  padding: 0.5rem 0.875rem;
+  background: var(--wr-color-white);
+  border: 1px solid var(--wr-color-light);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__zone {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+
+    &--start {
+      flex: 0 0 auto;
+    }
+
+    &--center {
+      flex: 1 1 auto;
+      justify-content: center;
+    }
+
+    &--end {
+      flex: 0 0 auto;
+      margin-left: auto;
+    }
+  }
+
+  // Subtle hairline divider between adjacent zones — only shown when both
+  // sides have content (the `:empty` rule above collapses unused zones).
+  &__zone--center + &__zone--end,
+  &__zone--start + &__zone--center {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -0.5rem;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 1.25rem;
+      width: 1px;
+      background: var(--wr-color-light);
+    }
+  }
+}

package/tree/styles/_index.scss

@@ -0,0 +1,271 @@
+@use '../../theme/styles' as theme;
+
+.wr-tree {
+  --wr-tree-indent: 1.25rem;
+
+  display: block;
+  font-family: var(--wr-font-family-base);
+  font-size: 0.875rem;
+  color: var(--wr-color-dark);
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.3125rem 0.5rem;
+    padding-left: calc(0.5rem + var(--wr-tree-depth, 0) * var(--wr-tree-indent));
+    border-radius: var(--wr-border-radius-sm);
+    cursor: pointer;
+    user-select: none;
+    outline: 0;
+    transition:
+      background var(--wr-transition-base),
+      color var(--wr-transition-base);
+
+    &:hover:not(.wr-tree__row--disabled) {
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+    }
+
+    &--selected {
+      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      color: var(--wr-color-primary);
+    }
+
+    // Visible ring only when the row truly has keyboard focus — not
+    // just because it's the roving-tabindex cursor row.
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.25);
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+  }
+
+  &__toggle {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    width: 1rem;
+    height: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--wr-color-medium);
+    cursor: pointer;
+    border-radius: var(--wr-border-radius-sm);
+    transition: transform var(--wr-transition-base);
+
+    &:hover:not(:disabled) {
+      color: var(--wr-color-primary);
+    }
+
+    &--leaf {
+      visibility: hidden;
+    }
+  }
+
+  &__row[aria-expanded='true'] &__toggle {
+    transform: rotate(90deg);
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &--disabled {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  //
+  // Combobox-mode chrome — trigger button + chips + chevron.
+  // Activated by [openOn]="overlay" (replaces the deprecated
+  // standalone wr-tree-select entry-point).
+  //
+
+  &--combobox {
+    --wr-tree-trigger-color: var(--wr-color-dark);
+    --wr-tree-trigger-bg: var(--wr-color-white);
+    --wr-tree-trigger-border: var(--wr-color-light);
+    --wr-tree-trigger-radius: var(--wr-border-radius-base);
+    --wr-tree-trigger-padding-y: 0.4375rem;
+    --wr-tree-trigger-padding-x: 0.75rem;
+    --wr-tree-trigger-font-size: 0.875rem;
+    --wr-tree-trigger-line-height: 1.25rem;
+    --wr-tree-panel-max-height: 18rem;
+
+    display: inline-flex;
+    vertical-align: middle;
+
+    &.wr-tree--disabled {
+      --wr-tree-trigger-color: var(--wr-color-medium);
+      --wr-tree-trigger-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    }
+  }
+
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    min-width: 12rem;
+    appearance: none;
+    background: var(--wr-tree-trigger-bg);
+    color: var(--wr-tree-trigger-color);
+    border: 1px solid var(--wr-tree-trigger-border);
+    border-radius: var(--wr-tree-trigger-radius);
+    padding: var(--wr-tree-trigger-padding-y) var(--wr-tree-trigger-padding-x);
+    font-family: var(--wr-font-family-base);
+    font-size: var(--wr-tree-trigger-font-size);
+    line-height: var(--wr-tree-trigger-line-height);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      border-color var(--wr-transition-base),
+      box-shadow var(--wr-transition-base);
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--wr-color-primary);
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &--open &__trigger {
+    border-color: var(--wr-color-primary);
+    box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+  }
+
+  &__value,
+  &__placeholder {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__placeholder {
+    color: rgba(var(--wr-color-medium-rgb), 0.85);
+  }
+
+  &__chevron {
+    --wr-icon-size: 1rem;
+    flex: 0 0 auto;
+    color: var(--wr-color-medium);
+    transition: transform var(--wr-transition-base);
+  }
+
+  &--open &__chevron {
+    transform: rotate(180deg);
+  }
+
+  &__clear {
+    --wr-icon-size: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 999px;
+    color: var(--wr-color-medium);
+    cursor: pointer;
+    transition:
+      background 0.12s ease,
+      color 0.12s ease;
+
+    &:hover {
+      background: rgba(var(--wr-color-dark-rgb), 0.06);
+      color: var(--wr-color-dark);
+    }
+  }
+
+  // Multi-mode trigger chrome — chip layout.
+
+  &--multi &__trigger {
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2);
+  }
+
+  &__chips {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    max-width: 100%;
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    border-radius: 999px;
+    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    color: var(--wr-color-primary);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    user-select: none;
+  }
+
+  &__chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__chip-remove {
+    --wr-icon-size: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: background 0.12s ease;
+
+    &:hover {
+      background: rgba(var(--wr-color-primary-rgb), 0.2);
+    }
+  }
+
+  &__chip--more {
+    background: rgba(var(--wr-color-dark-rgb), 0.08);
+    color: rgba(var(--wr-color-dark-rgb), 0.7);
+  }
+}
+
+.wr-tree-overlay {
+  padding-top: 0.25rem;
+}
+
+.wr-tree-panel {
+  background: var(--wr-color-white);
+  border: 1px solid var(--wr-color-light);
+  border-radius: var(--wr-border-radius-base);
+  box-shadow: var(--wr-shadow-overlay);
+  padding: 0.375rem;
+  max-height: var(--wr-tree-panel-max-height, 18rem);
+  overflow-y: auto;
+}

package/types/ngwr-affix.d.ts

@@ -0,0 +1,43 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Stick-on-scroll directive. Combines native CSS `position: sticky` with
+ * an `IntersectionObserver`-driven `--affixed` state class, so consumers
+ * can style the element differently while it's pinned (e.g. add a
+ * shadow, change the background, shrink the height).
+ *
+ * The host gets `position: sticky; top: ${offsetTop}px;` inline. A tiny
+ * sentinel `<div>` is inserted just before the host — when the sentinel
+ * scrolls out of view, the host is "stuck" and gets `wr-affix--active`
+ * + an `(wrAffixChange)` emission.
+ *
+ * Works inside any scroll container without configuration — CSS sticky
+ * picks the nearest scrollable ancestor automatically.
+ *
+ * @example
+ * ```html
+ * <header wrAffix [wrAffixOffsetTop]="0">
+ *   <!-- adds a shadow once stuck -->
+ * </header>
+ * ```
+ *
+ * ```scss
+ * header.wr-affix.wr-affix--active {
+ *   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ * }
+ * ```
+ */
+declare class WrAffix {
+    /** Pixels from the top of the scroll container when stuck. @default 0 */
+    readonly offsetTop: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Emits `true` when the element becomes affixed, `false` when it unsticks. */
+    readonly affixChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly host;
+    private readonly destroyRef;
+    private readonly isBrowser;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAffix, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAffix, "[wrAffix]", never, { "offsetTop": { "alias": "wrAffixOffsetTop"; "required": false; "isSignal": true; }; }, { "affixChange": "wrAffixChange"; }, never, never, true, never>;
+}
+
+export { WrAffix };

package/types/ngwr-alert.d.ts

@@ -0,0 +1,68 @@
+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
+ */
+/**
+ * Visual variant of the alert.
+ */
+type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
+
+/**
+ * Inline status banner. Use for feedback messages — saved/failed/notice etc.
+ *
+ * @example
+ * ```html
+ * <wr-alert title="Saved" message="Your changes are live." type="success" />
+ * <wr-alert title="Failed" type="danger" closeable (closed)="onClose()" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/alert
+ */
+declare class WrAlert {
+    /** Required headline shown at the top of the alert. */
+    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Visual variant.
+     *
+     * @default 'info'
+     */
+    readonly type: _angular_core.InputSignal<WrAlertType>;
+    /**
+     * Optional secondary message rendered below the title.
+     *
+     * @default null
+     */
+    readonly message: _angular_core.InputSignal<string | null>;
+    /**
+     * When `true`, renders a leading status icon matching the `type`
+     * (info / success / warning / danger). Pass `false` to hide.
+     *
+     * @default true
+     */
+    readonly icon: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * When `true`, renders a close button.
+     *
+     * @default false
+     */
+    readonly closeable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Emitted when the user dismisses the alert via the close button.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly dismissed: _angular_core.WritableSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    /** Escalate role/aria-live for danger/warning alerts. */
+    protected readonly liveRole: _angular_core.Signal<"alert" | "status" | null>;
+    protected readonly liveLevel: _angular_core.Signal<"assertive" | "polite" | null>;
+    protected onClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+export { WrAlert };
+export type { WrAlertType };

package/types/ngwr-anchor.d.ts

@@ -0,0 +1,53 @@
+import * as _angular_core from '@angular/core';
+
+/** One entry in a {@link WrAnchor}. */
+interface WrAnchorLink {
+    /** id of the target element (without `#`). */
+    readonly id: string;
+    readonly label: string;
+    /** Optional nested links (single level of nesting supported). */
+    readonly children?: readonly WrAnchorLink[];
+}
+
+/**
+ * Scroll-spy in-page navigation. Renders a list of links to elements on
+ * the page; clicking a link smooth-scrolls (via {@link WrScroll}),
+ * and the closest visible heading auto-highlights as the user scrolls.
+ *
+ * @example
+ * ```html
+ * <wr-anchor
+ *   [links]="[
+ *     { id: 'intro', label: 'Introduction' },
+ *     { id: 'usage', label: 'Usage', children: [
+ *       { id: 'basic', label: 'Basic' },
+ *       { id: 'advanced', label: 'Advanced' },
+ *     ]}
+ *   ]"
+ *   [offset]="80"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/components/anchor
+ */
+declare class WrAnchor {
+    readonly links: _angular_core.InputSignal<readonly WrAnchorLink[]>;
+    /** Pixel offset subtracted on scroll — for sticky headers. @default 0 */
+    readonly offset: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Highlight an item when its target's top is within this many px of the offset line. @default 80 */
+    readonly hitArea: _angular_core.InputSignalWithTransform<number, unknown>;
+    protected readonly activeId: _angular_core.WritableSignal<string | null>;
+    /** Flat list of all ids (top-level + children) — used for scroll spy. */
+    protected readonly flatIds: _angular_core.Signal<readonly string[]>;
+    private readonly scroll;
+    private readonly platform;
+    private readonly zone;
+    private readonly destroyRef;
+    constructor();
+    protected onClick(id: string, event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAnchor, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAnchor, "wr-anchor", never, { "links": { "alias": "links"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "hitArea": { "alias": "hitArea"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrAnchor };
+export type { WrAnchorLink };

package/types/ngwr-aurora.d.ts

@@ -0,0 +1,52 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Aurora background — flowing northern-lights ribbons rendered with a
+ * WebGL2 simplex-noise shader, ramped across three colour stops. Fills
+ * its nearest positioned ancestor; renders nothing without WebGL2.
+ *
+ * Under `prefers-reduced-motion` a single static frame is drawn.
+ *
+ * @example
+ * ```html
+ * <div style="position: relative; min-height: 24rem; overflow: hidden">
+ *   <wr-aurora />
+ *   <h1 style="position: relative">Welcome aboard</h1>
+ * </div>
+ * ```
+ *
+ * @see https://ngwr.dev/animations/aurora
+ */
+declare class WrAurora {
+    /**
+     * Exactly three colour stops, ramped left → right. When unset, the
+     * theme decides: deep violet/emerald on light, the neon reactbits
+     * palette on dark.
+     */
+    readonly colorStops: _angular_core.InputSignal<readonly string[] | null>;
+    /** Wave height multiplier. @default 1 */
+    readonly amplitude: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Softness of the aurora's lower edge, 0..1. @default 0.5 */
+    readonly blend: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Time multiplier. @default 1 */
+    readonly speed: _angular_core.InputSignalWithTransform<number, unknown>;
+    private readonly canvasRef;
+    private readonly host;
+    private readonly zone;
+    private readonly destroyRef;
+    private readonly platform;
+    private readonly isBrowser;
+    private gl;
+    private uniforms;
+    private rafId;
+    constructor();
+    private boot;
+    private pushUniforms;
+    /** Explicit input wins; otherwise the theme's `--wr-aurora-stop-*` vars. */
+    private resolveStops;
+    private draw;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAurora, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAurora, "wr-aurora", never, { "colorStops": { "alias": "colorStops"; "required": false; "isSignal": true; }; "amplitude": { "alias": "amplitude"; "required": false; "isSignal": true; }; "blend": { "alias": "blend"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrAurora };

package/types/ngwr-avatar.d.ts

@@ -0,0 +1,90 @@
+import * as _angular_core from '@angular/core';
+import { ResolvedCssSize } from 'ngwr/utils';
+
+/**
+ * @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
+ */
+/**
+ * Corner treatment for `<wr-avatar>`.
+ *
+ * - `rounded` (default) — soft rounded square (~10% radius).
+ * - `square` — hard corners.
+ * - `circle` — fully circular (replaces the old `[rounded]` boolean).
+ * - `squircle` — iOS-style smooth corners via `corner-shape: squircle`.
+ */
+type WrAvatarShape = 'rounded' | 'square' | 'circle' | 'squircle';
+
+/**
+ * @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
+ */
+/**
+ * Avatar size.
+ *
+ * Supported formats:
+ * - `number`     → pixels (e.g. `48` → `48px`)
+ * - `${number}`  → pixels as string (e.g. `'48'` → `48px`)
+ * - `${number}px` → pixels (e.g. `'48px'` → `48px`)
+ * - `${number}rem` → rems (e.g. `'3rem'` → `3 × root font-size`)
+ *
+ * Percentage values are intentionally not supported — avatars need a
+ * deterministic pixel size for the underlying `<img>` width/height.
+ */
+type WrAvatarSize = number | `${number}` | `${number}px` | `${number}rem`;
+
+/**
+ * Image avatar with configurable corner treatment.
+ *
+ * A spinner is shown while the image loads, then crossfades in.
+ *
+ * @example
+ * ```html
+ * <wr-avatar url="/me.png" alt="Roman" size="3rem" shape="circle" />
+ * <wr-avatar url="/me.png" alt="Roman" [size]="48" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/avatar
+ */
+declare class WrAvatar {
+    /**
+     * Image URL. When unset, only projected content (e.g. initials) renders.
+     *
+     * @default null
+     */
+    readonly url: _angular_core.InputSignal<string | null>;
+    /**
+     * Alt text for the image.
+     *
+     * @default 'Avatar'
+     */
+    readonly alt: _angular_core.InputSignal<string>;
+    /**
+     * Corner treatment. `rounded` (default) is a soft rounded square,
+     * `circle` is the classic profile avatar, `squircle` is the iOS look.
+     *
+     * @default 'rounded'
+     */
+    readonly shape: _angular_core.InputSignal<WrAvatarShape>;
+    /**
+     * Box size. See {@link WrAvatarSize} for accepted values.
+     *
+     * @default '6rem'
+     */
+    readonly size: _angular_core.InputSignal<WrAvatarSize>;
+    protected readonly loaded: _angular_core.WritableSignal<boolean>;
+    protected readonly resolved: _angular_core.Signal<ResolvedCssSize>;
+    protected readonly cssSize: _angular_core.Signal<string>;
+    protected readonly pxSize: _angular_core.Signal<number | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected onImageLoad(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAvatar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAvatar, "wr-avatar", never, { "url": { "alias": "url"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrAvatar };
+export type { WrAvatarSize };

package/types/ngwr-back-top.d.ts

@@ -0,0 +1,37 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Pinned floating button that scrolls the page back to the top. Appears
+ * once the user has scrolled past `visibilityThreshold` pixels.
+ *
+ * @example
+ * ```html
+ * <wr-back-top />
+ *
+ * <wr-back-top visibilityThreshold="600" [offset]="80">
+ *   <svg>…custom icon…</svg>
+ * </wr-back-top>
+ * ```
+ *
+ * @see https://ngwr.dev/components/back-top
+ */
+declare class WrBackTop {
+    /** Show the button once `window.scrollY` exceeds this many pixels. @default 400 */
+    readonly visibilityThreshold: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Pixel offset subtracted from the scroll target — for sticky headers. @default 0 */
+    readonly offset: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Accessible label for the button. @default 'Back to top' */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly visible: _angular_core.WritableSignal<boolean>;
+    private readonly scroll;
+    private readonly platform;
+    private readonly zone;
+    private readonly destroyRef;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBackTop, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBackTop, "wr-back-top", never, { "visibilityThreshold": { "alias": "visibilityThreshold"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrBackTop };