ngwr 6.0.0 → 7.0.0

package/fesm2022/ngwr-alert.mjs

@@ -1,6 +1,6 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { signal, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding } from '@angular/core';
-import { provideWrIcons, close, WrIconComponent } from 'ngwr/icon';
+import { input, output, signal, computed, ViewEncapsulation, Component } from '@angular/core';
 
 /**
  * @license
@@ -8,67 +8,85 @@ import { provideWrIcons, close, WrIconComponent } from 'ngwr/icon';
  * 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
  */
-
 /**
- * @license
+ * Inline status banner. Use for feedback messages — saved/failed/notice etc.
  *
- * 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
- */
-/**
- * NGWR alert component.
- * Closeable component for feedback.
+ * @example
+ * ```html
+ * <wr-alert title="Saved" message="Your changes are live." type="success" />
+ * <wr-alert title="Failed" type="danger" closeable (closed)="onClose()" />
+ * ```
  *
- * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/alert}
+ * @see https://ngwr.dev/components/alert
  */
-class WrAlertComponent {
-    constructor() {
-        this.type = 'info';
-        this.closeable = false;
-        this.isClosed = signal(false);
-    }
-    get elClasses() {
-        return {
-            'wr-alert': true,
-            'wr-alert--success': this.type === 'success',
-            'wr-alert--warning': this.type === 'warning',
-            'wr-alert--danger': this.type === 'danger',
-        };
-    }
+class WrAlert {
+    /** Required headline shown at the top of the alert. */
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual variant.
+     *
+     * @default 'info'
+     */
+    type = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional secondary message rendered below the title.
+     *
+     * @default null
+     */
+    message = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, renders a leading status icon matching the `type`
+     * (info / success / warning / danger). Pass `false` to hide.
+     *
+     * @default true
+     */
+    icon = input(true, { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, renders a close button.
+     *
+     * @default false
+     */
+    closeable = input(false, { ...(ngDevMode ? { debugName: "closeable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Emitted when the user dismisses the alert via the close button.
+     */
+    closed = output();
+    dismissed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissed" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-alert', `wr-alert--${this.type()}`];
+        if (this.dismissed())
+            parts.push('wr-alert--dismissed');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Escalate role/aria-live for danger/warning alerts. */
+    liveRole = computed(() => this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveRole" }] : /* istanbul ignore next */ []));
+    liveLevel = computed(() => this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveLevel" }] : /* istanbul ignore next */ []));
     onClose() {
-        this.isClosed.set(true);
+        this.dismissed.set(true);
+        this.closed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: WrAlertComponent, isStandalone: true, selector: "wr-alert", inputs: { title: "title", message: "message", type: "type", closeable: ["closeable", "closeable", booleanAttribute] }, host: { properties: { "class": "this.elClasses" } }, providers: [provideWrIcons([close])], ngImport: i0, template: "@if (!isClosed()) {\n  <div class=\"wr-alert__wrapper\">\n    <div class=\"wr-alert__body\">\n      <p class=\"wr-alert__title\">{{ title }}</p>\n      @if (message) {\n        <p class=\"wr-alert__message\">{{ message }}</p>\n      }\n    </div>\n\n    @if (closeable) {\n      <div class=\"wr-alert-close\">\n        <wr-icon name=\"close\" (click)=\"onClose()\"></wr-icon>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n  @if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    <p class=\"wr-alert__title\">{{ title() }}</p>\n    @if (message(); as text) {\n      <p class=\"wr-alert__message\">{{ text }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WrIconComponent], providers: [provideWrIcons([close])], template: "@if (!isClosed()) {\n  <div class=\"wr-alert__wrapper\">\n    <div class=\"wr-alert__body\">\n      <p class=\"wr-alert__title\">{{ title }}</p>\n      @if (message) {\n        <p class=\"wr-alert__message\">{{ message }}</p>\n      }\n    </div>\n\n    @if (closeable) {\n      <div class=\"wr-alert-close\">\n        <wr-icon name=\"close\" (click)=\"onClose()\"></wr-icon>\n      </div>\n    }\n  </div>\n}\n" }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], message: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], closeable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], elClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * @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
- */
+            args: [{ selector: 'wr-alert', encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': 'liveRole()',
+                        '[attr.aria-live]': 'liveLevel()',
+                    }, template: "@if (!dismissed()) {\n  @if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    <p class=\"wr-alert__title\">{{ title() }}</p>\n    @if (message(); as text) {\n      <p class=\"wr-alert__message\">{{ text }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrAlertComponent };
+export { WrAlert };
 //# sourceMappingURL=ngwr-alert.mjs.map

package/fesm2022/ngwr-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert-type.ts","../../../projects/lib/alert/alert.component.ts","../../../projects/lib/alert/alert.component.html","../../../projects/lib/alert/public-api.ts","../../../projects/lib/alert/ngwr-alert.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nexport type WrAlertType = 'info' | 'success' | 'warning' | 'danger';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { SafeAny } from 'ngwr/cdk/types';\nimport { provideWrIcons, close, WrIconComponent } from 'ngwr/icon';\n\nimport { WrAlertType } from './alert-type';\n\n/**\n * NGWR alert component.\n * Closeable component for feedback.\n *\n * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/alert}\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrIconComponent],\n  providers: [provideWrIcons([close])],\n})\nexport class WrAlertComponent {\n  @Input({ required: true }) title!: string;\n  @Input() message?: string;\n  @Input() type: WrAlertType = 'info';\n  @Input({ transform: booleanAttribute }) closeable = false;\n\n  protected readonly isClosed = signal(false);\n\n  @HostBinding('class')\n  get elClasses(): SafeAny {\n    return {\n      'wr-alert': true,\n      'wr-alert--success': this.type === 'success',\n      'wr-alert--warning': this.type === 'warning',\n      'wr-alert--danger': this.type === 'danger',\n    };\n  }\n\n  onClose(): void {\n    this.isClosed.set(true);\n  }\n}\n","@if (!isClosed()) {\n  <div class=\"wr-alert__wrapper\">\n    <div class=\"wr-alert__body\">\n      <p class=\"wr-alert__title\">{{ title }}</p>\n      @if (message) {\n        <p class=\"wr-alert__message\">{{ message }}</p>\n      }\n    </div>\n\n    @if (closeable) {\n      <div class=\"wr-alert-close\">\n        <wr-icon name=\"close\" (click)=\"onClose()\"></wr-icon>\n      </div>\n    }\n  </div>\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nexport * from './alert-type';\nexport * from './alert.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;;ACLH;;;;;AAKG;AAiBH;;;;;AAKG;MASU,gBAAgB,CAAA;AAR7B,IAAA,WAAA,GAAA;QAWW,IAAI,CAAA,IAAA,GAAgB,MAAM;QACK,IAAS,CAAA,SAAA,GAAG,KAAK;AAEtC,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;AAe5C;AAbC,IAAA,IACI,SAAS,GAAA;QACX,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AAC5C,YAAA,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AAC5C,YAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;SAC3C;;IAGH,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;;8GAnBd,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAIP,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,gBAAgB,CANzB,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EClCtC,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,6ZAgBA,4CDiBY,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAGd,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;+BACE,UAAU,EAAA,eAAA,EAEH,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAC5B,OAAA,EAAA,CAAC,eAAe,CAAC,EAAA,SAAA,EACf,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAA,QAAA,EAAA,6ZAAA,EAAA;8BAGT,KAAK,EAAA,CAAA;sBAA/B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,OAAO,EAAA,CAAA;sBAAf;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACuC,SAAS,EAAA,CAAA;sBAAhD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAKlC,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO;;;AE5CtB;;;;;AAKG;;ACLH;;AAEG;;;;"}
+{"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html","../../../projects/lib/alert/ngwr-alert.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport type { WrAlertType } from './interfaces';\n\n/**\n * Inline status banner. Use for feedback messages — saved/failed/notice etc.\n *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closeable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'liveRole()',\n    '[attr.aria-live]': 'liveLevel()',\n  },\n})\nexport class WrAlert {\n  /** Required headline shown at the top of the alert. */\n  readonly title = input.required<string>();\n\n  /**\n   * Visual variant.\n   *\n   * @default 'info'\n   */\n  readonly type = input<WrAlertType>('info');\n\n  /**\n   * Optional secondary message rendered below the title.\n   *\n   * @default null\n   */\n  readonly message = input<string | null>(null);\n\n  /**\n   * When `true`, renders a leading status icon matching the `type`\n   * (info / success / warning / danger). Pass `false` to hide.\n   *\n   * @default true\n   */\n  readonly icon = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * When `true`, renders a close button.\n   *\n   * @default false\n   */\n  readonly closeable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Emitted when the user dismisses the alert via the close button.\n   */\n  readonly closed = output<void>();\n\n  protected readonly dismissed = signal(false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-alert', `wr-alert--${this.type()}`];\n    if (this.dismissed()) parts.push('wr-alert--dismissed');\n    return parts.join(' ');\n  });\n\n  /** Escalate role/aria-live for danger/warning alerts. */\n  protected readonly liveRole = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status'\n  );\n  protected readonly liveLevel = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite'\n  );\n\n  protected onClose(): void {\n    this.dismissed.set(true);\n    this.closed.emit();\n  }\n}\n","@if (!dismissed()) {\n  @if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    <p class=\"wr-alert__title\">{{ title() }}</p>\n    @if (message(); as text) {\n      <p class=\"wr-alert__message\">{{ text }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;AAUG;MAWU,OAAO,CAAA;;IAET,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;AAEzC;;;;AAIG;IACM,IAAI,GAAG,KAAK,CAAc,MAAM;6EAAC;AAE1C;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAgB,IAAI;gFAAC;AAE7C;;;;;AAKG;IACM,IAAI,GAAG,KAAK,CAAC,IAAI,4EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEjE;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEvE;;AAEG;IACM,MAAM,GAAG,MAAM,EAAQ;IAEb,SAAS,GAAG,MAAM,CAAC,KAAK;kFAAC;AAEzB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC;QACtD,IAAI,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AACvD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;;AAGiB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MACrC,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ;iFACxE;AACkB,IAAA,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,QAAQ;kFACzG;IAES,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;uGAzDW,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,8zBCjCpB,+vDA+DA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD9Ba,OAAO,EAAA,UAAA,EAAA,CAAA;kBAVnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,aAAA,EAEL,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,YAAY;AAC3B,wBAAA,kBAAkB,EAAE,aAAa;AAClC,qBAAA,EAAA,QAAA,EAAA,+vDAAA,EAAA;;;AE/BH;;AAEG;;;;"}

package/fesm2022/ngwr-anchor.mjs

@@ -0,0 +1,103 @@
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, signal, computed, inject, NgZone, DestroyRef, ViewEncapsulation, Component } from '@angular/core';
+import { WrPlatform } from 'ngwr/platform';
+import { WrScroll } from 'ngwr/scroll';
+
+/**
+ * @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
+ */
+/**
+ * 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
+ */
+class WrAnchor {
+    links = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+    /** Pixel offset subtracted on scroll — for sticky headers. @default 0 */
+    offset = input(0, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /** Highlight an item when its target's top is within this many px of the offset line. @default 80 */
+    hitArea = input(80, { ...(ngDevMode ? { debugName: "hitArea" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 80)) });
+    activeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /** Flat list of all ids (top-level + children) — used for scroll spy. */
+    flatIds = computed(() => {
+        const out = [];
+        const walk = (list) => {
+            for (const item of list) {
+                out.push(item.id);
+                if (item.children)
+                    walk(item.children);
+            }
+        };
+        walk(this.links());
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flatIds" }] : /* istanbul ignore next */ []));
+    scroll = inject(WrScroll);
+    platform = inject(WrPlatform);
+    zone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        if (!this.platform.isBrowser)
+            return;
+        const handler = () => {
+            const cursor = this.offset() + this.hitArea();
+            let active = null;
+            for (const id of this.flatIds()) {
+                const el = document.getElementById(id);
+                if (!el)
+                    continue;
+                const top = el.getBoundingClientRect().top;
+                if (top <= cursor)
+                    active = id;
+                else
+                    break;
+            }
+            if (active !== this.activeId())
+                this.zone.run(() => this.activeId.set(active));
+        };
+        this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));
+        // Initial pass.
+        handler();
+        this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));
+    }
+    onClick(id, event) {
+        event.preventDefault();
+        this.scroll.to(`#${id}`, { offset: this.offset() });
+        this.activeId.set(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation", "aria-label": "Table of contents" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrAnchor, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-anchor', encapsulation: ViewEncapsulation.None, host: { class: 'wr-anchor', role: 'navigation', 'aria-label': 'Table of contents' }, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n" }]
+        }], ctorParameters: () => [], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hitArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitArea", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrAnchor };
+//# sourceMappingURL=ngwr-anchor.mjs.map

package/fesm2022/ngwr-anchor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-anchor.mjs","sources":["../../../projects/lib/anchor/anchor.ts","../../../projects/lib/anchor/anchor.html","../../../projects/lib/anchor/ngwr-anchor.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, DestroyRef, NgZone, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrScroll } from 'ngwr/scroll';\n\nimport type { WrAnchorLink } from './interfaces';\n\n/**\n * Scroll-spy in-page navigation. Renders a list of links to elements on\n * the page; clicking a link smooth-scrolls (via {@link WrScroll}),\n * and the closest visible heading auto-highlights as the user scrolls.\n *\n * @example\n * ```html\n * <wr-anchor\n *   [links]=\"[\n *     { id: 'intro', label: 'Introduction' },\n *     { id: 'usage', label: 'Usage', children: [\n *       { id: 'basic', label: 'Basic' },\n *       { id: 'advanced', label: 'Advanced' },\n *     ]}\n *   ]\"\n *   [offset]=\"80\"\n * />\n * ```\n *\n * @see https://ngwr.dev/components/anchor\n */\n@Component({\n  selector: 'wr-anchor',\n  templateUrl: './anchor.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-anchor', role: 'navigation', 'aria-label': 'Table of contents' },\n})\nexport class WrAnchor {\n  readonly links = input<readonly WrAnchorLink[]>([]);\n\n  /** Pixel offset subtracted on scroll — for sticky headers. @default 0 */\n  readonly offset = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Highlight an item when its target's top is within this many px of the offset line. @default 80 */\n  readonly hitArea = input(80, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 80)) });\n\n  protected readonly activeId = signal<string | null>(null);\n\n  /** Flat list of all ids (top-level + children) — used for scroll spy. */\n  protected readonly flatIds = computed<readonly string[]>(() => {\n    const out: string[] = [];\n    const walk = (list: readonly WrAnchorLink[]): void => {\n      for (const item of list) {\n        out.push(item.id);\n        if (item.children) walk(item.children);\n      }\n    };\n    walk(this.links());\n    return out;\n  });\n\n  private readonly scroll = inject(WrScroll);\n  private readonly platform = inject(WrPlatform);\n  private readonly zone = inject(NgZone);\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    if (!this.platform.isBrowser) return;\n    const handler = (): void => {\n      const cursor = this.offset() + this.hitArea();\n      let active: string | null = null;\n      for (const id of this.flatIds()) {\n        const el = document.getElementById(id);\n        if (!el) continue;\n        const top = el.getBoundingClientRect().top;\n        if (top <= cursor) active = id;\n        else break;\n      }\n      if (active !== this.activeId()) this.zone.run(() => this.activeId.set(active));\n    };\n    this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));\n    // Initial pass.\n    handler();\n    this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));\n  }\n\n  protected onClick(id: string, event: MouseEvent): void {\n    event.preventDefault();\n    this.scroll.to(`#${id}`, { offset: this.offset() });\n    this.activeId.set(id);\n  }\n}\n\nexport type { WrAnchorLink } from './interfaces';\n","<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-aurora.mjs

@@ -0,0 +1,309 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, inject, ElementRef, NgZone, DestroyRef, PLATFORM_ID, afterNextRender, effect, ViewEncapsulation, Component } from '@angular/core';
+import { WrPlatform } from 'ngwr/platform';
+import { numAttr } 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
+ *
+ * Angular adaptation of the Aurora background by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/backgrounds/aurora
+ *
+ * The reactbits version renders through the OGL library; this port talks
+ * to WebGL2 directly — same vertex/fragment shaders, zero dependencies.
+ */
+const VERT = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+const FRAG = `#version 300 es
+precision highp float;
+
+uniform float uTime;
+uniform float uAmplitude;
+uniform vec3 uColorStops[3];
+uniform vec2 uResolution;
+uniform float uBlend;
+
+out vec4 fragColor;
+
+vec3 permute(vec3 x) {
+  return mod(((x * 34.0) + 1.0) * x, 289.0);
+}
+
+float snoise(vec2 v){
+  const vec4 C = vec4(
+      0.211324865405187, 0.366025403784439,
+      -0.577350269189626, 0.024390243902439
+  );
+  vec2 i  = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+
+  vec3 p = permute(
+      permute(i.y + vec3(0.0, i1.y, 1.0))
+    + i.x + vec3(0.0, i1.x, 1.0)
+  );
+
+  vec3 m = max(
+      0.5 - vec3(
+          dot(x0, x0),
+          dot(x12.xy, x12.xy),
+          dot(x12.zw, x12.zw)
+      ),
+      0.0
+  );
+  m = m * m;
+  m = m * m;
+
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+
+  vec3 g;
+  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+struct ColorStop {
+  vec3 color;
+  float position;
+};
+
+#define COLOR_RAMP(colors, factor, finalColor) {              \\
+  int index = 0;                                            \\
+  for (int i = 0; i < 2; i++) {                               \\
+     ColorStop currentColor = colors[i];                    \\
+     bool isInBetween = currentColor.position <= factor;    \\
+     index = int(mix(float(index), float(i), float(isInBetween))); \\
+  }                                                         \\
+  ColorStop currentColor = colors[index];                   \\
+  ColorStop nextColor = colors[index + 1];                  \\
+  float range = nextColor.position - currentColor.position; \\
+  float lerpFactor = (factor - currentColor.position) / range; \\
+  finalColor = mix(currentColor.color, nextColor.color, lerpFactor); \\
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution;
+
+  ColorStop colors[3];
+  colors[0] = ColorStop(uColorStops[0], 0.0);
+  colors[1] = ColorStop(uColorStops[1], 0.5);
+  colors[2] = ColorStop(uColorStops[2], 1.0);
+
+  vec3 rampColor;
+  COLOR_RAMP(colors, uv.x, rampColor);
+
+  float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;
+  height = exp(height);
+  height = (uv.y * 2.0 - height + 0.2);
+  float intensity = 0.6 * height;
+
+  float midPoint = 0.20;
+  float auroraAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);
+
+  // Clamp the brightness floor: the upstream shader multiplies colour by
+  // raw intensity, which fades the ribbon to BLACK while still opaque —
+  // invisible on dark pages, a dirty gray halo on light ones. Keeping the
+  // hue saturated and letting alpha alone do the fading works on both.
+  vec3 auroraColor = rampColor * max(intensity, 0.85);
+
+  fragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);
+}
+`;
+function hexToRgb01(hex) {
+    let val = hex.replace('#', '');
+    if (val.length === 3)
+        val = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
+    return [
+        Number.parseInt(val.slice(0, 2), 16) / 255,
+        Number.parseInt(val.slice(2, 4), 16) / 255,
+        Number.parseInt(val.slice(4, 6), 16) / 255,
+    ];
+}
+/**
+ * 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
+ */
+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.
+     */
+    colorStops = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorStops" }] : /* istanbul ignore next */ []));
+    /** Wave height multiplier. @default 1 */
+    amplitude = input(1, { ...(ngDevMode ? { debugName: "amplitude" } : /* istanbul ignore next */ {}), transform: numAttr(1) });
+    /** Softness of the aurora's lower edge, 0..1. @default 0.5 */
+    blend = input(0.5, { ...(ngDevMode ? { debugName: "blend" } : /* istanbul ignore next */ {}), transform: numAttr(0.5) });
+    /** Time multiplier. @default 1 */
+    speed = input(1, { ...(ngDevMode ? { debugName: "speed" } : /* istanbul ignore next */ {}), transform: numAttr(1) });
+    canvasRef = viewChild.required('canvas');
+    host = inject(ElementRef);
+    zone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    platform = inject(WrPlatform);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    gl = null;
+    uniforms = {};
+    rafId = 0;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => this.zone.runOutsideAngular(() => this.boot()));
+        // Push input changes into uniforms without restarting the loop. Under
+        // reduced motion this also repaints the static frame.
+        effect(() => {
+            this.colorStops();
+            this.amplitude();
+            this.blend();
+            if (!this.gl)
+                return;
+            this.pushUniforms();
+            if (this.platform.prefersReducedMotion())
+                this.draw(0);
+        });
+    }
+    boot() {
+        const canvas = this.canvasRef().nativeElement;
+        const gl = canvas.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: true });
+        if (!gl)
+            return;
+        this.gl = gl;
+        gl.clearColor(0, 0, 0, 0);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        const compile = (type, source) => {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                // eslint-disable-next-line no-console -- GPU shader failures are otherwise invisible
+                console.error('wr-aurora shader error:', gl.getShaderInfoLog(shader));
+            }
+            return shader;
+        };
+        const program = gl.createProgram();
+        gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT));
+        gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAG));
+        gl.linkProgram(program);
+        gl.useProgram(program);
+        for (const name of ['uTime', 'uAmplitude', 'uColorStops', 'uResolution', 'uBlend']) {
+            this.uniforms[name] = gl.getUniformLocation(program, name);
+        }
+        // One oversized triangle covers the viewport — no index buffer needed.
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+        const position = gl.getAttribLocation(program, 'position');
+        gl.enableVertexAttribArray(position);
+        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+        const resize = () => {
+            const rect = this.host.nativeElement.getBoundingClientRect();
+            canvas.width = Math.max(1, Math.round(rect.width));
+            canvas.height = Math.max(1, Math.round(rect.height));
+            gl.viewport(0, 0, canvas.width, canvas.height);
+            gl.uniform2f(this.uniforms['uResolution'], canvas.width, canvas.height);
+            if (this.platform.prefersReducedMotion())
+                this.draw(0);
+        };
+        window.addEventListener('resize', resize);
+        const ro = new ResizeObserver(resize);
+        ro.observe(this.host.nativeElement);
+        resize();
+        this.pushUniforms();
+        if (this.platform.prefersReducedMotion()) {
+            // Static frame — the ribbons hold their t=0 shape.
+            this.draw(0);
+        }
+        else {
+            const loop = (t) => {
+                this.rafId = requestAnimationFrame(loop);
+                this.pushUniforms();
+                this.draw(t * 0.01 * this.speed() * 0.1);
+            };
+            this.rafId = requestAnimationFrame(loop);
+        }
+        this.destroyRef.onDestroy(() => {
+            cancelAnimationFrame(this.rafId);
+            window.removeEventListener('resize', resize);
+            ro.disconnect();
+        });
+    }
+    pushUniforms() {
+        const gl = this.gl;
+        if (!gl)
+            return;
+        const stops = this.resolveStops();
+        const flat = new Float32Array(9);
+        for (let i = 0; i < 3; i++) {
+            const [r, g, b] = hexToRgb01(stops[Math.min(i, stops.length - 1)] ?? '#5227ff');
+            flat[i * 3] = r;
+            flat[i * 3 + 1] = g;
+            flat[i * 3 + 2] = b;
+        }
+        gl.uniform3fv(this.uniforms['uColorStops'], flat);
+        gl.uniform1f(this.uniforms['uAmplitude'], this.amplitude());
+        gl.uniform1f(this.uniforms['uBlend'], this.blend());
+    }
+    /** Explicit input wins; otherwise the theme's `--wr-aurora-stop-*` vars. */
+    resolveStops() {
+        const explicit = this.colorStops();
+        if (explicit !== null)
+            return explicit;
+        const style = getComputedStyle(this.host.nativeElement);
+        return [
+            style.getPropertyValue('--wr-aurora-stop-1').trim() || '#5227ff',
+            style.getPropertyValue('--wr-aurora-stop-2').trim() || '#7cff67',
+            style.getPropertyValue('--wr-aurora-stop-3').trim() || '#5227ff',
+        ];
+    }
+    draw(time) {
+        const gl = this.gl;
+        if (!gl)
+            return;
+        gl.uniform1f(this.uniforms['uTime'], time);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrAurora, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-aurora', template: '<canvas #canvas class="wr-aurora__canvas"></canvas>', encapsulation: ViewEncapsulation.None, host: { class: 'wr-aurora' }, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { colorStops: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorStops", required: false }] }], amplitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "amplitude", required: false }] }], blend: [{ type: i0.Input, args: [{ isSignal: true, alias: "blend", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrAurora };
+//# sourceMappingURL=ngwr-aurora.mjs.map