@datarailsshared/datarailsshared 1.3.6 → 1.3.9

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,12 +1,14 @@
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, forwardRef, ElementRef, Renderer2, ChangeDetectorRef, ContentChild, HostBinding, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, Inject, ViewChild, NgModule } from '@angular/core';
-import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Renderer2, HostBinding, ContentChild, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, Inject, ViewChild, Optional, Injectable, Pipe, NgModule } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
 import * as momentImported from 'moment';
-import { trigger, transition, style, animate } from '@angular/animations';
+import { transition, style, animate, trigger } from '@angular/animations';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { DOCUMENT, CommonModule } from '@angular/common';
+import { Subject } from 'rxjs';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -238,7 +240,7 @@ const MONTH_FORMATS = {
         monthYearA11yLabel: "MMMM YYYY"
     },
 };
-const ɵ0$4 = MONTH_FORMATS;
+const ɵ0$5 = MONTH_FORMATS;
 class MonthTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -297,7 +299,7 @@ MonthTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$4 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$5 },
                 ]
             },] }
 ];
@@ -418,7 +420,7 @@ const WEEK_FORMATS = {
         monthYearA11yLabel: "MMMM YYYY"
     },
 };
-const ɵ0$3 = WEEK_FORMATS;
+const ɵ0$4 = WEEK_FORMATS;
 class WeekTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -514,7 +516,7 @@ WeekTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$3 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$4 },
                 ]
             },] }
 ];
@@ -536,7 +538,7 @@ const YEAR_FORMATS = {
         monthYearA11yLabel: "MMMM YYYY"
     },
 };
-const ɵ0$2 = YEAR_FORMATS;
+const ɵ0$3 = YEAR_FORMATS;
 class YearTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -600,7 +602,7 @@ YearTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$2 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$3 },
                 ]
             },] }
 ];
@@ -714,7 +716,7 @@ const DAY_FORMATS = {
         monthYearA11yLabel: "MMMM YYYY"
     },
 };
-const ɵ0$1 = DAY_FORMATS;
+const ɵ0$2 = DAY_FORMATS;
 class DayTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -733,7 +735,8 @@ class DayTagComponent extends AnyTagComponent {
         const utcOffsetInMilliseconds = moment().utcOffset() * 60 * 1000;
         this.dateObj.date = moment(moment().valueOf() + utcOffsetInMilliseconds);
         if (this.defaultValue) {
-            this.dateObj.date = moment(new Date(this.defaultValue * 1000)).utc().format("YYYY-MM-DD");
+            this.dateObj.date = moment(new Date(this.defaultValue * 1000)).utc();
+            this.date.setValue(this.dateObj.date);
         }
     }
     initName() {
@@ -766,7 +769,7 @@ DayTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$1 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$2 },
                 ]
             },] }
 ];
@@ -776,7 +779,8 @@ DayTagComponent.propDecorators = {
 };
 
 class RadioButtonComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.onChange = (onchanges => { });
         this.onTouched = () => { };
     }
@@ -791,6 +795,7 @@ class RadioButtonComponent {
     }
     writeValue(value) {
         this.modelValue = value;
+        this.cdr.markForCheck();
     }
     toggleChange(event) {
         if (event.target.checked) {
@@ -814,9 +819,12 @@ RadioButtonComponent.decorators = [
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.ShadowDom,
-                styles: ["label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:12px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1px solid #C3C4CE;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:white;border-color:#579bf2;color:#579bf2}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23579BF2\"/></svg> ');color:#579bf2}label input:disabled+span:before{border-color:#bcbcbc}label input[disabled]:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23BCBCBC\"/></svg> ');border-color:#bcbcbc}label span:hover:before{border-color:#85889c}\n"]
+                styles: ["label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;min-width:12px;margin-right:5px;border:1px solid #C3C4CE;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:white;border-color:#579bf2;color:#579bf2}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23579BF2\"/></svg> ');color:#579bf2}label input:disabled+span:before{border-color:#bcbcbc}label input[disabled]:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23BCBCBC\"/></svg> ');border-color:#bcbcbc}label span:hover:before{border-color:#85889c}\n"]
             },] }
 ];
+RadioButtonComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 RadioButtonComponent.propDecorators = {
     disabled: [{ type: Input }],
     name: [{ type: Input }],
@@ -824,7 +832,8 @@ RadioButtonComponent.propDecorators = {
 };
 
 class CheckboxComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.disabled = false;
         this.checkedChange = new EventEmitter();
         this.onChange = () => { };
@@ -832,6 +841,7 @@ class CheckboxComponent {
     }
     writeValue(value) {
         this.checkedStatus = value;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -861,6 +871,9 @@ CheckboxComponent.decorators = [
                 styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #85889C;background-color:#f4f4f4;font-weight:normal;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#85889c;color:#579bf2;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#579BF2;border-color:#579bf2;color:#fff}label input:disabled+span:before{border-color:#bcbcbc;pointer-events:none}label input[disabled]:checked+span:before{background:#BCBCBC;border-color:#bcbcbc;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#F6F7F8;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"]
             },] }
 ];
+CheckboxComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 CheckboxComponent.propDecorators = {
     checkedStatus: [{ type: Input }],
     disabled: [{ type: Input }],
@@ -872,6 +885,10 @@ class DrInputComponent {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.cdr = cdr;
+        this.type = 'string';
+        this.placeholder = '';
+        this.readonly = false;
+        this.clearable = false;
         this.value = null;
         this._disabled = null;
         this._elementClass = [];
@@ -879,23 +896,18 @@ class DrInputComponent {
             show: false,
             showOnFocus: false,
             focusSet: false,
-            checkFocusOut: (target, element) => { return true; },
+            checkFocusOut: (target, element) => true,
             text: 'Save'
         };
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.type = 'string';
-        this.placeholder = '';
-        this.readonly = false;
-        this.clearable = false;
         this.searchHandler = new EventEmitter();
         this.buttonHandler = new EventEmitter();
         this.tabindex = -1;
+        this.onChange = () => { };
+        this.onTouched = () => { };
     }
     set disabled(value) {
         this.setDisabledState(value);
     }
-    ;
     set buttonOptions(value) {
         var _a, _b;
         if (value) {
@@ -919,7 +931,6 @@ class DrInputComponent {
         }
         this.cdr.markForCheck();
     }
-    ;
     get elementClass() {
         return this._elementClass.join(' ');
     }
@@ -982,14 +993,14 @@ class DrInputComponent {
 DrInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-input',
-                template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n       (ngModelChange)=\"updateChanges()\"\r\n       (blur)=\"onTouched()\"\r\n       [disabled]=\"_disabled\"\r\n       [readonly]=\"readonly\"\r\n       [type]=\"type\"\r\n       [placeholder]=\"placeholder\">\r\n<span class=\"clear-icon\" (click)=\"writeValue(null)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n        (click)=\"onButtonClicked($event)\">\r\n    {{_buttonOptions.text}}\r\n</button>\r\n",
+                template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n       (ngModelChange)=\"updateChanges()\"\r\n       (blur)=\"onTouched()\"\r\n       [disabled]=\"_disabled\"\r\n       [readonly]=\"readonly\"\r\n       [type]=\"type\"\r\n       [placeholder]=\"placeholder\"\r\n       [name]=\"name\"\r\n>\r\n<span class=\"clear-icon\" (click)=\"writeValue(null)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n        (click)=\"onButtonClicked($event)\">\r\n    {{_buttonOptions.text}}\r\n</button>\r\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         useExisting: forwardRef(() => DrInputComponent),
                         multi: true
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Nunito Sans\",sans-serif;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;padding:0 8px;overflow:hidden}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host input{display:flex;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type.ng-valid{border-color:#c3c4ce}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.with-button{padding-right:0}:host.with-button button{color:#0061ff;background:#F6F7F8;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #C3C4CE}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"]
+                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Nunito Sans\",sans-serif;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;padding:0 8px;overflow:hidden}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host input{display:flex;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type.ng-valid{border-color:#c3c4ce}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.with-button{padding-right:0}:host.with-button button{color:#0061ff;background:#F6F7F8;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #C3C4CE}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"]
             },] }
 ];
 DrInputComponent.ctorParameters = () => [
@@ -998,18 +1009,19 @@ DrInputComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 DrInputComponent.propDecorators = {
+    disabled: [{ type: Input }],
+    buttonOptions: [{ type: Input }],
     type: [{ type: Input }],
+    name: [{ type: Input }],
     placeholder: [{ type: Input }],
     readonly: [{ type: Input }],
     clearable: [{ type: Input }],
-    disabled: [{ type: Input }],
-    buttonOptions: [{ type: Input }],
+    elementClass: [{ type: HostBinding, args: ['class',] }],
     searchHandler: [{ type: Output }],
     buttonHandler: [{ type: Output }],
     prefixIcon: [{ type: ContentChild, args: ['prefix', { static: false },] }],
     suffixIcon: [{ type: ContentChild, args: ['suffix', { static: false },] }],
-    tabindex: [{ type: HostBinding, args: ['tabindex',] }],
-    elementClass: [{ type: HostBinding, args: ['class',] }]
+    tabindex: [{ type: HostBinding, args: ['tabindex',] }]
 };
 
 class DrSelectComponent {
@@ -1017,6 +1029,7 @@ class DrSelectComponent {
         this.items = [];
         this.appendTo = 'body';
         this.disabled = false;
+        this.keyDownFn = () => true;
         this.onChange = () => { };
         this.onTouched = () => { };
     }
@@ -1026,6 +1039,9 @@ class DrSelectComponent {
     }
     registerOnChange(fn) {
         this.onChange = fn;
+        if (fn && this.selectedItem) {
+            this.onChange(this.selectedItem);
+        }
     }
     registerOnTouched(fn) {
         this.onTouched = fn;
@@ -1037,13 +1053,13 @@ class DrSelectComponent {
 DrSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-select',
-                template: " <ng-select [(ngModel)]=\"selectedItem\"\r\n            [items]=\"items\"\r\n            [bindLabel]=\"bindLabel\"\r\n            [bindValue]=\"bindValue\"\r\n            [multiple]=\"multiple\"\r\n            [addTag]=\"addTag\"\r\n            [appendTo]=\"appendTo\"\r\n            [clearable]=\"clearable\"\r\n            [searchable]=\"searchable\"\r\n            [hideSelected]=\"hideSelected\"\r\n            [placeholder]=\"placeholder\"\r\n            [loading]=\"loading\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            [id]=\"id\"\r\n            [keyDownFn]=\"keyDownFn\"\r\n            [searchFn]=\"searchFn\"\r\n            (change)=\"onChange($event)\"\r\n            class=\"dr-select\">\r\n     <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n     <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n </ng-select>\r\n",
+                template: " <ng-select [(ngModel)]=\"selectedItem\"\r\n            [items]=\"items\"\r\n            [bindLabel]=\"bindLabel\"\r\n            [bindValue]=\"bindValue\"\r\n            [multiple]=\"multiple\"\r\n            [addTag]=\"addTag\"\r\n            [appendTo]=\"appendTo\"\r\n            [clearable]=\"clearable\"\r\n            [searchable]=\"searchable\"\r\n            [hideSelected]=\"hideSelected\"\r\n            [placeholder]=\"placeholder\"\r\n            [loading]=\"loading\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            [id]=\"id\"\r\n            [keyDownFn]=\"keyDownFn\"\r\n            [searchFn]=\"searchFn\"\r\n            (change)=\"onChange(selectedItem)\"\r\n            class=\"dr-select\">\r\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\r\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n    </ng-template>\r\n     <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n     <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n </ng-select>\r\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         useExisting: DrSelectComponent,
                         multi: true
                     }],
-                styles: [":host{width:100%;height:32px}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-value{line-height:1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;height:36px;padding:0 12px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
+                styles: [":host{width:100%;height:32px}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-value{line-height:1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:10px 12px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
             },] }
 ];
 DrSelectComponent.propDecorators = {
@@ -1066,7 +1082,8 @@ DrSelectComponent.propDecorators = {
     keyDownFn: [{ type: Input }],
     selectedItem: [{ type: Input }],
     labelTemplate: [{ type: ContentChild, args: ['labelTemplate',] }],
-    optionTemplate: [{ type: ContentChild, args: ['optionTemplate',] }]
+    optionTemplate: [{ type: ContentChild, args: ['optionTemplate',] }],
+    optionHeaderTemplate: [{ type: ContentChild, args: ['optionHeaderTemplate',] }]
 };
 
 class DrAvatarComponent {
@@ -1108,6 +1125,102 @@ DrAvatarComponent.propDecorators = {
     userClicked: [{ type: Output }]
 };
 
+const POPUP_POSITIONS = {
+    top: {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -8
+    },
+    'top-left': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -8
+    },
+    'top-right': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -8
+    },
+    bottom: {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 7
+    },
+    'bottom-left': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 7
+    },
+    'bottom-right': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 7
+    },
+    left: {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center',
+        offsetX: -8
+    },
+    'left-top': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: -8
+    },
+    'left-bottom': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetX: -8
+    },
+    right: {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center',
+        offsetX: 8
+    },
+    'right-top': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 8
+    },
+    'right-bottom': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetX: 8
+    }
+};
+const POPUP_ANIMATION = [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate(300, style({ opacity: 1 })),
+    ]),
+    transition(':leave', [
+        animate(300, style({ opacity: 0 })),
+    ]),
+];
+
 class TooltipComponent {
     constructor() {
         this.isContentTemplate = false;
@@ -1121,17 +1234,9 @@ TooltipComponent.decorators = [
                 selector: 'dr-tooltip',
                 template: "<div [class]=\"position + ' ' + class\" [ngClass]=\"{'dr-tooltip': !options?.withoutContainerStyles}\">\r\n    <div *ngIf=\"!options?.withoutArrow\"  class=\"dr-tooltip-arrow\"></div>\r\n    <ng-container *ngIf=\"isContentTemplate; else defaultContent\">\r\n        <ng-container  *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\r\n    </ng-container>\r\n    <ng-template #defaultContent>\r\n        <div class=\"default-content\">{{ content }}</div>\r\n    </ng-template>\r\n</div>\r\n",
                 animations: [
-                    trigger('tooltip', [
-                        transition(':enter', [
-                            style({ opacity: 0 }),
-                            animate(300, style({ opacity: 1 })),
-                        ]),
-                        transition(':leave', [
-                            animate(300, style({ opacity: 0 })),
-                        ]),
-                    ]),
+                    trigger('tooltip', POPUP_ANIMATION),
                 ],
-                styles: [":host{display:block}.dr-tooltip{background:#fff;border:1px solid #cfd7dd;box-sizing:border-box;border-radius:4px;font-size:12px;color:#545a6b;max-width:80vh!important;box-shadow:0 2px 4px #9199b4}.dr-tooltip .default-content{padding:.5rem;font-size:11px;line-height:16px;white-space:pre;text-overflow:ellipsis;overflow:hidden}.dr-tooltip-arrow{border-width:8px}.dr-tooltip-arrow,.dr-tooltip-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.dr-tooltip-arrow:after{content:\"\";border-width:8px}.top .dr-tooltip-arrow,.top-left .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{bottom:-16px;border-top-color:#cfd7dd!important}.top .dr-tooltip-arrow:after,.top-left .dr-tooltip-arrow:after,.top-right .dr-tooltip-arrow:after{bottom:-6px;left:-8px;border-top-color:#fff}.bottom .dr-tooltip-arrow,.bottom-left .dr-tooltip-arrow,.bottom-right .dr-tooltip-arrow{top:-7px;border-top:none;border-bottom-color:#cfd7dd!important}.bottom .dr-tooltip-arrow:after,.bottom-left .dr-tooltip-arrow:after,.bottom-right .dr-tooltip-arrow:after{border-top:none;top:1px;left:-8px;border-bottom-color:#fff}.left .dr-tooltip-arrow,.left-top .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{right:-16px;border-left-color:#cfd7dd!important}.left .dr-tooltip-arrow:after,.left-top .dr-tooltip-arrow:after,.left-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-9px;border-left-color:#fff}.right .dr-tooltip-arrow,.right-top .dr-tooltip-arrow,.right-bottom .dr-tooltip-arrow{left:-16px;border-right-color:#cfd7dd!important}.right .dr-tooltip-arrow:after,.right-top .dr-tooltip-arrow:after,.right-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-7px;border-right-color:#fff}.top .dr-tooltip-arrow,.bottom .dr-tooltip-arrow{left:calc(50% - 4px)}.bottom-left .dr-tooltip-arrow,.top-left .dr-tooltip-arrow{left:4px}.bottom-right .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{right:4px}.left .dr-tooltip-arrow,.right .dr-tooltip-arrow{top:calc(50% - 4px)}.left-top .dr-tooltip-arrow,.dr-tooltip-arrow .right-top{top:4px}.right-bottom .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{bottom:4px}\n"]
+                styles: [":host{display:block}.top,.top-left,.top-right.dr-tooltip{transform:translateY(-8px)}.bottom,.bottom-left,.bottom-right.dr-tooltip{transform:translateY(8px)}.left,.left-top,.left-bottom.dr-tooltip{transform:translate(-8px)}.right,.right-top,.right-bottom.dr-tooltip{transform:translate(8px)}.dr-tooltip{background:#fff;border:1px solid #cfd7dd;box-sizing:border-box;border-radius:8px;font-size:12px;color:#545a6b;max-width:80vh!important;box-shadow:0 2px 4px #9199b4}.dr-tooltip .default-content{padding:.5rem;font-size:12px;line-height:22px;white-space:pre;text-overflow:ellipsis;overflow:hidden}.dr-tooltip-arrow{border-width:8px}.dr-tooltip-arrow,.dr-tooltip-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.dr-tooltip-arrow:after{content:\"\";border-width:8px}.top .dr-tooltip-arrow,.top-left .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{bottom:-16px;border-top-color:#cfd7dd!important}.top .dr-tooltip-arrow:after,.top-left .dr-tooltip-arrow:after,.top-right .dr-tooltip-arrow:after{bottom:-6px;left:-8px;border-top-color:#fff}.bottom .dr-tooltip-arrow,.bottom-left .dr-tooltip-arrow,.bottom-right .dr-tooltip-arrow{top:-7px;border-top:none;border-bottom-color:#cfd7dd!important}.bottom .dr-tooltip-arrow:after,.bottom-left .dr-tooltip-arrow:after,.bottom-right .dr-tooltip-arrow:after{border-top:none;top:1px;left:-8px;border-bottom-color:#fff}.left .dr-tooltip-arrow,.left-top .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{right:-16px;border-left-color:#cfd7dd!important}.left .dr-tooltip-arrow:after,.left-top .dr-tooltip-arrow:after,.left-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-9px;border-left-color:#fff}.right .dr-tooltip-arrow,.right-top .dr-tooltip-arrow,.right-bottom .dr-tooltip-arrow{left:-16px;border-right-color:#cfd7dd!important}.right .dr-tooltip-arrow:after,.right-top .dr-tooltip-arrow:after,.right-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-7px;border-right-color:#fff}.top .dr-tooltip-arrow,.bottom .dr-tooltip-arrow{left:calc(50% - 8px)}.bottom-left .dr-tooltip-arrow,.top-left .dr-tooltip-arrow{left:8px}.bottom-right .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{right:8px}.left .dr-tooltip-arrow,.right .dr-tooltip-arrow{top:calc(50% - 8px)}.left-top .dr-tooltip-arrow,.dr-tooltip-arrow .right-top{top:8px}.right-bottom .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{bottom:8px}\n"]
             },] }
 ];
 TooltipComponent.ctorParameters = () => [];
@@ -1143,21 +1248,6 @@ TooltipComponent.propDecorators = {
     class: [{ type: Input }]
 };
 
-var TooltipPosition;
-(function (TooltipPosition) {
-    TooltipPosition["TOP"] = "top";
-    TooltipPosition["BOTTOM"] = "bottom";
-    TooltipPosition["LEFT"] = "left";
-    TooltipPosition["RIGHT"] = "right";
-    TooltipPosition["TOP_RIGHT"] = "top-right";
-    TooltipPosition["TOP_LEFT"] = "top-left";
-    TooltipPosition["BOTTOM_RIGHT"] = "bottom-right";
-    TooltipPosition["BOTTOM_LEFT"] = "bottom-left";
-    TooltipPosition["RIGHT_TOP"] = "right-top";
-    TooltipPosition["RIGHT_BOTTOM"] = "right-bottom";
-    TooltipPosition["LEFT_TOP"] = "left-top";
-    TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
-})(TooltipPosition || (TooltipPosition = {}));
 class DrTooltipDirective {
     constructor(overlay, overlayPositionBuilder, elementRef) {
         this.overlay = overlay;
@@ -1166,96 +1256,10 @@ class DrTooltipDirective {
         this.contentContext = {};
         this.position = 'top';
         this.class = '';
-        this.tooltipPositions = {
-            top: {
-                originX: 'center',
-                originY: 'top',
-                overlayX: 'center',
-                overlayY: 'bottom',
-                offsetY: -8
-            },
-            'top-left': {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -8
-            },
-            'top-right': {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-                offsetY: -8
-            },
-            bottom: {
-                originX: 'center',
-                originY: 'bottom',
-                overlayX: 'center',
-                overlayY: 'top',
-                offsetY: 7
-            },
-            'bottom-left': {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 7
-            },
-            'bottom-right': {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-                offsetY: 7
-            },
-            left: {
-                originX: 'start',
-                originY: 'center',
-                overlayX: 'end',
-                overlayY: 'center',
-                offsetX: -8
-            },
-            'left-top': {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'top',
-                offsetX: -8
-            },
-            'left-bottom': {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'bottom',
-                offsetX: -8
-            },
-            right: {
-                originX: 'end',
-                originY: 'center',
-                overlayX: 'start',
-                overlayY: 'center',
-                offsetX: 8
-            },
-            'right-top': {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetX: 8
-            },
-            'right-bottom': {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetX: 8
-            }
-        };
     }
     set drTooltipOptions(options) {
         if (options === null || options === void 0 ? void 0 : options.indent) {
-            const position = this.tooltipPositions[this.position];
+            const position = POPUP_POSITIONS[this.position];
             if (position.offsetY) {
                 position.offsetY = position.offsetY < 0 ? -options.indent : options.indent;
             }
@@ -1298,7 +1302,7 @@ class DrTooltipDirective {
     createOverlay() {
         const positionStrategy = this.overlayPositionBuilder
             .flexibleConnectedTo(this.elementRef)
-            .withPositions([this.tooltipPositions[this.position]]);
+            .withPositions([POPUP_POSITIONS[this.position]]);
         this.overlayRef = this.overlay.create({ positionStrategy });
     }
     renderTooltip() {
@@ -1310,6 +1314,7 @@ class DrTooltipDirective {
             tooltipRef.instance.contentContext = this.contentContext;
             tooltipRef.instance.position = this.position;
             tooltipRef.instance.options = this.options;
+            tooltipRef.instance.class = this.class + ' ' + this.position;
         }
     }
     destroyTooltip() {
@@ -1318,8 +1323,6 @@ class DrTooltipDirective {
         }
         this.overlayRef = null;
     }
-    ngOnInit() {
-    }
 }
 DrTooltipDirective.decorators = [
     { type: Directive, args: [{
@@ -1381,7 +1384,7 @@ DrToggleComponent.decorators = [
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;justify-content:space-between;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:rgba(143,155,179,.24)!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#579bf2}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#aeb5bb}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}\n"]
+                styles: [":host{display:flex;justify-content:space-between;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:rgba(143,155,179,.24)!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#579bf2}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#aeb5bb;line-height:1}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}\n"]
             },] }
 ];
 DrToggleComponent.ctorParameters = () => [
@@ -1473,6 +1476,640 @@ DrSpinnerDirective.propDecorators = {
     drSpinnerSize: [{ type: Input }]
 };
 
+class DrButtonComponent {
+    constructor() {
+        this.theme = 'primary';
+        this.isBold = false;
+        this.isLoading = false;
+        this.click = new EventEmitter();
+    }
+    onClick($event) {
+        this.click.emit($event);
+    }
+}
+DrButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-button',
+                template: "<button (click)=\"onClick($event)\" [attr.disabled]=\"disabled\" [attr.is-loading]=\"isLoading\" [attr.bold]=\"isBold\"\r\n    [attr.icon]=\"icon ? true : false\" [attr.theme]=\"theme\">\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <i *ngIf=\"icon\" class=\"dr\" [ngClass]=\"icon\"></i>\r\n        <ng-content></ng-content>\r\n    </ng-container>\r\n    <i *ngIf=\"isLoading\" class=\"dr dr-spinner\"></i>\r\n</button>",
+                styles: [":host{display:inline-block}:host button[theme]{cursor:pointer;border-radius:16px;padding:5px 16px;font-family:\"Poppins\";font-style:normal;font-weight:400;font-size:14px;line-height:22px;color:#4e566c;border:1px solid #7F7FDD;display:flex;justify-content:space-between;align-items:center;height:32px}:host button[theme] .dr{padding:0;margin-left:5.35px;margin-right:8.64px}:host button[theme] .dr-spinner{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}@keyframes rotate{0%{transform:rotate()}to{transform:rotate(360deg)}}:host button[theme][theme~=secondary]{padding:5px 16px;background:#FFFFFF;border-radius:16px;min-width:90px}:host button[theme][theme~=secondary]:hover:not([disabled=\"true\"]){color:#4e566c;transition:.2ms ease-in all;background:#F2F2FB;box-shadow:0 4px 14px #0000001a;border:1px solid #4646CE;border-radius:16px}:host button[theme][theme~=secondary]:active{box-shadow:none;background:#F2F2FB}:host button[theme][theme~=secondary][disabled=true]{background:#F0F1F4;color:#727583;border:none}:host button[theme][theme~=secondary][is-loading=true]{justify-content:center;padding:5px 16px}:host button[theme][theme~=primary]{background:#4646CE;color:#fff;border:none;min-width:90px}:host button[theme][theme~=primary]:hover:not([disabled=\"true\"]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);box-shadow:0 4px 14px #0000001a;border-radius:16px;border:none}:host button[theme][theme~=primary]:hover[disabled=false]{border:none}:host button[theme][theme~=primary]:active{background:#25258C}:host button[theme][theme~=primary][disabled=true]{background:#F0F1F4;color:#727583;border:none}:host button[theme][theme~=primary][is-loading=true]{justify-content:center;padding:5px 16px}:host button[theme][theme~=ghost]{background:none;border:none;color:#151b3f;padding:4px 8px}:host button[theme][theme~=ghost] .dr{margin-left:4.5px;margin-right:12.5px}:host button[theme][theme~=ghost]:hover:not([disabled=\"true\"]){color:#4646ce;background:#F2F2FB;border-radius:4px}:host button[theme][theme~=ghost][disabled=true]{color:#727583}:host button[theme][theme~=text-link]{background:none;border:none;color:#0b5af9;text-decoration:underline}:host button[theme][theme~=text-link][disabled=true]{color:#727583}:host button[theme][theme~=primary-icon]{padding:8px;width:28px;height:28px;justify-content:center;color:#fff;background:#4646CE;border:none}:host button[theme][theme~=primary-icon]:hover,:host button[theme][theme~=primary-icon]:active{background:linear-gradient(96.89deg,#131318 0%,#4646CE 100%)}:host button[theme][theme~=primary-icon][disabled=true]{color:#bcbcbc;background:#E5E6EA}:host button[theme][theme~=primary-icon] .dr{margin:0}:host button[theme][theme~=secondary-icon]{background:white;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:1px solid #7F7FDD}:host button[theme][theme~=secondary-icon]:hover,:host button[theme][theme~=secondary-icon]:active{color:#4646ce;background:#F2F2FB}:host button[theme][theme~=secondary-icon][disabled=true]{color:#bcbcbc;background:#E5E6EA;border:none}:host button[theme][theme~=secondary-icon] .dr{margin:0}:host button[theme][theme~=icon]{background:none;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:none}:host button[theme][theme~=icon]:hover,:host button[theme][theme~=icon]:active{background:#F0F3FC;color:#4646ce}:host button[theme][theme~=icon][disabled=true]{color:#bcbcbc;border:none}:host button[theme][theme~=icon][disabled=true]:hover,:host button[theme][theme~=icon][disabled=true]:active{background:none}:host button[theme][theme~=icon] .dr{margin:0}:host button[theme][bold=true]{font-weight:600}:host button[theme][icon=true]{padding-left:8px}:host button[theme][icon=false]{justify-content:center}\n"]
+            },] }
+];
+DrButtonComponent.ctorParameters = () => [];
+DrButtonComponent.propDecorators = {
+    title: [{ type: Input }],
+    theme: [{ type: Input }],
+    disabled: [{ type: Input }],
+    icon: [{ type: Input }],
+    isBold: [{ type: Input }],
+    isLoading: [{ type: Input }],
+    click: [{ type: Output }]
+};
+//  Examples:
+/*
+<dr-button [icon]="'dr-icon-arrow-down'">hello</dr-button>
+<dr-button [icon]="'dr-icon-refresh'" [theme]="'primary-icon'"></dr-button>
+<dr-button [icon]="'dr-icon-refresh'" [isDisabled]="true" [theme]="'primary-icon'"></dr-button>
+
+<dr-button [icon]="'dr-icon-refresh'" [theme]="'secondary-icon'"></dr-button>
+<dr-button [icon]="'dr-icon-share'" [isDisabled]="true" [theme]="'secondary-icon'"></dr-button>
+
+<dr-button [icon]="'dr-icon-share'" [theme]="'icon'"></dr-button>
+<dr-button [icon]="'dr-icon-share'" [isDisabled]="true" [theme]="'icon'"></dr-button>
+
+<dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'">Primary</dr-button>
+<dr-button [isDisabled]="false" >Primary</dr-button>
+<dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'" [theme]="'secondary'">Secondary</dr-button>
+<dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'" [theme]="'ghost'">Ghost</dr-button>
+<dr-button [isDisabled]="false" [theme]="'text-link'">Text Link</dr-button>
+*/
+
+const MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
+const DATE_INPUT_FORMAT = 'YYYY/MM/DD';
+const YEAR_FORMAT = 'yyyy';
+const MONTH_YEAR_FORMAT = 'MM/yyyy';
+class CustomDateFormat {
+    constructor() {
+        this._parse = {
+            dateInput: DATE_INPUT_FORMAT
+        };
+        this._display = {
+            dateInput: DATE_INPUT_FORMAT,
+            monthYearLabel: 'MMM YYYY',
+            dateA11yLabel: 'LL',
+            monthYearA11yLabel: 'MMM YYYY'
+        };
+    }
+    set parse(parse) {
+        this._parse = Object.assign({}, this._parse, parse);
+    }
+    get parse() {
+        return this._parse;
+    }
+    set display(display) {
+        this._display = Object.assign({}, this._display, display);
+    }
+    get display() {
+        return this._display;
+    }
+    updateDateFormat(parse, display) {
+        this.parse = parse;
+        if (!display) {
+            display = parse;
+        }
+        this.display = display;
+    }
+}
+
+const noop = () => { };
+const ɵ0$1 = noop;
+class DrDatePickerComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.readonly = true;
+        this._lastView = 'month';
+        this._format = MAT_DEFAULT_DATE_FORMAT;
+        this.placeholder = 'Select';
+        this.min = null;
+        this.max = null;
+        this.innerValue = null;
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+    }
+    set lastView(view) {
+        switch (view) {
+            case 'year':
+                this._lastView = 'multi-year';
+                this._format = YEAR_FORMAT;
+                break;
+            case 'month':
+                this._lastView = 'year';
+                this._format = MONTH_YEAR_FORMAT;
+                break;
+            default:
+                this._lastView = 'month';
+                this._format = MAT_DEFAULT_DATE_FORMAT;
+        }
+        this.cdr.markForCheck();
+    }
+    set format(value) {
+        if (value) {
+            this._format = value;
+            this.cdr.markForCheck();
+        }
+    }
+    ngAfterViewInit() {
+        if (this._lastView === 'month') {
+            return;
+        }
+        const lastView = this._lastView;
+        setTimeout(() => {
+            const popupInstance = this.dp._popupComponentRef.instance;
+            const calenderInstance = popupInstance._calendar._calendarHeaderPortal._attachedHost._attachedRef.instance;
+            calenderInstance.currentPeriodClicked = function () {
+                if (lastView === 'multi-year') {
+                    this.calendar.currentView = 'multi-year';
+                }
+                else if (lastView === 'year') {
+                    this.calendar.currentView = this.calendar.currentView == 'year' ? 'multi-year' : 'year';
+                }
+            };
+        }, 1000);
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+            this.cdr.markForCheck();
+        }
+    }
+    chosenMonthHandler(normalizedMonth, datepicker) {
+        if (this._lastView === 'year') {
+            this.writeValue(normalizedMonth);
+            this.onChangeCallback(normalizedMonth);
+            datepicker.close();
+        }
+    }
+    chosenYearHandler(normalizedYear, datepicker) {
+        if (this._lastView === 'multi-year') {
+            this.writeValue(normalizedYear);
+            this.onChangeCallback(normalizedYear);
+            datepicker.close();
+        }
+    }
+}
+DrDatePickerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'new-dr-date-picker',
+                template: " <dr-input\r\n    (click)=\"datePicker.open()\"\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [drDatePickerFormat]=\"_format\"\r\n    [readonly]=\"readonly\"\r\n  ></dr-input>\r\n  <mat-datepicker\r\n    #datePicker startView=\"{{_lastView}}\"\r\n    (yearSelected)=\"chosenYearHandler($event, datePicker)\"\r\n    (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\r\n  </mat-datepicker>\r\n\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true }
+                ],
+                styles: ["dr-input.ng-valid{border-color:#85889c!important}.mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}.mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}.mat-datepicker-content button[disabled]:hover{border:inherit}.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F3F7FF}.mat-calendar-body-selected{background-color:#579bf2}.mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}.mat-button-focus-overlay{background:#F3F7FF}.mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}.mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}:host::ng-deep dr-input input{cursor:pointer}\n"]
+            },] }
+];
+DrDatePickerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+DrDatePickerComponent.propDecorators = {
+    lastView: [{ type: Input }],
+    format: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    min: [{ type: Input }],
+    max: [{ type: Input }],
+    dp: [{ type: ViewChild, args: ['datePicker',] }]
+};
+
+class DrDatePickerFormatDirective {
+    constructor(matDateFormat, ngControl) {
+        this.matDateFormat = matDateFormat;
+        this.ngControl = ngControl;
+    }
+    set datePickerFormat(format) {
+        var _a;
+        if (this.configDateParse) {
+            this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
+        }
+        else {
+            this.matDateFormat.updateDateFormat({ dateInput: format });
+        }
+        const value = this.ngControl.value;
+        (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
+    }
+}
+DrDatePickerFormatDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDatePickerFormat]',
+                providers: [
+                    {
+                        provide: DateAdapter,
+                        useClass: MomentDateAdapter
+                    },
+                    {
+                        provide: MAT_DATE_FORMATS,
+                        useClass: CustomDateFormat
+                    }
+                ]
+            },] }
+];
+DrDatePickerFormatDirective.ctorParameters = () => [
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+    { type: NgControl, decorators: [{ type: Optional }] }
+];
+DrDatePickerFormatDirective.propDecorators = {
+    configDateParse: [{ type: Input }],
+    configDateDisplay: [{ type: Input }],
+    datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
+};
+
+class DrPopoverComponent {
+    constructor(cdr, componentFactoryResolver, elementRef) {
+        this.cdr = cdr;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.elementRef = elementRef;
+        this.class = '';
+        this.isContentTemplate = false;
+    }
+    set popoverContainer(template) {
+        this.isContentTemplate = this.content instanceof TemplateRef;
+        if (!this.isContentTemplate) {
+            this.componentRef = template.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
+            this.componentRef.instance['closePopover'] = this.closePopover;
+            for (let key in this.contentContext) {
+                this.componentRef.instance[key] = this.contentContext[key];
+            }
+        }
+        else {
+            this.contentContext.closePopover = this.closePopover;
+        }
+        this.cdr.detectChanges();
+    }
+    ;
+    removeOutside(e) {
+        const isTargetHost = this.hostRef.nativeElement === e.target;
+        const isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
+        const isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
+        const isTargetInSelect = e.target.closest('ng-dropdown-panel');
+        if (!isTargetHost && !isTargetInPopover && !isTargetInDatepicker && !isTargetInSelect) {
+            this.closePopover();
+        }
+    }
+}
+DrPopoverComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-popover',
+                template: "<div class=\"dr-popover\" [class]=\"class\" #popoverContainer>\r\n    <ng-container *ngIf=\"isContentTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n",
+                animations: [
+                    trigger('popover', POPUP_ANIMATION),
+                ],
+                styles: [".dr-popover{display:flex;background:#fff;border:1px solid #E5E5E5;border-radius:5px;box-sizing:border-box;box-shadow:0 4px 14px #0003;font-size:12px;color:#545a6b;max-height:100vh;max-width:100vw}\n"]
+            },] }
+];
+DrPopoverComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: ElementRef }
+];
+DrPopoverComponent.propDecorators = {
+    content: [{ type: Input }],
+    contentContext: [{ type: Input }],
+    class: [{ type: Input }],
+    hostRef: [{ type: Input }],
+    closePopover: [{ type: Input }],
+    popoverContainer: [{ type: ViewChild, args: ['popoverContainer', { read: ViewContainerRef },] }],
+    removeOutside: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
+};
+
+class DrPopoverDirective {
+    constructor(overlay, vcRef, resolver, overlayPositionBuilder, elementRef) {
+        this.overlay = overlay;
+        this.vcRef = vcRef;
+        this.resolver = resolver;
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.elementRef = elementRef;
+        this.contentContext = {};
+        this.position = 'bottom';
+        this.class = '';
+    }
+    show() {
+        if (this.overlayRef) {
+            this.destroyPopover();
+        }
+        else {
+            this.renderPopover();
+        }
+    }
+    renderPopover() {
+        var _a;
+        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef)
+            .withPositions([POPUP_POSITIONS[this.position]]);
+        this.overlayRef = this.overlay.create({ positionStrategy });
+        if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && this.content) {
+            this.contentRef = this.overlayRef.attach(new ComponentPortal(DrPopoverComponent));
+            this.contentRef.instance.content = this.content;
+            this.contentRef.instance.contentContext = this.contentContext;
+            this.contentRef.instance.class = this.class + ' ' + this.position;
+            this.contentRef.instance.hostRef = this.elementRef;
+            this.contentRef.instance.closePopover = this.destroyPopover.bind(this);
+        }
+    }
+    destroyPopover() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        if (this.contentRef) {
+            this.contentRef.destroy();
+            this.contentRef = null;
+        }
+    }
+    ngOnDestroy() {
+        this.destroyPopover();
+    }
+}
+DrPopoverDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drPopover]'
+            },] }
+];
+DrPopoverDirective.ctorParameters = () => [
+    { type: Overlay },
+    { type: ViewContainerRef },
+    { type: ComponentFactoryResolver },
+    { type: OverlayPositionBuilder },
+    { type: ElementRef }
+];
+DrPopoverDirective.propDecorators = {
+    content: [{ type: Input, args: ['drPopover',] }],
+    contentContext: [{ type: Input, args: ['drPopoverContext',] }],
+    position: [{ type: Input, args: ['drPopoverPosition',] }],
+    class: [{ type: Input, args: ['drPopoverClass',] }],
+    show: [{ type: HostListener, args: ['click',] }]
+};
+
+class DrDropdownService {
+    constructor() {
+        this.actionItem = new Subject();
+    }
+    set addMenu(item) {
+        this.menuInView = item;
+    }
+    destroy() {
+        if (this.menuInView) {
+            this.menuInView.destroy();
+        }
+    }
+}
+DrDropdownService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrDropdownService_Factory() { return new DrDropdownService(); }, token: DrDropdownService, providedIn: "root" });
+DrDropdownService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+DrDropdownService.ctorParameters = () => [];
+
+class DrDropdownComponent {
+    constructor(menuService, cdr) {
+        this.menuService = menuService;
+        this.cdr = cdr;
+        this.position = 'left';
+    }
+    set options(data) {
+        if (data) {
+            this.option = data.option;
+            this.position = data.position;
+            this.list = data.list || [];
+            this.list.forEach(item => {
+                var _a;
+                if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                    item.childOptions = {
+                        list: item.children,
+                        position: 'child'
+                    };
+                }
+            });
+            this.cdr.markForCheck();
+        }
+    }
+    onClickedOutside() {
+        if (this.firstInit) {
+            this.menuService.destroy();
+        }
+        else {
+            this.firstInit = true;
+        }
+    }
+    hide() {
+        this.menuService.destroy();
+    }
+    disabled(act) {
+        if (!act.disabled) {
+            return false;
+        }
+        if (typeof act.disabled === 'boolean') {
+            return act.disabled;
+        }
+        else {
+            return act.disabled(act.data);
+        }
+    }
+    tooltipToShow(act) {
+        return act.toolTipIfDisabled && this.disabled(act) && act.toolTip
+            || act.toolTip && !act.toolTipIfDisabled ? act.toolTip : act.title;
+    }
+    action(act) {
+        if (!this.disabled(act)) {
+            if (act.action) {
+                act.action(act.data);
+            }
+            else {
+                this.menuService.actionItem.next({ event: act.event || act.title || 'default', data: act.data });
+            }
+            this.hide();
+        }
+    }
+    onActionIconClick(actionIcon, data) {
+        if (!this.disabled(actionIcon)) {
+            actionIcon.action(data);
+            this.hide();
+        }
+    }
+}
+DrDropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-dropdown',
+                template: "<div #menuContainer\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     [position]=\"position\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"'top'\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\">\r\n\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               (click)=\"onActionIconClick(actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item:hover{background-color:#f6f7f8}.dr-dropdown__container__item.item-disabled{color:#bcbcbc;pointer-events:none}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
+            },] }
+];
+DrDropdownComponent.ctorParameters = () => [
+    { type: DrDropdownService },
+    { type: ChangeDetectorRef }
+];
+DrDropdownComponent.propDecorators = {
+    viewMenu: [{ type: ViewChild, args: ['listMenu',] }],
+    menuContainer: [{ type: ViewChild, args: ['menuContainer',] }],
+    options: [{ type: Input }]
+};
+
+class DrDropdownDirective {
+    constructor(componentFactoryResolver, viewContainerRef, service, el, _document) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.service = service;
+        this.el = el;
+        this._document = _document;
+        this.position = 'left';
+    }
+    elementClick() {
+        const option = this.el.nativeElement.getBoundingClientRect();
+        this._document.querySelectorAll('dr-dropdown').forEach(item => item.remove());
+        if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
+            this.contentCmpRef.destroy();
+            this.contentCmpRef = null;
+        }
+        else {
+            this.service.destroy();
+            this.showMenu({
+                option,
+                position: this.position,
+                list: this.drDropdown,
+            });
+        }
+    }
+    documentClick(e) {
+        const menuItem = e.target.classList;
+        if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
+            return;
+        }
+        const elems = this._document.querySelectorAll('dr-dropdown');
+        if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
+            setTimeout(() => elems.forEach(item => item.remove()), 100);
+        }
+    }
+    showMenu(options) {
+        let componentFactory;
+        componentFactory = this.componentFactoryResolver.resolveComponentFactory(DrDropdownComponent);
+        this.contentCmpRef = this.viewContainerRef.createComponent(componentFactory);
+        this.service.addMenu = this.contentCmpRef;
+        this._document.querySelector('nb-layout').appendChild(this.contentCmpRef.location.nativeElement);
+        this.contentCmpRef.instance.options = options;
+    }
+    ngOnDestroy() {
+        if (this.contentCmpRef) {
+            this.contentCmpRef.destroy();
+        }
+    }
+}
+DrDropdownDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDropdown]'
+            },] }
+];
+DrDropdownDirective.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: ViewContainerRef },
+    { type: DrDropdownService },
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+DrDropdownDirective.propDecorators = {
+    position: [{ type: Input }],
+    drDropdown: [{ type: Input }],
+    contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
+    elementClick: [{ type: HostListener, args: ['click',] }],
+    documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
+};
+
+class DrDropdownPositionDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.position = 'left';
+    }
+    ngOnInit() {
+        setTimeout(this.calculatePosition.bind(this), 1);
+    }
+    calculatePosition() {
+        let defaultDelta = 10;
+        let defaultPadding = 0;
+        if (this.position === 'child') {
+            defaultDelta = 0;
+            defaultPadding = 10;
+            const parentRect = this.el.nativeElement.parentElement.parentElement.getBoundingClientRect();
+            this.position = {
+                x: this.el.nativeElement.parentElement.parentElement.offsetWidth + 2,
+                y: this.el.nativeElement.parentElement.parentElement.offsetTop - 9,
+                clientX: parentRect.x + this.el.nativeElement.parentElement.parentElement.offsetWidth,
+                clientY: parentRect.y
+            };
+        }
+        if (typeof this.position === 'string') {
+            this.renderer.setStyle(this.el.nativeElement, 'top', this.position === 'bottom' ?
+                this.drDropdownPosition.y - this.drDropdownPosition.height + 'px' :
+                this.drDropdownPosition.y + 'px');
+            this.renderer.setStyle(this.el.nativeElement, 'left', this.position === 'right' ?
+                this.drDropdownPosition.x + this.drDropdownPosition.width + 'px' :
+                this.drDropdownPosition.x + 'px');
+            const menuHeight = this.el.nativeElement.offsetHeight;
+            const heightMoreWindowBottom = menuHeight + this.drDropdownPosition.y > window.innerHeight;
+            const heightMoreWindowTop = menuHeight - this.drDropdownPosition.y + this.drDropdownPosition.height / 2 > 48; // header height;
+            const widthMoreWindowRight = this.drDropdownPosition.x + 250 > window.innerWidth;
+            if (heightMoreWindowBottom) {
+                this.position = 'top';
+            }
+            if (heightMoreWindowBottom && widthMoreWindowRight && !heightMoreWindowTop || this.position === 'top-left') {
+                this.position = 'top-left';
+                this.renderer.setStyle(this.el.nativeElement, 'transform', 'translate(-100%, calc(-100% + ' + this.drDropdownPosition.height + 'px))');
+            }
+            if (heightMoreWindowTop && heightMoreWindowBottom) {
+                this.position = 'left-center';
+            }
+            if (this.position === 'bottom-left') {
+                this.renderer.setStyle(this.el.nativeElement, 'transform', `translate(-90%, ${this.drDropdownPosition.height + this.drDropdownPosition.height / 2}px)`);
+            }
+            const className = this.position === 'top' ? 'content-top'
+                : this.position === 'top-left' ? 'content-top-left'
+                    : this.position === 'bottom' ? 'content-bottom'
+                        : this.position === 'bottom-left' ? 'content-bottom-left'
+                            : this.position === 'left' ? 'content-left'
+                                : this.position === 'left-center' ? 'content-left-center'
+                                    : this.position === 'right' ? 'content-right' : '';
+            this.renderer.addClass(this.el.nativeElement, className);
+            this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
+        }
+        else {
+            const widthMoreWindowRight = window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
+            const deltaWidth = widthMoreWindowRight < 0 ? widthMoreWindowRight : defaultDelta;
+            const widthMoreWindowBottom = window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
+            const deltaHeight = widthMoreWindowBottom < 0 ? widthMoreWindowBottom : defaultDelta;
+            this.renderer.setStyle(this.el.nativeElement, 'top', (this.position.y + deltaHeight) + 'px');
+            this.renderer.setStyle(this.el.nativeElement, 'left', (this.position.x + deltaWidth) + 'px');
+            this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
+        }
+    }
+}
+DrDropdownPositionDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDropdownPosition]'
+            },] }
+];
+DrDropdownPositionDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+DrDropdownPositionDirective.propDecorators = {
+    drDropdownPosition: [{ type: Input }],
+    position: [{ type: Input }]
+};
+
+class DrDropdownItemShowPipe {
+    transform(arr) {
+        return arr.filter(item => item.show ? item.show(item.data) : true);
+    }
+}
+DrDropdownItemShowPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'drDropdownItemShowPipe'
+            },] }
+];
+
 const components$2 = [DateTagComponent,
     DayTagComponent,
     WeekTagComponent,
@@ -1544,18 +2181,21 @@ DrTagModule.decorators = [
             },] }
 ];
 
-const components$1 = [RadioButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrToggleComponent];
+const components$1 = [DrButtonComponent, RadioButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrToggleComponent, DrDatePickerComponent, DrDatePickerFormatDirective];
 class DrInputsModule {
 }
 DrInputsModule.decorators = [
     { type: NgModule, args: [{
-                declarations: components$1,
+                declarations: [
+                    components$1,
+                ],
                 exports: components$1,
                 imports: [
                     FormsModule,
                     ReactiveFormsModule,
                     CommonModule,
                     NgSelectModule,
+                    MatDatepickerModule,
                 ]
             },] }
 ];
@@ -1611,11 +2251,56 @@ DrSpinnerModule.decorators = [
             },] }
 ];
 
+class DrPopoverModule {
+}
+DrPopoverModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                exports: [
+                    DrPopoverDirective,
+                    DrPopoverComponent,
+                ],
+                providers: [],
+                declarations: [
+                    DrPopoverDirective,
+                    DrPopoverComponent,
+                ],
+            },] }
+];
+
+class DrDropdownModule {
+}
+DrDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    DrTooltipModule,
+                ],
+                declarations: [
+                    DrDropdownDirective,
+                    DrDropdownPositionDirective,
+                    DrDropdownComponent,
+                    DrDropdownItemShowPipe,
+                ],
+                exports: [
+                    DrDropdownDirective,
+                    DrDropdownPositionDirective,
+                    DrDropdownComponent,
+                    DrDropdownItemShowPipe,
+                ],
+                providers: [
+                    DrDropdownService,
+                ],
+            },] }
+];
+
 /* components */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrInputComponent, DrInputsModule, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTagComponent, DrTagModule, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$2 as ɵa };
+export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTagComponent, DrTagModule, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map