ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-textarea.mjs

@@ -1,11 +1,9 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, inject, PLATFORM_ID, ChangeDetectorRef, booleanAttribute, numberAttribute, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, HostBinding } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { noop } from 'rxjs';
-import { WrAbstractBase } from 'ngwr/cdk';
+import { input, signal, computed, viewChild, inject, PLATFORM_ID, effect, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { noop } from 'ngwr/utils';
 
 /**
  * @license
@@ -14,153 +12,141 @@ import { WrAbstractBase } from 'ngwr/cdk';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 /**
- * NGWR textarea component.
+ * Multi-line text input.
  *
- * {@tutorial} [How to use wr-textarea]{@link http://ngwr.dev/docs/components/textarea}
+ * Implements `ControlValueAccessor`. Optional `autosize` grows the
+ * textarea with its content, capped at `maxRows` if provided.
+ *
+ * @example
+ * ```html
+ * <wr-textarea placeholder="Notes" [(ngModel)]="text" />
+ * <wr-textarea autosize [maxRows]="6" [(ngModel)]="text" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/textarea
  */
-class WrTextareaComponent extends WrAbstractBase {
+class WrTextarea {
+    /** Native placeholder text. @default '' */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Visible row count. @default 3 */
+    rows = input(3, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 3) });
+    /** Allow user resize via the native handle. @default true */
+    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Read-only state. @default false */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Grow the textarea to fit its content. @default false */
+    autosize = input(false, { ...(ngDevMode ? { debugName: "autosize" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Cap autosize at this many rows. Ignored when `autosize` is false. */
+    maxRows = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Disable the textarea. Also set by Angular forms via `setDisabledState`.
+     *
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    value = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    native = viewChild.required('native');
+    classes = computed(() => {
+        const parts = ['wr-textarea'];
+        if (!this.resizable() || this.autosize())
+            parts.push('wr-textarea--no-resize');
+        if (this.focused())
+            parts.push('wr-textarea--focused');
+        if (this.effectiveDisabled())
+            parts.push('wr-textarea--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    onChange = noop;
+    onTouched = noop;
     constructor() {
-        super(...arguments);
-        this.placeholder = '';
-        this.readonly = false;
-        this.resizable = true;
-        this.autosize = false;
-        this.rows = 2;
-        this.inputValue = signal(null, ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
-        this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.platformId = inject(PLATFORM_ID);
-        this.cdr = inject(ChangeDetectorRef);
-        this.onChange = noop;
-        this.onTouch = noop;
-    }
-    set disabled(value) {
-        this.isDisabled.set(value);
-    }
-    get disabled() {
-        return this.isDisabled();
+        // Autosize: re-fit whenever value or autosize toggles.
+        effect(() => {
+            if (!this.autosize() || !this.isBrowser)
+                return;
+            // Read `value` to register dependency
+            this.value();
+            requestAnimationFrame(() => this.resize());
+        });
     }
-    get elClasses() {
-        return {
-            'wr-textarea': true,
-            'wr-textarea--resizable': this.resizable,
-            'wr-textarea--disabled': this.isDisabled(),
-            'wr-textarea--autosize': this.autosize,
-        };
-    }
-    get isBrowser() {
-        return isPlatformBrowser(this.platformId);
-    }
-    ngAfterViewInit() {
-        if (this.autosize && this.isBrowser) {
-            this.resizeTextarea();
-        }
+    // ControlValueAccessor
+    writeValue(value) {
+        this.value.set(value ?? '');
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouch = fn;
+        this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.isDisabled.set(coerceBooleanProperty(isDisabled));
+        this.disabledFromCva.set(isDisabled);
     }
-    writeValue(value) {
-        this.value = value;
-        this.onChange(value);
-        this.inputValue.set(value);
-        if (this.isBrowser) {
-            requestAnimationFrame(() => {
-                this.resizeTextarea();
-            });
-        }
-        this.cdr.markForCheck();
+    // Template handlers
+    onInput(event) {
+        const next = event.target.value;
+        this.value.set(next);
+        this.onChange(next);
     }
-    resizeTextarea() {
-        if (!this.autosize || !this.textareaNative || !this.isBrowser) {
+    onBlur() {
+        this.focused.set(false);
+        this.onTouched();
+    }
+    resize() {
+        const el = this.native()?.nativeElement;
+        if (!el)
             return;
-        }
-        const textarea = this.textareaNative.nativeElement;
-        textarea.style.height = 'auto';
-        let newHeight;
-        let maxHeight = 'none';
-        if (this.maxRows) {
-            const computedStyle = getComputedStyle(textarea);
-            const lineHeight = parseInt(computedStyle.lineHeight, 10) || parseInt(computedStyle.fontSize, 10) * 1.2;
-            maxHeight = `${lineHeight * this.maxRows}px`;
-            newHeight = Math.min(textarea.scrollHeight, lineHeight * this.maxRows);
+        el.style.height = 'auto';
+        const maxRows = this.maxRows();
+        if (maxRows && maxRows > 0) {
+            const cs = getComputedStyle(el);
+            const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2;
+            const cap = lineHeight * maxRows;
+            const next = Math.min(el.scrollHeight, cap);
+            el.style.height = `${next}px`;
+            el.style.overflowY = el.scrollHeight > cap ? 'auto' : 'hidden';
         }
         else {
-            newHeight = textarea.scrollHeight;
+            el.style.height = `${el.scrollHeight}px`;
+            el.style.overflowY = 'hidden';
         }
-        textarea.style.maxHeight = maxHeight;
-        textarea.style.height = `${newHeight}px`;
-        textarea.style.overflowY = this.maxRows && textarea.scrollHeight > newHeight ? 'auto' : 'hidden';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.10", type: WrTextareaComponent, isStandalone: true, selector: "wr-textarea", inputs: { placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], autosize: ["autosize", "autosize", booleanAttribute], rows: ["rows", "rows", numberAttribute], maxRows: ["maxRows", "maxRows", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class": "this.elClasses" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: WrTextarea, isStandalone: true, selector: "wr-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autosize: { classPropertyName: "autosize", publicName: "autosize", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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(() => WrTextareaComponent),
+                useExisting: forwardRef(() => WrTextarea),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textareaNative", first: true, predicate: ["textareaNative"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<textarea\n  #textareaNative\n  class=\"wr-textarea__native\"\n  [placeholder]=\"placeholder\"\n  [rows]=\"rows\"\n  [readonly]=\"readonly\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"inputValue()\"\n  (ngModelChange)=\"writeValue($event)\"\n  (input)=\"resizeTextarea()\"\n></textarea>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, isSignal: true }], ngImport: i0, template: "<textarea\n  #native\n  class=\"wr-textarea__native\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"effectiveDisabled()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"onBlur()\"\n></textarea>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-textarea', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule], providers: [
+            args: [{ selector: 'wr-textarea', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrTextareaComponent),
+                            useExisting: forwardRef(() => WrTextarea),
                             multi: true,
                         },
-                    ], template: "<textarea\n  #textareaNative\n  class=\"wr-textarea__native\"\n  [placeholder]=\"placeholder\"\n  [rows]=\"rows\"\n  [readonly]=\"readonly\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"inputValue()\"\n  (ngModelChange)=\"writeValue($event)\"\n  (input)=\"resizeTextarea()\"\n></textarea>\n" }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], readonly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], resizable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], autosize: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], rows: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], maxRows: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], textareaNative: [{
-                type: ViewChild,
-                args: ['textareaNative']
-            }], 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
- */
-
-/**
- * @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
- */
+                    ], template: "<textarea\n  #native\n  class=\"wr-textarea__native\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"effectiveDisabled()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"onBlur()\"\n></textarea>\n" }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autosize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosize", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], native: [{ type: i0.ViewChild, args: ['native', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrTextareaComponent };
+export { WrTextarea };
 //# sourceMappingURL=ngwr-textarea.mjs.map

package/fesm2022/ngwr-textarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-textarea.mjs","sources":["../../../projects/lib/textarea/textarea.component.ts","../../../projects/lib/textarea/textarea.component.html","../../../projects/lib/textarea/public-api.ts","../../../projects/lib/textarea/index.ts","../../../projects/lib/textarea/ngwr-textarea.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 { isPlatformBrowser } from '@angular/common';\nimport {\n  AfterViewInit,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  forwardRef,\n  HostBinding,\n  inject,\n  Input,\n  numberAttribute,\n  PLATFORM_ID,\n  signal,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { noop } from 'rxjs';\n\nimport { WrAbstractBase } from 'ngwr/cdk';\nimport { SafeAny } from 'ngwr/cdk/types';\n\n/**\n * NGWR textarea component.\n *\n * {@tutorial} [How to use wr-textarea]{@link http://ngwr.dev/docs/components/textarea}\n */\n@Component({\n  selector: 'wr-textarea',\n  templateUrl: './textarea.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [FormsModule],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrTextareaComponent),\n      multi: true,\n    },\n  ],\n})\nexport class WrTextareaComponent extends WrAbstractBase implements ControlValueAccessor, AfterViewInit {\n  @Input() placeholder = '';\n  @Input({ transform: booleanAttribute }) readonly = false;\n  @Input({ transform: booleanAttribute }) resizable = true;\n  @Input({ transform: booleanAttribute }) autosize = false;\n  @Input({ transform: numberAttribute }) rows = 2;\n  @Input({ transform: numberAttribute }) maxRows?: number;\n\n  @Input({ transform: booleanAttribute })\n  set disabled(value: boolean) {\n    this.isDisabled.set(value);\n  }\n  get disabled(): boolean {\n    return this.isDisabled();\n  }\n\n  @ViewChild('textareaNative')\n  private textareaNative: ElementRef<HTMLTextAreaElement> | undefined;\n\n  @HostBinding('class')\n  get elClasses(): SafeAny {\n    return {\n      'wr-textarea': true,\n      'wr-textarea--resizable': this.resizable,\n      'wr-textarea--disabled': this.isDisabled(),\n      'wr-textarea--autosize': this.autosize,\n    };\n  }\n\n  protected value?: string;\n\n  protected readonly inputValue = signal<string | null>(null);\n  protected readonly isDisabled = signal(false);\n\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  private get isBrowser(): boolean {\n    return isPlatformBrowser(this.platformId);\n  }\n\n  ngAfterViewInit(): void {\n    if (this.autosize && this.isBrowser) {\n      this.resizeTextarea();\n    }\n  }\n\n  onChange: (value: string) => void = noop;\n  onTouch: () => void = noop;\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled.set(coerceBooleanProperty(isDisabled));\n  }\n\n  writeValue(value: string): void {\n    this.value = value;\n    this.onChange(value);\n    this.inputValue.set(value);\n\n    if (this.isBrowser) {\n      requestAnimationFrame(() => {\n        this.resizeTextarea();\n      });\n    }\n\n    this.cdr.markForCheck();\n  }\n\n  resizeTextarea(): void {\n    if (!this.autosize || !this.textareaNative || !this.isBrowser) {\n      return;\n    }\n\n    const textarea = this.textareaNative.nativeElement;\n\n    textarea.style.height = 'auto';\n\n    let newHeight: number;\n    let maxHeight = 'none';\n\n    if (this.maxRows) {\n      const computedStyle = getComputedStyle(textarea);\n      const lineHeight = parseInt(computedStyle.lineHeight, 10) || parseInt(computedStyle.fontSize, 10) * 1.2;\n\n      maxHeight = `${lineHeight * this.maxRows}px`;\n      newHeight = Math.min(textarea.scrollHeight, lineHeight * this.maxRows);\n    } else {\n      newHeight = textarea.scrollHeight;\n    }\n\n    textarea.style.maxHeight = maxHeight;\n    textarea.style.height = `${newHeight}px`;\n    textarea.style.overflowY = this.maxRows && textarea.scrollHeight > newHeight ? 'auto' : 'hidden';\n  }\n}\n","<textarea\n  #textareaNative\n  class=\"wr-textarea__native\"\n  [placeholder]=\"placeholder\"\n  [rows]=\"rows\"\n  [readonly]=\"readonly\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"inputValue()\"\n  (ngModelChange)=\"writeValue($event)\"\n  (input)=\"resizeTextarea()\"\n></textarea>\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 './textarea.component';\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 './public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-textarea.mjs","sources":["../../../projects/lib/textarea/textarea.ts","../../../projects/lib/textarea/textarea.html","../../../projects/lib/textarea/ngwr-textarea.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, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport type { ElementRef } from '@angular/core';\nimport {\n  Component,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { noop } from 'ngwr/utils';\n\n/**\n * Multi-line text input.\n *\n * Implements `ControlValueAccessor`. Optional `autosize` grows the\n * textarea with its content, capped at `maxRows` if provided.\n *\n * @example\n * ```html\n * <wr-textarea placeholder=\"Notes\" [(ngModel)]=\"text\" />\n * <wr-textarea autosize [maxRows]=\"6\" [(ngModel)]=\"text\" />\n * ```\n *\n * @see https://ngwr.dev/components/textarea\n */\n@Component({\n  selector: 'wr-textarea',\n  templateUrl: './textarea.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrTextarea),\n      multi: true,\n    },\n  ],\n})\nexport class WrTextarea implements ControlValueAccessor {\n  /** Native placeholder text. @default '' */\n  readonly placeholder = input<string>('');\n\n  /** Visible row count. @default 3 */\n  readonly rows = input(3, { transform: (v: unknown): number => coerceNumberProperty(v, 3) });\n\n  /** Allow user resize via the native handle. @default true */\n  readonly resizable = input(true, { transform: coerceBooleanProperty });\n\n  /** Read-only state. @default false */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** Grow the textarea to fit its content. @default false */\n  readonly autosize = input(false, { transform: coerceBooleanProperty });\n\n  /** Cap autosize at this many rows. Ignored when `autosize` is false. */\n  readonly maxRows = input<number | null>(null);\n\n  /**\n   * Disable the textarea. Also set by Angular forms via `setDisabledState`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly value = signal<string>('');\n  protected readonly disabledFromCva = signal(false);\n  protected readonly focused = signal(false);\n\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  protected readonly native = viewChild.required<ElementRef<HTMLTextAreaElement>>('native');\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-textarea'];\n    if (!this.resizable() || this.autosize()) parts.push('wr-textarea--no-resize');\n    if (this.focused()) parts.push('wr-textarea--focused');\n    if (this.effectiveDisabled()) parts.push('wr-textarea--disabled');\n    return parts.join(' ');\n  });\n\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n  private onChange: (value: string) => void = noop;\n  private onTouched: () => void = noop;\n\n  constructor() {\n    // Autosize: re-fit whenever value or autosize toggles.\n    effect(() => {\n      if (!this.autosize() || !this.isBrowser) return;\n      // Read `value` to register dependency\n      this.value();\n      requestAnimationFrame(() => this.resize());\n    });\n  }\n\n  // ControlValueAccessor\n\n  writeValue(value: string | null): void {\n    this.value.set(value ?? '');\n  }\n\n  registerOnChange(fn: (value: string) => 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(isDisabled);\n  }\n\n  // Template handlers\n\n  protected onInput(event: Event): void {\n    const next = (event.target as HTMLTextAreaElement).value;\n    this.value.set(next);\n    this.onChange(next);\n  }\n\n  protected onBlur(): void {\n    this.focused.set(false);\n    this.onTouched();\n  }\n\n  private resize(): void {\n    const el = this.native()?.nativeElement;\n    if (!el) return;\n\n    el.style.height = 'auto';\n\n    const maxRows = this.maxRows();\n    if (maxRows && maxRows > 0) {\n      const cs = getComputedStyle(el);\n      const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2;\n      const cap = lineHeight * maxRows;\n      const next = Math.min(el.scrollHeight, cap);\n      el.style.height = `${next}px`;\n      el.style.overflowY = el.scrollHeight > cap ? 'auto' : 'hidden';\n    } else {\n      el.style.height = `${el.scrollHeight}px`;\n      el.style.overflowY = 'hidden';\n    }\n  }\n}\n","<textarea\n  #native\n  class=\"wr-textarea__native\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"effectiveDisabled()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"focused.set(true)\"\n  (blur)=\"onBlur()\"\n></textarea>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-theme.mjs

@@ -0,0 +1,152 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, computed, effect, Service, makeEnvironmentProviders } from '@angular/core';
+import { WrPlatform } from 'ngwr/platform';
+import { WrStorage } from 'ngwr/storage';
+
+/**
+ * @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
+ */
+/**
+ * Built-in color variants available to NGWR components.
+ *
+ * Kept in sync manually with the SCSS `$base-colors` map in
+ * `theme/styles/_colors.scss`. Both sources must stay aligned —
+ * adding a color requires updating both this array and the SCSS map.
+ *
+ * @example
+ * ```ts
+ * import { WR_COLORS } from 'ngwr/theme';
+ *
+ * // Iterate all colors for demos or documentation
+ * WR_COLORS.forEach(color => console.log(color));
+ * ```
+ */
+const WR_COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+
+/**
+ * @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
+ */
+const DEFAULT_WR_THEME_CONFIG = {
+    defaultMode: 'auto',
+    storageKey: 'wr-theme',
+    attribute: 'data-theme',
+};
+const WR_THEME_CONFIG = new InjectionToken('WR_THEME_CONFIG', {
+    factory: () => DEFAULT_WR_THEME_CONFIG,
+});
+
+/**
+ * @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
+ */
+const VALID_MODES = ['light', 'dark', 'auto'];
+function isThemeMode(v) {
+    return typeof v === 'string' && VALID_MODES.includes(v);
+}
+/**
+ * Light / dark theme manager.
+ *
+ * - `mode` is what the user picked (`light` | `dark` | `auto`).
+ * - `resolved` is what's actually applied — `auto` resolves through
+ *   {@link WrPlatform.prefersDark}.
+ * - Writes `[data-theme]` (or your configured attribute) on `<html>`.
+ * - Persists the selected mode via {@link WrStorage} (defaults to
+ *   `localStorage`; swap the storage engine globally to change where).
+ *
+ * @example
+ * ```ts
+ * const theme = inject(WrTheme);
+ * theme.set('dark');
+ * theme.toggle();
+ * theme.resolved();  // 'dark'
+ * ```
+ *
+ * @see https://ngwr.dev/services/theme
+ */
+class WrTheme {
+    doc = inject(DOCUMENT);
+    platform = inject(WrPlatform);
+    storage = inject(WrStorage);
+    config = inject(WR_THEME_CONFIG);
+    /** User-selected mode. */
+    mode = signal(this.readPersisted() ?? this.config.defaultMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Resolved theme actually applied to the DOM. */
+    resolved = computed(() => {
+        const m = this.mode();
+        if (m === 'auto')
+            return this.platform.prefersDark() ? 'dark' : 'light';
+        return m;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Whenever the resolved theme changes, mirror it to the DOM + persist mode.
+        effect(() => {
+            const value = this.resolved();
+            const html = this.doc.documentElement;
+            if (html)
+                html.setAttribute(this.config.attribute, value);
+            this.persist(this.mode());
+        });
+    }
+    /** Switch to a specific mode. */
+    set(mode) {
+        this.mode.set(mode);
+    }
+    /** Cycle: light → dark → light (skips auto). */
+    toggle() {
+        this.mode.set(this.resolved() === 'dark' ? 'light' : 'dark');
+    }
+    // Persistence
+    readPersisted() {
+        if (!this.config.storageKey)
+            return null;
+        const raw = this.storage.get(this.config.storageKey);
+        return isThemeMode(raw) ? raw : null;
+    }
+    persist(mode) {
+        if (!this.config.storageKey)
+            return;
+        this.storage.set(this.config.storageKey, mode);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTheme, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: WrTheme });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTheme, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+
+/**
+ * @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
+ */
+/**
+ * Configure {@link WrTheme}. Partial — merged with defaults.
+ *
+ * @example
+ * ```ts
+ * provideWrTheme({ defaultMode: 'dark', storageKey: 'my-app-theme' })
+ * ```
+ */
+function provideWrTheme(config = {}) {
+    const merged = { ...DEFAULT_WR_THEME_CONFIG, ...config };
+    return makeEnvironmentProviders([{ provide: WR_THEME_CONFIG, useValue: merged }]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_WR_THEME_CONFIG, WR_COLORS, WR_THEME_CONFIG, WrTheme, provideWrTheme };
+//# sourceMappingURL=ngwr-theme.mjs.map

package/fesm2022/ngwr-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-theme.mjs","sources":["../../../projects/lib/theme/colors.ts","../../../projects/lib/theme/wr-theme-config.ts","../../../projects/lib/theme/services/wr-theme.ts","../../../projects/lib/theme/provide-wr-theme.ts","../../../projects/lib/theme/ngwr-theme.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\n/**\n * Built-in color variants available to NGWR components.\n *\n * Kept in sync manually with the SCSS `$base-colors` map in\n * `theme/styles/_colors.scss`. Both sources must stay aligned —\n * adding a color requires updating both this array and the SCSS map.\n *\n * @example\n * ```ts\n * import { WR_COLORS } from 'ngwr/theme';\n *\n * // Iterate all colors for demos or documentation\n * WR_COLORS.forEach(color => console.log(color));\n * ```\n */\nexport const WR_COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'] as const;\n\n/**\n * A color variant name.\n *\n * Use as an input type on components that accept a color:\n *\n * @example\n * ```ts\n * import type { WrColor } from 'ngwr/theme';\n *\n * @Component({...})\n * export class MyComponent {\n *   readonly color = input<WrColor>('primary');\n * }\n * ```\n */\nexport type WrColor = (typeof WR_COLORS)[number];\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 { InjectionToken } from '@angular/core';\n\n/** Mode the user explicitly selected. `auto` follows `prefers-color-scheme`. */\nexport type WrThemeMode = 'light' | 'dark' | 'auto';\n\n/** Resolved theme — what's actually applied to the DOM. */\nexport type WrResolvedTheme = 'light' | 'dark';\n\n/** Configuration for {@link WrTheme}. */\nexport interface WrThemeConfig {\n  /** Initial mode used when no persisted value is present. @default 'auto' */\n  readonly defaultMode: WrThemeMode;\n  /** localStorage key for persistence. Set to `null` to disable persistence. @default 'wr-theme' */\n  readonly storageKey: string | null;\n  /** Attribute applied to `<html>` to expose the resolved theme. @default 'data-theme' */\n  readonly attribute: string;\n}\n\nexport const DEFAULT_WR_THEME_CONFIG: WrThemeConfig = {\n  defaultMode: 'auto',\n  storageKey: 'wr-theme',\n  attribute: 'data-theme',\n};\n\nexport const WR_THEME_CONFIG = new InjectionToken<WrThemeConfig>('WR_THEME_CONFIG', {\n  factory: (): WrThemeConfig => DEFAULT_WR_THEME_CONFIG,\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\nimport { DOCUMENT } from '@angular/common';\nimport { Service, type Signal, computed, effect, inject, signal } from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrStorage } from 'ngwr/storage';\n\nimport { WR_THEME_CONFIG, type WrResolvedTheme, type WrThemeMode } from '../wr-theme-config';\n\nconst VALID_MODES: readonly WrThemeMode[] = ['light', 'dark', 'auto'];\n\nfunction isThemeMode(v: unknown): v is WrThemeMode {\n  return typeof v === 'string' && (VALID_MODES as readonly string[]).includes(v);\n}\n\n/**\n * Light / dark theme manager.\n *\n * - `mode` is what the user picked (`light` | `dark` | `auto`).\n * - `resolved` is what's actually applied — `auto` resolves through\n *   {@link WrPlatform.prefersDark}.\n * - Writes `[data-theme]` (or your configured attribute) on `<html>`.\n * - Persists the selected mode via {@link WrStorage} (defaults to\n *   `localStorage`; swap the storage engine globally to change where).\n *\n * @example\n * ```ts\n * const theme = inject(WrTheme);\n * theme.set('dark');\n * theme.toggle();\n * theme.resolved();  // 'dark'\n * ```\n *\n * @see https://ngwr.dev/services/theme\n */\n@Service()\nexport class WrTheme {\n  private readonly doc = inject(DOCUMENT);\n  private readonly platform = inject(WrPlatform);\n  private readonly storage = inject(WrStorage);\n  private readonly config = inject(WR_THEME_CONFIG);\n\n  /** User-selected mode. */\n  readonly mode = signal<WrThemeMode>(this.readPersisted() ?? this.config.defaultMode);\n\n  /** Resolved theme actually applied to the DOM. */\n  readonly resolved: Signal<WrResolvedTheme> = computed(() => {\n    const m = this.mode();\n    if (m === 'auto') return this.platform.prefersDark() ? 'dark' : 'light';\n    return m;\n  });\n\n  constructor() {\n    // Whenever the resolved theme changes, mirror it to the DOM + persist mode.\n    effect(() => {\n      const value = this.resolved();\n      const html = this.doc.documentElement;\n      if (html) html.setAttribute(this.config.attribute, value);\n      this.persist(this.mode());\n    });\n  }\n\n  /** Switch to a specific mode. */\n  set(mode: WrThemeMode): void {\n    this.mode.set(mode);\n  }\n\n  /** Cycle: light → dark → light (skips auto). */\n  toggle(): void {\n    this.mode.set(this.resolved() === 'dark' ? 'light' : 'dark');\n  }\n\n  // Persistence\n\n  private readPersisted(): WrThemeMode | null {\n    if (!this.config.storageKey) return null;\n    const raw = this.storage.get<WrThemeMode>(this.config.storageKey);\n    return isThemeMode(raw) ? raw : null;\n  }\n\n  private persist(mode: WrThemeMode): void {\n    if (!this.config.storageKey) return;\n    this.storage.set(this.config.storageKey, mode);\n  }\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\nimport { type EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nimport { DEFAULT_WR_THEME_CONFIG, WR_THEME_CONFIG, type WrThemeConfig } from './wr-theme-config';\n\n/**\n * Configure {@link WrTheme}. Partial — merged with defaults.\n *\n * @example\n * ```ts\n * provideWrTheme({ defaultMode: 'dark', storageKey: 'my-app-theme' })\n * ```\n */\nexport function provideWrTheme(config: Partial<WrThemeConfig> = {}): EnvironmentProviders {\n  const merged: WrThemeConfig = { ...DEFAULT_WR_THEME_CONFIG, ...config };\n  return makeEnvironmentProviders([{ provide: WR_THEME_CONFIG, useValue: merged }]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}