ngwr 0.0.15 → 0.1.1

package/fesm2020/ngwr.mjs

@@ -1,16 +1,105 @@
-import * as i2 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, HostBinding, Input, NgModule, Directive, EventEmitter, forwardRef, ViewChild, Output, Self } from '@angular/core';
+import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Injectable, Optional, Inject, Input, NgModule, EventEmitter, forwardRef, ViewChild, Output } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { __decorate } from 'tslib';
-import { takeUntil, filter } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/a11y';
+import { takeUntil } from 'rxjs/operators';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
+import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { PlatformModule } from '@angular/cdk/platform';
+
+class BaseComponent {
+    constructor() {
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: BaseComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }] });
+
+const stylePrefix = 'wr';
+
+function toBoolean(value) {
+    return coerceBooleanProperty(value);
+}
+// eslint-disable
+function propDecoratorFactory(name, fallback) {
+    function propDecorator(target, propName, originalDescriptor) {
+        const privatePropName = `$$__wrPropDecorator__${propName}`;
+        if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
+            console.warn(`The prop "${privatePropName}" is already exist, it will be overrided by ${name} decorator.`);
+        }
+        Object.defineProperty(target, privatePropName, {
+            configurable: true,
+            writable: true
+        });
+        return {
+            get() {
+                return originalDescriptor && originalDescriptor.get
+                    ? originalDescriptor.get.bind(this)()
+                    : this[privatePropName];
+            },
+            set(value) {
+                if (originalDescriptor && originalDescriptor.set) {
+                    originalDescriptor.set.bind(this)(fallback(value));
+                }
+                this[privatePropName] = fallback(value);
+            }
+        };
+    }
+    return propDecorator;
+}
+/**
+ * Input decorator that handle a prop to do get/set automatically with toBoolean
+ *
+ * Why not using @InputBoolean alone without @Input? AOT needs @Input to be visible
+ *
+ * @howToUse
+ * ```
+ * @Input() @InputBoolean() visible: boolean = false;
+ *
+ * // Act as below:
+ * // @Input()
+ * // get visible() { return this.__visible; }
+ * // set visible(value) { this.__visible = value; }
+ * // __visible = false;
+ * ```
+ */
+function InputBoolean() {
+    return propDecoratorFactory('InputBoolean', toBoolean);
+}
+
+// Components
+
+class WrSpinnerComponent {
+    constructor() {
+        this.class = 'wr-spin';
+    }
+}
+WrSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WrSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrSpinnerComponent, selector: "wr-spin", host: { properties: { "class": "this.class" } }, exportAs: ["wrSpin"], ngImport: i0, template: '<svg viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle></svg>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-spin',
+                    exportAs: 'wrSpin',
+                    template: '<svg viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle></svg>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 /* 🤖 this file was generated by svg-to-ts */
 const wrIconAddCircleOutline = {
@@ -470,125 +559,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }] } });
 
-class WrIconModule {
-    static forRoot() {
-        WrIconService.registerIcons();
-        return { ngModule: WrIconModule };
-    }
-}
-WrIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule, declarations: [WrIconComponent], exports: [WrIconComponent] });
-WrIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [WrIconComponent],
-                    exports: [WrIconComponent]
-                }]
-        }] });
-
-class BaseComponent {
-    constructor() {
-        this.ngUnsubscribe = new Subject();
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-}
-BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: BaseComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BaseComponent, decorators: [{
-            type: Directive
-        }] });
-
-const stylePrefix = 'wr';
-
-function toBoolean(value) {
-    return coerceBooleanProperty(value);
-}
-// eslint-disable
-function propDecoratorFactory(name, fallback) {
-    function propDecorator(target, propName, originalDescriptor) {
-        const privatePropName = `$$__wrPropDecorator__${propName}`;
-        if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
-            console.warn(`The prop "${privatePropName}" is already exist, it will be overrided by ${name} decorator.`);
-        }
-        Object.defineProperty(target, privatePropName, {
-            configurable: true,
-            writable: true
-        });
-        return {
-            get() {
-                return originalDescriptor && originalDescriptor.get
-                    ? originalDescriptor.get.bind(this)()
-                    : this[privatePropName];
-            },
-            set(value) {
-                if (originalDescriptor && originalDescriptor.set) {
-                    originalDescriptor.set.bind(this)(fallback(value));
-                }
-                this[privatePropName] = fallback(value);
-            }
-        };
-    }
-    return propDecorator;
-}
-/**
- * Input decorator that handle a prop to do get/set automatically with toBoolean
- *
- * Why not using @InputBoolean alone without @Input? AOT needs @Input to be visible
- *
- * @howToUse
- * ```
- * @Input() @InputBoolean() visible: boolean = false;
- *
- * // Act as below:
- * // @Input()
- * // get visible() { return this.__visible; }
- * // set visible(value) { this.__visible = value; }
- * // __visible = false;
- * ```
- */
-function InputBoolean() {
-    return propDecoratorFactory('InputBoolean', toBoolean);
-}
-
-// Components
-
-class WrSpinnerComponent {
-    constructor() {
-        this.class = `${stylePrefix}-spin`;
-    }
-}
-WrSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WrSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrSpinnerComponent, selector: "wr-spin", host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<svg viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle></svg>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'wr-spin',
-                    template: '<svg viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle></svg>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class WrSpinnerModule {
-}
-WrSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule, declarations: [WrSpinnerComponent], exports: [WrSpinnerComponent] });
-WrSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [WrSpinnerComponent],
-                    exports: [WrSpinnerComponent]
-                }]
-        }] });
-
 class WrButtonComponent extends BaseComponent {
     constructor(cdr, elRef, ngZone, r2) {
         super();
@@ -668,7 +638,7 @@ class WrButtonComponent extends BaseComponent {
     }
 }
 WrButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-WrButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrButtonComponent, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: { color: "color", size: "size", icon: "icon", iconPosition: "iconPosition", disabled: "disabled", outlined: "outlined", rounded: "rounded", loading: "loading", fullwidth: "fullwidth" }, host: { properties: { "class": "this.elClasses", "disabled": "this._disabled" } }, exportAs: ["wrBtn"], usesInheritance: true, ngImport: i0, template: "<wr-spin class=\"wr-btn__spin\" *ngIf=\"loading\"></wr-spin>\n<wr-icon class=\"wr-btn__icon\" *ngIf=\"icon && iconPosition === 'start'\" [name]=\"icon\"></wr-icon>\n<ng-content></ng-content>\n<wr-icon class=\"wr-btn__icon\" *ngIf=\"icon && iconPosition === 'end'\" [name]=\"icon\"></wr-icon>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WrSpinnerComponent, selector: "wr-spin" }, { kind: "component", type: WrIconComponent, selector: "wr-icon[name]", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+WrButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrButtonComponent, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: { color: "color", size: "size", icon: "icon", iconPosition: "iconPosition", disabled: "disabled", outlined: "outlined", rounded: "rounded", loading: "loading", fullwidth: "fullwidth" }, host: { properties: { "class": "this.elClasses", "disabled": "this._disabled" } }, exportAs: ["wrBtn"], usesInheritance: true, ngImport: i0, template: "<wr-spin class=\"wr-btn__spin\" *ngIf=\"loading\"></wr-spin>\n<wr-icon class=\"wr-btn__icon\" *ngIf=\"icon && iconPosition === 'start'\" [name]=\"icon\"></wr-icon>\n<ng-content></ng-content>\n<wr-icon class=\"wr-btn__icon\" *ngIf=\"icon && iconPosition === 'end'\" [name]=\"icon\"></wr-icon>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WrSpinnerComponent, selector: "wr-spin", exportAs: ["wrSpin"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon[name]", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], WrButtonComponent.prototype, "disabled", void 0);
@@ -713,6 +683,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 args: ['disabled']
             }] } });
 
+class WrIconModule {
+    static forRoot() {
+        WrIconService.registerIcons();
+        return { ngModule: WrIconModule };
+    }
+}
+WrIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WrIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule, declarations: [WrIconComponent], exports: [WrIconComponent] });
+WrIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [WrIconComponent],
+                    exports: [WrIconComponent]
+                }]
+        }] });
+
+class WrSpinnerModule {
+}
+WrSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WrSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule, declarations: [WrSpinnerComponent], exports: [WrSpinnerComponent] });
+WrSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [WrSpinnerComponent],
+                    exports: [WrSpinnerComponent]
+                }]
+        }] });
+
 class WrButtonModule {
 }
 WrButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -739,8 +739,12 @@ class WrCheckboxComponent extends BaseComponent {
         this.checked = false;
         this.disabled = false;
         this.autoFocus = false;
-        this.checkedChange = new EventEmitter();
-        this.class = `${stylePrefix}-checkbox`;
+        this.valueChange = new EventEmitter();
+    }
+    get elClasses() {
+        return {
+            'wr-checkbox': true
+        };
     }
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -796,18 +800,18 @@ class WrCheckboxComponent extends BaseComponent {
         if (!this.disabled) {
             this.checked = checked;
             this.onChange(this.checked);
-            this.checkedChange.emit(this.checked);
+            this.valueChange.emit(this.checked);
         }
     }
 }
-WrCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-WrCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrCheckboxComponent, selector: "wr-checkbox", inputs: { checked: "checked", disabled: "disabled", autoFocus: "autoFocus" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.class" } }, providers: [
+WrCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+WrCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrCheckboxComponent, selector: "wr-checkbox", inputs: { checked: "checked", disabled: "disabled", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.elClasses" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => WrCheckboxComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label\n  class=\"wr-checkbox-container\"\n  [class.wr-checkbox-container--checked]=\"this.checked\"\n  [class.wr-checkbox-container--disabled]=\"this.disabled\"\n>\n  <input\n    #inputElement\n    type=\"checkbox\"\n    class=\"wr-checkbox-container__input\"\n    [attr.autofocus]=\"autoFocus ? 'autofocus' : null\"\n    [checked]=\"checked\"\n    [ngModel]=\"checked\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onModelChange($event)\"\n  />\n  <div class=\"wr-checkbox-container-inner\">\n    <div class=\"wr-checkbox-container-inner__mark\"></div>\n  </div>\n  <ng-content></ng-content>\n</label>\n", dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label\n  class=\"wr-checkbox-container\"\n  [class.wr-checkbox-container--checked]=\"this.checked\"\n  [class.wr-checkbox-container--disabled]=\"this.disabled\"\n>\n  <input\n    #inputElement\n    type=\"checkbox\"\n    class=\"wr-checkbox-container__input\"\n    [attr.autofocus]=\"autoFocus ? 'autofocus' : null\"\n    [checked]=\"checked\"\n    [ngModel]=\"checked\"\n    [disabled]=\"!!disabled\"\n    (ngModelChange)=\"onModelChange($event)\"\n  />\n  <div class=\"wr-checkbox-container-inner\">\n    <div class=\"wr-checkbox-container-inner__mark\"></div>\n  </div>\n  <ng-content></ng-content>\n</label>\n", dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], WrCheckboxComponent.prototype, "checked", void 0);
@@ -825,8 +829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                             useExisting: forwardRef(() => WrCheckboxComponent),
                             multi: true
                         }
-                    ], template: "<label\n  class=\"wr-checkbox-container\"\n  [class.wr-checkbox-container--checked]=\"this.checked\"\n  [class.wr-checkbox-container--disabled]=\"this.disabled\"\n>\n  <input\n    #inputElement\n    type=\"checkbox\"\n    class=\"wr-checkbox-container__input\"\n    [attr.autofocus]=\"autoFocus ? 'autofocus' : null\"\n    [checked]=\"checked\"\n    [ngModel]=\"checked\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onModelChange($event)\"\n  />\n  <div class=\"wr-checkbox-container-inner\">\n    <div class=\"wr-checkbox-container-inner__mark\"></div>\n  </div>\n  <ng-content></ng-content>\n</label>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { inputElement: [{
+                    ], template: "<label\n  class=\"wr-checkbox-container\"\n  [class.wr-checkbox-container--checked]=\"this.checked\"\n  [class.wr-checkbox-container--disabled]=\"this.disabled\"\n>\n  <input\n    #inputElement\n    type=\"checkbox\"\n    class=\"wr-checkbox-container__input\"\n    [attr.autofocus]=\"autoFocus ? 'autofocus' : null\"\n    [checked]=\"checked\"\n    [ngModel]=\"checked\"\n    [disabled]=\"!!disabled\"\n    (ngModelChange)=\"onModelChange($event)\"\n  />\n  <div class=\"wr-checkbox-container-inner\">\n    <div class=\"wr-checkbox-container-inner__mark\"></div>\n  </div>\n  <ng-content></ng-content>\n</label>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { static: true }]
             }], checked: [{
@@ -835,9 +839,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], autoFocus: [{
                 type: Input
-            }], checkedChange: [{
+            }], valueChange: [{
                 type: Output
-            }], class: [{
+            }], elClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -858,22 +862,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 
 class WrDividerComponent {
     constructor() {
-        this.class = `${stylePrefix}-divider`;
+        /**
+         * Divider color
+         *
+         * @default 'light';
+         */
+        this.color = 'light';
+        /**
+         * Divider style
+         *
+         * @default 'solid';
+         */
+        this.type = 'solid';
+        /**
+         * Divider width
+         *
+         * @default 1px;
+         */
+        this.width = '1px';
+    }
+    /** Set element classes **/
+    get elClasses() {
+        return {
+            'wr-divider': true,
+            'wr-divider--primary': this.color === 'primary',
+            'wr-divider--secondary': this.color === 'secondary',
+            'wr-divider--success': this.color === 'success',
+            'wr-divider--warning': this.color === 'warning',
+            'wr-divider--danger': this.color === 'danger',
+            'wr-divider--light': this.color === 'light',
+            'wr-divider--medium': this.color === 'medium',
+            'wr-divider--dark': this.color === 'dark',
+            'wr-divider--solid': this.type === 'solid',
+            'wr-divider--dashed': this.type === 'dashed',
+            'wr-divider--dotted': this.type === 'dotted'
+        };
+    }
+    /** Set element style **/
+    get elStyles() {
+        return {
+            '--wr-divider-width': this.width
+        };
     }
 }
 WrDividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WrDividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrDividerComponent, selector: "wr-divider", host: { properties: { "class": "this.class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+WrDividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrDividerComponent, selector: "wr-divider", inputs: { color: "color", type: "type", width: "width" }, host: { properties: { "class": "this.elClasses", "style": "this.elStyles" } }, exportAs: ["wrDivider"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-divider',
+                    exportAs: 'wrDivider',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], propDecorators: { class: [{
+        }], propDecorators: { color: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], elClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], elStyles: [{
+                type: HostBinding,
+                args: ['style']
             }] } });
 
 class WrDividerModule {
@@ -889,218 +943,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 }]
         }] });
 
-class WrInputDirective extends BaseComponent {
-    constructor(ngControl) {
-        super();
-        this.ngControl = ngControl;
-        this.class = `${stylePrefix}-input`;
-        this._disabled = false;
-        this.disabled$ = new Subject();
-    }
-    get disabled() {
-        if (this.ngControl && this.ngControl.disabled !== null) {
-            return this.ngControl.disabled;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value != null && `${value}` !== 'false';
-    }
-    ngOnInit() {
-        if (this.ngControl) {
-            this.ngControl.statusChanges
-                ?.pipe(filter(() => this.ngControl.disabled !== null), takeUntil(this.ngUnsubscribe))
-                .subscribe(() => this.disabled$.next(this.ngControl.disabled));
-        }
+class WrFormItemComponent {
+    constructor() {
+        this.hasError = false;
     }
-    ngOnChanges(changes) {
-        const { disabled } = changes;
-        if (disabled) {
-            this.disabled$.next(this.disabled);
-        }
+    get elClasses() {
+        return {
+            'wr-form-item': true,
+            'wr-form-item--has-error': this.hasError
+        };
     }
 }
-WrInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-WrInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: WrInputDirective, selector: "wr-input, input[wr-input], textarea[wr-input]", inputs: { disabled: "disabled" }, host: { properties: { "class": "this.class", "class.wr-input--disabled": "this.disabled", "disabled": "this.disabled" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+WrFormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WrFormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrFormItemComponent, selector: "wr-form-item", inputs: { hasError: "hasError" }, host: { properties: { "class": "this.elClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
-], WrInputDirective.prototype, "disabled", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputDirective, decorators: [{
-            type: Directive,
+], WrFormItemComponent.prototype, "hasError", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormItemComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: 'wr-input, input[wr-input], textarea[wr-input]'
+                    selector: 'wr-form-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `<ng-content></ng-content>`
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], disabled: [{
-                type: HostBinding,
-                args: [`class.${stylePrefix}-input--disabled`]
-            }, {
-                type: HostBinding,
-                args: ['disabled']
-            }, {
+        }], propDecorators: { hasError: [{
                 type: Input
-            }] } });
-
-class WrInputModule {
-}
-WrInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, declarations: [WrInputDirective], imports: [CommonModule, PlatformModule], exports: [WrInputDirective] });
-WrInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, imports: [CommonModule, PlatformModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, PlatformModule],
-                    declarations: [WrInputDirective],
-                    exports: [WrInputDirective]
-                }]
-        }] });
-
-class WrExtendedInputComponent {
-    constructor(ngControl, elRef, r2) {
-        this.ngControl = ngControl;
-        this.elRef = elRef;
-        this.r2 = r2;
-        this.class = `${stylePrefix}-extended-input`;
-        this.disabled = false;
-        this.value = undefined;
-        this.touched = false;
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-        if (ngControl !== null) {
-            ngControl.valueAccessor = this;
-        }
-    }
-    ngOnInit() {
-        const el = this.elRef.nativeElement;
-        const add = (klass) => this.r2.addClass(el, `${this.class}-${klass}`);
-        if (this.suffix) {
-            add('-has-suffix');
-        }
-        if (this.prefix) {
-            add('-has-prefix');
-        }
-    }
-    onInput($event) {
-        this.value = $event.currentTarget.value;
-        this.touched = true;
-        this.onChange(this.value);
-    }
-    onFocusOut() {
-        this.touched = true;
-        this.onTouched();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(obj) {
-        this.value = obj;
-    }
-}
-WrExtendedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrExtendedInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-WrExtendedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrExtendedInputComponent, selector: "wr-extended-input", inputs: { suffix: "suffix", prefix: "prefix" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"wr-extended-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-extended-input-prefix__text\">{{ prefix }}</span>\n</div>\n<input wr-input [disabled]=\"disabled\" [value]=\"value\" (focusout)=\"onFocusOut()\" (input)=\"onInput($event)\" />\n<div class=\"wr-extended-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-extended-input-suffix__text\">{{ suffix }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: WrInputDirective, selector: "wr-input, input[wr-input], textarea[wr-input]", inputs: ["disabled"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrExtendedInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-extended-input', encapsulation: ViewEncapsulation.None, template: "<div class=\"wr-extended-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-extended-input-prefix__text\">{{ prefix }}</span>\n</div>\n<input wr-input [disabled]=\"disabled\" [value]=\"value\" (focusout)=\"onFocusOut()\" (input)=\"onInput($event)\" />\n<div class=\"wr-extended-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-extended-input-suffix__text\">{{ suffix }}</span>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { class: [{
+            }], elClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], suffix: [{
-                type: Input
-            }], prefix: [{
-                type: Input
             }] } });
 
-class WrExtendedInputModule {
-}
-WrExtendedInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrExtendedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrExtendedInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrExtendedInputModule, declarations: [WrExtendedInputComponent], imports: [CommonModule, PlatformModule, WrInputModule], exports: [WrExtendedInputComponent] });
-WrExtendedInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrExtendedInputModule, imports: [CommonModule, PlatformModule, WrInputModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrExtendedInputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, PlatformModule, WrInputModule],
-                    declarations: [WrExtendedInputComponent],
-                    exports: [WrExtendedInputComponent]
-                }]
-        }] });
-
 class WrFormErrorComponent {
     constructor() {
-        this.class = `${stylePrefix}-form-error`;
+        this.class = 'wr-form-error';
     }
 }
 WrFormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WrFormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrFormErrorComponent, selector: "wr-form-error", host: { properties: { "class": "this.class" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+WrFormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrFormErrorComponent, selector: "wr-form-error", host: { properties: { "class": "this.class" } }, exportAs: ["wrFormError"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormErrorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-form-error',
+                    exportAs: 'wrFormError',
+                    template: `<ng-content></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    template: `<ng-content></ng-content>`
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class WrFormItemComponent {
-    constructor(cdr, elRef, r2) {
-        this.cdr = cdr;
-        this.elRef = elRef;
-        this.r2 = r2;
-        this.hasError = false;
-        this.baseClass = `${stylePrefix}-form-item`;
-    }
-    ngOnInit() {
-        this.setClasses();
-    }
-    ngOnChanges(changes) {
-        if (!changes['hasError']?.currentValue) {
-            this.r2.removeClass(this.elRef.nativeElement, `${this.baseClass}--has-error`);
-        }
-        this.setClasses();
-        this.cdr.detectChanges();
-    }
-    setClasses() {
-        const el = this.elRef.nativeElement;
-        const add = (klass) => this.r2.addClass(el, `${this.baseClass}-${klass}`);
-        this.r2.addClass(el, this.baseClass);
-        if (this.hasError) {
-            add('-has-error');
-        }
-    }
-}
-WrFormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-WrFormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrFormItemComponent, selector: "wr-form-item", inputs: { hasError: "hasError" }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    InputBoolean()
-], WrFormItemComponent.prototype, "hasError", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'wr-form-item',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    template: `<ng-content></ng-content>`
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hasError: [{
-                type: Input
-            }] } });
-
 class WrFormModule {
 }
 WrFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1115,95 +1009,285 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 }]
         }] });
 
-class WrPasswordInputComponent {
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        this.class = `${stylePrefix}-password-input`;
-        this.type = 'password';
-        this.disabled = false;
-        this.value = null;
-        this.touched = false;
-        this.onChange = (value) => { };
-        this.onTouched = () => { };
-        if (ngControl !== null) {
-            ngControl.valueAccessor = this;
+class WrInputComponent extends BaseComponent {
+    constructor(cdr, elRef, focusMonitor, ngZone) {
+        super();
+        this.cdr = cdr;
+        this.elRef = elRef;
+        this.focusMonitor = focusMonitor;
+        this.ngZone = ngZone;
+        this.placeholder = '';
+        this.prefix = null;
+        this.suffix = null;
+        this.passwordIcons = false;
+        this.eyeOn = true;
+        this._value = '';
+        this._disabled = false;
+        this._readonly = false;
+        this._required = false;
+        this._autofocus = false;
+        this._focused = false;
+        this._autocomplete = 'off';
+        this._type = 'text';
+        this._mode = 'text';
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+    }
+    get type() {
+        return this._type;
+    }
+    set type(type) {
+        this._type = type;
+    }
+    get inputmode() {
+        return this._mode;
+    }
+    set inputmode(mode) {
+        this._mode = mode;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(disabled) {
+        this._disabled = coerceBooleanProperty(disabled);
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(readonly) {
+        this._readonly = coerceBooleanProperty(readonly);
+    }
+    get required() {
+        return this._required;
+    }
+    set required(required) {
+        this._required = coerceBooleanProperty(required);
+    }
+    get autofocus() {
+        return this._autofocus;
+    }
+    set autofocus(autofocus) {
+        this._autofocus = coerceBooleanProperty(autofocus);
+    }
+    get autocomplete() {
+        return this._autocomplete;
+    }
+    set autocomplete(autofocus) {
+        this._autocomplete = autofocus;
+    }
+    get value() {
+        return this.type === 'number' ? this.valueAsNumber : this._value;
+    }
+    set value(val) {
+        if (val !== this._value) {
+            this._value = val;
+            this.onChangeCallback(this.value);
+        }
+    }
+    get valueAsString() {
+        if (this._value == null || typeof this._value === 'undefined')
+            return '';
+        return String(this._value);
+    }
+    get valueAsNumber() {
+        return coerceNumberProperty(this._value);
+    }
+    get isBadInput() {
+        const validity = this.inputElement?.nativeElement?.validity;
+        return validity && validity.badInput;
+    }
+    get elClasses() {
+        return {
+            'wr-input': true,
+            'wr-input--has-prefix': this.prefix,
+            'wr-input--has-suffix': this.suffix,
+            'wr-input--password': this.passwordIcons,
+            'wr-input--disabled': this.disabled
+        };
+    }
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(this.elRef.nativeElement, 'click')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(event => {
+                event.preventDefault();
+                this.onFocus();
+                if (this.disabled) {
+                    event.stopImmediatePropagation();
+                    return;
+                }
+            });
+            fromEvent(this.inputElement.nativeElement, 'click')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(event => event.stopPropagation());
+        });
+    }
+    ngAfterViewInit() {
+        if (this.autofocus) {
+            this.onFocus();
+            this.cdr.markForCheck();
         }
     }
-    onVisibilityClick($event) {
-        $event.stopPropagation();
-        this.type === 'password' ? (this.type = 'input') : (this.type = 'password');
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.focusMonitor.stopMonitoring(this.elRef);
+    }
+    onFocus(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this._focused = true;
+        this.focusMonitor.focusVia(this.inputElement, 'keyboard');
+    }
+    onBlur(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this._focused = false;
+        // this.inputElement.nativeElement.blur();
+        this.onTouchedCallback();
     }
-    onInput($event) {
-        this.value = $event.currentTarget.value;
-        this.touched = true;
-        this.onChange(this.value);
+    validate(control) {
+        return {
+            ...(this.isBadInput ? { badInput: true } : null)
+        };
     }
-    onFocusOut() {
-        this.touched = true;
-        this.onTouched();
+    writeValue(value) {
+        if (value !== this._value) {
+            this._value = value;
+        }
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.onChangeCallback = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this.onTouchedCallback = fn;
     }
-    writeValue(obj) {
-        this.value = obj;
+    onPasswordVisibilityChange() {
+        this.type === 'password' ? (this.type = 'text') : (this.type = 'password');
+        this.eyeOn = !this.eyeOn;
+        this.onFocus();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = coerceBooleanProperty(isDisabled);
     }
 }
-WrPasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrPasswordInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-WrPasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrPasswordInputComponent, selector: "wr-password-input", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<input\n  wr-input\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [value]=\"value\"\n  (focusout)=\"onFocusOut()\"\n  (input)=\"onInput($event)\"\n/>\n<wr-icon\n  class=\"wr-password-input-icon\"\n  *ngIf=\"type === 'input'\"\n  name=\"eye\"\n  (click)=\"onVisibilityClick($event)\"\n></wr-icon>\n<wr-icon\n  class=\"wr-password-input-icon\"\n  *ngIf=\"type === 'password'\"\n  name=\"eye-off\"\n  (click)=\"onVisibilityClick($event)\"\n></wr-icon>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: WrInputDirective, selector: "wr-input, input[wr-input], textarea[wr-input]", inputs: ["disabled"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon[name]", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrPasswordInputComponent, decorators: [{
+WrInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+WrInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrInputComponent, selector: "wr-input", inputs: { placeholder: "placeholder", prefix: "prefix", suffix: "suffix", passwordIcons: "passwordIcons", type: "type", inputmode: "inputmode", disabled: "disabled", readonly: "readonly", required: "required", autofocus: "autofocus", autocomplete: "autocomplete", value: "value" }, host: { properties: { "class": "this.elClasses" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => WrInputComponent),
+            multi: true
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => WrInputComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], exportAs: ["wrInput"], usesInheritance: true, ngImport: i0, template: "<div class=\"wr-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n</div>\n<div class=\"wr-input-el\">\n  <div *ngIf=\"passwordIcons\" class=\"wr-input-el-icon\" (click)=\"onPasswordVisibilityChange()\">\n    <wr-icon class=\"wr-input-el-icon__icon\" [name]=\"eyeOn ? 'eye' : 'eye-off'\"></wr-icon>\n  </div>\n  <input\n    #inputElement\n    class=\"wr-input-el__native\"\n    [ngModel]=\"valueAsString\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [type]=\"type\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (ngModelChange)=\"value = $event\"\n  />\n</div>\n<div class=\"wr-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon[name]", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], WrInputComponent.prototype, "passwordIcons", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-password-input', encapsulation: ViewEncapsulation.None, template: "<input\n  wr-input\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [value]=\"value\"\n  (focusout)=\"onFocusOut()\"\n  (input)=\"onInput($event)\"\n/>\n<wr-icon\n  class=\"wr-password-input-icon\"\n  *ngIf=\"type === 'input'\"\n  name=\"eye\"\n  (click)=\"onVisibilityClick($event)\"\n></wr-icon>\n<wr-icon\n  class=\"wr-password-input-icon\"\n  *ngIf=\"type === 'password'\"\n  name=\"eye-off\"\n  (click)=\"onVisibilityClick($event)\"\n></wr-icon>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { class: [{
+            args: [{ selector: 'wr-input', exportAs: 'wrInput', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WrInputComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => WrInputComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"wr-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n</div>\n<div class=\"wr-input-el\">\n  <div *ngIf=\"passwordIcons\" class=\"wr-input-el-icon\" (click)=\"onPasswordVisibilityChange()\">\n    <wr-icon class=\"wr-input-el-icon__icon\" [name]=\"eyeOn ? 'eye' : 'eye-off'\"></wr-icon>\n  </div>\n  <input\n    #inputElement\n    class=\"wr-input-el__native\"\n    [ngModel]=\"valueAsString\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [type]=\"type\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (ngModelChange)=\"value = $event\"\n  />\n</div>\n<div class=\"wr-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], passwordIcons: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], inputmode: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement', { static: true }]
+            }], elClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class WrPasswordInputModule {
+class WrInputModule {
 }
-WrPasswordInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrPasswordInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrPasswordInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrPasswordInputModule, declarations: [WrPasswordInputComponent], imports: [CommonModule, PlatformModule, WrInputModule, WrIconModule], exports: [WrPasswordInputComponent] });
-WrPasswordInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrPasswordInputModule, imports: [CommonModule, PlatformModule, WrInputModule, WrIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrPasswordInputModule, decorators: [{
+WrInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WrInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, declarations: [WrInputComponent], imports: [CommonModule, FormsModule, WrIconModule], exports: [WrInputComponent] });
+WrInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, imports: [CommonModule, FormsModule, WrIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PlatformModule, WrInputModule, WrIconModule],
-                    declarations: [WrPasswordInputComponent],
-                    exports: [WrPasswordInputComponent]
+                    imports: [CommonModule, FormsModule, WrIconModule],
+                    declarations: [WrInputComponent],
+                    exports: [WrInputComponent]
                 }]
         }] });
 
 class WrSkeletonComponent {
-    constructor(elRef) {
-        this.elRef = elRef;
+    constructor() {
         this.color = 'dark';
-        this.class = `${stylePrefix}-skeleton`;
+        this.animated = true;
     }
-    ngAfterViewInit() {
-        const style = this.color === 'light' ? `var(--${stylePrefix}-color-white-rgb)` : `var(--${stylePrefix}-color-dark-rgb)`;
-        this.elRef.nativeElement.style.setProperty('--skeleton-style', style);
+    get elClasses() {
+        return {
+            'wr-skeleton': true,
+            'wr-skeleton--animated': this.animated,
+            'wr-skeleton--primary': this.color === 'primary',
+            'wr-skeleton--secondary': this.color === 'secondary',
+            'wr-skeleton--success': this.color === 'success',
+            'wr-skeleton--warning': this.color === 'warning',
+            'wr-skeleton--danger': this.color === 'danger',
+            'wr-skeleton--light': this.color === 'light',
+            'wr-skeleton--medium': this.color === 'medium',
+            'wr-skeleton--dark': this.color === 'dark'
+        };
     }
 }
-WrSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WrSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrSkeletonComponent, selector: "wr-skeleton", inputs: { color: "color" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<span>&nbsp;</span>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+WrSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WrSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrSkeletonComponent, selector: "wr-skeleton", inputs: { color: "color", animated: "animated" }, host: { properties: { "class": "this.elClasses" } }, exportAs: ["wrSkeleton"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], WrSkeletonComponent.prototype, "animated", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-skeleton',
-                    template: '<span>&nbsp;</span>',
+                    exportAs: 'wrSkeleton',
+                    template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { color: [{
+        }], propDecorators: { color: [{
                 type: Input
-            }], class: [{
+            }], animated: [{
+                type: Input
+            }], elClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -1211,112 +1295,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
 class WrSkeletonModule {
 }
 WrSkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonModule, declarations: [WrSkeletonComponent], imports: [CommonModule, WrSpinnerModule], exports: [WrSkeletonComponent] });
-WrSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonModule, imports: [CommonModule, WrSpinnerModule] });
+WrSkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonModule, declarations: [WrSkeletonComponent], imports: [CommonModule], exports: [WrSkeletonComponent] });
+WrSkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, WrSpinnerModule],
+                    imports: [CommonModule],
                     declarations: [WrSkeletonComponent],
                     exports: [WrSkeletonComponent]
                 }]
         }] });
 
 class WrTagComponent {
-    constructor(cdr, elRef, r2) {
-        this.cdr = cdr;
-        this.elRef = elRef;
-        this.r2 = r2;
+    constructor() {
         this.color = 'primary';
-        this.transparent = false;
-        this.loading = false;
+        this.icon = null;
+        this.iconPosition = 'start';
         this.outlined = false;
         this.rounded = false;
+        this.transparent = false;
         this.hoverable = false;
-        this.baseClass = `${stylePrefix}-tag`;
+        this.loading = false;
     }
-    ngOnInit() {
-        this.setClasses();
-    }
-    ngOnChanges(changes) {
-        this.setClasses();
-        this.cdr.detectChanges();
-    }
-    setClasses() {
-        const el = this.elRef.nativeElement;
-        const add = (klass) => this.r2.addClass(el, `${this.baseClass}-${klass}`);
-        this.r2.addClass(el, this.baseClass);
-        add(this.color);
-        if (this.rounded) {
-            add(`-rounded`);
-        }
-        if (this.transparent) {
-            add(`-transparent`);
-        }
-        if (this.hoverable) {
-            add(`-hoverable`);
-        }
-        if (this.outlined) {
-            add(`-outlined`);
-        }
+    get elClasses() {
+        return {
+            'wr-tag': true,
+            'wr-tag--primary': this.color === 'primary',
+            'wr-tag--secondary': this.color === 'secondary',
+            'wr-tag--success': this.color === 'success',
+            'wr-tag--warning': this.color === 'warning',
+            'wr-tag--danger': this.color === 'danger',
+            'wr-tag--light': this.color === 'light',
+            'wr-tag--medium': this.color === 'medium',
+            'wr-tag--dark': this.color === 'dark',
+            'wr-tag--icon-start': (this.icon || this.loading) && this.iconPosition === 'start',
+            'wr-tag--icon-end': (this.icon || this.loading) && this.iconPosition === 'end',
+            'wr-tag--loading': this.loading,
+            'wr-tag--rounded': this.rounded,
+            'wr-tag--outlined': this.outlined,
+            'wr-tag--transparent': this.transparent,
+            'wr-tag--hoverable': this.hoverable
+        };
     }
 }
-WrTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrTagComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-WrTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrTagComponent, selector: "wr-tag", inputs: { color: "color", transparent: "transparent", loading: "loading", outlined: "outlined", rounded: "rounded", hoverable: "hoverable" }, usesOnChanges: true, ngImport: i0, template: '<wr-spin *ngIf="loading"></wr-spin><ng-content></ng-content>', isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WrSpinnerComponent, selector: "wr-spin" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+WrTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WrTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrTagComponent, selector: "wr-tag", inputs: { color: "color", icon: "icon", iconPosition: "iconPosition", outlined: "outlined", rounded: "rounded", transparent: "transparent", hoverable: "hoverable", loading: "loading" }, host: { properties: { "class": "this.elClasses" } }, exportAs: ["wrTag"], ngImport: i0, template: "<wr-spin class=\"wr-tag__spin\" *ngIf=\"loading && iconPosition === 'start'\"></wr-spin>\n<wr-icon class=\"wr-tag__icon\" *ngIf=\"icon && !loading && iconPosition === 'start'\" [name]=\"icon\"></wr-icon>\n<ng-content></ng-content>\n<wr-spin class=\"wr-tag__spin\" *ngIf=\"loading && iconPosition === 'end'\"></wr-spin>\n<wr-icon class=\"wr-tag__icon\" *ngIf=\"icon && !loading && iconPosition === 'end'\" [name]=\"icon\"></wr-icon>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon[name]", inputs: ["name"] }, { kind: "component", type: WrSpinnerComponent, selector: "wr-spin", exportAs: ["wrSpin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
-], WrTagComponent.prototype, "transparent", void 0);
+], WrTagComponent.prototype, "outlined", void 0);
 __decorate([
     InputBoolean()
-], WrTagComponent.prototype, "loading", void 0);
+], WrTagComponent.prototype, "rounded", void 0);
 __decorate([
     InputBoolean()
-], WrTagComponent.prototype, "outlined", void 0);
+], WrTagComponent.prototype, "transparent", void 0);
 __decorate([
     InputBoolean()
-], WrTagComponent.prototype, "rounded", void 0);
+], WrTagComponent.prototype, "hoverable", void 0);
 __decorate([
     InputBoolean()
-], WrTagComponent.prototype, "hoverable", void 0);
+], WrTagComponent.prototype, "loading", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrTagComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'wr-tag',
-                    template: '<wr-spin *ngIf="loading"></wr-spin><ng-content></ng-content>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { color: [{
+            args: [{ selector: 'wr-tag', exportAs: 'wrTag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<wr-spin class=\"wr-tag__spin\" *ngIf=\"loading && iconPosition === 'start'\"></wr-spin>\n<wr-icon class=\"wr-tag__icon\" *ngIf=\"icon && !loading && iconPosition === 'start'\" [name]=\"icon\"></wr-icon>\n<ng-content></ng-content>\n<wr-spin class=\"wr-tag__spin\" *ngIf=\"loading && iconPosition === 'end'\"></wr-spin>\n<wr-icon class=\"wr-tag__icon\" *ngIf=\"icon && !loading && iconPosition === 'end'\" [name]=\"icon\"></wr-icon>\n" }]
+        }], propDecorators: { color: [{
                 type: Input
-            }], transparent: [{
+            }], icon: [{
                 type: Input
-            }], loading: [{
+            }], iconPosition: [{
                 type: Input
             }], outlined: [{
                 type: Input
             }], rounded: [{
                 type: Input
+            }], transparent: [{
+                type: Input
             }], hoverable: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], elClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class WrTagModule {
 }
 WrTagModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrTagModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrTagModule, declarations: [WrTagComponent], imports: [CommonModule, WrSpinnerModule], exports: [WrTagComponent] });
-WrTagModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrTagModule, imports: [CommonModule, WrSpinnerModule] });
+WrTagModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrTagModule, declarations: [WrTagComponent], imports: [CommonModule, WrIconModule, WrSpinnerModule], exports: [WrTagComponent] });
+WrTagModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrTagModule, imports: [CommonModule, WrIconModule, WrSpinnerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrTagModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, WrSpinnerModule],
+                    imports: [CommonModule, WrIconModule, WrSpinnerModule],
                     declarations: [WrTagComponent],
                     exports: [WrTagComponent]
                 }]
         }] });
 
+// Components
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrButtonComponent, WrButtonModule, WrCheckboxComponent, WrCheckboxModule, WrDividerComponent, WrDividerModule, WrExtendedInputComponent, WrExtendedInputModule, WrFormErrorComponent, WrFormItemComponent, WrFormModule, WrIconComponent, WrIconModule, WrIconService, WrInputDirective, WrInputModule, WrPasswordInputComponent, WrPasswordInputModule, WrSkeletonComponent, WrSkeletonModule, WrSpinnerComponent, WrSpinnerModule, WrTagComponent, WrTagModule, wrIconAdd, wrIconAddCircle, wrIconAddCircleOutline, wrIconAlert, wrIconAlertCircle, wrIconAlertCircleOutline, wrIconAlertSquircle, wrIconArrowBack, wrIconArrowBackCircle, wrIconArrowBottom, wrIconArrowBottomCircle, wrIconArrowForward, wrIconArrowForwardCircle, wrIconArrowTop, wrIconArrowTopCircle, wrIconBug, wrIconBugOutline, wrIconCaretBack, wrIconCaretForward, wrIconCheckmark, wrIconCheckmarkCircle, wrIconCheckmarkCircleOutline, wrIconChevronDown, wrIconChevronUp, wrIconClock, wrIconCloseCircle, wrIconCog, wrIconCopy, wrIconCopyOutline, wrIconDiscover, wrIconDocument, wrIconDotsHorizontal, wrIconDotsVertical, wrIconDownload, wrIconEye, wrIconEyeOff, wrIconFileAab, wrIconFileApk, wrIconFileIpa, wrIconFileZip, wrIconFilter, wrIconFilterOutline, wrIconFlash, wrIconFolder, wrIconHelp, wrIconHome, wrIconInfoCircleOutline, wrIconLock, wrIconLockOpened, wrIconLogoAndroid, wrIconLogoApple, wrIconLogoAppscreener, wrIconLogoGithub, wrIconLogoOversecured, wrIconLogoStingray, wrIconModules, wrIconPlay, wrIconPlayBack, wrIconPlayCircle, wrIconPlayForward, wrIconPlusCircle, wrIconReader, wrIconRepeat, wrIconSearch, wrIconSet, wrIconShield, wrIconShieldCheckmark, wrIconShieldCheckmarkOutline, wrIconShieldOutline, wrIconStop, wrIconStopCircle, wrIconTrash, wrIconUser, wrIconUserAdd, wrIconUserCircle, wrIconUserRemove, wrIconWarning };
+export { WrButtonComponent, WrButtonModule, WrCheckboxComponent, WrCheckboxModule, WrDividerComponent, WrDividerModule, WrFormErrorComponent, WrFormItemComponent, WrFormModule, WrIconComponent, WrIconModule, WrIconService, WrInputComponent, WrInputModule, WrSkeletonComponent, WrSkeletonModule, WrSpinnerComponent, WrSpinnerModule, WrTagComponent, WrTagModule, wrIconSet };
 //# sourceMappingURL=ngwr.mjs.map