@datarailsshared/datarailsshared 1.3.8 → 1.3.11

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), require('rxjs'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip')) :
-    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', 'rxjs', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, global.rxjs, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip));
-}(this, (function (exports, i0, forms, core, materialMomentAdapter, momentImported, animations, overlay, portal, common, rxjs, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip'), require('@angular/material/tabs')) :
+    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip', '@angular/material/tabs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip, global.ng.material.tabs));
+}(this, (function (exports, i0, forms, core, materialMomentAdapter, momentImported, animations, overlay, portal, common, rxjs, operators, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1270,6 +1270,11 @@
             this.elementRef = elementRef;
             this.renderer = renderer;
             this.cdr = cdr;
+            this.type = 'string';
+            this.placeholder = '';
+            this.readonly = false;
+            this.clearable = false;
+            this.blur = new i0.EventEmitter();
             this.value = null;
             this._disabled = null;
             this._elementClass = [];
@@ -1280,17 +1285,11 @@
                 checkFocusOut: function (target, element) { return true; },
                 text: 'Save'
             };
-            this.onChange = function () { };
-            this.onTouched = function () { };
-            this.type = 'string';
-            this.placeholder = '';
-            this.readonly = false;
-            this.clearable = false;
-            this.min = null;
-            this.max = null;
             this.searchHandler = new i0.EventEmitter();
             this.buttonHandler = new i0.EventEmitter();
             this.tabindex = -1;
+            this.onChange = function () { };
+            this.onTouched = function () { };
         }
         Object.defineProperty(DrInputComponent.prototype, "disabled", {
             set: function (value) {
@@ -1299,7 +1298,6 @@
             enumerable: false,
             configurable: true
         });
-        ;
         Object.defineProperty(DrInputComponent.prototype, "buttonOptions", {
             set: function (value) {
                 var _this = this;
@@ -1328,7 +1326,6 @@
             enumerable: false,
             configurable: true
         });
-        ;
         Object.defineProperty(DrInputComponent.prototype, "elementClass", {
             get: function () {
                 return this._elementClass.join(' ');
@@ -1396,14 +1393,14 @@
     DrInputComponent.decorators = [
         { type: i0.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       [matDatepicker]=\"matDatePicker\"\r\n       [min]=\"min\"\r\n       [max]=\"max\"\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",
+                    template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n       (ngModelChange)=\"updateChanges()\"\r\n       (blur)=\"blur.emit(value); 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: forms.NG_VALUE_ACCESSOR,
                             useExisting: i0.forwardRef(function () { return DrInputComponent; }),
                             multi: true
                         }],
                     changeDetection: i0.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.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"]
+                    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;outline:none}: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 = function () { return [
@@ -1412,21 +1409,20 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     DrInputComponent.propDecorators = {
+        disabled: [{ type: i0.Input }],
+        buttonOptions: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         clearable: [{ type: i0.Input }],
-        min: [{ type: i0.Input }],
-        max: [{ type: i0.Input }],
-        matDatePicker: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        buttonOptions: [{ type: i0.Input }],
+        blur: [{ type: i0.Output }],
+        elementClass: [{ type: i0.HostBinding, args: ['class',] }],
         searchHandler: [{ type: i0.Output }],
         buttonHandler: [{ type: i0.Output }],
         prefixIcon: [{ type: i0.ContentChild, args: ['prefix', { static: false },] }],
         suffixIcon: [{ type: i0.ContentChild, args: ['suffix', { static: false },] }],
-        tabindex: [{ type: i0.HostBinding, args: ['tabindex',] }],
-        elementClass: [{ type: i0.HostBinding, args: ['class',] }]
+        tabindex: [{ type: i0.HostBinding, args: ['tabindex',] }]
     };
 
     var DrSelectComponent = /** @class */ (function () {
@@ -1494,23 +1490,34 @@
 
     var DrAvatarComponent = /** @class */ (function () {
         function DrAvatarComponent() {
-            this.users = [];
             this.userClicked = new i0.EventEmitter();
+            this.parsedUsers = [];
         }
+        Object.defineProperty(DrAvatarComponent.prototype, "users", {
+            set: function (user) {
+                if (user) {
+                    this.parsedUsers = this.parseUsers(user);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         DrAvatarComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
-            var _a;
-            if (changes.users && ((_a = changes.users.currentValue) === null || _a === void 0 ? void 0 : _a.length)) {
-                this.getFirstUsers().forEach(function (user, index) { return user.class = "icon-" + index; });
+            if (changes.users) {
+                this.getFirstUsers().forEach(function (user) { return user.class = "icon-" + _this.getRandomValue(5); });
                 this.getLastUsers().forEach(function (user) { return user.class = "icon-" + _this.getRandomValue(5); });
             }
         };
+        DrAvatarComponent.prototype.parseUsers = function (value) {
+            return Array.isArray(value) ? value : Array.of(value);
+        };
         DrAvatarComponent.prototype.getFirstUsers = function () {
-            return this.users.slice(0, 2);
+            return this.parsedUsers.slice(0, 2);
         };
         DrAvatarComponent.prototype.getLastUsers = function () {
-            if (this.users.length > 2) {
-                return this.users.slice(2, this.users.length - 1);
+            if (this.parsedUsers.length > 2) {
+                return this.parsedUsers.slice(2, this.parsedUsers.length - 1);
             }
             return [];
         };
@@ -1522,7 +1529,7 @@
     DrAvatarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-avatar',
-                    template: "<div class=\"users-section\">\r\n    <div class=\"users-section__user\"\r\n         [class]=\"user.class\"\r\n         *ngFor=\"let user of getFirstUsers()\"\r\n         (click)=\"userClicked.emit()\"\r\n         [matTooltip]=\"user.first_name + ' ' + user.last_name\"\r\n         [matTooltipPosition]=\"'below'\">\r\n        {{user.first_name[0] + user.last_name[0]}}\r\n    </div>\r\n\r\n    <div class=\"users-section__user icon-2\" *ngIf=\"users.length > 2\"\r\n         [drTooltip]=\"usersTemplate\"\r\n         [drTooltipPosition]=\"'bottom'\">\r\n        {{getLastUsers().length}}\r\n    </div>\r\n</div>\r\n\r\n<ng-template #usersTemplate>\r\n    <div *ngFor=\"let user of getLastUsers()\" class=\"users-popover-item\">\r\n        <div class=\"users-section__user\"\r\n             (click)=\"userClicked.emit()\"\r\n             [class]=\"user.class\">\r\n            {{user.first_name[0] + user.last_name[0]}}\r\n        </div>\r\n        <span class=\"username\">\r\n               {{user.first_name + ' ' + user.last_name}}\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n",
+                    template: "<div class=\"users-section\">\r\n    <div class=\"users-section__user\"\r\n         [class]=\"user.class\"\r\n         *ngFor=\"let user of getFirstUsers()\"\r\n         (click)=\"userClicked.emit()\"\r\n         [matTooltip]=\"user.first_name + ' ' + user.last_name\"\r\n         [matTooltipPosition]=\"'below'\">\r\n        {{user.first_name[0] + user.last_name[0]}}\r\n    </div>\r\n\r\n    <div class=\"users-section__user icon-2\" *ngIf=\"parsedUsers.length > 2\"\r\n         [drTooltip]=\"usersTemplate\"\r\n         [drTooltipPosition]=\"'bottom'\">\r\n        {{getLastUsers().length}}\r\n    </div>\r\n</div>\r\n\r\n<ng-template #usersTemplate>\r\n    <div *ngFor=\"let user of getLastUsers()\" class=\"users-popover-item\">\r\n        <div class=\"users-section__user\"\r\n             (click)=\"userClicked.emit()\"\r\n             [class]=\"user.class\">\r\n            {{user.first_name[0] + user.last_name[0]}}\r\n        </div>\r\n        <span class=\"username\">\r\n               {{user.first_name + ' ' + user.last_name}}\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{width:auto}.users-section{display:flex;position:absolute;height:28px;top:5px}.users-popover-item{display:flex;align-items:center;margin:12px}.users-popover-item .username{color:#51566f;font-size:14px}.users-popover-item .users-section__user{margin-right:8px}.users-section__user{display:flex;justify-content:center;align-items:center;height:28px;width:28px;border-radius:14px;background:red;color:#fff;font-size:12px}.users-section__user.icon-0{background-color:#7b61ff}.users-section__user.icon-1{background-color:#21b8f1}.users-section__user.icon-2{background-color:#2969b0}.users-section__user.icon-3{background-color:#51566f}.users-section__user.icon-4{background-color:#0061ff}.users-section__user:hover{cursor:pointer}.users-section__user:not(:first-child){margin-left:4px}\n"]
                 },] }
@@ -1807,7 +1814,7 @@
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
                     ],
                     changeDetection: i0.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:1.8px;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 = function () { return [
@@ -2113,7 +2120,7 @@
     DrDatePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'new-dr-date-picker',
-                    template: " <dr-input\r\n    (click)=\"datePicker.open()\"\r\n    [(ngModel)]=\"value\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [placeholder]=\"placeholder\"\r\n    [matDatePicker]=\"datePicker\"\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",
+                    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: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true }
@@ -2180,11 +2187,28 @@
         datePickerFormat: [{ type: i0.Input, args: ['drDatePickerFormat',] }]
     };
 
+    var DrPopoverRef = /** @class */ (function () {
+        function DrPopoverRef(overlayRef) {
+            this.overlayRef = overlayRef;
+            this.onClose$ = new rxjs.Subject();
+            this.onClose = this.onClose$.asObservable();
+        }
+        DrPopoverRef.prototype.close = function (res) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.onClose$.next(res);
+            this.onClose$.complete();
+        };
+        return DrPopoverRef;
+    }());
+
     var DrPopoverComponent = /** @class */ (function () {
-        function DrPopoverComponent(cdr, componentFactoryResolver, elementRef) {
+        function DrPopoverComponent(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
             this.cdr = cdr;
             this.componentFactoryResolver = componentFactoryResolver;
+            this.viewContainerRef = viewContainerRef;
             this.elementRef = elementRef;
+            this.popoverRef = popoverRef;
             this.class = '';
             this.isContentTemplate = false;
         }
@@ -2192,28 +2216,26 @@
             set: function (template) {
                 this.isContentTemplate = this.content instanceof i0.TemplateRef;
                 if (!this.isContentTemplate) {
-                    this.componentRef = template.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
-                    this.componentRef.instance['closePopover'] = this.closePopover;
-                    for (var key in this.contentContext) {
-                        this.componentRef.instance[key] = this.contentContext[key];
-                    }
-                }
-                else {
-                    this.contentContext.closePopover = this.closePopover;
+                    this.componentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
+                    Object.assign(this.componentRef.instance, this.contentContext);
+                    template.nativeElement.appendChild(this.componentRef.location.nativeElement);
                 }
                 this.cdr.detectChanges();
             },
             enumerable: false,
             configurable: true
         });
-        ;
-        DrPopoverComponent.prototype.removeOutside = function (e) {
-            var isTargetHost = this.hostRef.nativeElement === e.target;
+        DrPopoverComponent.prototype.clickOutside = function (e) {
+            var isTargetHost = this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target);
             var isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
             var isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
             var isTargetInSelect = e.target.closest('ng-dropdown-panel');
-            if (!isTargetHost && !isTargetInPopover && !isTargetInDatepicker && !isTargetInSelect) {
-                this.closePopover();
+            if (!isTargetHost
+                && !isTargetInPopover
+                && !isTargetInDatepicker
+                && !isTargetInSelect
+                && !this.manualClosing) {
+                this.popoverRef.close();
             }
         };
         return DrPopoverComponent;
@@ -2225,56 +2247,63 @@
                     animations: [
                         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"]
+                    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;overflow:auto}\n"]
                 },] }
     ];
     DrPopoverComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
         { type: i0.ComponentFactoryResolver },
-        { type: i0.ElementRef }
+        { type: i0.ViewContainerRef },
+        { type: i0.ElementRef },
+        { type: DrPopoverRef }
     ]; };
     DrPopoverComponent.propDecorators = {
         content: [{ type: i0.Input }],
         contentContext: [{ type: i0.Input }],
         class: [{ type: i0.Input }],
         hostRef: [{ type: i0.Input }],
-        closePopover: [{ type: i0.Input }],
-        popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ViewContainerRef },] }],
-        removeOutside: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
+        manualClosing: [{ type: i0.Input }],
+        popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef },] }],
+        clickOutside: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
     var DrPopoverDirective = /** @class */ (function () {
-        function DrPopoverDirective(overlay, vcRef, resolver, overlayPositionBuilder, elementRef) {
+        function DrPopoverDirective(overlay, overlayPositionBuilder, elementRef, injector) {
             this.overlay = overlay;
-            this.vcRef = vcRef;
-            this.resolver = resolver;
             this.overlayPositionBuilder = overlayPositionBuilder;
             this.elementRef = elementRef;
+            this.injector = injector;
             this.contentContext = {};
             this.position = 'bottom';
             this.class = '';
+            this.overlayConfig = {};
+            this.popoverClose = new i0.EventEmitter();
+            this.showStateChange = new i0.EventEmitter();
         }
         DrPopoverDirective.prototype.show = function () {
+            var _a;
             if (this.overlayRef) {
                 this.destroyPopover();
             }
             else {
                 this.renderPopover();
+                this.showStateChange.emit({ isShown: (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached() });
             }
         };
         DrPopoverDirective.prototype.renderPopover = function () {
+            var _this = this;
             var _a;
-            var positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef)
-                .withPositions([POPUP_POSITIONS[this.position]]);
-            this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
-            if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && this.content) {
-                this.contentRef = this.overlayRef.attach(new portal.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);
-            }
+            if (((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) || !this.content)
+                return;
+            this.overlayRef = this.createOverlay(this.overlayConfig || {});
+            this.drPopoverRef = new DrPopoverRef(this.overlayRef);
+            this.drPopoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
+                var _a;
+                _this.destroyPopover();
+                _this.popoverClose.emit(res);
+                _this.showStateChange.emit({ isShown: !!((_a = _this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) });
+            });
+            this.attachOverlayContainer();
         };
         DrPopoverDirective.prototype.destroyPopover = function () {
             if (this.overlayRef) {
@@ -2285,6 +2314,42 @@
                 this.contentRef.destroy();
                 this.contentRef = null;
             }
+            if (this.drPopoverRef) {
+                this.drPopoverRef.close();
+                this.drPopoverRef = null;
+            }
+        };
+        DrPopoverDirective.prototype.attachOverlayContainer = function () {
+            var componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(this.drPopoverRef));
+            this.contentRef = this.overlayRef.attach(componentPortal);
+            this.drPopoverRef.componentRef = this.contentRef;
+            this.contentRef.instance.content = this.content;
+            this.contentRef.instance.contentContext = Object.assign(Object.assign({}, this.contentContext), { closePopover: this.destroyPopover.bind(this) });
+            this.contentRef.instance.class = this.class + ' ' + this.position;
+            this.contentRef.instance.manualClosing = this.manualClosing;
+            this.contentRef.instance.hostRef = this.elementRef;
+        };
+        DrPopoverDirective.prototype.createOverlay = function (config) {
+            var overlayConfig = this.getOverlayConfig(config);
+            return this.overlay.create(overlayConfig);
+        };
+        DrPopoverDirective.prototype.getOverlayConfig = function (config) {
+            var positionStrategy = this.overlayPositionBuilder
+                .flexibleConnectedTo(this.elementRef)
+                .withPositions([POPUP_POSITIONS[this.position]]);
+            var overlayConfig = new overlay.OverlayConfig({
+                hasBackdrop: false,
+                panelClass: config === null || config === void 0 ? void 0 : config.panelClass,
+                scrollStrategy: this.overlay.scrollStrategies.noop(),
+                positionStrategy: positionStrategy,
+            });
+            return overlayConfig;
+        };
+        DrPopoverDirective.prototype.createInjector = function (previewOverlayRef) {
+            var injectionTokens = [
+                { provide: DrPopoverRef, useValue: previewOverlayRef },
+            ];
+            return i0.Injector.create({ providers: injectionTokens, parent: this.injector });
         };
         DrPopoverDirective.prototype.ngOnDestroy = function () {
             this.destroyPopover();
@@ -2298,16 +2363,19 @@
     ];
     DrPopoverDirective.ctorParameters = function () { return [
         { type: overlay.Overlay },
-        { type: i0.ViewContainerRef },
-        { type: i0.ComponentFactoryResolver },
         { type: overlay.OverlayPositionBuilder },
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.Injector }
     ]; };
     DrPopoverDirective.propDecorators = {
         content: [{ type: i0.Input, args: ['drPopover',] }],
         contentContext: [{ type: i0.Input, args: ['drPopoverContext',] }],
         position: [{ type: i0.Input, args: ['drPopoverPosition',] }],
         class: [{ type: i0.Input, args: ['drPopoverClass',] }],
+        overlayConfig: [{ type: i0.Input, args: ['drPopoverOverlayConfig',] }],
+        manualClosing: [{ type: i0.Input, args: ['drPopoverManualClosing',] }],
+        popoverClose: [{ type: i0.Output, args: ['drPopoverClose',] }],
+        showStateChange: [{ type: i0.Output, args: ['drPopoverShowStateChange',] }],
         show: [{ type: i0.HostListener, args: ['click',] }]
     };
 
@@ -2387,8 +2455,10 @@
             }
         };
         DrDropdownComponent.prototype.tooltipToShow = function (act) {
-            return act.toolTipIfDisabled && this.disabled(act) && act.toolTip
-                || act.toolTip && !act.toolTipIfDisabled ? act.toolTip : act.title;
+            if (act.toolTipIfDisabled || this.disabled(act) || !act.toolTip) {
+                return '';
+            }
+            return act.toolTip ? act.toolTip : act.title;
         };
         DrDropdownComponent.prototype.action = function (act) {
             if (!this.disabled(act)) {
@@ -2594,6 +2664,52 @@
                 },] }
     ];
 
+    var DrTabComponent = /** @class */ (function () {
+        function DrTabComponent() {
+        }
+        DrTabComponent.prototype.ngOnInit = function () {
+        };
+        return DrTabComponent;
+    }());
+    DrTabComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tab',
+                    template: "\n      <ng-template>\n          <ng-content></ng-content>\n      </ng-template>\n       "
+                },] }
+    ];
+    DrTabComponent.ctorParameters = function () { return []; };
+    DrTabComponent.propDecorators = {
+        label: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        contentTemplate: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
+    };
+
+    var DrTabsComponent = /** @class */ (function () {
+        function DrTabsComponent() {
+            this.selectedTab = 0;
+            this.selectedTabChange = new i0.EventEmitter();
+        }
+        DrTabsComponent.prototype.selectedIndexChange = function ($event) {
+            this.selectedTab = $event;
+            this.selectedTabChange.emit($event);
+        };
+        return DrTabsComponent;
+    }());
+    DrTabsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tabs',
+                    template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\r\n               (selectedIndexChange)=\"selectedIndexChange($event)\"\r\n               [class.with-radio]=\"withRadio\">\r\n  <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\r\n    <ng-container *ngIf=\"withRadio\">\r\n      <ng-template mat-tab-label>\r\n        <dr-radio-button [value]=\"index\"\r\n                         [(ngModel)]=\"selectedTab\">\r\n        </dr-radio-button>\r\n        {{tab.label}}\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n",
+                    styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Nunito Sans\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}\n"]
+                },] }
+    ];
+    DrTabsComponent.ctorParameters = function () { return []; };
+    DrTabsComponent.propDecorators = {
+        selectedTab: [{ type: i0.Input }],
+        withRadio: [{ type: i0.Input }],
+        selectedTabChange: [{ type: i0.Output }],
+        tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
+    };
+
     var components$2 = [DateTagComponent,
         DayTagComponent,
         WeekTagComponent,
@@ -2807,6 +2923,32 @@
                 },] }
     ];
 
+    var DrTabsModule = /** @class */ (function () {
+        function DrTabsModule() {
+        }
+        return DrTabsModule;
+    }());
+    DrTabsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        tabs.MatTabsModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        DrInputsModule
+                    ],
+                    exports: [
+                        DrTabsComponent,
+                        DrTabComponent
+                    ],
+                    providers: [],
+                    declarations: [
+                        DrTabsComponent,
+                        DrTabComponent
+                    ],
+                },] }
+    ];
+
     /* components */
 
     /**
@@ -2834,10 +2976,14 @@
     exports.DrPopoverComponent = DrPopoverComponent;
     exports.DrPopoverDirective = DrPopoverDirective;
     exports.DrPopoverModule = DrPopoverModule;
+    exports.DrPopoverRef = DrPopoverRef;
     exports.DrSelectComponent = DrSelectComponent;
     exports.DrSpinnerComponent = DrSpinnerComponent;
     exports.DrSpinnerDirective = DrSpinnerDirective;
     exports.DrSpinnerModule = DrSpinnerModule;
+    exports.DrTabComponent = DrTabComponent;
+    exports.DrTabsComponent = DrTabsComponent;
+    exports.DrTabsModule = DrTabsModule;
     exports.DrTagComponent = DrTagComponent;
     exports.DrTagModule = DrTagModule;
     exports.DrToggleComponent = DrToggleComponent;