ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-input.mjs

@@ -1,11 +1,6 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { signal, inject, ChangeDetectorRef, booleanAttribute, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, 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 { provideWrIcons, eye, eyeOff, WrIconComponent } from 'ngwr/icon';
+import { input, computed, Directive, ViewEncapsulation, Component, signal } from '@angular/core';
 
 /**
  * @license
@@ -14,107 +9,157 @@ import { provideWrIcons, eye, eyeOff, WrIconComponent } from 'ngwr/icon';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 /**
- * NGWR input component.
+ * Applies NGWR input styling to a native `<input>` element.
  *
- * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/input}
+ * Because this is an attribute directive on the real `<input>` (not a wrapper
+ * component), any other directive that targets `input` — `[(ngModel)]`,
+ * `[formControl]`, validators, third-party libraries like `ngx-mask` — composes
+ * naturally on the same element.
+ *
+ * @example
+ * ```html
+ * <input wrInput [(ngModel)]="name" placeholder="Your name" />
+ *
+ * <!-- Works with ngx-mask, validators, etc. -->
+ * <input wrInput [(ngModel)]="phone" mask="(000) 000-0000" />
+ * ```
+ *
+ * For prefix / suffix / password-toggle layouts, wrap the input in
+ * `<wr-input-group>`.
+ *
+ * @see https://ngwr.dev/components/input
  */
-class WrInputComponent extends WrAbstractBase {
-    constructor() {
-        super(...arguments);
-        this.placeholder = '';
-        this.prefix = null;
-        this.suffix = null;
-        this.rounded = false;
-        this.passwordIcons = false;
-        this.readonly = false;
-        this.type = 'text';
-        this.inputValue = signal(null, ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
-        this.cdr = inject(ChangeDetectorRef);
-        this.eyeOn = signal(true, ...(ngDevMode ? [{ debugName: "eyeOn" }] : []));
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
-        this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.onChange = noop;
-        this.onTouch = noop;
-    }
-    get elClasses() {
-        return {
-            'wr-input': true,
-            'wr-input--rounded': this.rounded,
-            'wr-input--has-prefix': this.prefix,
-            'wr-input--has-suffix': this.suffix,
-            'wr-input--password': this.passwordIcons,
-            'wr-input--disabled': this.isDisabled(),
-            'wr-input--focused': this.isFocused(),
-        };
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled.set(coerceBooleanProperty(isDisabled));
-    }
-    writeValue(value) {
-        this.value = value;
-        this.onChange(value);
-        this.inputValue.set(value);
-        this.cdr.markForCheck();
-    }
-    onPasswordVisibilityChange() {
-        if (this.type === 'password') {
-            this.type = 'text';
-            this.eyeOn.set(false);
-        }
-        else {
-            this.type = 'password';
-            this.eyeOn.set(true);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: WrInputComponent, isStandalone: true, selector: "wr-input", inputs: { placeholder: "placeholder", prefix: "prefix", suffix: "suffix", rounded: ["rounded", "rounded", booleanAttribute], passwordIcons: ["passwordIcons", "passwordIcons", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], type: "type" }, host: { properties: { "class": "this.elClasses" } }, providers: [
-            provideWrIcons([eye, eyeOff]),
-            {
-                provide: NG_VALUE_ACCESSOR,
-                // eslint-disable-next-line @angular-eslint/no-forward-ref
-                useExisting: forwardRef(() => WrInputComponent),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "@if (prefix) {\n  <div class=\"wr-input-prefix\">\n    <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n  </div>\n}\n\n<input\n  class=\"wr-input__native\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [readonly]=\"readonly\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"inputValue()\"\n  (ngModelChange)=\"writeValue($event)\"\n  (focus)=\"isFocused.set(true)\"\n  (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n  <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n    <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n  </div>\n}\n\n@if (suffix) {\n  <div class=\"wr-input-suffix\">\n    <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n  </div>\n}\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"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class WrInput {
+    /** Pill-shaped corners. @default false */
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    classes = computed(() => {
+        const parts = ['wr-input'];
+        if (this.rounded())
+            parts.push('wr-input--rounded');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: WrInput, isStandalone: true, selector: "input[wrInput], textarea[wrInput]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[wrInput], textarea[wrInput]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+
+/**
+ * @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
+ */
+/**
+ * Marks an element as the **left** decoration inside `<wr-input-group>`.
+ * Adds the `.wr-input-group__affix` class so the group's layout flexes it
+ * to the input's left edge.
+ *
+ * @example
+ * ```html
+ * <wr-input-group>
+ *   <span wrInputPrefix>$</span>
+ *   <input wrInput [(ngModel)]="amount" type="number" />
+ * </wr-input-group>
+ * ```
+ */
+class WrInputPrefix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInputPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: WrInputPrefix, isStandalone: true, selector: "[wrInputPrefix]", host: { classAttribute: "wr-input-group__affix wr-input-group__affix--prefix" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInputPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wrInputPrefix]',
+                    host: { class: 'wr-input-group__affix wr-input-group__affix--prefix' },
+                }]
+        }] });
+
+/**
+ * @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
+ */
+/**
+ * Marks an element as the **right** decoration inside `<wr-input-group>`.
+ * Adds the `.wr-input-group__affix` class so the group's layout flexes it
+ * to the input's right edge.
+ *
+ * @example
+ * ```html
+ * <wr-input-group>
+ *   <input wrInput [(ngModel)]="amount" type="number" />
+ *   <span wrInputSuffix>USD</span>
+ * </wr-input-group>
+ * ```
+ */
+class WrInputSuffix {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInputSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: WrInputSuffix, isStandalone: true, selector: "[wrInputSuffix]", host: { classAttribute: "wr-input-group__affix wr-input-group__affix--suffix" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInputSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wrInputSuffix]',
+                    host: { class: 'wr-input-group__affix wr-input-group__affix--suffix' },
+                }]
+        }] });
+
+/**
+ * @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
+ */
+/**
+ * Container for `<input wrInput>` + `[wrInputPrefix]` / `[wrInputSuffix]` /
+ * `<wr-password-toggle>` siblings. Renders the border and focus ring; the
+ * inner native input drops its own border so it visually melts into the
+ * group.
+ *
+ * Pure layout — no signals shared with the inner directive, focus styling is
+ * driven entirely by `:focus-within` so any focusable child counts.
+ *
+ * @example
+ * ```html
+ * <wr-input-group>
+ *   <span wrInputPrefix>$</span>
+ *   <input wrInput [(ngModel)]="amount" type="number" />
+ *   <span wrInputSuffix>USD</span>
+ * </wr-input-group>
+ * ```
+ *
+ * @see https://ngwr.dev/components/input
+ */
+class WrInputGroup {
+    /** Pill-shaped corners. @default false */
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    classes = computed(() => {
+        const parts = ['wr-input-group'];
+        if (this.rounded())
+            parts.push('wr-input-group--rounded');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrInputGroup, isStandalone: true, selector: "wr-input-group", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrInputGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, WrIconComponent], providers: [
-                        provideWrIcons([eye, eyeOff]),
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrInputComponent),
-                            multi: true,
-                        },
-                    ], template: "@if (prefix) {\n  <div class=\"wr-input-prefix\">\n    <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n  </div>\n}\n\n<input\n  class=\"wr-input__native\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [readonly]=\"readonly\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"inputValue()\"\n  (ngModelChange)=\"writeValue($event)\"\n  (focus)=\"isFocused.set(true)\"\n  (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n  <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n    <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n  </div>\n}\n\n@if (suffix) {\n  <div class=\"wr-input-suffix\">\n    <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n  </div>\n}\n" }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], prefix: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }], rounded: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], passwordIcons: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], readonly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], type: [{
-                type: Input
-            }], elClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{
+                    selector: 'wr-input-group',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
 /**
  * @license
@@ -122,10 +167,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * 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
  */
+/**
+ * Self-contained eye-toggle button. Flips the linked `<input>`'s `type`
+ * attribute between `password` and `text`. Drop it inside an
+ * `<wr-input-group>` next to a password input.
+ *
+ * @example
+ * ```html
+ * <wr-input-group>
+ *   <input wrInput type="password" [(ngModel)]="pw" #pwInput />
+ *   <wr-password-toggle [for]="pwInput" />
+ * </wr-input-group>
+ * ```
+ */
+class WrPasswordToggle {
+    /** Reference to the linked password input. */
+    for = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    revealed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => (this.revealed() ? 'Hide password' : 'Show password'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    toggle() {
+        const input = this.for();
+        const next = input.type === 'password' ? 'text' : 'password';
+        input.type = next;
+        this.revealed.set(next === 'text');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrPasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrPasswordToggle, isStandalone: true, selector: "wr-password-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrPasswordToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-password-toggle', encapsulation: ViewEncapsulation.None, template: "<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n" }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrInputComponent };
+export { WrInput, WrInputGroup, WrInputPrefix, WrInputSuffix, WrPasswordToggle };
 //# sourceMappingURL=ngwr-input.mjs.map

package/fesm2022/ngwr-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-input.mjs","sources":["../../../projects/lib/input/input.component.ts","../../../projects/lib/input/input.component.html","../../../projects/lib/input/public-api.ts","../../../projects/lib/input/ngwr-input.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 {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  forwardRef,\n  HostBinding,\n  inject,\n  Input,\n  signal,\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';\nimport { provideWrIcons, eye, eyeOff, WrIconComponent } from 'ngwr/icon';\n\nimport { WrInputType } from './input-types';\n\n/**\n * NGWR input component.\n *\n * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/input}\n */\n@Component({\n  selector: 'wr-input',\n  templateUrl: './input.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [FormsModule, WrIconComponent],\n  providers: [\n    provideWrIcons([eye, eyeOff]),\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrInputComponent),\n      multi: true,\n    },\n  ],\n})\nexport class WrInputComponent extends WrAbstractBase implements ControlValueAccessor {\n  @Input() placeholder = '';\n  @Input() prefix: string | null = null;\n  @Input() suffix: string | null = null;\n  @Input({ transform: booleanAttribute }) rounded = false;\n  @Input({ transform: booleanAttribute }) passwordIcons = false;\n  @Input({ transform: booleanAttribute }) readonly = false;\n  @Input() type: WrInputType = 'text';\n\n  @HostBinding('class')\n  get elClasses(): SafeAny {\n    return {\n      'wr-input': true,\n      'wr-input--rounded': this.rounded,\n      'wr-input--has-prefix': this.prefix,\n      'wr-input--has-suffix': this.suffix,\n      'wr-input--password': this.passwordIcons,\n      'wr-input--disabled': this.isDisabled(),\n      'wr-input--focused': this.isFocused(),\n    };\n  }\n\n  protected readonly inputValue = signal<string | null>(null);\n\n  protected value?: string;\n\n  private readonly cdr = inject(ChangeDetectorRef);\n  protected readonly eyeOn = signal(true);\n  protected readonly isFocused = signal(false);\n  protected readonly isDisabled = signal(false);\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    this.cdr.markForCheck();\n  }\n\n  onPasswordVisibilityChange(): void {\n    if (this.type === 'password') {\n      this.type = 'text';\n      this.eyeOn.set(false);\n    } else {\n      this.type = 'password';\n      this.eyeOn.set(true);\n    }\n  }\n}\n","@if (prefix) {\n  <div class=\"wr-input-prefix\">\n    <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n  </div>\n}\n\n<input\n  class=\"wr-input__native\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [readonly]=\"readonly\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"inputValue()\"\n  (ngModelChange)=\"writeValue($event)\"\n  (focus)=\"isFocused.set(true)\"\n  (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n  <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n    <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n  </div>\n}\n\n@if (suffix) {\n  <div class=\"wr-input-suffix\">\n    <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n  </div>\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nexport * from './input-types';\nexport * from './input.component';\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-input.mjs","sources":["../../../projects/lib/input/directives/wr-input.ts","../../../projects/lib/input/directives/wr-input-prefix.ts","../../../projects/lib/input/directives/wr-input-suffix.ts","../../../projects/lib/input/input-group.ts","../../../projects/lib/input/password-toggle.ts","../../../projects/lib/input/password-toggle.html","../../../projects/lib/input/ngwr-input.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 { Directive, computed, input } from '@angular/core';\n\n/**\n * Applies NGWR input styling to a native `<input>` element.\n *\n * Because this is an attribute directive on the real `<input>` (not a wrapper\n * component), any other directive that targets `input` — `[(ngModel)]`,\n * `[formControl]`, validators, third-party libraries like `ngx-mask` — composes\n * naturally on the same element.\n *\n * @example\n * ```html\n * <input wrInput [(ngModel)]=\"name\" placeholder=\"Your name\" />\n *\n * <!-- Works with ngx-mask, validators, etc. -->\n * <input wrInput [(ngModel)]=\"phone\" mask=\"(000) 000-0000\" />\n * ```\n *\n * For prefix / suffix / password-toggle layouts, wrap the input in\n * `<wr-input-group>`.\n *\n * @see https://ngwr.dev/components/input\n */\n@Directive({\n  selector: 'input[wrInput], textarea[wrInput]',\n  host: { '[class]': 'classes()' },\n})\nexport class WrInput {\n  /** Pill-shaped corners. @default false */\n  readonly rounded = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input'];\n    if (this.rounded()) parts.push('wr-input--rounded');\n    return parts.join(' ');\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 { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **left** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's left edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputPrefix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--prefix' },\n})\nexport class WrInputPrefix {}\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 { Directive } from '@angular/core';\n\n/**\n * Marks an element as the **right** decoration inside `<wr-input-group>`.\n * Adds the `.wr-input-group__affix` class so the group's layout flexes it\n * to the input's right edge.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n */\n@Directive({\n  selector: '[wrInputSuffix]',\n  host: { class: 'wr-input-group__affix wr-input-group__affix--suffix' },\n})\nexport class WrInputSuffix {}\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, input } from '@angular/core';\n\n/**\n * Container for `<input wrInput>` + `[wrInputPrefix]` / `[wrInputSuffix]` /\n * `<wr-password-toggle>` siblings. Renders the border and focus ring; the\n * inner native input drops its own border so it visually melts into the\n * group.\n *\n * Pure layout — no signals shared with the inner directive, focus styling is\n * driven entirely by `:focus-within` so any focusable child counts.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <span wrInputPrefix>$</span>\n *   <input wrInput [(ngModel)]=\"amount\" type=\"number\" />\n *   <span wrInputSuffix>USD</span>\n * </wr-input-group>\n * ```\n *\n * @see https://ngwr.dev/components/input\n */\n@Component({\n  selector: 'wr-input-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrInputGroup {\n  /** Pill-shaped corners. @default false */\n  readonly rounded = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-input-group'];\n    if (this.rounded()) parts.push('wr-input-group--rounded');\n    return parts.join(' ');\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 { Component, ViewEncapsulation, computed, input, signal } from '@angular/core';\n\n/**\n * Self-contained eye-toggle button. Flips the linked `<input>`'s `type`\n * attribute between `password` and `text`. Drop it inside an\n * `<wr-input-group>` next to a password input.\n *\n * @example\n * ```html\n * <wr-input-group>\n *   <input wrInput type=\"password\" [(ngModel)]=\"pw\" #pwInput />\n *   <wr-password-toggle [for]=\"pwInput\" />\n * </wr-input-group>\n * ```\n */\n@Component({\n  selector: 'wr-password-toggle',\n  templateUrl: './password-toggle.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrPasswordToggle {\n  /** Reference to the linked password input. */\n  readonly for = input.required<HTMLInputElement>();\n\n  protected readonly revealed = signal(false);\n\n  protected readonly ariaLabel = computed(() => (this.revealed() ? 'Hide password' : 'Show password'));\n\n  protected toggle(): void {\n    const input = this.for();\n    const next = input.type === 'password' ? 'text' : 'password';\n    input.type = next;\n    this.revealed.set(next === 'text');\n  }\n}\n","<button\n  type=\"button\"\n  class=\"wr-input-group__toggle\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"revealed()\"\n  (click)=\"toggle()\"\n>\n  @if (revealed()) {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  } @else {\n    <svg\n      class=\"wr-icon__svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-keyboard.mjs

@@ -0,0 +1,47 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Tiny keycap chip — renders projected content (`⌘`, `K`, `Enter`, etc.) in
+ * a beveled rectangle that reads as a physical key. Stack multiple `<wr-kbd>`
+ * with a plain `+` between them for chords.
+ *
+ * @example
+ * ```html
+ * <wr-kbd>⌘</wr-kbd> + <wr-kbd>K</wr-kbd>
+ * <wr-kbd size="lg">Esc</wr-kbd>
+ * ```
+ *
+ * @see https://ngwr.dev/components/keyboard
+ */
+class WrKbd {
+    /** Visual size variant. @default 'md' */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `wr-kbd wr-kbd--${this.size()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrKbd, isStandalone: true, selector: "wr-kbd", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrKbd, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-kbd',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrKbd };
+//# sourceMappingURL=ngwr-keyboard.mjs.map

package/fesm2022/ngwr-keyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-keyboard.mjs","sources":["../../../projects/lib/keyboard/kbd.ts","../../../projects/lib/keyboard/ngwr-keyboard.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 { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrKbdSize } from './interfaces';\n\n/**\n * Tiny keycap chip — renders projected content (`⌘`, `K`, `Enter`, etc.) in\n * a beveled rectangle that reads as a physical key. Stack multiple `<wr-kbd>`\n * with a plain `+` between them for chords.\n *\n * @example\n * ```html\n * <wr-kbd>⌘</wr-kbd> + <wr-kbd>K</wr-kbd>\n * <wr-kbd size=\"lg\">Esc</wr-kbd>\n * ```\n *\n * @see https://ngwr.dev/components/keyboard\n */\n@Component({\n  selector: 'wr-kbd',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrKbd {\n  /** Visual size variant. @default 'md' */\n  readonly size = input<WrKbdSize>('md');\n\n  protected readonly classes = computed(() => `wr-kbd wr-kbd--${this.size()}`);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;;AAYG;MAOU,KAAK,CAAA;;IAEP,IAAI,GAAG,KAAK,CAAY,IAAI;6EAAC;IAEnB,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAA,eAAA,EAAkB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;gFAAC;uGAJjE,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,mPAJN,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAIf,KAAK,EAAA,UAAA,EAAA,CAAA;kBANjB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;AC7BD;;AAEG;;;;"}