ngwr 6.1.1 → 7.1.0

package/virtual-scroll/styles/_index.scss

@@ -0,0 +1,27 @@
+// Fixed-size virtual scroll wrapper. Most of the layout work is done by
+// CDK's `<cdk-virtual-scroll-viewport>`; this stylesheet just makes the
+// host a block-level container and tames default overflow behaviour.
+
+.wr-virtual-scroll {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+
+  &__viewport {
+    width: 100%;
+    height: 100%;
+    // CDK already sets `overflow: auto`; just add a discreet scrollbar
+    // skin via the platform defaults — no custom thumb so we match the
+    // host application's chrome.
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 0.5rem;
+      height: 0.5rem;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(var(--wr-color-dark-rgb), 0.2);
+      border-radius: 999px;
+    }
+  }
+}

package/virtual-scroll/virtual-scroll.scss

@@ -0,0 +1 @@
+@forward './styles';

package/waves/styles/_index.scss

@@ -0,0 +1,24 @@
+// Wave-field background (reactbits port). The host fills its nearest
+// positioned ancestor; the line colour is theme-aware via
+// `--wr-waves-line-color` unless `[lineColor]` overrides it.
+
+.wr-waves {
+  --wr-waves-line-color: rgba(var(--wr-color-dark-rgb), 0.12);
+
+  position: absolute;
+  inset: 0;
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  &__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+[data-theme='dark'] .wr-waves {
+  --wr-waves-line-color: rgb(255 255 255 / 14%);
+}

package/waves/waves.scss

@@ -0,0 +1 @@
+@forward './styles';

package/window/styles/_index.scss

@@ -0,0 +1,430 @@
+@use '../../theme/styles' as theme;
+
+.wr-window {
+  --wr-window-bg: var(--wr-color-white);
+  --wr-window-border: var(--wr-color-light);
+  --wr-window-chrome-bg: rgba(var(--wr-color-light-rgb), 0.4);
+  --wr-window-chrome-color: var(--wr-color-dark);
+  --wr-window-radius: var(--wr-border-radius-base);
+  --wr-window-handle-size: 8px;
+  --wr-window-chrome-height: 2.25rem;
+  --wr-window-title-size: 0.8125rem;
+  --wr-window-action-size: 1.5rem;
+  --wr-window-anim-duration: 0.18s;
+
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: var(--wr-window-bg);
+  border: 1px solid var(--wr-window-border);
+  @include theme.smooth-br(var(--wr-window-radius));
+  box-shadow: var(--wr-shadow-modal);
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+  overflow: hidden;
+  user-select: none;
+  // Enter animation — popover-style fade + scale-up. Disabled by
+  // .wr-window--no-anim and prefers-reduced-motion below.
+  //
+  // Notably absent: a `transition` on left / top / width / height.
+  // The drag + resize handlers write those signals on every pointer
+  // move; animating each tick makes the window lag behind the cursor.
+  animation: wr-window-in var(--wr-window-anim-duration) var(--wr-ease-out, ease-out);
+  transform-origin: top left;
+
+  &--closed,
+  &--minimized {
+    display: none;
+  }
+
+  &--maximized {
+    border-radius: 0;
+  }
+
+  // Compact title bar — useful for utility / docked panels where every
+  // pixel of vertical space matters.
+  &--chrome-compact {
+    --wr-window-chrome-height: 1.625rem;
+    --wr-window-title-size: 0.75rem;
+    --wr-window-action-size: 1.125rem;
+  }
+
+  &--no-anim,
+  &--no-anim * {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    transition: none;
+  }
+
+  // Chrome (title bar)
+  &__chrome {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    height: var(--wr-window-chrome-height);
+    padding: 0 0.25rem 0 0.75rem;
+    background: var(--wr-window-chrome-bg);
+    color: var(--wr-window-chrome-color);
+    cursor: grab;
+    border-bottom: 1px solid var(--wr-window-border);
+    touch-action: none;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &__title {
+    flex: 1 1 auto;
+    font-size: var(--wr-window-title-size);
+    font-weight: 600;
+    line-height: 1.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__title-extra {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding-right: 0.375rem;
+    font-size: 0.75rem;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__chrome-actions {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
+  &__chrome-action {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    width: var(--wr-window-action-size);
+    height: var(--wr-window-action-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--wr-color-medium);
+    cursor: pointer;
+    border-radius: var(--wr-border-radius-sm);
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    &:hover {
+      color: var(--wr-color-dark);
+      background: rgba(var(--wr-color-light-rgb), 0.6);
+    }
+
+    &--close:hover {
+      color: var(--wr-color-white);
+      background: var(--wr-color-danger);
+    }
+  }
+
+  // OS preset: macOS — traffic-light dots, LEFT-aligned, colored
+  //                   (close = red, minimize = yellow, maximize = green).
+  //
+  // Native macOS hides the glyphs (×, −, +) until the cursor enters the
+  // cluster. Mirror that.
+  &--os-macos {
+    .wr-window__chrome {
+      flex-direction: row-reverse;
+    }
+    .wr-window__title {
+      text-align: center;
+      padding-right: 5rem; // counterbalance the cluster on the left
+    }
+    .wr-window__chrome-actions {
+      gap: 0.5rem;
+      padding-left: 0.5rem;
+    }
+    .wr-window__chrome-action {
+      width: 0.875rem; // 14px — bigger than the prior 12px to match native
+      height: 0.875rem;
+      border-radius: 50%;
+      color: rgba(0, 0, 0, 0.55); // glyph color (revealed on hover)
+
+      &--close,
+      &--close:hover {
+        background: #ff5f57;
+      }
+      &--minimize,
+      &--minimize:hover {
+        background: #febc2e;
+      }
+      &--maximize,
+      &--maximize:hover {
+        background: #28c840;
+      }
+
+      &:hover {
+        filter: brightness(0.92);
+      }
+    }
+    // Glyphs are invisible by default and fade in as soon as the cursor
+    // enters the cluster — native macOS behaviour.
+    .wr-window__chrome-action-glyph {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 0.12s ease;
+    }
+    .wr-window__chrome-actions:hover .wr-window__chrome-action-glyph {
+      opacity: 1;
+    }
+  }
+
+  // OS preset: Linux (GNOME-style) — chrome-action retains the windows
+  //                   look but the chrome bar is slightly taller and the
+  //                   title stays left-aligned (close-only is enforced by
+  //                   the template).
+  &--os-linux {
+    .wr-window__chrome {
+      height: 2.5rem;
+    }
+    .wr-window__title {
+      font-weight: 500;
+    }
+  }
+
+  // Body
+  &__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: 0.875rem 1rem;
+    user-select: text;
+  }
+
+  &--minimized &__body {
+    display: none;
+  }
+
+  &__status-bar {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    border-top: 1px solid var(--wr-window-border);
+    background: rgba(var(--wr-color-light-rgb), 0.25);
+    font-size: 0.75rem;
+    color: var(--wr-color-medium);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--minimized &__status-bar {
+    display: none;
+  }
+
+  // Resize handles (only rendered in normal state)
+  &__handle {
+    position: absolute;
+    z-index: 1;
+
+    &--t {
+      top: -2px;
+      left: 0;
+      right: 0;
+      height: var(--wr-window-handle-size);
+      cursor: ns-resize;
+    }
+    &--b {
+      bottom: -2px;
+      left: 0;
+      right: 0;
+      height: var(--wr-window-handle-size);
+      cursor: ns-resize;
+    }
+    &--l {
+      top: 0;
+      bottom: 0;
+      left: -2px;
+      width: var(--wr-window-handle-size);
+      cursor: ew-resize;
+    }
+    &--r {
+      top: 0;
+      bottom: 0;
+      right: -2px;
+      width: var(--wr-window-handle-size);
+      cursor: ew-resize;
+    }
+
+    &--tl {
+      top: -2px;
+      left: -2px;
+      width: 14px;
+      height: 14px;
+      cursor: nwse-resize;
+    }
+    &--tr {
+      top: -2px;
+      right: -2px;
+      width: 14px;
+      height: 14px;
+      cursor: nesw-resize;
+    }
+    &--bl {
+      bottom: -2px;
+      left: -2px;
+      width: 14px;
+      height: 14px;
+      cursor: nesw-resize;
+    }
+    &--br {
+      bottom: -2px;
+      right: -2px;
+      width: 14px;
+      height: 14px;
+      cursor: nwse-resize;
+    }
+  }
+}
+
+// Snap hint — translucent rectangle showing the target region the
+//                 window will jump into when the pointer is released.
+.wr-window__snap-hint {
+  position: fixed;
+  pointer-events: none;
+  z-index: var(--wr-z-window, 1100);
+  background: rgba(var(--wr-color-primary-rgb), 0.18);
+  border: 2px solid var(--wr-color-primary);
+  border-radius: var(--wr-border-radius-base);
+  transition: all 0.12s ease;
+
+  &[data-target='top'] {
+    inset: 0;
+  }
+  &[data-target='left'] {
+    inset: 0 50% 0 0;
+  }
+  &[data-target='right'] {
+    inset: 0 0 0 50%;
+  }
+  &[data-target='top-left'] {
+    inset: 0 50% 50% 0;
+  }
+  &[data-target='top-right'] {
+    inset: 0 0 50% 50%;
+  }
+  &[data-target='bottom-left'] {
+    inset: 50% 50% 0 0;
+  }
+  &[data-target='bottom-right'] {
+    inset: 50% 0 0 50%;
+  }
+}
+
+// Window taskbar — strip of restore tabs for minimized windows.
+.wr-window-taskbar {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--wr-z-window, 1100);
+  display: block;
+  pointer-events: none;
+  font-family: var(--wr-font-family-base);
+
+  &--bottom {
+    bottom: 0.75rem;
+  }
+  &--top {
+    top: 0.75rem;
+  }
+
+  &__rail {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem;
+    background: var(--wr-color-white);
+    border: 1px solid var(--wr-color-light);
+    @include theme.smooth-br(var(--wr-border-radius-base));
+    box-shadow: var(--wr-shadow-overlay);
+    pointer-events: auto;
+  }
+
+  &__tab {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-dark);
+    font-family: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+    cursor: pointer;
+    max-width: 12rem;
+    transition:
+      background var(--wr-transition-base),
+      color var(--wr-transition-base);
+
+    &:hover {
+      background: rgba(var(--wr-color-light-rgb), 0.6);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--wr-color-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &__tab-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__tab-close {
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-medium);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--wr-color-white);
+      background: var(--wr-color-danger);
+    }
+  }
+}
+
+@keyframes wr-window-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/alert/index.d.ts

@@ -1,32 +0,0 @@
-import * as i0 from '@angular/core';
-import { SafeAny } from 'ngwr/cdk/types';
-
-/**
- * @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
- */
-type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
-
-/**
- * NGWR alert component.
- * Closeable component for feedback.
- *
- * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/alert}
- */
-declare class WrAlertComponent {
-    title: string;
-    message?: string;
-    type: WrAlertType;
-    closeable: boolean;
-    protected readonly isClosed: i0.WritableSignal<boolean>;
-    get elClasses(): SafeAny;
-    onClose(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrAlertComponent, "wr-alert", never, { "title": { "alias": "title"; "required": true; }; "message": { "alias": "message"; "required": false; }; "type": { "alias": "type"; "required": false; }; "closeable": { "alias": "closeable"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_closeable: unknown;
-}
-
-export { WrAlertComponent };
-export type { WrAlertType };

package/alert/styles/theming.scss

@@ -1,26 +0,0 @@
-.wr-alert {
-  &--success {
-    --wr-alert-title-color: var(--wr-color-success-darker);
-    --wr-alert-message-color: var(--wr-color-success-darker);
-    --wr-alert-bg-color: rgba(var(--wr-color-success-rgb), 0.125);
-    --wr-alert-border-color: rgba(var(--wr-color-success-rgb), 0.5);
-    --wr-alert-close-color: rgba(var(--wr-color-success-rgb), 0.5);
-    --wr-alert-close-color-hover: var(--wr-color-success);
-  }
-
-  &--warning {
-    --wr-alert-title-color: var(--wr-color-warning-darker);
-    --wr-alert-bg-color: rgba(var(--wr-color-warning-rgb), 0.125);
-    --wr-alert-border-color: rgba(var(--wr-color-warning-rgb), 0.5);
-    --wr-alert-close-color: rgba(var(--wr-color-warning-rgb), 0.5);
-    --wr-alert-close-color-hover: var(--wr-color-warning);
-  }
-
-  &--danger {
-    --wr-alert-title-color: var(--wr-color-danger-darker);
-    --wr-alert-bg-color: rgba(var(--wr-color-danger-rgb), 0.125);
-    --wr-alert-border-color: rgba(var(--wr-color-danger-rgb), 0.5);
-    --wr-alert-close-color: rgba(var(--wr-color-danger-rgb), 0.5);
-    --wr-alert-close-color-hover: var(--wr-color-danger);
-  }
-}

package/alert/styles/vars.scss

@@ -1,11 +0,0 @@
-:root {
-  --wr-alert-title-color: var(--wr-color-primary-darker);
-  --wr-alert-message-color: rgba(var(--wr-color-dark-rgb), 0.5);
-  --wr-alert-bg-color: rgba(var(--wr-color-primary-rgb), 0.125);
-  --wr-alert-border-color: rgba(var(--wr-color-primary-rgb), 0.5);
-  --wr-alert-close-color: rgba(var(--wr-color-primary-rgb), 0.5);
-  --wr-alert-close-color-hover: var(--wr-color-primary);
-  --wr-alert-border-radius: 0.5rem;
-  --wr-alert-padding-x: 0.75rem;
-  --wr-alert-padding-y: 0.875rem;
-}

package/avatar/index.d.ts

@@ -1,30 +0,0 @@
-import * as i0 from '@angular/core';
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
-import { SafeAny } from 'ngwr/cdk/types';
-
-declare class WrAvatarComponent {
-    readonly cdr: ChangeDetectorRef;
-    readonly elRef: ElementRef<any>;
-    readonly remSize: number;
-    readonly isImgLoaded: i0.WritableSignal<boolean>;
-    private calcRemToPx;
-    constructor();
-    url: string;
-    alt: string;
-    rounded: boolean;
-    /**
-     * Width and height in rem
-     * @example size="6" transforms to 6 * remSize (16 by default)
-     */
-    get size(): number;
-    set size(value: number | string);
-    private _size;
-    get elClasses(): SafeAny;
-    get elStyles(): SafeAny;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrAvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrAvatarComponent, "wr-avatar", never, { "url": { "alias": "url"; "required": true; }; "alt": { "alias": "alt"; "required": true; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
-    static ngAcceptInputType_rounded: unknown;
-    static ngAcceptInputType_size: unknown;
-}
-
-export { WrAvatarComponent };

package/button/index.d.ts

@@ -1,45 +0,0 @@
-import { WrThemeColor, SafeAny } from 'ngwr/cdk/types';
-import { wrIconName } from 'ngwr/icon';
-import * as i0 from '@angular/core';
-
-/**
- * NGWR button component.
- * Trigger an operation or perform an action.
- *
- * {@tutorial} [How to use wr-btn]{@link http://ngwr.dev/docs/components/button}
- */
-declare class WrButtonComponent {
-    color?: WrThemeColor | null;
-    size: 'default' | 'small';
-    icon: wrIconName | null;
-    iconPosition: 'start' | 'end';
-    disabled: boolean;
-    outlined: boolean;
-    rounded: boolean;
-    block: boolean;
-    loading: boolean;
-    isDisabledWhenLoading: boolean;
-    get nativeDisabled(): '' | null;
-    get elClasses(): SafeAny;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrButtonComponent, "wr-btn, button[wr-btn], a[wr-btn]", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "block": { "alias": "block"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isDisabledWhenLoading": { "alias": "isDisabledWhenLoading"; "required": false; }; }, {}, never, ["*"], true, never>;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_outlined: unknown;
-    static ngAcceptInputType_rounded: unknown;
-    static ngAcceptInputType_block: unknown;
-    static ngAcceptInputType_loading: unknown;
-    static ngAcceptInputType_isDisabledWhenLoading: unknown;
-}
-
-/**
- * NGWR button group.
- *
- * {@tutorial} [How to use wr-btn-group]{@link http://ngwr.dev/docs/components/button-group}
- */
-declare class WrButtonGroupComponent {
-    get classes(): SafeAny;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrButtonGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrButtonGroupComponent, "wr-btn-group", never, {}, {}, never, ["*"], true, never>;
-}
-
-export { WrButtonComponent, WrButtonGroupComponent };

package/button/styles/vars.scss

@@ -1,13 +0,0 @@
-:root {
-  --wr-btn-color: var(--wr-color-dark);
-  --wr-btn-bg-color: var(--wr-color-white);
-  --wr-btn-border-color: var(--wr-color-light-lighter);
-  --wr-btn-icon-size: 1rem;
-  --wr-btn-font-size: 0.875rem;
-  --wr-btn-font-weight: 500;
-  --wr-btn-font-family: var(--wr-font-family-base);
-  --wr-btn-line-height: 1.25rem;
-  --wr-btn-border-radius: 0.375rem;
-  --wr-btn-padding-y: 0.375rem;
-  --wr-btn-padding-x: 1rem;
-}

package/cdk/index.d.ts

@@ -1,24 +0,0 @@
-import * as i0 from '@angular/core';
-import { OnDestroy, DestroyRef } from '@angular/core';
-import { Subject } from 'rxjs';
-
-/**
- * @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
- */
-
-declare abstract class WrAbstractBase implements OnDestroy {
-    /**
-     * @deprecated use destroyRef$ instead
-     * @protected
-     */
-    protected readonly destroyed$: Subject<void>;
-    protected readonly destroyRef$: DestroyRef;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrAbstractBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrAbstractBase, never, never, {}, {}, never, never, true, never>;
-}
-
-export { WrAbstractBase };