ngwr 7.3.0 → 9.0.0

package/fesm2022/ngwr-checkbox.mjs

@@ -1,9 +1,8 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, inject, signal, computed, forwardRef, ViewEncapsulation, Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InjectionToken, input, model, output, inject, computed, ViewEncapsulation, Component, forwardRef } from '@angular/core';
 import { WrIcon } from 'ngwr/icon';
-import { randomId, noop } from 'ngwr/utils';
+import { randomId } from 'ngwr/utils';
 
 /**
  * @license
@@ -25,29 +24,6 @@ const WR_CHECKBOX_GROUP = new InjectionToken('WR_CHECKBOX_GROUP');
  * 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
  */
-/**
- * Two-state checkbox.
- *
- * **Standalone mode** — boolean value, works as a `ControlValueAccessor`:
- *
- * @example
- * ```html
- * <wr-checkbox [(ngModel)]="agree">I agree</wr-checkbox>
- * ```
- *
- * **Inside `<wr-checkbox-group>`** — the checkbox's `value` is added to
- * or removed from the group's array. The standalone CVA is ignored.
- *
- * @example
- * ```html
- * <wr-checkbox-group [(ngModel)]="features">
- *   <wr-checkbox value="autosave">Autosave</wr-checkbox>
- *   <wr-checkbox value="notifications">Notifications</wr-checkbox>
- * </wr-checkbox-group>
- * ```
- *
- * @see https://ngwr.dev/components/checkbox
- */
 class WrCheckbox {
     /**
      * Stable id used to associate the native input with its label.
@@ -57,99 +33,90 @@ class WrCheckbox {
     id = input(randomId('wr-checkbox'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /**
-     * Per-checkbox value used only when inside a `<wr-checkbox-group>`.
-     * Ignored in standalone mode.
+     * This checkbox's identity when inside a `<wr-checkbox-group>` — the value
+     * added to / removed from the group's array. Ignored in standalone mode.
+     * (Named `checkboxValue`, not `value`, because `FormCheckboxControl` reserves
+     * `value`.)
      */
-    value = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    checkboxValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Checked state — the form value. Bound by `[formField]`, two-way via
+     * `[(checked)]`, or `[(ngModel)]`. Ignored inside a `<wr-checkbox-group>`,
+     * where the group's array is the source of truth.
+     */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Emitted on blur so a bound field can mark itself touched. */
+    touch = output();
     /**
-     * Disable the checkbox. Also set automatically by Angular forms.
+     * Disable the checkbox. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
      *
      * @default false
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
      * Optional icon name rendered inside the box when checked, in place of the
      * default checkmark. Use any registered NGWR icon.
      */
     icon = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Show the indeterminate ("mixed") state — a dash instead of a check. Visual
+     * only and controlled: set it yourself for a parent "select all" whose
+     * children are partly checked, and clear it on the next toggle. Takes visual
+     * precedence over `checked`; the native input reports `aria-checked="mixed"`.
+     *
+     * @default false
+     */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     group = inject(WR_CHECKBOX_GROUP, { optional: true });
-    // Standalone state. When inside a group, these are not used as the source of truth.
-    standaloneChecked = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "standaloneChecked" }] : /* istanbul ignore next */ []));
-    standaloneDisabledFromCva = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "standaloneDisabledFromCva" }] : /* istanbul ignore next */ []));
-    /** Derived "is checked". Reads from group when grouped, else local state. */
-    checked = computed(() => {
-        return this.group ? this.group.isSelected(this.value()) : this.standaloneChecked();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    /** Effective disabled — input wins, then group, then CVA. */
+    /** Rendered "is checked" — reads the group when grouped, else the `checked` model. */
+    isChecked = computed(() => this.group ? this.group.isSelected(this.checkboxValue()) : this.checked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+    /** Effective disabled — the `disabled` input wins, then the group. */
     effectiveDisabled = computed(() => {
         if (this.disabled())
             return true;
-        return this.group ? this.group.isDisabled() : this.standaloneDisabledFromCva();
+        return this.group ? this.group.isDisabled() : false;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-checkbox'];
-        if (this.checked())
+        const size = this.size();
+        if (size !== 'md')
+            parts.push(`wr-checkbox--${size}`);
+        if (this.indeterminate())
+            parts.push('wr-checkbox--indeterminate');
+        else if (this.isChecked())
             parts.push('wr-checkbox--checked');
         if (this.effectiveDisabled())
             parts.push('wr-checkbox--disabled');
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    onChange = noop;
-    onTouched = noop;
-    // ControlValueAccessor (standalone mode)
-    writeValue(value) {
-        this.standaloneChecked.set(!!value);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.standaloneDisabledFromCva.set(coerceBooleanProperty(isDisabled));
-    }
     // Template handlers
     onInputChange(event) {
-        const checked = event.target.checked;
         if (this.group) {
-            this.group.toggle(this.value());
+            this.group.toggle(this.checkboxValue());
             return;
         }
-        this.standaloneChecked.set(checked);
-        this.onChange(checked);
+        this.checked.set(event.target.checked);
     }
     onInputBlur() {
-        this.onTouched();
+        this.touch.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrCheckbox, isStandalone: true, selector: "wr-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                // eslint-disable-next-line @angular-eslint/no-forward-ref
-                useExisting: forwardRef(() => WrCheckbox),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<label class=\"wr-checkbox__label\" [for]=\"id()\">\n  <input\n    class=\"wr-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-checkbox__box\" aria-hidden=\"true\">\n    @if (icon(); as iconName) {\n      <wr-icon class=\"wr-checkbox__icon\" [name]=\"iconName\" />\n    } @else {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__mark\">\n        <polyline\n          points=\"3.5 8.5 6.5 11.5 12.5 5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <span class=\"wr-checkbox__text\">\n    <ng-content />\n  </span>\n</label>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrCheckbox, isStandalone: true, selector: "wr-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checkboxValue: { classPropertyName: "checkboxValue", publicName: "checkboxValue", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<label class=\"wr-checkbox__label\" [for]=\"id()\">\n  <input\n    class=\"wr-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"isChecked()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-checkbox__box\" aria-hidden=\"true\">\n    @if (indeterminate()) {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__dash\">\n        <line x1=\"3.5\" y1=\"8\" x2=\"12.5\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    } @else if (icon(); as iconName) {\n      <wr-icon class=\"wr-checkbox__icon\" [name]=\"iconName\" />\n    } @else {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__mark\">\n        <polyline\n          points=\"3.5 8.5 6.5 11.5 12.5 5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <span class=\"wr-checkbox__text\">\n    <ng-content />\n  </span>\n</label>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-checkbox', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrIcon], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrCheckbox),
-                            multi: true,
-                        },
-                    ], template: "<label class=\"wr-checkbox__label\" [for]=\"id()\">\n  <input\n    class=\"wr-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-checkbox__box\" aria-hidden=\"true\">\n    @if (icon(); as iconName) {\n      <wr-icon class=\"wr-checkbox__icon\" [name]=\"iconName\" />\n    } @else {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__mark\">\n        <polyline\n          points=\"3.5 8.5 6.5 11.5 12.5 5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <span class=\"wr-checkbox__text\">\n    <ng-content />\n  </span>\n</label>\n" }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+            args: [{ selector: 'wr-checkbox', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrIcon], template: "<label class=\"wr-checkbox__label\" [for]=\"id()\">\n  <input\n    class=\"wr-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"isChecked()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-checkbox__box\" aria-hidden=\"true\">\n    @if (indeterminate()) {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__dash\">\n        <line x1=\"3.5\" y1=\"8\" x2=\"12.5\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    } @else if (icon(); as iconName) {\n      <wr-icon class=\"wr-checkbox__icon\" [name]=\"iconName\" />\n    } @else {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__mark\">\n        <polyline\n          points=\"3.5 8.5 6.5 11.5 12.5 5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <span class=\"wr-checkbox__text\">\n    <ng-content />\n  </span>\n</label>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checkboxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxValue", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
 /**
  * @license
@@ -161,34 +128,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Manages a group of `<wr-checkbox>` children as a single form value
  * (an array of the checked items' `value` inputs).
  *
+ * A signal-forms native control: it implements `FormValueControl<unknown[]>`,
+ * so `[formField]` binds to its `value` model. `[(value)]` works standalone,
+ * and classic `[(ngModel)]` / reactive forms keep working through the bridge.
+ *
  * @example
  * ```html
- * <wr-checkbox-group [(ngModel)]="features">
- *   <wr-checkbox value="autosave">Autosave</wr-checkbox>
- *   <wr-checkbox value="notifications">Notifications</wr-checkbox>
- *   <wr-checkbox value="darkmode">Dark mode</wr-checkbox>
+ * <wr-checkbox-group [formField]="form.features">
+ *   <wr-checkbox checkboxValue="autosave">Autosave</wr-checkbox>
+ *   <wr-checkbox checkboxValue="notifications">Notifications</wr-checkbox>
+ *   <wr-checkbox checkboxValue="darkmode">Dark mode</wr-checkbox>
  * </wr-checkbox-group>
  * ```
  *
- * @see https://ngwr.dev/components/checkbox
+ * @see https://ngwr.dev/reference/components/checkbox
  */
 class WrCheckboxGroup {
     /**
-     * Disable every child checkbox. Also set by Angular forms via
-     * `setDisabledState`.
+     * Disable every child checkbox. Bound automatically from the field's
+     * disabled state when used with `[formField]`.
      *
      * @default false
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    selected = signal([], /* @ts-ignore */
+    /** The checked items' values. Bound by `[formField]`, or two-way via `[(value)]`. */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted when a child toggles so a bound field can mark itself touched. */
+    touch = output();
+    // The current selection as a guaranteed array — a classic-forms binding can
+    // write null even though the type is `unknown[]`, so normalise every read.
+    selected = computed(() => {
+        const v = this.value();
+        return Array.isArray(v) ? v : [];
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    disabledFromCva = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
-    /** Effective disabled state — input wins, CVA second. */
-    isDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    /** Effective disabled state (WrCheckboxGroupContext). */
+    isDisabled = computed(() => this.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    onChange = noop;
-    onTouched = noop;
     // WrCheckboxGroupContext
     isSelected(value) {
         return this.selected().includes(value);
@@ -198,31 +175,11 @@ class WrCheckboxGroup {
             return;
         const current = this.selected();
         const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value];
-        this.selected.set(next);
-        this.onChange([...next]);
-        this.onTouched();
+        this.value.set(next);
+        this.touch.emit();
     }
-    // ControlValueAccessor
-    writeValue(value) {
-        this.selected.set(Array.isArray(value) ? [...value] : []);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrCheckboxGroup, isStandalone: true, selector: "wr-checkbox-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, classAttribute: "wr-checkbox-group" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                // eslint-disable-next-line @angular-eslint/no-forward-ref
-                useExisting: forwardRef(() => WrCheckboxGroup),
-                multi: true,
-            },
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrCheckboxGroup, isStandalone: true, selector: "wr-checkbox-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { attributes: { "role": "group" }, classAttribute: "wr-checkbox-group" }, providers: [
             {
                 provide: WR_CHECKBOX_GROUP,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -230,7 +187,7 @@ class WrCheckboxGroup {
             },
         ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCheckboxGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCheckboxGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-checkbox-group',
@@ -238,12 +195,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'wr-checkbox-group', role: 'group' },
                     providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrCheckboxGroup),
-                            multi: true,
-                        },
                         {
                             provide: WR_CHECKBOX_GROUP,
                             // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -251,7 +202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-checkbox.mjs","sources":["../../../projects/lib/checkbox/tokens/checkbox-group.token.ts","../../../projects/lib/checkbox/checkbox.ts","../../../projects/lib/checkbox/checkbox.html","../../../projects/lib/checkbox/checkbox-group.ts","../../../projects/lib/checkbox/ngwr-checkbox.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 { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * Contract a checkbox uses to talk to its parent `<wr-checkbox-group>`.\n *\n * @internal\n */\nexport interface WrCheckboxGroupContext {\n  /** Is the given value currently selected? */\n  isSelected(value: unknown): boolean;\n  /** Toggle the given value in the group. */\n  toggle(value: unknown): void;\n  /** Whether the entire group is disabled. */\n  readonly isDisabled: Signal<boolean>;\n}\n\n/**\n * Token a `<wr-checkbox>` injects to read selection state from — and\n * toggle values in — its parent `<wr-checkbox-group>` (when present).\n *\n * @internal\n */\nexport const WR_CHECKBOX_GROUP = new InjectionToken<WrCheckboxGroupContext>('WR_CHECKBOX_GROUP');\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 { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { noop, randomId } from 'ngwr/utils';\n\nimport { WR_CHECKBOX_GROUP } from './tokens';\n\n/**\n * Two-state checkbox.\n *\n * **Standalone mode** — boolean value, works as a `ControlValueAccessor`:\n *\n * @example\n * ```html\n * <wr-checkbox [(ngModel)]=\"agree\">I agree</wr-checkbox>\n * ```\n *\n * **Inside `<wr-checkbox-group>`** — the checkbox's `value` is added to\n * or removed from the group's array. The standalone CVA is ignored.\n *\n * @example\n * ```html\n * <wr-checkbox-group [(ngModel)]=\"features\">\n *   <wr-checkbox value=\"autosave\">Autosave</wr-checkbox>\n *   <wr-checkbox value=\"notifications\">Notifications</wr-checkbox>\n * </wr-checkbox-group>\n * ```\n *\n * @see https://ngwr.dev/components/checkbox\n */\n@Component({\n  selector: 'wr-checkbox',\n  templateUrl: './checkbox.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrIcon],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCheckbox),\n      multi: true,\n    },\n  ],\n})\nexport class WrCheckbox implements ControlValueAccessor {\n  /**\n   * Stable id used to associate the native input with its label.\n   *\n   * @default Randomly generated\n   */\n  readonly id = input<string>(randomId('wr-checkbox'));\n\n  /**\n   * Per-checkbox value used only when inside a `<wr-checkbox-group>`.\n   * Ignored in standalone mode.\n   */\n  readonly value = input<unknown>(null);\n\n  /**\n   * Disable the checkbox. Also set automatically by Angular forms.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Optional icon name rendered inside the box when checked, in place of the\n   * default checkmark. Use any registered NGWR icon.\n   */\n  readonly icon = input<WrIconName | null>(null);\n\n  private readonly group = inject(WR_CHECKBOX_GROUP, { optional: true });\n\n  // Standalone state. When inside a group, these are not used as the source of truth.\n  protected readonly standaloneChecked = signal(false);\n  protected readonly standaloneDisabledFromCva = signal(false);\n\n  /** Derived \"is checked\". Reads from group when grouped, else local state. */\n  protected readonly checked = computed(() => {\n    return this.group ? this.group.isSelected(this.value()) : this.standaloneChecked();\n  });\n\n  /** Effective disabled — input wins, then group, then CVA. */\n  protected readonly effectiveDisabled = computed(() => {\n    if (this.disabled()) return true;\n    return this.group ? this.group.isDisabled() : this.standaloneDisabledFromCva();\n  });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-checkbox'];\n    if (this.checked()) parts.push('wr-checkbox--checked');\n    if (this.effectiveDisabled()) parts.push('wr-checkbox--disabled');\n    return parts.join(' ');\n  });\n\n  private onChange: (value: boolean) => void = noop;\n  private onTouched: () => void = noop;\n\n  // ControlValueAccessor (standalone mode)\n\n  writeValue(value: boolean | null): void {\n    this.standaloneChecked.set(!!value);\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.standaloneDisabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n\n  // Template handlers\n\n  protected onInputChange(event: Event): void {\n    const checked = (event.target as HTMLInputElement).checked;\n    if (this.group) {\n      this.group.toggle(this.value());\n      return;\n    }\n    this.standaloneChecked.set(checked);\n    this.onChange(checked);\n  }\n\n  protected onInputBlur(): void {\n    this.onTouched();\n  }\n}\n","<label class=\"wr-checkbox__label\" [for]=\"id()\">\n  <input\n    class=\"wr-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-checkbox__box\" aria-hidden=\"true\">\n    @if (icon(); as iconName) {\n      <wr-icon class=\"wr-checkbox__icon\" [name]=\"iconName\" />\n    } @else {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__mark\">\n        <polyline\n          points=\"3.5 8.5 6.5 11.5 12.5 5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <span class=\"wr-checkbox__text\">\n    <ng-content />\n  </span>\n</label>\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 { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, forwardRef, input, signal } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { noop } from 'ngwr/utils';\n\nimport { WR_CHECKBOX_GROUP, type WrCheckboxGroupContext } from './tokens';\n\n/**\n * Manages a group of `<wr-checkbox>` children as a single form value\n * (an array of the checked items' `value` inputs).\n *\n * @example\n * ```html\n * <wr-checkbox-group [(ngModel)]=\"features\">\n *   <wr-checkbox value=\"autosave\">Autosave</wr-checkbox>\n *   <wr-checkbox value=\"notifications\">Notifications</wr-checkbox>\n *   <wr-checkbox value=\"darkmode\">Dark mode</wr-checkbox>\n * </wr-checkbox-group>\n * ```\n *\n * @see https://ngwr.dev/components/checkbox\n */\n@Component({\n  selector: 'wr-checkbox-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-checkbox-group', role: 'group' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCheckboxGroup),\n      multi: true,\n    },\n    {\n      provide: WR_CHECKBOX_GROUP,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCheckboxGroup),\n    },\n  ],\n})\nexport class WrCheckboxGroup implements ControlValueAccessor, WrCheckboxGroupContext {\n  /**\n   * Disable every child checkbox. Also set by Angular forms via\n   * `setDisabledState`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  private readonly selected = signal<readonly unknown[]>([]);\n  private readonly disabledFromCva = signal(false);\n\n  /** Effective disabled state — input wins, CVA second. */\n  readonly isDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  private onChange: (value: unknown[]) => void = noop;\n  private onTouched: () => void = noop;\n\n  // WrCheckboxGroupContext\n\n  isSelected(value: unknown): boolean {\n    return this.selected().includes(value);\n  }\n\n  toggle(value: unknown): void {\n    if (this.isDisabled()) return;\n    const current = this.selected();\n    const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value];\n    this.selected.set(next);\n    this.onChange([...next]);\n    this.onTouched();\n  }\n\n  // ControlValueAccessor\n\n  writeValue(value: unknown): void {\n    this.selected.set(Array.isArray(value) ? [...(value as unknown[])] : []);\n  }\n\n  registerOnChange(fn: (value: unknown[]) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-checkbox.mjs","sources":["../../../projects/lib/checkbox/tokens/checkbox-group.token.ts","../../../projects/lib/checkbox/checkbox.ts","../../../projects/lib/checkbox/checkbox.html","../../../projects/lib/checkbox/checkbox-group.ts","../../../projects/lib/checkbox/ngwr-checkbox.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 { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * Contract a checkbox uses to talk to its parent `<wr-checkbox-group>`.\n *\n * @internal\n */\nexport interface WrCheckboxGroupContext {\n  /** Is the given value currently selected? */\n  isSelected(value: unknown): boolean;\n  /** Toggle the given value in the group. */\n  toggle(value: unknown): void;\n  /** Whether the entire group is disabled. */\n  readonly isDisabled: Signal<boolean>;\n}\n\n/**\n * Token a `<wr-checkbox>` injects to read selection state from — and\n * toggle values in — its parent `<wr-checkbox-group>` (when present).\n *\n * @internal\n */\nexport const WR_CHECKBOX_GROUP = new InjectionToken<WrCheckboxGroupContext>('WR_CHECKBOX_GROUP');\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 { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, inject, input, model, output } from '@angular/core';\nimport type { FormCheckboxControl } from '@angular/forms/signals';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { randomId } from 'ngwr/utils';\n\nimport { WR_CHECKBOX_GROUP } from './tokens';\n\n/**\n * Two-state checkbox.\n *\n * A signal-forms native control: it implements `FormCheckboxControl`, so\n * `[formField]` binds straight to its `checked` model — no\n * `ControlValueAccessor` in between. `[(checked)]` works standalone, and\n * classic `[(ngModel)]` / reactive forms keep working through Angular's bridge.\n *\n * @example\n * ```html\n * <wr-checkbox [(checked)]=\"agree\">I agree</wr-checkbox>\n * <wr-checkbox [formField]=\"form.agree\">I agree</wr-checkbox>\n * ```\n *\n * **Inside `<wr-checkbox-group>`** — the checkbox's `checkboxValue` is added to\n * or removed from the group's array, and the group is the native form control.\n * (The identity input is `checkboxValue`, not `value`, because\n * `FormCheckboxControl` reserves `value` — its form state is the boolean\n * `checked`.)\n *\n * @example\n * ```html\n * <wr-checkbox-group [formField]=\"form.features\">\n *   <wr-checkbox checkboxValue=\"autosave\">Autosave</wr-checkbox>\n *   <wr-checkbox checkboxValue=\"notifications\">Notifications</wr-checkbox>\n * </wr-checkbox-group>\n * ```\n *\n * @see https://ngwr.dev/reference/components/checkbox\n */\nexport type WrCheckboxSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-checkbox',\n  templateUrl: './checkbox.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrIcon],\n})\nexport class WrCheckbox implements FormCheckboxControl {\n  /**\n   * Stable id used to associate the native input with its label.\n   *\n   * @default Randomly generated\n   */\n  readonly id = input<string>(randomId('wr-checkbox'));\n\n  /**\n   * This checkbox's identity when inside a `<wr-checkbox-group>` — the value\n   * added to / removed from the group's array. Ignored in standalone mode.\n   * (Named `checkboxValue`, not `value`, because `FormCheckboxControl` reserves\n   * `value`.)\n   */\n  readonly checkboxValue = input<unknown>(null);\n\n  /**\n   * Checked state — the form value. Bound by `[formField]`, two-way via\n   * `[(checked)]`, or `[(ngModel)]`. Ignored inside a `<wr-checkbox-group>`,\n   * where the group's array is the source of truth.\n   */\n  readonly checked = model<boolean>(false);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  /**\n   * Disable the checkbox. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — shares the `--wr-control-*` contract. @default 'md' */\n  readonly size = input<WrCheckboxSize>('md');\n\n  /**\n   * Optional icon name rendered inside the box when checked, in place of the\n   * default checkmark. Use any registered NGWR icon.\n   */\n  readonly icon = input<WrIconName | null>(null);\n\n  /**\n   * Show the indeterminate (\"mixed\") state — a dash instead of a check. Visual\n   * only and controlled: set it yourself for a parent \"select all\" whose\n   * children are partly checked, and clear it on the next toggle. Takes visual\n   * precedence over `checked`; the native input reports `aria-checked=\"mixed\"`.\n   *\n   * @default false\n   */\n  readonly indeterminate = input(false, { transform: coerceBooleanProperty });\n\n  private readonly group = inject(WR_CHECKBOX_GROUP, { optional: true });\n\n  /** Rendered \"is checked\" — reads the group when grouped, else the `checked` model. */\n  protected readonly isChecked = computed(() =>\n    this.group ? this.group.isSelected(this.checkboxValue()) : this.checked()\n  );\n\n  /** Effective disabled — the `disabled` input wins, then the group. */\n  protected readonly effectiveDisabled = computed(() => {\n    if (this.disabled()) return true;\n    return this.group ? this.group.isDisabled() : false;\n  });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-checkbox'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-checkbox--${size}`);\n    if (this.indeterminate()) parts.push('wr-checkbox--indeterminate');\n    else if (this.isChecked()) parts.push('wr-checkbox--checked');\n    if (this.effectiveDisabled()) parts.push('wr-checkbox--disabled');\n    return parts.join(' ');\n  });\n\n  // Template handlers\n\n  protected onInputChange(event: Event): void {\n    if (this.group) {\n      this.group.toggle(this.checkboxValue());\n      return;\n    }\n    this.checked.set((event.target as HTMLInputElement).checked);\n  }\n\n  protected onInputBlur(): void {\n    this.touch.emit();\n  }\n}\n","<label class=\"wr-checkbox__label\" [for]=\"id()\">\n  <input\n    class=\"wr-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"isChecked()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n  />\n\n  <span class=\"wr-checkbox__box\" aria-hidden=\"true\">\n    @if (indeterminate()) {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__dash\">\n        <line x1=\"3.5\" y1=\"8\" x2=\"12.5\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    } @else if (icon(); as iconName) {\n      <wr-icon class=\"wr-checkbox__icon\" [name]=\"iconName\" />\n    } @else {\n      <svg viewBox=\"0 0 16 16\" class=\"wr-checkbox__mark\">\n        <polyline\n          points=\"3.5 8.5 6.5 11.5 12.5 5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <span class=\"wr-checkbox__text\">\n    <ng-content />\n  </span>\n</label>\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 { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, forwardRef, input, model, output } from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { WR_CHECKBOX_GROUP, type WrCheckboxGroupContext } from './tokens';\n\n/**\n * Manages a group of `<wr-checkbox>` children as a single form value\n * (an array of the checked items' `value` inputs).\n *\n * A signal-forms native control: it implements `FormValueControl<unknown[]>`,\n * so `[formField]` binds to its `value` model. `[(value)]` works standalone,\n * and classic `[(ngModel)]` / reactive forms keep working through the bridge.\n *\n * @example\n * ```html\n * <wr-checkbox-group [formField]=\"form.features\">\n *   <wr-checkbox checkboxValue=\"autosave\">Autosave</wr-checkbox>\n *   <wr-checkbox checkboxValue=\"notifications\">Notifications</wr-checkbox>\n *   <wr-checkbox checkboxValue=\"darkmode\">Dark mode</wr-checkbox>\n * </wr-checkbox-group>\n * ```\n *\n * @see https://ngwr.dev/reference/components/checkbox\n */\n@Component({\n  selector: 'wr-checkbox-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-checkbox-group', role: 'group' },\n  providers: [\n    {\n      provide: WR_CHECKBOX_GROUP,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCheckboxGroup),\n    },\n  ],\n})\nexport class WrCheckboxGroup implements FormValueControl<unknown[]>, WrCheckboxGroupContext {\n  /**\n   * Disable every child checkbox. Bound automatically from the field's\n   * disabled state when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** The checked items' values. Bound by `[formField]`, or two-way via `[(value)]`. */\n  readonly value = model<unknown[]>([]);\n\n  /** Emitted when a child toggles so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  // The current selection as a guaranteed array — a classic-forms binding can\n  // write null even though the type is `unknown[]`, so normalise every read.\n  private readonly selected = computed<readonly unknown[]>(() => {\n    const v = this.value();\n    return Array.isArray(v) ? v : [];\n  });\n\n  /** Effective disabled state (WrCheckboxGroupContext). */\n  readonly isDisabled = computed(() => this.disabled());\n\n  // WrCheckboxGroupContext\n\n  isSelected(value: unknown): boolean {\n    return this.selected().includes(value);\n  }\n\n  toggle(value: unknown): void {\n    if (this.isDisabled()) return;\n    const current = this.selected();\n    const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value];\n    this.value.set(next);\n    this.touch.emit();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;AAKG;AAkBH;;;;;AAKG;MACU,iBAAiB,GAAG,IAAI,cAAc,CAAyB,mBAAmB;;AC7B/F;;;;;AAKG;MAkDU,UAAU,CAAA;AACrB;;;;AAIG;AACM,IAAA,EAAE,GAAG,KAAK,CAAS,QAAQ,CAAC,aAAa,CAAC;2EAAC;AAEpD;;;;;AAKG;IACM,aAAa,GAAG,KAAK,CAAU,IAAI;sFAAC;AAE7C;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAU,KAAK;gFAAC;;IAG/B,KAAK,GAAG,MAAM,EAAQ;AAE/B;;;;;AAKG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,IAAI,GAAG,KAAK,CAAiB,IAAI;6EAAC;AAE3C;;;AAGG;IACM,IAAI,GAAG,KAAK,CAAoB,IAAI;6EAAC;AAE9C;;;;;;;AAOG;IACM,aAAa,GAAG,KAAK,CAAC,KAAK,qFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;IAE1D,KAAK,GAAG,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;AAGnD,IAAA,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE;kFAC1E;;AAGkB,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;QACnD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,OAAO,IAAI;AAChC,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,GAAG,KAAK;IACrD,CAAC;0FAAC;AAEiB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,CAAC;AAC7B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QACxB,IAAI,IAAI,KAAK,IAAI;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAA,CAAE,CAAC;QACrD,IAAI,IAAI,CAAC,aAAa,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,4BAA4B,CAAC;aAC7D,IAAI,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC;QAC7D,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AACjE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;;AAIQ,IAAA,aAAa,CAAC,KAAY,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACvC;QACF;QACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;IAC9D;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;uGAxFW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvDvB,woCAqCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDgBY,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAEL,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,aAAA,EAER,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B,EAAE,SAAS,EAAE,WAAW,EAAE,EAAA,OAAA,EACvB,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,woCAAA,EAAA;;;AErDnB;;;;;AAKG;AAQH;;;;;;;;;;;;;;;;;;AAkBG;MAcU,eAAe,CAAA;AAC1B;;;;;AAKG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,KAAK,GAAG,KAAK,CAAY,EAAE;8EAAC;;IAG5B,KAAK,GAAG,MAAM,EAAQ;;;AAId,IAAA,QAAQ,GAAG,QAAQ,CAAqB,MAAK;AAC5D,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;AACtB,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;IAClC,CAAC;iFAAC;;IAGO,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE;mFAAC;;AAIrD,IAAA,UAAU,CAAC,KAAc,EAAA;QACvB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;IACxC;AAEA,IAAA,MAAM,CAAC,KAAc,EAAA;QACnB,IAAI,IAAI,CAAC,UAAU,EAAE;YAAE;AACvB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC/B,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC;AAC7F,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;uGArCW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,SAAA,EARf;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;;AAE1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC/C,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EATS,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAWf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAb3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,OAAO,EAAE;AACnD,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;;AAE1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC/C,yBAAA;AACF,qBAAA;AACF,iBAAA;;;AC5CD;;AAEG;;;;"}

package/fesm2022/ngwr-circular-text.mjs

@@ -59,7 +59,8 @@ class WrCircularText {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chars" }] : /* istanbul ignore next */ []));
-    spinEl = viewChild.required('spin');
+    spinEl = viewChild.required('spin', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spinEl" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     platform = inject(WrPlatform);
@@ -149,10 +150,10 @@ class WrCircularText {
         this.rotation = this.spinEl().nativeElement.animate([{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }], { duration: newDurMs, iterations: Infinity, easing: 'linear' });
         this.rotation.currentTime = ratio * newDurMs;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCircularText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrCircularText, isStandalone: true, selector: "wr-circular-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, spinDuration: { classPropertyName: "spinDuration", publicName: "spinDuration", isSignal: true, isRequired: false, transformFunction: null }, onHover: { classPropertyName: "onHover", publicName: "onHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-circular-text--bonkers": "onHover() === 'goBonkers'" }, classAttribute: "wr-circular-text" }, viewQueries: [{ propertyName: "spinEl", first: true, predicate: ["spin"], descendants: true, isSignal: true }], ngImport: i0, template: "<span class=\"wr-circular-text__spin\" #spin>\n  @for (c of chars(); track $index) {\n    <span class=\"wr-circular-text__char\" [style.transform]=\"c.transform\">{{ c.ch }}</span>\n  }\n</span>\n", styles: [".wr-circular-text{--wr-circular-text-size: 12rem;--wr-circular-text-radius: calc(var(--wr-circular-text-size) / 2);position:relative;display:inline-block;width:var(--wr-circular-text-size);height:var(--wr-circular-text-size);border-radius:50%;font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;transition:transform .6s cubic-bezier(.2,.9,.3,1.4)}.wr-circular-text__spin{position:absolute;inset:0;will-change:transform}.wr-circular-text__char{position:absolute;top:50%;left:50%;display:inline-block;margin-left:-.5em;margin-top:-.5em;line-height:1}.wr-circular-text--bonkers:hover{transform:scale(.8)}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCircularText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrCircularText, isStandalone: true, selector: "wr-circular-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, spinDuration: { classPropertyName: "spinDuration", publicName: "spinDuration", isSignal: true, isRequired: false, transformFunction: null }, onHover: { classPropertyName: "onHover", publicName: "onHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-circular-text--bonkers": "onHover() === 'goBonkers'" }, classAttribute: "wr-circular-text" }, viewQueries: [{ propertyName: "spinEl", first: true, predicate: ["spin"], descendants: true, isSignal: true }], ngImport: i0, template: "<span class=\"wr-circular-text__spin\" #spin>\n  @for (c of chars(); track $index) {\n    <span class=\"wr-circular-text__char\" [style.transform]=\"c.transform\">{{ c.ch }}</span>\n  }\n</span>\n", styles: [".wr-circular-text{--wr-circular-text-size: 12rem;--wr-circular-text-radius: calc(var(--wr-circular-text-size) / 2);position:relative;display:inline-block;width:var(--wr-circular-text-size);height:var(--wr-circular-text-size);border-radius:50%;font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;transition:transform .6s cubic-bezier(.2,.9,.3,1.4)}.wr-circular-text__spin{position:absolute;inset:0;will-change:transform}.wr-circular-text__char{position:absolute;top:50%;left:50%;display:inline-block;margin-left:-.5em;margin-top:-.5em;line-height:1}.wr-circular-text--bonkers:hover{transform:scale(.8)}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCircularText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCircularText, decorators: [{
             type: Component,
             args: [{ selector: 'wr-circular-text', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-circular-text',

package/fesm2022/ngwr-circular-text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-circular-text.mjs","sources":["../../../projects/lib/circular-text/circular-text.ts","../../../projects/lib/circular-text/circular-text.html","../../../projects/lib/circular-text/ngwr-circular-text.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 * Angular adaptation of the CircularText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/circular-text\n *\n * Reactbits drives the rotation with `motion/react`, which lets the spin\n * angle persist across speed changes. CSS keyframes can't do that — when\n * `animation-duration` changes mid-flight, the browser recomputes the\n * progress as `(elapsed % newDuration) / newDuration`, which visibly\n * jumps the rotation. So this port drives the rotation through the\n * Web Animations API and preserves the current angle when hover swaps\n * the duration. Bonkers `scale` is still CSS-driven (no conflict — the\n * rotation lives on an inner wrapper).\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrCircularTextHover } from './interfaces';\n\ninterface Char {\n  readonly ch: string;\n  readonly transform: string;\n}\n\n/**\n * Text laid out around a circle, with the whole circle spinning. Hover\n * behaviour swaps the spin rate (or pauses it) — the current rotation\n * angle is preserved across the swap so there's no visible jump.\n *\n * @example\n * ```html\n * <wr-circular-text text=\"HELLO * NGWR * \" />\n * <wr-circular-text text=\"GO BONKERS\" onHover=\"goBonkers\" [spinDuration]=\"12\" />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/circular-text\n */\n@Component({\n  selector: 'wr-circular-text',\n  templateUrl: './circular-text.html',\n  styleUrl: './circular-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-circular-text',\n    '[class.wr-circular-text--bonkers]': \"onHover() === 'goBonkers'\",\n  },\n})\nexport class WrCircularText {\n  /** Text to lay out around the circle. */\n  readonly text = input.required<string>();\n\n  /** Seconds per full revolution at rest. @default 20 */\n  readonly spinDuration = input(20, { transform: numAttr(20) });\n\n  /** Hover behaviour. `null` disables hover reactivity. @default 'speedUp' */\n  readonly onHover = input<WrCircularTextHover>('speedUp');\n\n  protected readonly chars = computed<readonly Char[]>(() => {\n    const letters = Array.from(this.text());\n    const len = letters.length;\n    if (len === 0) return [];\n    return letters.map((ch, i) => {\n      const rotation = (360 / len) * i;\n      // Rotate around the spinner's centre, then push each char outward\n      // by the orbit radius (set via CSS var). All chars end up on a\n      // circle of constant radius — not a diagonal line.\n      const transform = `rotate(${rotation}deg) translateY(calc(-1 * var(--wr-circular-text-radius)))`;\n      return { ch, transform };\n    });\n  });\n\n  private readonly spinEl = viewChild.required<ElementRef<HTMLElement>>('spin');\n\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n  private rotation: Animation | null = null;\n  private hovered = false;\n\n  /** Active spin duration in seconds — base, or hover-modified. */\n  private effectiveDuration(): number | 'pause' {\n    const base = this.spinDuration();\n    if (!this.hovered) return base;\n    switch (this.onHover()) {\n      case 'speedUp':\n        return base / 4;\n      case 'slowDown':\n        return base * 2;\n      case 'pause':\n        return 'pause';\n      case 'goBonkers':\n        return base / 20;\n      default:\n        return base;\n    }\n  }\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      this.startOrSwap();\n\n      const host = this.spinEl().nativeElement.parentElement!;\n      const onEnter = (): void => {\n        this.hovered = true;\n        this.startOrSwap();\n      };\n      const onLeave = (): void => {\n        this.hovered = false;\n        this.startOrSwap();\n      };\n      host.addEventListener('mouseenter', onEnter);\n      host.addEventListener('mouseleave', onLeave);\n      this.destroyRef.onDestroy(() => {\n        host.removeEventListener('mouseenter', onEnter);\n        host.removeEventListener('mouseleave', onLeave);\n        this.rotation?.cancel();\n      });\n    });\n\n    // React to input changes (spinDuration, onHover) — and the OS\n    // reduced-motion setting — without losing angle.\n    effect(() => {\n      this.spinDuration();\n      this.onHover();\n      this.platform.prefersReducedMotion();\n      queueMicrotask(() => this.startOrSwap());\n    });\n  }\n\n  /**\n   * Start the rotation, or swap its duration while preserving the\n   * current angle. If the new mode is `pause`, just pause the animation.\n   */\n  private startOrSwap(): void {\n    if (!this.spinEl()) return;\n\n    // Reduced motion: hold the ring still — the circular layout is the\n    // point of the component; only the revolution is decorative.\n    if (this.platform.prefersReducedMotion()) {\n      this.rotation?.pause();\n      return;\n    }\n\n    const target = this.effectiveDuration();\n\n    if (target === 'pause') {\n      this.rotation?.pause();\n      return;\n    }\n\n    const newDurMs = Math.max(1, target * 1000);\n\n    // First start — no previous animation to preserve.\n    if (!this.rotation) {\n      this.rotation = this.spinEl().nativeElement.animate(\n        [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],\n        { duration: newDurMs, iterations: Infinity, easing: 'linear' }\n      );\n      return;\n    }\n\n    // Compute the current angle (0..1 of a full turn) under the old\n    // timing, then restart with the new duration seeked to the same\n    // angle — keeps the visual continuous across speed changes.\n    const oldEffect = this.rotation.effect as KeyframeEffect | null;\n    const oldDurMs = (oldEffect?.getTiming().duration as number) || newDurMs || newDurMs;\n    const oldTime = (this.rotation.currentTime as number) ?? 0;\n    const ratio = (((oldTime % oldDurMs) + oldDurMs) % oldDurMs) / oldDurMs;\n\n    this.rotation.cancel();\n    this.rotation = this.spinEl().nativeElement.animate(\n      [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],\n      { duration: newDurMs, iterations: Infinity, easing: 'linear' }\n    );\n    this.rotation.currentTime = ratio * newDurMs;\n  }\n}\n\nexport type { WrCircularTextHover } from './interfaces';\n","<span class=\"wr-circular-text__spin\" #spin>\n  @for (c of chars(); track $index) {\n    <span class=\"wr-circular-text__char\" [style.transform]=\"c.transform\">{{ c.ch }}</span>\n  }\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-circular-text.mjs","sources":["../../../projects/lib/circular-text/circular-text.ts","../../../projects/lib/circular-text/circular-text.html","../../../projects/lib/circular-text/ngwr-circular-text.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 * Angular adaptation of the CircularText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/circular-text\n *\n * Reactbits drives the rotation with `motion/react`, which lets the spin\n * angle persist across speed changes. CSS keyframes can't do that — when\n * `animation-duration` changes mid-flight, the browser recomputes the\n * progress as `(elapsed % newDuration) / newDuration`, which visibly\n * jumps the rotation. So this port drives the rotation through the\n * Web Animations API and preserves the current angle when hover swaps\n * the duration. Bonkers `scale` is still CSS-driven (no conflict — the\n * rotation lives on an inner wrapper).\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrCircularTextHover } from './interfaces';\n\ninterface Char {\n  readonly ch: string;\n  readonly transform: string;\n}\n\n/**\n * Text laid out around a circle, with the whole circle spinning. Hover\n * behaviour swaps the spin rate (or pauses it) — the current rotation\n * angle is preserved across the swap so there's no visible jump.\n *\n * @example\n * ```html\n * <wr-circular-text text=\"HELLO * NGWR * \" />\n * <wr-circular-text text=\"GO BONKERS\" onHover=\"goBonkers\" [spinDuration]=\"12\" />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/circular-text\n */\n@Component({\n  selector: 'wr-circular-text',\n  templateUrl: './circular-text.html',\n  styleUrl: './circular-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-circular-text',\n    '[class.wr-circular-text--bonkers]': \"onHover() === 'goBonkers'\",\n  },\n})\nexport class WrCircularText {\n  /** Text to lay out around the circle. */\n  readonly text = input.required<string>();\n\n  /** Seconds per full revolution at rest. @default 20 */\n  readonly spinDuration = input(20, { transform: numAttr(20) });\n\n  /** Hover behaviour. `null` disables hover reactivity. @default 'speedUp' */\n  readonly onHover = input<WrCircularTextHover>('speedUp');\n\n  protected readonly chars = computed<readonly Char[]>(() => {\n    const letters = Array.from(this.text());\n    const len = letters.length;\n    if (len === 0) return [];\n    return letters.map((ch, i) => {\n      const rotation = (360 / len) * i;\n      // Rotate around the spinner's centre, then push each char outward\n      // by the orbit radius (set via CSS var). All chars end up on a\n      // circle of constant radius — not a diagonal line.\n      const transform = `rotate(${rotation}deg) translateY(calc(-1 * var(--wr-circular-text-radius)))`;\n      return { ch, transform };\n    });\n  });\n\n  private readonly spinEl = viewChild.required<ElementRef<HTMLElement>>('spin');\n\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n  private rotation: Animation | null = null;\n  private hovered = false;\n\n  /** Active spin duration in seconds — base, or hover-modified. */\n  private effectiveDuration(): number | 'pause' {\n    const base = this.spinDuration();\n    if (!this.hovered) return base;\n    switch (this.onHover()) {\n      case 'speedUp':\n        return base / 4;\n      case 'slowDown':\n        return base * 2;\n      case 'pause':\n        return 'pause';\n      case 'goBonkers':\n        return base / 20;\n      default:\n        return base;\n    }\n  }\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      this.startOrSwap();\n\n      const host = this.spinEl().nativeElement.parentElement!;\n      const onEnter = (): void => {\n        this.hovered = true;\n        this.startOrSwap();\n      };\n      const onLeave = (): void => {\n        this.hovered = false;\n        this.startOrSwap();\n      };\n      host.addEventListener('mouseenter', onEnter);\n      host.addEventListener('mouseleave', onLeave);\n      this.destroyRef.onDestroy(() => {\n        host.removeEventListener('mouseenter', onEnter);\n        host.removeEventListener('mouseleave', onLeave);\n        this.rotation?.cancel();\n      });\n    });\n\n    // React to input changes (spinDuration, onHover) — and the OS\n    // reduced-motion setting — without losing angle.\n    effect(() => {\n      this.spinDuration();\n      this.onHover();\n      this.platform.prefersReducedMotion();\n      queueMicrotask(() => this.startOrSwap());\n    });\n  }\n\n  /**\n   * Start the rotation, or swap its duration while preserving the\n   * current angle. If the new mode is `pause`, just pause the animation.\n   */\n  private startOrSwap(): void {\n    if (!this.spinEl()) return;\n\n    // Reduced motion: hold the ring still — the circular layout is the\n    // point of the component; only the revolution is decorative.\n    if (this.platform.prefersReducedMotion()) {\n      this.rotation?.pause();\n      return;\n    }\n\n    const target = this.effectiveDuration();\n\n    if (target === 'pause') {\n      this.rotation?.pause();\n      return;\n    }\n\n    const newDurMs = Math.max(1, target * 1000);\n\n    // First start — no previous animation to preserve.\n    if (!this.rotation) {\n      this.rotation = this.spinEl().nativeElement.animate(\n        [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],\n        { duration: newDurMs, iterations: Infinity, easing: 'linear' }\n      );\n      return;\n    }\n\n    // Compute the current angle (0..1 of a full turn) under the old\n    // timing, then restart with the new duration seeked to the same\n    // angle — keeps the visual continuous across speed changes.\n    const oldEffect = this.rotation.effect as KeyframeEffect | null;\n    const oldDurMs = (oldEffect?.getTiming().duration as number) || newDurMs || newDurMs;\n    const oldTime = (this.rotation.currentTime as number) ?? 0;\n    const ratio = (((oldTime % oldDurMs) + oldDurMs) % oldDurMs) / oldDurMs;\n\n    this.rotation.cancel();\n    this.rotation = this.spinEl().nativeElement.animate(\n      [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],\n      { duration: newDurMs, iterations: Infinity, easing: 'linear' }\n    );\n    this.rotation.currentTime = ratio * newDurMs;\n  }\n}\n\nexport type { WrCircularTextHover } from './interfaces';\n","<span class=\"wr-circular-text__spin\" #spin>\n  @for (c of chars(); track $index) {\n    <span class=\"wr-circular-text__char\" [style.transform]=\"c.transform\">{{ c.ch }}</span>\n  }\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-click-spark.mjs

@@ -36,8 +36,13 @@ const EASINGS = {
  * @see https://www.reactbits.dev/animations/click-spark
  */
 class WrClickSpark {
-    /** Spark line colour. @default '#fff' */
-    sparkColor = input('#fff', /* @ts-ignore */
+    /**
+     * Spark line colour. Accepts any CSS colour, or a `var(--wr-…)` token which is
+     * resolved against the host so it tracks the theme. The default flips with the
+     * theme — dark sparks in light mode, light sparks in dark.
+     * @default 'var(--wr-color-dark)'
+     */
+    sparkColor = input('var(--wr-color-dark)', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sparkColor" }] : /* istanbul ignore next */ []));
     /** Length of each spark line in pixels (at t=0; tapers to 0 at t=1). @default 10 */
     sparkSize = input(10, { ...(ngDevMode ? { debugName: "sparkSize" } : /* istanbul ignore next */ {}), transform: numAttr(10) });
@@ -52,7 +57,8 @@ class WrClickSpark {
     ...(ngDevMode ? [{ debugName: "easing" }] : /* istanbul ignore next */ []));
     /** Multiplier on the travel distance — bumps the radius without changing `sparkRadius`. @default 1 */
     extraScale = input(1, { ...(ngDevMode ? { debugName: "extraScale" } : /* istanbul ignore next */ {}), transform: numAttr(1) });
-    canvasRef = viewChild.required('canvas');
+    canvasRef = viewChild.required('canvas', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasRef" }] : /* istanbul ignore next */ []));
     host = inject(ElementRef);
     destroyRef = inject(DestroyRef);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
@@ -82,6 +88,20 @@ class WrClickSpark {
         }
     }
     // Internals
+    /**
+     * Canvas `strokeStyle` can't read CSS custom properties, so a `var(--wr-…)`
+     * token is resolved against the host's computed style here. Plain colours
+     * pass through untouched. Falls back to a dark literal if the custom
+     * property resolves to nothing.
+     */
+    resolveColor() {
+        const color = this.sparkColor();
+        const match = /^var\((--[\w-]+)\)$/.exec(color.trim());
+        if (!match)
+            return color;
+        const resolved = getComputedStyle(this.host.nativeElement).getPropertyValue(match[1]).trim();
+        return resolved || '#0f172a';
+    }
     syncCanvasSize() {
         const canvas = this.canvasRef().nativeElement;
         const host = this.host.nativeElement;
@@ -118,7 +138,7 @@ class WrClickSpark {
             const sparkRadius = this.sparkRadius();
             const sparkSize = this.sparkSize();
             const extraScale = this.extraScale();
-            const color = this.sparkColor();
+            const color = this.resolveColor();
             this.sparks = this.sparks.filter(spark => {
                 const elapsed = ts - spark.startTime;
                 if (elapsed >= duration)
@@ -144,10 +164,10 @@ class WrClickSpark {
         raf = requestAnimationFrame(draw);
         this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrClickSpark, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrClickSpark, isStandalone: true, selector: "wr-click-spark", inputs: { sparkColor: { classPropertyName: "sparkColor", publicName: "sparkColor", isSignal: true, isRequired: false, transformFunction: null }, sparkSize: { classPropertyName: "sparkSize", publicName: "sparkSize", isSignal: true, isRequired: false, transformFunction: null }, sparkRadius: { classPropertyName: "sparkRadius", publicName: "sparkRadius", isSignal: true, isRequired: false, transformFunction: null }, sparkCount: { classPropertyName: "sparkCount", publicName: "sparkCount", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, extraScale: { classPropertyName: "extraScale", publicName: "extraScale", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "wr-click-spark" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas #canvas class=\"wr-click-spark__canvas\"></canvas>\n<ng-content />\n", styles: [".wr-click-spark{position:relative;display:block}.wr-click-spark__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrClickSpark, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: WrClickSpark, isStandalone: true, selector: "wr-click-spark", inputs: { sparkColor: { classPropertyName: "sparkColor", publicName: "sparkColor", isSignal: true, isRequired: false, transformFunction: null }, sparkSize: { classPropertyName: "sparkSize", publicName: "sparkSize", isSignal: true, isRequired: false, transformFunction: null }, sparkRadius: { classPropertyName: "sparkRadius", publicName: "sparkRadius", isSignal: true, isRequired: false, transformFunction: null }, sparkCount: { classPropertyName: "sparkCount", publicName: "sparkCount", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, extraScale: { classPropertyName: "extraScale", publicName: "extraScale", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "wr-click-spark" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas #canvas class=\"wr-click-spark__canvas\"></canvas>\n<ng-content />\n", styles: [".wr-click-spark{position:relative;display:block}.wr-click-spark__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrClickSpark, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrClickSpark, decorators: [{
             type: Component,
             args: [{ selector: 'wr-click-spark', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-click-spark',