@ngil/form-inputs 0.1.0

package/fesm2022/ngil-form-inputs.mjs

@@ -0,0 +1,813 @@
+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 { FormControl, NG_VALUE_ACCESSOR, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AbstractInputComponent } from '@ngil/form-cva';
+import { takeUntil } from 'rxjs/operators';
+import * as i1 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 { Subject, takeUntil as takeUntil$1 } from 'rxjs';
+
+class NgilInputComponent extends AbstractInputComponent {
+    constructor() {
+        super(...arguments);
+        this.type = 'text';
+        this.changed = new EventEmitter();
+        this.control = new FormControl();
+    }
+    ngAfterViewInit() {
+        this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
+            this.onChangeInput(value);
+        });
+    }
+    writeValue(value) {
+        this.control.setValue(value);
+    }
+    onChangeInput(value) {
+        if (this.type === 'number') {
+            value = +value;
+        }
+        this.changed.emit(value);
+        if (this.onChange) {
+            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: [
+            {
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngil-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], 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;
+        this.items = [];
+        this.multiple = false;
+        this.display = false;
+        this.itemSelected = new EventEmitter();
+        this.destroy$ = new Subject();
+    }
+    onItemSelected(item) {
+        let newSelection;
+        if (Array.isArray(this.selectedItems)) {
+            newSelection = this.selectedItems.includes(item)
+                ? this.selectedItems.filter(selectedItem => selectedItem !== item)
+                : [...this.selectedItems, item];
+        }
+        else if (this.multiple && this.selectedItems) {
+            newSelection = [this.selectedItems, item];
+        }
+        else {
+            newSelection = item;
+        }
+        this.itemSelected.emit(newSelection);
+    }
+    isSelected(item) {
+        if (Array.isArray(this.selectedItems)) {
+            return this.selectedItems.includes(item);
+        }
+        return item === this.selectedItems;
+    }
+    ngOnDestroy() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", 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"] }]
+        }], propDecorators: { selectedItems: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], displayKey: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], itemSelected: [{
+                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(',');
+        }
+        if (this.value && this.displayKey) {
+            return this.value[this.displayKey];
+        }
+        return this.value;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    onItemSelected(item) {
+        this.value = item;
+        if (!this.multiple) {
+            this.overlay?.close();
+        }
+        if (this.onChange) {
+            this.onChange(this.value);
+        }
+    }
+    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: [
+            {
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngil-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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: [{
+                type: ViewChild,
+                args: [NgilOverlayComponent]
+            }], multiple: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], displayKey: [{
+                type: Input
+            }] } });
+
+class NgilTextareaComponent extends AbstractInputComponent {
+    constructor() {
+        super(...arguments);
+        this.control = new FormControl();
+    }
+    ngAfterViewInit() {
+        this.control.valueChanges.pipe(takeUntil$1(this.destroy$)).subscribe(value => {
+            this.onChangeInput(value);
+        });
+    }
+    writeValue(value) {
+        this.control.setValue(value);
+    }
+    onChangeInput(value) {
+        if (this.onChange) {
+            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: [
+            {
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngil-textarea', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }] });
+
+class PickerToggleComponent {
+    constructor() {
+        this.onClick = (event) => {
+            if (!this.picker?.isOpen) {
+                this.picker?.open();
+            }
+            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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", 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"] }]
+        }], propDecorators: { picker: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class NumberRotationDirective {
+    get length() {
+        return this.max.toString().length;
+    }
+    constructor(elementRef, ngControl) {
+        this.elementRef = elementRef;
+        this.ngControl = ngControl;
+        this.min = 0;
+        this.max = 10;
+        this.onKeyDown = (event) => {
+            this.onKeyDownEvent(event);
+        };
+        this.onInput = (event) => {
+            let value = event.target.value;
+            if (+value > this.max) {
+                value = value.slice(this.length);
+            }
+            this.setValue(+value);
+        };
+        this.onUp = () => {
+            const value = +this.elementRef.nativeElement.value;
+            this.setValue(value + 1);
+        };
+        this.onDown = () => {
+            const value = +this.elementRef.nativeElement.value;
+            this.setValue(value - 1);
+        };
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.value = this.elementRef.nativeElement.value.toString().padStart(this.length, '0');
+    }
+    ngAfterViewInit() {
+        this.buttonUp?.addEventListener('click', this.onUp);
+        this.buttonDown?.addEventListener('click', this.onDown);
+    }
+    onKeyDownEvent(event) {
+        if (!this.isKeyValid(event.key)) {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.onUp();
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.onDown();
+        }
+    }
+    isKeyValid(key) {
+        if (key.length !== 1 || !isNaN(+key)) {
+            return true;
+        }
+        return false;
+    }
+    setValue(value) {
+        if (value < this.min) {
+            this.setInputValue(this.max);
+        }
+        else if (value > this.max) {
+            this.setInputValue(this.min);
+        }
+        else {
+            this.setInputValue(value);
+        }
+    }
+    setInputValue(value) {
+        this.ngControl.control?.setValue(value);
+        this.elementRef.nativeElement.value = value.toString().padStart(this.length, '0');
+    }
+    ngOnDestroy() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NumberRotationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngilNumberRotation]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgControl }], propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], buttonUp: [{
+                type: Input
+            }], buttonDown: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+class NgilTimePickerComponent extends AbstractInputComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultValue = { hour: 0, minute: 0, second: 0 };
+        this.value = '';
+        this.formGroup = new FormGroup({
+            hour: new FormControl(this.defaultValue.hour, { nonNullable: true }),
+            minute: new FormControl(this.defaultValue.minute, { nonNullable: true }),
+            second: new FormControl(this.defaultValue.second, { nonNullable: true })
+        });
+    }
+    ngAfterViewInit() {
+        this.listenValueChanges();
+    }
+    listenValueChanges() {
+        this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.onChange) {
+                const value = this.formGroup.getRawValue();
+                this.onChange({
+                    hour: value.hour ?? this.defaultValue.hour,
+                    minute: value.minute ?? this.defaultValue.minute,
+                    second: value.second ?? this.defaultValue.second
+                });
+            }
+        });
+    }
+    writeValue(value) {
+        if (value) {
+            this.formGroup.setValue({
+                ...this.defaultValue,
+                ...value
+            }, { emitEvent: false });
+        }
+        else {
+            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: [
+            {
+                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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngil-time-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }] });
+
+class NgilTimePickerOverlayComponent {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this.valueChanges$ = new Subject();
+        this.isOpen = false;
+        this.value = { hour: 0, minute: 0, second: 0 };
+        this.destroy$ = new Subject();
+        this.contentComponent = NgilTimePickerComponent;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    open() {
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.getStrategy(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop'
+        });
+        const portal = new ComponentPortal(this.contentComponent);
+        const componentRef = this.overlayRef.attach(portal);
+        this.componentInstance = componentRef.instance;
+        this.componentInstance.writeValue(this.value);
+        this.componentInstance.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            const value = this.componentInstance?.formGroup.getRawValue();
+            this.valueChanges$.next({
+                hour: value?.hour ?? 0,
+                minute: value?.minute ?? 0,
+                second: value?.second ?? 0
+            });
+        });
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.close();
+        });
+        this.isOpen = true;
+    }
+    close() {
+        this.destroyOverlay();
+    }
+    destroyOverlay() {
+        this.destroy$.next();
+        this.componentInstance?.ngOnDestroy();
+        this.overlayRef?.dispose();
+        this.componentInstance = undefined;
+        this.overlayRef = undefined;
+        this.isOpen = false;
+    }
+    setValue(value) {
+        this.value = value;
+        if (this.componentInstance) {
+            this.componentInstance.writeValue(this.value);
+        }
+    }
+    getStrategy() {
+        const primaryX = 'start';
+        const secondaryX = primaryX === 'start' ? 'end' : 'start';
+        const primaryY = 'top';
+        const secondaryY = 'bottom';
+        if (!this.origin) {
+            return undefined;
+        }
+        const strategy = 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
+            }
+        ]);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilTimePickerOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngil-time-picker-overlay',
+                    template: ''
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Overlay }] });
+
+class TimePickerDirective {
+    constructor(elementRef, inputComponent, ngControl) {
+        this.elementRef = elementRef;
+        this.inputComponent = inputComponent;
+        this.ngControl = ngControl;
+        this.changed = new EventEmitter();
+        this.destroy$ = new Subject();
+        this.onKeyDown = (event) => {
+            if (isNaN(+event.key) && event.key !== ':' && event.key.length === 1) {
+                event.preventDefault();
+            }
+        };
+        this.onInput = (event) => {
+            const value = this.getTimePickerValue(event.target.value);
+            this.picker?.setValue({
+                hour: +value.hour,
+                minute: +value.minute || 0,
+                second: +value.second || 0
+            });
+        };
+    }
+    ngOnInit() {
+        this.ngControl?.control?.setValidators([this.timeValidator()]);
+    }
+    timeValidator() {
+        return (control) => {
+            const value = this.getTimePickerValue(control.value);
+            if (this.itemHasError(value.hour, 23)) {
+                return {
+                    invalidHour: true
+                };
+            }
+            if (this.itemHasError(value.minute, 59)) {
+                return {
+                    invalidMinute: true
+                };
+            }
+            if (this.itemHasError(value.second, 59)) {
+                return {
+                    invalidSecond: true
+                };
+            }
+            return null;
+        };
+    }
+    itemHasError(value, max, min = 0) {
+        if (value && (value.length > 2 || +value > max || +value < min)) {
+            return true;
+        }
+        return false;
+    }
+    getTimePickerValue(value) {
+        const split = value?.split(':');
+        return {
+            hour: split ? split[0] : '00',
+            minute: split ? split[1] : '00',
+            second: split ? split[2] : '00'
+        };
+    }
+    ngAfterViewInit() {
+        if (this.picker) {
+            this.picker.origin = this.elementRef;
+            this.picker.valueChanges$.pipe(takeUntil(this.destroy$)).subscribe(value => {
+                this.setInputText(value);
+                this.changed.emit(value);
+            });
+        }
+    }
+    setInputText(value) {
+        const text = [this.getItemText(value.hour), this.getItemText(value.minute), this.getItemText(value.second)].join(':');
+        this.inputComponent?.control.setValue(text);
+        this.elementRef.nativeElement.value = text;
+        this.ngControl?.control?.setValue(text);
+    }
+    getItemText(value) {
+        return value.toString().padStart(2, '0');
+    }
+    ngOnDestroy() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TimePickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngilTimePicker]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NgilInputComponent, decorators: [{
+                    type: Optional
+                }] }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { picker: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+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,
+            NgilTimePickerComponent,
+            NgilTimePickerOverlayComponent,
+            PickerToggleComponent,
+            NumberRotationDirective,
+            TimePickerDirective,
+            NgilSelectComponent,
+            NgilTextareaComponent,
+            NgilSelectOptionsComponent,
+            NgilOverlayComponent,
+            OverlayToggleDirective], imports: [CommonModule, ReactiveFormsModule, OverlayModule], exports: [NgilInputComponent,
+            NgilSelectComponent,
+            NgilTextareaComponent,
+            NgilTimePickerComponent,
+            NgilTimePickerOverlayComponent,
+            PickerToggleComponent,
+            NumberRotationDirective,
+            TimePickerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilUiFormModule, imports: [CommonModule, ReactiveFormsModule, OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NgilUiFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ReactiveFormsModule, OverlayModule],
+                    declarations: [
+                        NgilInputComponent,
+                        NgilTimePickerComponent,
+                        NgilTimePickerOverlayComponent,
+                        PickerToggleComponent,
+                        NumberRotationDirective,
+                        TimePickerDirective,
+                        NgilSelectComponent,
+                        NgilTextareaComponent,
+                        NgilSelectOptionsComponent,
+                        NgilOverlayComponent,
+                        OverlayToggleDirective
+                    ],
+                    exports: [
+                        NgilInputComponent,
+                        NgilSelectComponent,
+                        NgilTextareaComponent,
+                        NgilTimePickerComponent,
+                        NgilTimePickerOverlayComponent,
+                        PickerToggleComponent,
+                        NumberRotationDirective,
+                        TimePickerDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgilInputComponent, NgilSelectComponent, NgilTextareaComponent, NgilTimePickerComponent, NgilTimePickerOverlayComponent, NgilUiFormModule, NumberRotationDirective, PickerToggleComponent, TimePickerDirective };
+//# sourceMappingURL=ngil-form-inputs.mjs.map