ngwr 4.0.1 → 4.2.0

package/fesm2022/ngwr-input.mjs

@@ -1,10 +1,12 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { signal, booleanAttribute, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, NgModule } from '@angular/core';
+import { signal, inject, ChangeDetectorRef, booleanAttribute, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } 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 * as i2 from 'ngwr/icon';
+import { provideWrIcons, eye, eyeOff, WrIconModule } from 'ngwr/icon';
 
 /**
  * @license
@@ -20,11 +22,6 @@ import { provideWrIcons, eye, eyeOff, WrIconComponent } from 'ngwr/icon';
 class WrInputComponent extends WrAbstractBase {
     constructor() {
         super(...arguments);
-        this.formControl = new FormControl();
-        this.eyeOn = signal(true);
-        this.isFocused = signal(false);
-        this.onChange = noop;
-        this.onTouch = noop;
         this.placeholder = '';
         this.prefix = null;
         this.suffix = null;
@@ -32,30 +29,13 @@ class WrInputComponent extends WrAbstractBase {
         this.passwordIcons = false;
         this.readonly = false;
         this.type = 'text';
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            return this.formControl.disable();
-        }
-        return this.formControl.enable();
-    }
-    writeValue(value) {
-        this.formControl.setValue(value, { emitEvent: false });
-    }
-    ngOnInit() {
-        // this.formControl.valueChanges
-        //   .pipe(
-        //     debounceTime(200),
-        //     tap(value => this.onChange(value)),
-        //     takeUntil(this.destroyed$)
-        //   )
-        //   .subscribe();
+        this.inputValue = signal(null);
+        this.cdr = inject(ChangeDetectorRef);
+        this.eyeOn = signal(true);
+        this.isFocused = signal(false);
+        this.isDisabled = signal(false);
+        this.onChange = noop;
+        this.onTouch = noop;
     }
     get elClasses() {
         return {
@@ -64,10 +44,24 @@ class WrInputComponent extends WrAbstractBase {
             'wr-input--has-prefix': this.prefix,
             'wr-input--has-suffix': this.suffix,
             'wr-input--password': this.passwordIcons,
-            'wr-input--disabled': this.formControl.disabled,
+            '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.cdr.markForCheck();
+    }
     onPasswordVisibilityChange() {
         if (this.type === 'password') {
             this.type = 'text';
@@ -87,11 +81,11 @@ class WrInputComponent extends WrAbstractBase {
                 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  [formControl]=\"formControl\"\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]=\"formControl.disabled\" (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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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: "ngmodule", type: WrIconModule }, { kind: "component", type: i2.WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: WrInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'wr-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, ReactiveFormsModule, WrIconComponent], providers: [
+            args: [{ standalone: true, selector: 'wr-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, WrIconModule], providers: [
                         provideWrIcons([eye, eyeOff]),
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -99,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                             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  [formControl]=\"formControl\"\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]=\"formControl.disabled\" (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" }]
+                    ], 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: [{

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/input.module.ts","../../../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 {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nimport { debounceTime, noop, takeUntil, tap } from 'rxjs';\n\nimport { WrAbstractBase } from 'ngwr/cdk';\nimport { SafeAny } from 'ngwr/cdk/types';\nimport { provideWrIcons, WrIconComponent, eye, eyeOff } 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  standalone: true,\n  selector: 'wr-input',\n  templateUrl: './input.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [FormsModule, ReactiveFormsModule, 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, OnInit {\n  formControl: FormControl = new FormControl();\n  protected readonly eyeOn = signal(true);\n  protected readonly isFocused = 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    if (isDisabled) {\n      return this.formControl.disable();\n    }\n    return this.formControl.enable();\n  }\n\n  writeValue(value: string): void {\n    this.formControl.setValue(value, { emitEvent: false });\n  }\n\n  ngOnInit(): void {\n    // this.formControl.valueChanges\n    //   .pipe(\n    //     debounceTime(200),\n    //     tap(value => this.onChange(value)),\n    //     takeUntil(this.destroyed$)\n    //   )\n    //   .subscribe();\n  }\n\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.formControl.disabled,\n      'wr-input--focused': this.isFocused(),\n    };\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  [formControl]=\"formControl\"\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]=\"formControl.disabled\" (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 */\nimport { NgModule } from '@angular/core';\n\nimport { WrInputComponent } from './input.component';\n\n@NgModule({\n  imports: [WrInputComponent],\n  exports: [WrInputComponent],\n})\nexport class WrInputModule {}\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';\nexport * from './input.module';\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/input.component.ts","../../../projects/lib/input/input.component.html","../../../projects/lib/input/input.module.ts","../../../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, WrIconModule } 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  standalone: true,\n  selector: 'wr-input',\n  templateUrl: './input.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [FormsModule, WrIconModule],\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.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 */\nimport { NgModule } from '@angular/core';\n\nimport { WrInputComponent } from './input.component';\n\n@NgModule({\n  imports: [WrInputComponent],\n  exports: [WrInputComponent],\n})\nexport class WrInputModule {}\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';\nexport * from './input.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/icon/icon.component.d.ts

@@ -1,6 +1,11 @@
 import { SafeAny } from 'ngwr/cdk/types';
 import { wrIconName } from './icons';
 import * as i0 from "@angular/core";
+/**
+ * NGWR icon component.
+ *
+ * {@tutorial} [How to use wr-btn]{@link http://ngwr.dev/docs/components/icon}
+ */
 export declare class WrIconComponent {
     set name(value: wrIconName);
     get elClasses(): SafeAny;

package/icon/icons.d.ts

@@ -242,22 +242,62 @@ export declare const logoAppstore: {
     name: 'logo-appstore';
     data: string;
 };
+export declare const logoBankCenterCredit: {
+    name: 'logo-bank-center-credit';
+    data: string;
+};
+export declare const logoChrome: {
+    name: 'logo-chrome';
+    data: string;
+};
+export declare const logoDiscord: {
+    name: 'logo-discord';
+    data: string;
+};
 export declare const logoFirebase: {
     name: 'logo-firebase';
     data: string;
 };
+export declare const logoForteBank: {
+    name: 'logo-forte-bank';
+    data: string;
+};
 export declare const logoGithub: {
     name: 'logo-github';
     data: string;
 };
+export declare const logoGitlab: {
+    name: 'logo-gitlab';
+    data: string;
+};
 export declare const logoGooglePlay: {
     name: 'logo-google-play';
     data: string;
 };
+export declare const logoHalykBank: {
+    name: 'logo-halyk-bank';
+    data: string;
+};
+export declare const logoInstagram: {
+    name: 'logo-instagram';
+    data: string;
+};
+export declare const logoJusanBank: {
+    name: 'logo-jusan-bank';
+    data: string;
+};
+export declare const logoKaspiBank: {
+    name: 'logo-kaspi-bank';
+    data: string;
+};
 export declare const logoNpm: {
     name: 'logo-npm';
     data: string;
 };
+export declare const logoOtbasyBank: {
+    name: 'logo-otbasy-bank';
+    data: string;
+};
 export declare const logoOversecured: {
     name: 'logo-oversecured';
     data: string;
@@ -270,6 +310,26 @@ export declare const logoStingray: {
     name: 'logo-stingray';
     data: string;
 };
+export declare const logoTelegram: {
+    name: 'logo-telegram';
+    data: string;
+};
+export declare const logoVk: {
+    name: 'logo-vk';
+    data: string;
+};
+export declare const logoWhatsapp: {
+    name: 'logo-whatsapp';
+    data: string;
+};
+export declare const logoYandexCloud: {
+    name: 'logo-yandex-cloud';
+    data: string;
+};
+export declare const logoYandexTracker: {
+    name: 'logo-yandex-tracker';
+    data: string;
+};
 export declare const modules: {
     name: 'modules';
     data: string;
@@ -374,7 +434,7 @@ export declare const warning: {
     name: 'warning';
     data: string;
 };
-export type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back-circle' | 'caret-back' | 'caret-forward-circle' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'close-circle-outline' | 'close-circle' | 'close' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'external-outline' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-apks' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-angular' | 'logo-app-center' | 'logo-app-gallery' | 'logo-apple' | 'logo-appscreener' | 'logo-appstore' | 'logo-firebase' | 'logo-github' | 'logo-google-play' | 'logo-npm' | 'logo-oversecured' | 'logo-rustore' | 'logo-stingray' | 'modules' | 'moon' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'shuffle' | 'stop-circle' | 'stop' | 'sun' | 'terminal' | 'time' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
+export type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back-circle' | 'caret-back' | 'caret-forward-circle' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'close-circle-outline' | 'close-circle' | 'close' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'external-outline' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-apks' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-angular' | 'logo-app-center' | 'logo-app-gallery' | 'logo-apple' | 'logo-appscreener' | 'logo-appstore' | 'logo-bank-center-credit' | 'logo-chrome' | 'logo-discord' | 'logo-firebase' | 'logo-forte-bank' | 'logo-github' | 'logo-gitlab' | 'logo-google-play' | 'logo-halyk-bank' | 'logo-instagram' | 'logo-jusan-bank' | 'logo-kaspi-bank' | 'logo-npm' | 'logo-otbasy-bank' | 'logo-oversecured' | 'logo-rustore' | 'logo-stingray' | 'logo-telegram' | 'logo-vk' | 'logo-whatsapp' | 'logo-yandex-cloud' | 'logo-yandex-tracker' | 'modules' | 'moon' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'shuffle' | 'stop-circle' | 'stop' | 'sun' | 'terminal' | 'time' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
 export interface WrIcon {
     name: wrIconName;
     data: string;
@@ -563,18 +623,48 @@ export declare const wrIconSet: ({
 } | {
     name: 'logo-appstore';
     data: string;
+} | {
+    name: 'logo-bank-center-credit';
+    data: string;
+} | {
+    name: 'logo-chrome';
+    data: string;
+} | {
+    name: 'logo-discord';
+    data: string;
 } | {
     name: 'logo-firebase';
     data: string;
+} | {
+    name: 'logo-forte-bank';
+    data: string;
 } | {
     name: 'logo-github';
     data: string;
+} | {
+    name: 'logo-gitlab';
+    data: string;
 } | {
     name: 'logo-google-play';
     data: string;
+} | {
+    name: 'logo-halyk-bank';
+    data: string;
+} | {
+    name: 'logo-instagram';
+    data: string;
+} | {
+    name: 'logo-jusan-bank';
+    data: string;
+} | {
+    name: 'logo-kaspi-bank';
+    data: string;
 } | {
     name: 'logo-npm';
     data: string;
+} | {
+    name: 'logo-otbasy-bank';
+    data: string;
 } | {
     name: 'logo-oversecured';
     data: string;
@@ -584,6 +674,21 @@ export declare const wrIconSet: ({
 } | {
     name: 'logo-stingray';
     data: string;
+} | {
+    name: 'logo-telegram';
+    data: string;
+} | {
+    name: 'logo-vk';
+    data: string;
+} | {
+    name: 'logo-whatsapp';
+    data: string;
+} | {
+    name: 'logo-yandex-cloud';
+    data: string;
+} | {
+    name: 'logo-yandex-tracker';
+    data: string;
 } | {
     name: 'modules';
     data: string;

package/input/input.component.d.ts

@@ -1,11 +1,4 @@
-/**
- * @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
- */
-import { OnInit } from '@angular/core';
-import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { ControlValueAccessor } from '@angular/forms';
 import { WrAbstractBase } from 'ngwr/cdk';
 import { SafeAny } from 'ngwr/cdk/types';
 import { WrInputType } from './input-types';
@@ -15,17 +8,7 @@ import * as i0 from "@angular/core";
  *
  * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/input}
  */
-export declare class WrInputComponent extends WrAbstractBase implements ControlValueAccessor, OnInit {
-    formControl: FormControl;
-    protected readonly eyeOn: import("@angular/core").WritableSignal<boolean>;
-    protected readonly isFocused: import("@angular/core").WritableSignal<boolean>;
-    onChange: (value: string) => void;
-    onTouch: () => void;
-    registerOnChange(fn: (value: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    writeValue(value: string): void;
-    ngOnInit(): void;
+export declare class WrInputComponent extends WrAbstractBase implements ControlValueAccessor {
     placeholder: string;
     prefix: string | null;
     suffix: string | null;
@@ -34,6 +17,18 @@ export declare class WrInputComponent extends WrAbstractBase implements ControlV
     readonly: boolean;
     type: WrInputType;
     get elClasses(): SafeAny;
+    protected readonly inputValue: import("@angular/core").WritableSignal<string | null>;
+    protected value?: string;
+    private readonly cdr;
+    protected readonly eyeOn: import("@angular/core").WritableSignal<boolean>;
+    protected readonly isFocused: import("@angular/core").WritableSignal<boolean>;
+    protected readonly isDisabled: import("@angular/core").WritableSignal<boolean>;
+    onChange: (value: string) => void;
+    onTouch: () => void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: string): void;
     onPasswordVisibilityChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<WrInputComponent, "wr-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "passwordIcons": { "alias": "passwordIcons"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;

package/input/styles/_index.scss

@@ -104,4 +104,23 @@
       --wr-input-icon-color: var(--wr-color-primary);
     }
   }
+
+  &-prefix,
+  &-suffix {
+    color: var(--wr-input-suffix-prefix-color);
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+
+    padding-top: var(--wr-input-padding-y);
+    padding-bottom: var(--wr-input-padding-y);
+  }
+
+  &-prefix {
+    padding-left: var(--wr-input-padding-x);
+  }
+
+  &-suffix {
+    padding-right: var(--wr-input-padding-x);
+  }
 }

package/input/styles/vars.scss

@@ -1,6 +1,7 @@
 :root {
   --wr-input-color: var(--wr-color-dark);
   --wr-input-placeholder-color: var(--wr-color-light);
+  --wr-input-suffix-prefix-color: var(--wr-color-medium);
   --wr-input-bg-color: var(--wr-color-white);
   --wr-input-border-color: var(--wr-color-light-lighter);
   --wr-input-border-radius: 0.375rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",

package/styles/variables.scss

@@ -68,11 +68,5 @@ html {
 
     /* Checkbox */
     --wr-checkbox-color-base: var(--wr-color-white);
-
-    --wr-input-bg: #18152a;
-    --wr-input-suffix-prefix-color: rgba(var(--wr-color-white-rgb), 0.5);
-    --wr-input-suffix-prefix-bg: rgba(var(--wr-color-primary-rgb), 0.125);
-    --wr-input-border-color: #493d7e;
-    --wr-input-color: #fff;
   }
 }