@ngil/form-inputs 0.1.0 → 5.0.0

package/fesm2022/ngil-form-inputs.mjs

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, ViewEncapsulation, ViewChild, Directive, HostListener, Optional, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { EventEmitter, forwardRef, Output, Input, ChangeDetectionStrategy, Component, ViewChild, Optional, HostListener, ViewEncapsulation, Directive, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@ngil/form-cva';
 import { AbstractInputComponent } from '@ngil/form-cva';
 import { takeUntil } from 'rxjs/operators';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { DomPortal, ComponentPortal } from '@angular/cdk/portal';
+import * as i3 from '@ngil/components';
+import { NgilOverlayComponent, NgilOverlayToggleDirective } from '@ngil/components';
 import { Subject, takeUntil as takeUntil$1 } from 'rxjs';
+import * as i1$2 from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 class NgilInputComponent extends AbstractInputComponent {
     constructor() {
@@ -35,16 +37,16 @@ class NgilInputComponent extends AbstractInputComponent {
             this.onChange(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: NgilInputComponent, selector: "ngil-input", inputs: { type: "type" }, outputs: { changed: "changed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgilInputComponent, isStandalone: false, selector: "ngil-input", inputs: { type: "type" }, outputs: { changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgilInputComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"model$ | async as model\">\r\n  <div class=\"ngil-input\" [class.ngil-input--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-input__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n\r\n    <div class=\"ngil-input__field\">\r\n      <input\r\n        class=\"ngil-input__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [type]=\"type\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n\r\n    <small class=\"ngil-input__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-input{flex-grow:1;position:relative}:host .ngil-input--error{color:red}:host .ngil-input--error .ngil-input__input{border-color:red}:host .ngil-input__label{display:block}:host .ngil-input__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem}:host .ngil-input__field{display:flex}:host .ngil-input__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (model$ | async; as model) {\r\n  <div class=\"ngil-input\" [class.ngil-input--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-input__label\" [for]=\"formControlName\">\r\n      <ng-content select=\"[labelPrefix]\"></ng-content>\r\n      <span> {{ label }}{{ required ? '*' : '' }} </span>\r\n      <ng-content select=\"[labelSuffix]\"></ng-content>\r\n    </label>\r\n    <div class=\"ngil-input__field\">\r\n      <ng-content select=\"[prefix]\"></ng-content>\r\n      <input\r\n        class=\"ngil-input__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [type]=\"type\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n        />\r\n        <ng-content select=\"[suffix]\"></ng-content>\r\n      </div>\r\n      <ng-content select=\"[hint]\"></ng-content>\r\n      <small class=\"ngil-input__error-message\">{{ model.errorMessage }}</small>\r\n    </div>\r\n  }\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-input{flex-grow:1;position:relative}:host .ngil-input--error{color:red}:host .ngil-input--error .ngil-input__input{border-color:red}:host .ngil-input__label{display:flex;gap:.5rem}:host .ngil-input__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem}:host .ngil-input__field{display:flex;gap:.5rem;align-items:center}:host .ngil-input__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngil-input', providers: [
                         {
@@ -52,113 +54,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useExisting: forwardRef(() => NgilInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"model$ | async as model\">\r\n  <div class=\"ngil-input\" [class.ngil-input--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-input__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n\r\n    <div class=\"ngil-input__field\">\r\n      <input\r\n        class=\"ngil-input__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [type]=\"type\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n\r\n    <small class=\"ngil-input__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-input{flex-grow:1;position:relative}:host .ngil-input--error{color:red}:host .ngil-input--error .ngil-input__input{border-color:red}:host .ngil-input__label{display:block}:host .ngil-input__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem}:host .ngil-input__field{display:flex}:host .ngil-input__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (model$ | async; as model) {\r\n  <div class=\"ngil-input\" [class.ngil-input--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-input__label\" [for]=\"formControlName\">\r\n      <ng-content select=\"[labelPrefix]\"></ng-content>\r\n      <span> {{ label }}{{ required ? '*' : '' }} </span>\r\n      <ng-content select=\"[labelSuffix]\"></ng-content>\r\n    </label>\r\n    <div class=\"ngil-input__field\">\r\n      <ng-content select=\"[prefix]\"></ng-content>\r\n      <input\r\n        class=\"ngil-input__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [type]=\"type\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n        />\r\n        <ng-content select=\"[suffix]\"></ng-content>\r\n      </div>\r\n      <ng-content select=\"[hint]\"></ng-content>\r\n      <small class=\"ngil-input__error-message\">{{ model.errorMessage }}</small>\r\n    </div>\r\n  }\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-input{flex-grow:1;position:relative}:host .ngil-input--error{color:red}:host .ngil-input--error .ngil-input__input{border-color:red}:host .ngil-input__label{display:flex;gap:.5rem}:host .ngil-input__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem}:host .ngil-input__field{display:flex;gap:.5rem;align-items:center}:host .ngil-input__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], changed: [{
                 type: Output
             }] } });
 
-class NgilOverlayComponent {
-    constructor(overlay) {
-        this.overlay = overlay;
-        this.overwriteConfig = {};
-        this.destroy$ = new Subject();
-        this.maxHeight = 500;
-        this.isOpened = false;
-    }
-    open() {
-        this.overlayRef = this.overlay.create(this.getOverlayConfig());
-        const portal = new DomPortal(this.el);
-        this.overlayRef.attach(portal);
-        this.overlayRef
-            .backdropClick()
-            .pipe(takeUntil$1(this.destroy$))
-            .subscribe(() => {
-            this.close();
-        });
-        this.isOpened = true;
-    }
-    getOverlayConfig() {
-        return {
-            positionStrategy: this.getStrategy(),
-            hasBackdrop: true,
-            backdropClass: this.origin ? 'cdk-overlay-transparent-backdrop' : 'cdk-overlay-dark-backdrop',
-            panelClass: ['ngil-overlay-panel'],
-            maxHeight: this.maxHeight,
-            minWidth: this.origin?.nativeElement.offsetWidth,
-            ...this.overwriteConfig
-        };
-    }
-    getStrategy() {
-        if (!this.origin) {
-            return this.overlay.position().global().centerHorizontally().centerVertically();
-        }
-        const primaryX = 'start';
-        const secondaryX = primaryX === 'start' ? 'end' : 'start';
-        const primaryY = 'top';
-        const secondaryY = 'bottom';
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(this.origin)
-            .withPositions([
-            {
-                originX: primaryX,
-                originY: secondaryY,
-                overlayX: primaryX,
-                overlayY: primaryY
-            },
-            {
-                originX: primaryX,
-                originY: primaryY,
-                overlayX: primaryX,
-                overlayY: secondaryY
-            },
-            {
-                originX: secondaryX,
-                originY: secondaryY,
-                overlayX: secondaryX,
-                overlayY: primaryY
-            },
-            {
-                originX: secondaryX,
-                originY: primaryY,
-                overlayX: secondaryX,
-                overlayY: secondaryY
-            }
-        ]);
-    }
-    close() {
-        this.destroy$.next();
-        this.overlayRef?.dispose();
-        this.overlayRef = undefined;
-        this.isOpened = false;
-    }
-    toggle() {
-        if (this.isOpened) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilOverlayComponent, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: NgilOverlayComponent, selector: "ngil-overlay", inputs: { overwriteConfig: "overwriteConfig" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"ngil-overlay-content\" #contentWrapper>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["ngil-overlay{display:none}.ngil-overlay-panel .ngil-overlay-content{display:flex;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilOverlayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngil-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ngil-overlay-content\" #contentWrapper>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["ngil-overlay{display:none}.ngil-overlay-panel .ngil-overlay-content{display:flex;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }], propDecorators: { el: [{
-                type: ViewChild,
-                args: ['contentWrapper']
-            }], overwriteConfig: [{
-                type: Input
-            }] } });
-
 class NgilSelectOptionsComponent {
     constructor() {
         this.selectedItems = null;
@@ -193,12 +95,12 @@ class NgilSelectOptionsComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilSelectOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: NgilSelectOptionsComponent, selector: "ngil-select-options", inputs: { selectedItems: "selectedItems", items: "items", displayKey: "displayKey", multiple: "multiple", display: "display" }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"ngil-dropdown\" *ngIf=\"display\" role=\"listbox\" data-test=\"ngil-select-options-list\">\r\n  <ng-container *ngFor=\"let item of items\">\r\n    <div\r\n      role=\"option\"\r\n      class=\"ngil-dropdown__item\"\r\n      data-test=\"ngil-select-option\"\r\n      [attr.value]=\"item\"\r\n      [attr.displayValue]=\"displayKey ? item[displayKey] : item\"\r\n      (click)=\"onItemSelected(item)\"\r\n      [class.ngil-dropdown__item--selected]=\"isSelected(item)\"\r\n    >\r\n      {{ displayKey ? item[displayKey] : item }}\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;min-width:200px;background:#fff;border:1px solid #000;overflow-y:auto}:host .ngil-dropdown__item{line-height:1.5rem;padding:.25rem .5rem}:host .ngil-dropdown__item:hover{background:#d3d3d3}:host .ngil-dropdown__item--selected{background:#708090}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilSelectOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgilSelectOptionsComponent, isStandalone: false, selector: "ngil-select-options", inputs: { selectedItems: "selectedItems", items: "items", displayKey: "displayKey", multiple: "multiple", display: "display" }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "@if (display) {\r\n  <div class=\"ngil-dropdown\" role=\"listbox\" data-test=\"ngil-select-options-list\">\r\n    @for (item of items; track item) {\r\n      <div\r\n        role=\"option\"\r\n        class=\"ngil-dropdown__item\"\r\n        data-test=\"ngil-select-option\"\r\n        [attr.value]=\"item\"\r\n        [attr.displayValue]=\"displayKey ? item[displayKey] : item\"\r\n        (click)=\"onItemSelected(item)\"\r\n        [class.ngil-dropdown__item--selected]=\"isSelected(item)\"\r\n        >\r\n        {{ displayKey ? item[displayKey] : item }}\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;min-width:200px;background:#fff;border:1px solid #000;overflow-y:auto}:host .ngil-dropdown__item{line-height:1.5rem;padding:.25rem .5rem}:host .ngil-dropdown__item:hover{background:#d3d3d3}:host .ngil-dropdown__item--selected{background:#708090}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilSelectOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilSelectOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngil-select-options', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngil-dropdown\" *ngIf=\"display\" role=\"listbox\" data-test=\"ngil-select-options-list\">\r\n  <ng-container *ngFor=\"let item of items\">\r\n    <div\r\n      role=\"option\"\r\n      class=\"ngil-dropdown__item\"\r\n      data-test=\"ngil-select-option\"\r\n      [attr.value]=\"item\"\r\n      [attr.displayValue]=\"displayKey ? item[displayKey] : item\"\r\n      (click)=\"onItemSelected(item)\"\r\n      [class.ngil-dropdown__item--selected]=\"isSelected(item)\"\r\n    >\r\n      {{ displayKey ? item[displayKey] : item }}\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;min-width:200px;background:#fff;border:1px solid #000;overflow-y:auto}:host .ngil-dropdown__item{line-height:1.5rem;padding:.25rem .5rem}:host .ngil-dropdown__item:hover{background:#d3d3d3}:host .ngil-dropdown__item--selected{background:#708090}\n"] }]
+            args: [{ selector: 'ngil-select-options', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (display) {\r\n  <div class=\"ngil-dropdown\" role=\"listbox\" data-test=\"ngil-select-options-list\">\r\n    @for (item of items; track item) {\r\n      <div\r\n        role=\"option\"\r\n        class=\"ngil-dropdown__item\"\r\n        data-test=\"ngil-select-option\"\r\n        [attr.value]=\"item\"\r\n        [attr.displayValue]=\"displayKey ? item[displayKey] : item\"\r\n        (click)=\"onItemSelected(item)\"\r\n        [class.ngil-dropdown__item--selected]=\"isSelected(item)\"\r\n        >\r\n        {{ displayKey ? item[displayKey] : item }}\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;min-width:200px;background:#fff;border:1px solid #000;overflow-y:auto}:host .ngil-dropdown__item{line-height:1.5rem;padding:.25rem .5rem}:host .ngil-dropdown__item:hover{background:#d3d3d3}:host .ngil-dropdown__item--selected{background:#708090}\n"] }]
         }], propDecorators: { selectedItems: [{
                 type: Input
             }], items: [{
@@ -213,67 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: Output
             }] } });
 
-class OverlayToggleDirective {
-    set ngilOverlayToggle(overlay) {
-        this.overlay = overlay;
-    }
-    set isOverlayOrigin(isOrigin) {
-        this.isOrigin = isOrigin;
-        this.setOverlayOrigin();
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.isOrigin = true;
-        this.onClick = (event) => {
-            if (!this.overlay) {
-                throw new Error(`The overlay is not defined. The overlay component should be provided in the directive input
-
-        <my-element [ngilOverlayToggle]="overlay"></my-element>
-        <ngil-overlay #overlay>...</ngil-overlay>
-      `);
-            }
-            if (!this.overlay.isOpened) {
-                this.overlay.open();
-            }
-            event.stopPropagation();
-        };
-    }
-    ngOnInit() {
-        this.setOverlayOrigin();
-    }
-    setOverlayOrigin() {
-        if (this.isOrigin && this.overlay) {
-            this.overlay.origin = this.elementRef;
-        }
-        else if (this.overlay) {
-            this.overlay.origin = undefined;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: OverlayToggleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: OverlayToggleDirective, selector: "[ngilOverlayToggle]", inputs: { ngilOverlayToggle: "ngilOverlayToggle", isOverlayOrigin: "isOverlayOrigin" }, host: { listeners: { "click": "onClick($event)" } }, exportAs: ["ngilOverlayToggle"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: OverlayToggleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngilOverlayToggle]',
-                    exportAs: 'ngilOverlayToggle'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ngilOverlayToggle: [{
-                type: Input
-            }], isOverlayOrigin: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 class NgilSelectComponent extends AbstractInputComponent {
-    constructor() {
-        super(...arguments);
-        this.multiple = false;
-        this.items = [];
-        this.value = null;
-    }
     get displayValue() {
         if (Array.isArray(this.value)) {
             return this.value.map(item => (this.displayKey ? item[this.displayKey] : item)).join(',');
@@ -283,8 +125,16 @@ class NgilSelectComponent extends AbstractInputComponent {
         }
         return this.value;
     }
+    constructor(cdr, errorMessagesService, controlContainer) {
+        super(errorMessagesService, controlContainer);
+        this.cdr = cdr;
+        this.multiple = false;
+        this.items = [];
+        this.value = null;
+    }
     writeValue(value) {
         this.value = value;
+        this.cdr.markForCheck();
     }
     onItemSelected(item) {
         this.value = item;
@@ -298,16 +148,16 @@ class NgilSelectComponent extends AbstractInputComponent {
     isArray(item) {
         return Array.isArray(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: NgilSelectComponent, selector: "ngil-select", inputs: { multiple: "multiple", items: "items", displayKey: "displayKey" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgilErrorMessagesService }, { token: i1.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgilSelectComponent, isStandalone: false, selector: "ngil-select", inputs: { multiple: "multiple", items: "items", displayKey: "displayKey" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgilSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "overlay", first: true, predicate: NgilOverlayComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"model$ | async as model\">\r\n  <div class=\"ngil-select\" [class.ngil-select--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-select__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n\r\n    <div class=\"ngil-select__field\">\r\n      <div class=\"ngil-select__field-content\">\r\n        <input\r\n          class=\"ngil-select__input\"\r\n          [value]=\"displayValue\"\r\n          [disabled]=\"disabled\"\r\n          (keydown)=\"$event.preventDefault(); overlay.toggle()\"\r\n          [id]=\"formControlName\"\r\n          (blur)=\"onBlur()\"\r\n          [ngilOverlayToggle]=\"overlay\"\r\n        />\r\n      </div>\r\n\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n\r\n    <small class=\"ngil-select__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n\r\n  <ngil-overlay #overlay>\r\n    <ngil-select-options\r\n      ngilOverlay\r\n      class=\"ngil-select__dropdown\"\r\n      data-test=\"ngil-select-options\"\r\n      [display]=\"overlay.isOpened\"\r\n      [multiple]=\"multiple\"\r\n      [items]=\"items\"\r\n      [displayKey]=\"displayKey\"\r\n      [selectedItems]=\"value\"\r\n      (itemSelected)=\"onItemSelected($event)\"\r\n    ></ngil-select-options>\r\n  </ngil-overlay>\r\n</ng-container>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-select{flex-grow:1;position:relative}:host .ngil-select--error{color:red}:host .ngil-select--error .ngil-select__input{border-color:red}:host .ngil-select__label{display:block}:host .ngil-select__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;overflow:hidden}:host .ngil-select__field{display:flex}:host .ngil-select__field-content{flex-grow:1}:host .ngil-select__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}:host .ngil-select__dropdown{width:100%}:host .hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgilSelectOptionsComponent, selector: "ngil-select-options", inputs: ["selectedItems", "items", "displayKey", "multiple", "display"], outputs: ["itemSelected"] }, { kind: "component", type: NgilOverlayComponent, selector: "ngil-overlay", inputs: ["overwriteConfig"] }, { kind: "directive", type: OverlayToggleDirective, selector: "[ngilOverlayToggle]", inputs: ["ngilOverlayToggle", "isOverlayOrigin"], exportAs: ["ngilOverlayToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "overlay", first: true, predicate: NgilOverlayComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (model$ | async; as model) {\r\n  <div class=\"ngil-select\" [class.ngil-select--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-select__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n    <div class=\"ngil-select__field\">\r\n      <div class=\"ngil-select__field-content\">\r\n        <input\r\n          class=\"ngil-select__input\"\r\n          [value]=\"displayValue\"\r\n          [disabled]=\"disabled\"\r\n          (keydown)=\"$event.preventDefault(); overlay.toggle()\"\r\n          [id]=\"formControlName\"\r\n          (blur)=\"onBlur()\"\r\n          [ngilOverlayToggle]=\"overlay\"\r\n          />\r\n        </div>\r\n        <ng-content select=\"[suffix]\"></ng-content>\r\n      </div>\r\n      <small class=\"ngil-select__error-message\">{{ model.errorMessage }}</small>\r\n    </div>\r\n    <ngil-overlay #overlay [overwriteConfig]=\"{ maxHeight: 500 }\">\r\n      <ngil-select-options\r\n        ngilOverlay\r\n        class=\"ngil-select__dropdown\"\r\n        data-test=\"ngil-select-options\"\r\n        [display]=\"overlay.isOpened\"\r\n        [multiple]=\"multiple\"\r\n        [items]=\"items\"\r\n        [displayKey]=\"displayKey\"\r\n        [selectedItems]=\"value\"\r\n        (itemSelected)=\"onItemSelected($event)\"\r\n      ></ngil-select-options>\r\n    </ngil-overlay>\r\n  }\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-select{flex-grow:1;position:relative}:host .ngil-select--error{color:red}:host .ngil-select--error .ngil-select__input{border-color:red}:host .ngil-select__label{display:block}:host .ngil-select__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;overflow:hidden}:host .ngil-select__field{display:flex}:host .ngil-select__field-content{flex-grow:1}:host .ngil-select__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}:host .ngil-select__dropdown{width:100%}:host .hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgilOverlayToggleDirective, selector: "[ngilOverlayToggle]", inputs: ["ngilOverlayToggle", "isOverlayOrigin"], exportAs: ["ngilOverlayToggle"] }, { kind: "component", type: i3.NgilOverlayComponent, selector: "ngil-overlay", inputs: ["overwriteConfig", "positions"] }, { kind: "component", type: NgilSelectOptionsComponent, selector: "ngil-select-options", inputs: ["selectedItems", "items", "displayKey", "multiple", "display"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngil-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -315,8 +165,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useExisting: forwardRef(() => NgilSelectComponent),
                             multi: true
                         }
-                    ], template: "<ng-container *ngIf=\"model$ | async as model\">\r\n  <div class=\"ngil-select\" [class.ngil-select--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-select__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n\r\n    <div class=\"ngil-select__field\">\r\n      <div class=\"ngil-select__field-content\">\r\n        <input\r\n          class=\"ngil-select__input\"\r\n          [value]=\"displayValue\"\r\n          [disabled]=\"disabled\"\r\n          (keydown)=\"$event.preventDefault(); overlay.toggle()\"\r\n          [id]=\"formControlName\"\r\n          (blur)=\"onBlur()\"\r\n          [ngilOverlayToggle]=\"overlay\"\r\n        />\r\n      </div>\r\n\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n\r\n    <small class=\"ngil-select__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n\r\n  <ngil-overlay #overlay>\r\n    <ngil-select-options\r\n      ngilOverlay\r\n      class=\"ngil-select__dropdown\"\r\n      data-test=\"ngil-select-options\"\r\n      [display]=\"overlay.isOpened\"\r\n      [multiple]=\"multiple\"\r\n      [items]=\"items\"\r\n      [displayKey]=\"displayKey\"\r\n      [selectedItems]=\"value\"\r\n      (itemSelected)=\"onItemSelected($event)\"\r\n    ></ngil-select-options>\r\n  </ngil-overlay>\r\n</ng-container>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-select{flex-grow:1;position:relative}:host .ngil-select--error{color:red}:host .ngil-select--error .ngil-select__input{border-color:red}:host .ngil-select__label{display:block}:host .ngil-select__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;overflow:hidden}:host .ngil-select__field{display:flex}:host .ngil-select__field-content{flex-grow:1}:host .ngil-select__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}:host .ngil-select__dropdown{width:100%}:host .hidden{display:none}\n"] }]
-        }], propDecorators: { overlay: [{
+                    ], standalone: false, template: "@if (model$ | async; as model) {\r\n  <div class=\"ngil-select\" [class.ngil-select--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-select__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n    <div class=\"ngil-select__field\">\r\n      <div class=\"ngil-select__field-content\">\r\n        <input\r\n          class=\"ngil-select__input\"\r\n          [value]=\"displayValue\"\r\n          [disabled]=\"disabled\"\r\n          (keydown)=\"$event.preventDefault(); overlay.toggle()\"\r\n          [id]=\"formControlName\"\r\n          (blur)=\"onBlur()\"\r\n          [ngilOverlayToggle]=\"overlay\"\r\n          />\r\n        </div>\r\n        <ng-content select=\"[suffix]\"></ng-content>\r\n      </div>\r\n      <small class=\"ngil-select__error-message\">{{ model.errorMessage }}</small>\r\n    </div>\r\n    <ngil-overlay #overlay [overwriteConfig]=\"{ maxHeight: 500 }\">\r\n      <ngil-select-options\r\n        ngilOverlay\r\n        class=\"ngil-select__dropdown\"\r\n        data-test=\"ngil-select-options\"\r\n        [display]=\"overlay.isOpened\"\r\n        [multiple]=\"multiple\"\r\n        [items]=\"items\"\r\n        [displayKey]=\"displayKey\"\r\n        [selectedItems]=\"value\"\r\n        (itemSelected)=\"onItemSelected($event)\"\r\n      ></ngil-select-options>\r\n    </ngil-overlay>\r\n  }\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-select{flex-grow:1;position:relative}:host .ngil-select--error{color:red}:host .ngil-select--error .ngil-select__input{border-color:red}:host .ngil-select__label{display:block}:host .ngil-select__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;overflow:hidden}:host .ngil-select__field{display:flex}:host .ngil-select__field-content{flex-grow:1}:host .ngil-select__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}:host .ngil-select__dropdown{width:100%}:host .hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgilErrorMessagesService }, { type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { overlay: [{
                 type: ViewChild,
                 args: [NgilOverlayComponent]
             }], multiple: [{
@@ -345,16 +197,16 @@ class NgilTextareaComponent extends AbstractInputComponent {
             this.onChange(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: NgilTextareaComponent, selector: "ngil-textarea", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgilTextareaComponent, isStandalone: false, selector: "ngil-textarea", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgilTextareaComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"model$ | async as model\">\r\n  <div class=\"ngil-textarea\" [class.ngil-textarea--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-textarea__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n\r\n    <div class=\"ngil-textarea__field\">\r\n      <textarea\r\n        class=\"ngil-textarea__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n      >\r\n      </textarea>\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n\r\n    <small class=\"ngil-textarea__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-textarea{flex-grow:1;position:relative}:host .ngil-textarea--error{color:red}:host .ngil-textarea--error .ngil-textarea__input{border-color:red}:host .ngil-textarea__label{display:block}:host .ngil-textarea__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;height:4rem}:host .ngil-textarea__field{display:flex}:host .ngil-textarea__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (model$ | async; as model) {\r\n  <div class=\"ngil-textarea\" [class.ngil-textarea--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-textarea__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n    <div class=\"ngil-textarea__field\">\r\n      <textarea\r\n        class=\"ngil-textarea__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n        >\r\n      </textarea>\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n    <small class=\"ngil-textarea__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-textarea{flex-grow:1;position:relative}:host .ngil-textarea--error{color:red}:host .ngil-textarea--error .ngil-textarea__input{border-color:red}:host .ngil-textarea__label{display:block}:host .ngil-textarea__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;height:4rem}:host .ngil-textarea__field{display:flex}:host .ngil-textarea__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngil-textarea', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -362,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useExisting: forwardRef(() => NgilTextareaComponent),
                             multi: true
                         }
-                    ], template: "<ng-container *ngIf=\"model$ | async as model\">\r\n  <div class=\"ngil-textarea\" [class.ngil-textarea--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-textarea__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n\r\n    <div class=\"ngil-textarea__field\">\r\n      <textarea\r\n        class=\"ngil-textarea__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n      >\r\n      </textarea>\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n\r\n    <small class=\"ngil-textarea__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-textarea{flex-grow:1;position:relative}:host .ngil-textarea--error{color:red}:host .ngil-textarea--error .ngil-textarea__input{border-color:red}:host .ngil-textarea__label{display:block}:host .ngil-textarea__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;height:4rem}:host .ngil-textarea__field{display:flex}:host .ngil-textarea__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\n"] }]
+                    ], standalone: false, template: "@if (model$ | async; as model) {\r\n  <div class=\"ngil-textarea\" [class.ngil-textarea--error]=\"!!model.errorMessage\">\r\n    <label class=\"ngil-textarea__label\" [for]=\"formControlName\">{{ label }}{{ required ? '*' : '' }}</label>\r\n    <div class=\"ngil-textarea__field\">\r\n      <textarea\r\n        class=\"ngil-textarea__input\"\r\n        [id]=\"formControlName\"\r\n        [required]=\"required\"\r\n        [readonly]=\"readonly\"\r\n        [formControl]=\"control\"\r\n        (blur)=\"onBlur()\"\r\n        >\r\n      </textarea>\r\n      <ng-content select=\"[suffix]\"></ng-content>\r\n    </div>\r\n    <small class=\"ngil-textarea__error-message\">{{ model.errorMessage }}</small>\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;width:100%;flex-direction:column;margin:.25rem 0 2rem;min-width:200px}:host .ngil-textarea{flex-grow:1;position:relative}:host .ngil-textarea--error{color:red}:host .ngil-textarea--error .ngil-textarea__input{border-color:red}:host .ngil-textarea__label{display:block}:host .ngil-textarea__input{width:100%;outline:none;border:1px solid black;border-radius:3px;padding:.25rem;height:4rem}:host .ngil-textarea__field{display:flex}:host .ngil-textarea__error-message{position:absolute;margin:.1rem 0;height:1rem;font-size:85%}\n"] }]
         }] });
 
 class PickerToggleComponent {
@@ -374,12 +226,12 @@ class PickerToggleComponent {
             event.stopPropagation();
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: PickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: PickerToggleComponent, selector: "ngil-picker-toggle", inputs: { picker: "picker" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<button class=\"toggle-button\" type=\"button\">\r\n  <svg\r\n    class=\"mat-datepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\r\n    <path\r\n      d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\r\n    />\r\n  </svg>\r\n</button>\r\n", styles: [".toggle-button{background:none;border:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: PickerToggleComponent, isStandalone: false, selector: "ngil-picker-toggle", inputs: { picker: "picker" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<button class=\"toggle-button\" type=\"button\">\r\n  <svg\r\n    class=\"mat-datepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\r\n    <path\r\n      d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\r\n    />\r\n  </svg>\r\n</button>\r\n", styles: [".toggle-button{display:flex;background:none;border:none;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: PickerToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PickerToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngil-picker-toggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"toggle-button\" type=\"button\">\r\n  <svg\r\n    class=\"mat-datepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\r\n    <path\r\n      d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\r\n    />\r\n  </svg>\r\n</button>\r\n", styles: [".toggle-button{background:none;border:none}\n"] }]
+            args: [{ selector: 'ngil-picker-toggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button class=\"toggle-button\" type=\"button\">\r\n  <svg\r\n    class=\"mat-datepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\r\n    <path\r\n      d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\r\n    />\r\n  </svg>\r\n</button>\r\n", styles: [".toggle-button{display:flex;background:none;border:none;padding:0}\n"] }]
         }], propDecorators: { picker: [{
                 type: Input
             }], onClick: [{
@@ -461,15 +313,16 @@ class NumberRotationDirective {
         this.buttonUp?.removeEventListener('click', this.onUp);
         this.buttonDown?.removeEventListener('click', this.onDown);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NumberRotationDirective, deps: [{ token: i0.ElementRef }, { token: i2.NgControl }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: NumberRotationDirective, selector: "input[ngilNumberRotation]", inputs: { min: "min", max: "max", buttonUp: "buttonUp", buttonDown: "buttonDown" }, host: { listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NumberRotationDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: NumberRotationDirective, isStandalone: false, selector: "input[ngilNumberRotation]", inputs: { min: "min", max: "max", buttonUp: "buttonUp", buttonDown: "buttonDown" }, host: { listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NumberRotationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NumberRotationDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[ngilNumberRotation]'
+                    selector: 'input[ngilNumberRotation]',
+                    standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgControl }], propDecorators: { min: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgControl }], propDecorators: { min: [{
                 type: Input
             }], max: [{
                 type: Input
@@ -522,16 +375,16 @@ class NgilTimePickerComponent extends AbstractInputComponent {
             this.formGroup.reset(this.defaultValue, { emitEvent: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: NgilTimePickerComponent, selector: "ngil-time-picker", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NgilTimePickerComponent, isStandalone: false, selector: "ngil-time-picker", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NgilTimePickerComponent,
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"ngil-time-picker\">\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #hourButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"hour\"\r\n      [buttonUp]=\"hourButtonUp\"\r\n      [buttonDown]=\"hourButtonDown\"\r\n      [max]=\"23\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #hourButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #minuteButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"minute\"\r\n      [buttonUp]=\"minuteButtonUp\"\r\n      [buttonDown]=\"minuteButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #minuteButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #secondButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"second\"\r\n      [buttonUp]=\"secondButtonUp\"\r\n      [buttonDown]=\"secondButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #secondButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n</form>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 75 50, 25 90, 75\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowDown>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 25 50, 75 90, 25\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".ngil-time-picker{display:flex;align-items:center;background:#fff;border:1px solid #000;gap:.5rem;padding:.5rem}.ngil-time-picker__field{width:25px;position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem}.ngil-time-picker__input{width:calc(100% - 7px);padding:3px;text-align:center}.ngil-time-picker__button{background:none;border:none;position:relative;display:flex}.ngil-time-picker__arrow{width:18px;height:18px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NumberRotationDirective, selector: "input[ngilNumberRotation]", inputs: ["min", "max", "buttonUp", "buttonDown"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"ngil-time-picker\">\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #hourButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"hour\"\r\n      [buttonUp]=\"hourButtonUp\"\r\n      [buttonDown]=\"hourButtonDown\"\r\n      [max]=\"23\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #hourButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #minuteButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"minute\"\r\n      [buttonUp]=\"minuteButtonUp\"\r\n      [buttonDown]=\"minuteButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #minuteButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #secondButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"second\"\r\n      [buttonUp]=\"secondButtonUp\"\r\n      [buttonDown]=\"secondButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #secondButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n</form>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 75 50, 25 90, 75\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowDown>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 25 50, 75 90, 25\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".ngil-time-picker{display:flex;align-items:center;background:#fff;border:1px solid #000;gap:.5rem;padding:.5rem}.ngil-time-picker__field{width:25px;position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem}.ngil-time-picker__input{width:calc(100% - 7px);padding:3px;text-align:center}.ngil-time-picker__button{background:none;border:none;position:relative;display:flex}.ngil-time-picker__arrow{width:18px;height:18px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NumberRotationDirective, selector: "input[ngilNumberRotation]", inputs: ["min", "max", "buttonUp", "buttonDown"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngil-time-picker', providers: [
                         {
@@ -539,7 +392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useExisting: NgilTimePickerComponent,
                             multi: true
                         }
-                    ], template: "<form [formGroup]=\"formGroup\" class=\"ngil-time-picker\">\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #hourButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"hour\"\r\n      [buttonUp]=\"hourButtonUp\"\r\n      [buttonDown]=\"hourButtonDown\"\r\n      [max]=\"23\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #hourButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #minuteButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"minute\"\r\n      [buttonUp]=\"minuteButtonUp\"\r\n      [buttonDown]=\"minuteButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #minuteButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #secondButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"second\"\r\n      [buttonUp]=\"secondButtonUp\"\r\n      [buttonDown]=\"secondButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #secondButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n</form>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 75 50, 25 90, 75\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowDown>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 25 50, 75 90, 25\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".ngil-time-picker{display:flex;align-items:center;background:#fff;border:1px solid #000;gap:.5rem;padding:.5rem}.ngil-time-picker__field{width:25px;position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem}.ngil-time-picker__input{width:calc(100% - 7px);padding:3px;text-align:center}.ngil-time-picker__button{background:none;border:none;position:relative;display:flex}.ngil-time-picker__arrow{width:18px;height:18px;cursor:pointer}\n"] }]
+                    ], standalone: false, template: "<form [formGroup]=\"formGroup\" class=\"ngil-time-picker\">\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #hourButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"hour\"\r\n      [buttonUp]=\"hourButtonUp\"\r\n      [buttonDown]=\"hourButtonDown\"\r\n      [max]=\"23\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #hourButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #minuteButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"minute\"\r\n      [buttonUp]=\"minuteButtonUp\"\r\n      [buttonDown]=\"minuteButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #minuteButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <span>:</span>\r\n\r\n  <div class=\"ngil-time-picker__field\">\r\n    <button #secondButtonUp class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowUp\"></ng-container>\r\n    </button>\r\n    <input\r\n      ngilNumberRotation\r\n      class=\"ngil-time-picker__input\"\r\n      formControlName=\"second\"\r\n      [buttonUp]=\"secondButtonUp\"\r\n      [buttonDown]=\"secondButtonDown\"\r\n      [max]=\"59\"\r\n      [min]=\"0\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <button #secondButtonDown class=\"ngil-time-picker__button\">\r\n      <ng-container *ngTemplateOutlet=\"arrowDown\"></ng-container>\r\n    </button>\r\n  </div>\r\n</form>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 75 50, 25 90, 75\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowDown>\r\n  <svg\r\n    _ngcontent-vre-c235=\"\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n    viewBox=\"0 0 100 100\"\r\n    xml:space=\"preserve\"\r\n    class=\"ngil-time-picker__arrow\"\r\n  >\r\n    <polyline\r\n      _ngcontent-vre-c235=\"\"\r\n      fill=\"none\"\r\n      stroke=\"#000000\"\r\n      stroke-width=\"10\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      points=\"10, 25 50, 75 90, 25\"\r\n    ></polyline>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".ngil-time-picker{display:flex;align-items:center;background:#fff;border:1px solid #000;gap:.5rem;padding:.5rem}.ngil-time-picker__field{width:25px;position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem}.ngil-time-picker__input{width:calc(100% - 7px);padding:3px;text-align:center}.ngil-time-picker__button{background:none;border:none;position:relative;display:flex}.ngil-time-picker__arrow{width:18px;height:18px;cursor:pointer}\n"] }]
         }] });
 
 class NgilTimePickerOverlayComponent {
@@ -637,16 +490,17 @@ class NgilTimePickerOverlayComponent {
         ]);
         return strategy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTimePickerOverlayComponent, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: NgilTimePickerOverlayComponent, selector: "ngil-time-picker-overlay", ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTimePickerOverlayComponent, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NgilTimePickerOverlayComponent, isStandalone: false, selector: "ngil-time-picker-overlay", ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTimePickerOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTimePickerOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngil-time-picker-overlay',
-                    template: ''
+                    template: '',
+                    standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }] });
+        }], ctorParameters: () => [{ type: i1$2.Overlay }] });
 
 class TimePickerDirective {
     constructor(elementRef, inputComponent, ngControl) {
@@ -661,16 +515,20 @@ class TimePickerDirective {
             }
         };
         this.onInput = (event) => {
-            const value = this.getTimePickerValue(event.target.value);
-            this.picker?.setValue({
-                hour: +value.hour,
-                minute: +value.minute || 0,
-                second: +value.second || 0
-            });
+            this.setPickerValue(event.target.value);
         };
     }
     ngOnInit() {
         this.ngControl?.control?.setValidators([this.timeValidator()]);
+        this.setPickerValue(this.ngControl?.control?.value);
+    }
+    setPickerValue(value) {
+        const parsedValue = this.getTimePickerValue(value);
+        this.picker?.setValue({
+            hour: +parsedValue.hour,
+            minute: +parsedValue.minute || 0,
+            second: +parsedValue.second || 0
+        });
     }
     timeValidator() {
         return (control) => {
@@ -729,17 +587,18 @@ class TimePickerDirective {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TimePickerDirective, deps: [{ token: i0.ElementRef }, { token: NgilInputComponent, optional: true }, { token: i2.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: TimePickerDirective, selector: "[ngilTimePicker]", inputs: { picker: "picker" }, outputs: { changed: "changed" }, host: { listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TimePickerDirective, deps: [{ token: i0.ElementRef }, { token: NgilInputComponent, optional: true }, { token: i1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: TimePickerDirective, isStandalone: false, selector: "[ngilTimePicker]", inputs: { picker: "picker" }, outputs: { changed: "changed" }, host: { listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TimePickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TimePickerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngilTimePicker]'
+                    selector: '[ngilTimePicker]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NgilInputComponent, decorators: [{
                     type: Optional
-                }] }, { type: i2.NgControl, decorators: [{
+                }] }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { picker: [{
                 type: Input
@@ -754,8 +613,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             }] } });
 
 class NgilUiFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilUiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: NgilUiFormModule, declarations: [NgilInputComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilUiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: NgilUiFormModule, declarations: [NgilInputComponent,
             NgilTimePickerComponent,
             NgilTimePickerOverlayComponent,
             PickerToggleComponent,
@@ -763,9 +622,7 @@ class NgilUiFormModule {
             TimePickerDirective,
             NgilSelectComponent,
             NgilTextareaComponent,
-            NgilSelectOptionsComponent,
-            NgilOverlayComponent,
-            OverlayToggleDirective], imports: [CommonModule, ReactiveFormsModule, OverlayModule], exports: [NgilInputComponent,
+            NgilSelectOptionsComponent], imports: [CommonModule, ReactiveFormsModule, NgilOverlayToggleDirective, NgilOverlayComponent], exports: [NgilInputComponent,
             NgilSelectComponent,
             NgilTextareaComponent,
             NgilTimePickerComponent,
@@ -773,12 +630,12 @@ class NgilUiFormModule {
             PickerToggleComponent,
             NumberRotationDirective,
             TimePickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilUiFormModule, imports: [CommonModule, ReactiveFormsModule, OverlayModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilUiFormModule, imports: [CommonModule, ReactiveFormsModule, NgilOverlayComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilUiFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilUiFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ReactiveFormsModule, OverlayModule],
+                    imports: [CommonModule, ReactiveFormsModule, NgilOverlayToggleDirective, NgilOverlayComponent],
                     declarations: [
                         NgilInputComponent,
                         NgilTimePickerComponent,
@@ -788,9 +645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                         TimePickerDirective,
                         NgilSelectComponent,
                         NgilTextareaComponent,
-                        NgilSelectOptionsComponent,
-                        NgilOverlayComponent,
-                        OverlayToggleDirective
+                        NgilSelectOptionsComponent
                     ],
                     exports: [
                         NgilInputComponent,