ngwr 0.0.13 → 0.0.14

package/fesm2015/ngwr.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, Input, EventEmitter, forwardRef, ViewChild, Output, Optional, Self, Injectable, Inject } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, HostBinding, Input, NgModule, Directive, EventEmitter, forwardRef, ViewChild, Output, Self } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { __decorate } from 'tslib';
@@ -12,644 +12,6 @@ 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();
-        this._isDestroyed = false;
-    }
-    get isDestroyed() {
-        return this._isDestroyed;
-    }
-    ngOnDestroy() {
-        this._isDestroyed = true;
-        this.ngUnsubscribe.next(undefined);
-        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();
-        this.cdr = cdr;
-        this.elRef = elRef;
-        this.ngZone = ngZone;
-        this.r2 = r2;
-        this.color = 'primary';
-        this.size = 'default';
-        this.disabled = false;
-        this.outlined = false;
-        this.rounded = false;
-        this.loading = false;
-        this.block = false;
-        this.baseClass = `${stylePrefix}-btn`;
-    }
-    ngOnInit() {
-        this.setClasses();
-        this.ngZone.runOutsideAngular(() => {
-            /**
-             * Caretaker note: this event listener could've been added through `host.click` or `HostListener`.
-             * The compiler generates the `ɵɵlistener` instruction which wraps the actual listener internally into the
-             * function, which runs `markDirty()` before running the actual listener (the decorated class method).
-             * Since we're preventing the default behavior and stopping event propagation
-             * this doesn't require Angular to run the change detection.
-             */
-            fromEvent(this.elRef.nativeElement, 'click')
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(event => {
-                var _a;
-                if (this.disabled && ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === 'A') {
-                    event.preventDefault();
-                    event.stopImmediatePropagation();
-                }
-            });
-        });
-    }
-    ngAfterViewInit() {
-        this.insertSpan(this.elRef.nativeElement.childNodes, this.r2);
-    }
-    ngOnChanges(changes) {
-        var _a, _b;
-        if (!((_a = changes['disabled']) === null || _a === void 0 ? void 0 : _a.currentValue)) {
-            this.r2.removeClass(this.elRef.nativeElement, `${this.baseClass}--disabled`);
-        }
-        if (!((_b = changes['disabled']) === null || _b === void 0 ? void 0 : _b.currentValue)) {
-            this.r2.removeClass(this.elRef.nativeElement, `${this.baseClass}--loading`);
-        }
-        this.setClasses();
-        this.cdr.detectChanges();
-    }
-    insertSpan(nodes, renderer) {
-        nodes.forEach(node => {
-            if (node.nodeName === '#text') {
-                const span = renderer.createElement('span');
-                renderer.addClass(span, `${this.baseClass}__text`);
-                const parent = renderer.parentNode(node);
-                renderer.insertBefore(parent, span, node);
-                renderer.appendChild(span, node);
-            }
-        });
-    }
-    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.loading) {
-            add(`-loading`);
-        }
-        if (this.block) {
-            add(`-block`);
-        }
-        add(`-${this.size}`);
-        if (this.outlined) {
-            add(`-outlined`);
-        }
-        if (this.disabled) {
-            add('-disabled');
-        }
-    }
-}
-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, [wr-btn]", inputs: { color: "color", size: "size", disabled: "disabled", outlined: "outlined", rounded: "rounded", loading: "loading", block: "block" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content><wr-spin *ngIf="loading"></wr-spin>`, 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 });
-__decorate([
-    InputBoolean()
-], WrButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    InputBoolean()
-], WrButtonComponent.prototype, "outlined", void 0);
-__decorate([
-    InputBoolean()
-], WrButtonComponent.prototype, "rounded", void 0);
-__decorate([
-    InputBoolean()
-], WrButtonComponent.prototype, "loading", void 0);
-__decorate([
-    InputBoolean()
-], WrButtonComponent.prototype, "block", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'wr-btn, [wr-btn]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    template: `<ng-content></ng-content><wr-spin *ngIf="loading"></wr-spin>`
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { color: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], outlined: [{
-                type: Input
-            }], rounded: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], block: [{
-                type: Input
-            }] } });
-
-class WrButtonModule {
-}
-WrButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, declarations: [WrButtonComponent], imports: [CommonModule, WrSpinnerModule], exports: [WrButtonComponent] });
-WrButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, imports: [CommonModule, WrSpinnerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, WrSpinnerModule],
-                    declarations: [WrButtonComponent],
-                    exports: [WrButtonComponent]
-                }]
-        }] });
-
-class WrCheckboxComponent extends BaseComponent {
-    constructor(cdr, elRef, focusMonitor, ngZone) {
-        super();
-        this.cdr = cdr;
-        this.elRef = elRef;
-        this.focusMonitor = focusMonitor;
-        this.ngZone = ngZone;
-        this.onChange = () => { };
-        this.onTouch = () => { };
-        this.checked = false;
-        this.disabled = false;
-        this.autoFocus = false;
-        this.checkedChange = new EventEmitter();
-        this.class = `${stylePrefix}-checkbox`;
-    }
-    ngOnInit() {
-        this.ngZone.runOutsideAngular(() => {
-            fromEvent(this.elRef.nativeElement, 'click')
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(event => {
-                event.preventDefault();
-                this.focus();
-                if (this.disabled) {
-                    return;
-                }
-                this.ngZone.run(() => {
-                    this.onModelChange(!this.checked);
-                    this.cdr.markForCheck();
-                });
-            });
-            fromEvent(this.inputElement.nativeElement, 'click')
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(event => event.stopPropagation());
-        });
-    }
-    ngAfterViewInit() {
-        if (this.autoFocus) {
-            this.focus();
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.focusMonitor.stopMonitoring(this.elRef);
-    }
-    writeValue(value) {
-        this.checked = value;
-        this.cdr.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    focus() {
-        this.focusMonitor.focusVia(this.inputElement, 'keyboard');
-    }
-    blur() {
-        this.inputElement.nativeElement.blur();
-    }
-    onModelChange(checked) {
-        if (!this.disabled) {
-            this.checked = checked;
-            this.onChange(this.checked);
-            this.checkedChange.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: [
-        {
-            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 });
-__decorate([
-    InputBoolean()
-], WrCheckboxComponent.prototype, "checked", void 0);
-__decorate([
-    InputBoolean()
-], WrCheckboxComponent.prototype, "disabled", void 0);
-__decorate([
-    InputBoolean()
-], WrCheckboxComponent.prototype, "autoFocus", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            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: [{
-                type: ViewChild,
-                args: ['inputElement', { static: true }]
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], checkedChange: [{
-                type: Output
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class WrCheckboxModule {
-}
-WrCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, declarations: [WrCheckboxComponent], imports: [CommonModule, FormsModule, A11yModule], exports: [WrCheckboxComponent] });
-WrCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, imports: [CommonModule, FormsModule, A11yModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule, A11yModule],
-                    declarations: [WrCheckboxComponent],
-                    exports: [WrCheckboxComponent]
-                }]
-        }] });
-
-class WrDividerComponent {
-    constructor() {
-        this.class = `${stylePrefix}-divider`;
-    }
-}
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'wr-divider',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class WrDividerModule {
-}
-WrDividerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WrDividerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule, declarations: [WrDividerComponent], exports: [WrDividerComponent] });
-WrDividerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [WrDividerComponent],
-                    exports: [WrDividerComponent]
-                }]
-        }] });
-
-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() {
-        var _a;
-        if (this.ngControl) {
-            (_a = this.ngControl.statusChanges) === null || _a === void 0 ? void 0 : _a.pipe(filter(() => this.ngControl.disabled !== null), takeUntil(this.ngUnsubscribe)).subscribe(() => this.disabled$.next(this.ngControl.disabled));
-        }
-    }
-    ngOnChanges(changes) {
-        const { disabled } = changes;
-        if (disabled) {
-            this.disabled$.next(this.disabled);
-        }
-    }
-}
-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 });
-__decorate([
-    InputBoolean()
-], WrInputDirective.prototype, "disabled", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'wr-input, input[wr-input], textarea[wr-input]'
-                }]
-        }], 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']
-            }, {
-                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: [{
-                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`;
-    }
-}
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormErrorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'wr-form-error',
-                    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) {
-        var _a;
-        if (!((_a = changes['hasError']) === null || _a === void 0 ? void 0 : _a.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 });
-WrFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrFormModule, declarations: [WrFormItemComponent, WrFormErrorComponent], imports: [CommonModule], exports: [WrFormItemComponent, WrFormErrorComponent] });
-WrFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [WrFormItemComponent, WrFormErrorComponent],
-                    exports: [WrFormItemComponent, WrFormErrorComponent]
-                }]
-        }] });
-
 /* 🤖 this file was generated by svg-to-ts */
 const wrIconAddCircleOutline = {
     name: 'add-circle-outline',
@@ -1034,96 +396,729 @@ const wrIconSet = [
     wrIconWarning
 ];
 
-class WrIconService {
+class WrIconService {
+    /**
+     * Access icons registry
+     */
+    get registry() {
+        return WrIconService.registry;
+    }
+    /**
+     * Register all icons
+     */
+    static registerIcons() {
+        wrIconSet.forEach((icon) => WrIconService.registry.set(icon.name, icon.data));
+    }
+}
+/**
+ * Icons registry
+ */
+WrIconService.registry = new Map();
+WrIconService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+WrIconService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class WrIconComponent {
+    constructor(elRef, iconService, doc) {
+        this.elRef = elRef;
+        this.iconService = iconService;
+        this.doc = doc;
+        this.class = 'wr-icon';
+    }
+    set name(name) {
+        if (!this.iconService.registry.has(name)) {
+            console.warn(`Icon ${name} was not found`);
+            return;
+        }
+        if (this.svgIcon) {
+            this.elRef.nativeElement.removeChild(this.svgIcon);
+        }
+        const svgData = this.iconService.registry.get(name) || '';
+        this.svgIcon = this.svgElementFromString(svgData);
+        this.elRef.nativeElement.appendChild(this.svgIcon);
+    }
+    svgElementFromString(svgContent) {
+        const div = this.doc.createElement('div');
+        div.innerHTML = svgContent;
+        return div.querySelector('svg') || this.doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    }
+}
+WrIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconComponent, deps: [{ token: i0.ElementRef }, { token: WrIconService }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+WrIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrIconComponent, selector: "wr-icon[name]", inputs: { name: "name" }, host: { properties: { "class": "this.class" } }, 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: WrIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-icon[name]',
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: WrIconService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], name: [{
+                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();
+        this.cdr = cdr;
+        this.elRef = elRef;
+        this.ngZone = ngZone;
+        this.r2 = r2;
+        this.color = 'primary';
+        this.size = 'default';
+        this.icon = null;
+        this.iconPosition = 'start';
+        this.disabled = false;
+        this.outlined = false;
+        this.rounded = false;
+        this.loading = false;
+        this.fullwidth = false;
+        this._disabled = this.disabled || null;
+    }
+    get elClasses() {
+        return {
+            'wr-btn': true,
+            'wr-btn--primary': this.color === 'primary',
+            'wr-btn--secondary': this.color === 'secondary',
+            'wr-btn--success': this.color === 'success',
+            'wr-btn--warning': this.color === 'warning',
+            'wr-btn--danger': this.color === 'danger',
+            'wr-btn--light': this.color === 'light',
+            'wr-btn--medium': this.color === 'medium',
+            'wr-btn--dark': this.color === 'dark',
+            'wr-btn--default': this.size === 'default',
+            'wr-btn--small': this.size === 'small',
+            'wr-btn--icon-start': this.icon && this.iconPosition === 'start',
+            'wr-btn--icon-end': this.icon && this.iconPosition === 'end',
+            'wr-btn--outlined': this.outlined,
+            'wr-btn--rounded': this.rounded,
+            'wr-btn--loading': this.loading,
+            'wr-btn--full': this.fullwidth
+        };
+    }
+    ngOnInit() {
+        /**
+         * Event listener added to prevent default behavior, so we don't need to call change detection
+         * By default, compiler wraps HostListener to `ɵɵlistener`, which call `markDirty()` before running actual listener.
+         */
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(this.elRef.nativeElement, 'click')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(event => {
+                var _a;
+                if (this.disabled && ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === 'A') {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                }
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.insertSpan(this.elRef.nativeElement.childNodes, this.r2);
+    }
     /**
-     * Access icons registry
+     * Sanitizing `<ng-content></ng-content>` from other content except #text
+     *
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName}
+     *
+     * @param {NodeList} nodes List of nodes from `nativeElement.childNodes`
+     * @param {Renderer2} r2 Renderer2 from `@angular/core`
      */
-    get registry() {
-        return WrIconService.registry;
+    insertSpan(nodes, r2) {
+        nodes.forEach(node => {
+            if (node.nodeName === '#text') {
+                const span = r2.createElement('span');
+                r2.addClass(span, `wr-btn__text`);
+                const parent = r2.parentNode(node);
+                r2.insertBefore(parent, span, node);
+                r2.appendChild(span, node);
+            }
+        });
+    }
+}
+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 });
+__decorate([
+    InputBoolean()
+], WrButtonComponent.prototype, "disabled", void 0);
+__decorate([
+    InputBoolean()
+], WrButtonComponent.prototype, "outlined", void 0);
+__decorate([
+    InputBoolean()
+], WrButtonComponent.prototype, "rounded", void 0);
+__decorate([
+    InputBoolean()
+], WrButtonComponent.prototype, "loading", void 0);
+__decorate([
+    InputBoolean()
+], WrButtonComponent.prototype, "fullwidth", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-btn, button[wr-btn], a[wr-btn]', exportAs: 'wrBtn', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], outlined: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], fullwidth: [{
+                type: Input
+            }], elClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], _disabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }] } });
+
+class WrButtonModule {
+}
+WrButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WrButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, declarations: [WrButtonComponent], imports: [CommonModule, WrSpinnerModule, WrIconModule], exports: [WrButtonComponent] });
+WrButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, imports: [CommonModule, WrSpinnerModule, WrIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, WrSpinnerModule, WrIconModule],
+                    declarations: [WrButtonComponent],
+                    exports: [WrButtonComponent]
+                }]
+        }] });
+
+class WrCheckboxComponent extends BaseComponent {
+    constructor(cdr, elRef, focusMonitor, ngZone) {
+        super();
+        this.cdr = cdr;
+        this.elRef = elRef;
+        this.focusMonitor = focusMonitor;
+        this.ngZone = ngZone;
+        this.onChange = () => { };
+        this.onTouch = () => { };
+        this.checked = false;
+        this.disabled = false;
+        this.autoFocus = false;
+        this.checkedChange = new EventEmitter();
+        this.class = `${stylePrefix}-checkbox`;
+    }
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(this.elRef.nativeElement, 'click')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(event => {
+                event.preventDefault();
+                this.focus();
+                if (this.disabled) {
+                    event.stopImmediatePropagation();
+                    return;
+                }
+                this.ngZone.run(() => {
+                    this.onModelChange(!this.checked);
+                    this.cdr.markForCheck();
+                });
+            });
+            fromEvent(this.inputElement.nativeElement, 'click')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(event => event.stopPropagation());
+        });
+    }
+    ngAfterViewInit() {
+        if (this.autoFocus) {
+            this.focus();
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.focusMonitor.stopMonitoring(this.elRef);
+    }
+    writeValue(value) {
+        this.checked = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    focus() {
+        this.focusMonitor.focusVia(this.inputElement, 'keyboard');
+    }
+    blur() {
+        this.inputElement.nativeElement.blur();
+    }
+    onModelChange(checked) {
+        if (!this.disabled) {
+            this.checked = checked;
+            this.onChange(this.checked);
+            this.checkedChange.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: [
+        {
+            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 });
+__decorate([
+    InputBoolean()
+], WrCheckboxComponent.prototype, "checked", void 0);
+__decorate([
+    InputBoolean()
+], WrCheckboxComponent.prototype, "disabled", void 0);
+__decorate([
+    InputBoolean()
+], WrCheckboxComponent.prototype, "autoFocus", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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: [{
+                type: ViewChild,
+                args: ['inputElement', { static: true }]
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class WrCheckboxModule {
+}
+WrCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WrCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, declarations: [WrCheckboxComponent], imports: [CommonModule, FormsModule, A11yModule], exports: [WrCheckboxComponent] });
+WrCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, imports: [CommonModule, FormsModule, A11yModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, A11yModule],
+                    declarations: [WrCheckboxComponent],
+                    exports: [WrCheckboxComponent]
+                }]
+        }] });
+
+class WrDividerComponent {
+    constructor() {
+        this.class = `${stylePrefix}-divider`;
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-divider',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class WrDividerModule {
+}
+WrDividerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WrDividerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule, declarations: [WrDividerComponent], exports: [WrDividerComponent] });
+WrDividerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrDividerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [WrDividerComponent],
+                    exports: [WrDividerComponent]
+                }]
+        }] });
+
+class WrInputDirective extends BaseComponent {
+    constructor(ngControl) {
+        super();
+        this.ngControl = ngControl;
+        this.class = `${stylePrefix}-input`;
+        this._disabled = false;
+        this.disabled$ = new Subject();
     }
-    /**
-     * Register all icons
-     */
-    static registerIcons() {
-        wrIconSet.forEach((icon) => WrIconService.registry.set(icon.name, icon.data));
+    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() {
+        var _a;
+        if (this.ngControl) {
+            (_a = this.ngControl.statusChanges) === null || _a === void 0 ? void 0 : _a.pipe(filter(() => this.ngControl.disabled !== null), takeUntil(this.ngUnsubscribe)).subscribe(() => this.disabled$.next(this.ngControl.disabled));
+        }
+    }
+    ngOnChanges(changes) {
+        const { disabled } = changes;
+        if (disabled) {
+            this.disabled$.next(this.disabled);
+        }
     }
 }
-/**
- * Icons registry
- */
-WrIconService.registry = new Map();
-WrIconService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-WrIconService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconService, decorators: [{
-            type: Injectable,
+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 });
+__decorate([
+    InputBoolean()
+], WrInputDirective.prototype, "disabled", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: 'wr-input, input[wr-input], textarea[wr-input]'
+                }]
+        }], 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']
+            }, {
+                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 WrIconComponent {
-    constructor(elRef, iconService, doc) {
+class WrExtendedInputComponent {
+    constructor(ngControl, elRef, r2) {
+        this.ngControl = ngControl;
         this.elRef = elRef;
-        this.iconService = iconService;
-        this.doc = doc;
-        this.class = 'wr-icon';
+        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;
+        }
     }
-    set name(name) {
-        if (!this.iconService.registry.has(name)) {
-            console.warn(`Icon ${name} was not found`);
-            return;
+    ngOnInit() {
+        const el = this.elRef.nativeElement;
+        const add = (klass) => this.r2.addClass(el, `${this.class}-${klass}`);
+        if (this.suffix) {
+            add('-has-suffix');
         }
-        if (this.svgIcon) {
-            this.elRef.nativeElement.removeChild(this.svgIcon);
+        if (this.prefix) {
+            add('-has-prefix');
         }
-        const svgData = this.iconService.registry.get(name) || '';
-        this.svgIcon = this.svgElementFromString(svgData);
-        this.elRef.nativeElement.appendChild(this.svgIcon);
     }
-    svgElementFromString(svgContent) {
-        const div = this.doc.createElement('div');
-        div.innerHTML = svgContent;
-        return div.querySelector('svg') || this.doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    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;
     }
 }
-WrIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrIconComponent, deps: [{ token: i0.ElementRef }, { token: WrIconService }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-WrIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrIconComponent, selector: "wr-icon[name]", inputs: { name: "name" }, host: { properties: { "class": "this.class" } }, 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: WrIconComponent, decorators: [{
+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-icon[name]',
-                    template: '',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
+            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: i0.ElementRef }, { type: WrIconService }, { type: undefined, decorators: [{
+        return [{ type: i1$1.NgControl, decorators: [{
                         type: Optional
                     }, {
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }];
+                        type: Self
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
     }, propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
-            }], name: [{
+            }], suffix: [{
+                type: Input
+            }], prefix: [{
                 type: Input
             }] } });
 
-class WrIconModule {
-    static forRoot() {
-        WrIconService.registerIcons();
-        return { ngModule: WrIconModule };
+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`;
     }
 }
-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: [{
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormErrorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-form-error',
+                    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) {
+        var _a;
+        if (!((_a = changes['hasError']) === null || _a === void 0 ? void 0 : _a.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 });
+WrFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: WrFormModule, declarations: [WrFormItemComponent, WrFormErrorComponent], imports: [CommonModule], exports: [WrFormItemComponent, WrFormErrorComponent] });
+WrFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [WrIconComponent],
-                    exports: [WrIconComponent]
+                    imports: [CommonModule],
+                    declarations: [WrFormItemComponent, WrFormErrorComponent],
+                    exports: [WrFormItemComponent, WrFormErrorComponent]
                 }]
         }] });