@datarailsshared/datarailsshared 1.3.20 → 1.3.21

package/assets/styles/img/default_avatar.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#BCBCBC"/>
+<path d="M11.9993 11.9998C13.6108 11.9998 14.916 10.691 14.916 9.08317C14.916 7.47171 13.6108 6.1665 11.9993 6.1665C10.3879 6.1665 9.08268 7.47171 9.08268 9.08317C9.08268 10.691 10.3879 11.9998 11.9993 11.9998ZM11.9993 13.4582C10.0561 13.4582 6.16602 14.4316 6.16602 16.3748V17.8332H17.8327V16.3748C17.8327 14.4316 13.9426 13.4582 11.9993 13.4582Z" fill="white"/>
+</svg>

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1221,10 +1221,23 @@
         function CheckboxComponent(cdr) {
             this.cdr = cdr;
             this.disabled = false;
+            this.icon = '';
+            this._indeterminate = false;
             this.checkedChange = new i0.EventEmitter();
             this.onChange = function () { };
             this.onTouched = function () { };
         }
+        Object.defineProperty(CheckboxComponent.prototype, "indeterminate", {
+            get: function () {
+                return this._indeterminate;
+            },
+            set: function (value) {
+                this._indeterminate = !!value;
+                this.cdr.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
         CheckboxComponent.prototype.writeValue = function (value) {
             this.checkedStatus = value;
             this.cdr.markForCheck();
@@ -1238,10 +1251,12 @@
         CheckboxComponent.prototype.setDisabledState = function (isDisabled) {
             this.disabled = isDisabled;
         };
-        CheckboxComponent.prototype.setValue = function () {
-            this.checkedStatus = !this.checkedStatus;
-            this.onChange(this.checkedStatus);
+        CheckboxComponent.prototype.setValue = function (event) {
+            var input = event.target;
+            this.checkedStatus = input.checked;
             this.checkedChange.emit(this.checkedStatus);
+            this.onChange(this.checkedStatus);
+            this.indeterminate = input.indeterminate;
             this.onTouched();
         };
         return CheckboxComponent;
@@ -1249,13 +1264,12 @@
     CheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-checkbox',
-                    template: "<label>\r\n  <input\r\n    type=\"checkbox\"\r\n    [checked]=\"checkedStatus\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"setValue()\">\r\n  <span>\r\n      <ng-content></ng-content>\r\n  </span>\r\n</label>\r\n",
+                    template: "<label>\r\n  <input type=\"checkbox\"\r\n         [checked]=\"checkedStatus\"\r\n         [disabled]=\"disabled\"\r\n         (change)=\"setValue($event)\"\r\n         (click)=\"$event.stopPropagation()\">\r\n  <span [class]=\"icon\" [class.indeterminate]=\"indeterminate\">\r\n      <ng-content></ng-content>\r\n  </span>\r\n</label>\r\n",
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.ShadowDom,
-                    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"]
+                    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;width:0}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:checked+span.cross:before,label:hover input:checked+span.cross: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\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8, <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.25 12C6.25 11.5858 6.58579 11.25 7 11.25L17 11.25C17.4142 11.25 17.75 11.5858 17.75 12C17.75 12.4142 17.4142 12.75 17 12.75L7 12.75C6.58579 12.75 6.25 12.4142 6.25 12Z\" fill=\"white\"/></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 = function () { return [
@@ -1264,6 +1278,8 @@
     CheckboxComponent.propDecorators = {
         checkedStatus: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
+        indeterminate: [{ type: i0.Input }],
         checkedChange: [{ type: i0.Output }]
     };
 
@@ -1512,28 +1528,24 @@
 
     var DrAvatarComponent = /** @class */ (function () {
         function DrAvatarComponent() {
+            this.warning = false;
             this.userClicked = new i0.EventEmitter();
             this.parsedUsers = [];
         }
         Object.defineProperty(DrAvatarComponent.prototype, "users", {
-            set: function (user) {
-                if (user) {
-                    this.parsedUsers = this.parseUsers(user);
+            set: function (users) {
+                if (users) {
+                    this.parsedUsers = Array.isArray(users) ? users : [users];
+                    this.parsedUsers.forEach(function (user, index) {
+                        if (!user.colorNumber) {
+                            user.colorNumber = index % 5;
+                        }
+                    });
                 }
             },
             enumerable: false,
             configurable: true
         });
-        DrAvatarComponent.prototype.ngOnChanges = function (changes) {
-            var _this = this;
-            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.parsedUsers.slice(0, 2);
         };
@@ -1543,25 +1555,41 @@
             }
             return [];
         };
-        DrAvatarComponent.prototype.getRandomValue = function (limit) {
-            return ~~(limit * Math.random());
-        };
         return DrAvatarComponent;
     }());
     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=\"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",
+                    template: "<div class=\"users-section\">\r\n    <div *ngIf=\"!parsedUsers.length\"\r\n         class=\"users-section__default\"\r\n         [drTooltip]=\"usersTemplate\"\r\n         [drTooltipPosition]=\"'bottom'\">\r\n        {{getLastUsers().length}}\r\n    </div>\r\n\r\n    <div *ngFor=\"let user of getFirstUsers()\"\r\n         class=\"users-section__user\"\r\n         [class]=\"'icon-' + user.colorNumber\"\r\n         [class.warning]=\"warning && warning[user.email]\"\r\n         (click)=\"userClicked.emit()\"\r\n         [matTooltip]=\"user | drAvatar\"\r\n         [matTooltipPosition]=\"'below'\">\r\n        {{user | drAvatar: 'initials'}}\r\n    </div>\r\n\r\n    <div *ngIf=\"parsedUsers.length > 2\"\r\n         class=\"users-section__user icon-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 | drAvatar: 'initials'}}\r\n        </div>\r\n        <span class=\"username\">\r\n               {{user | drAvatar}}\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"]
+                    styles: [":host{width:auto}.users-section{display:flex;height:28px}.users-section__default{display:flex;height:28px;width:28px;border-radius:14px;background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Crect width%3D%2224%22 height%3D%2224%22 rx%3D%2212%22 fill%3D%22%23BCBCBC%22%2F%3E%0D%3Cpath d%3D%22M11.9993 11.9998C13.6108 11.9998 14.916 10.691 14.916 9.08317C14.916 7.47171 13.6108 6.1665 11.9993 6.1665C10.3879 6.1665 9.08268 7.47171 9.08268 9.08317C9.08268 10.691 10.3879 11.9998 11.9993 11.9998ZM11.9993 13.4582C10.0561 13.4582 6.16602 14.4316 6.16602 16.3748V17.8332H17.8327V16.3748C17.8327 14.4316 13.9426 13.4582 11.9993 13.4582Z%22 fill%3D%22white%22%2F%3E%0D%3C%2Fsvg%3E%0D\") no-repeat}.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{position:relative;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}.users-section__user.warning:after{content:\"\";display:flex;width:8px;height:8px;position:absolute;background:#FDA014;border-radius:4px;top:-2px;right:0}\n"]
                 },] }
     ];
     DrAvatarComponent.ctorParameters = function () { return []; };
     DrAvatarComponent.propDecorators = {
         users: [{ type: i0.Input }],
+        warning: [{ type: i0.Input }],
         userClicked: [{ type: i0.Output }]
     };
 
+    var DrAvatarPipe = /** @class */ (function () {
+        function DrAvatarPipe() {
+        }
+        DrAvatarPipe.prototype.transform = function (item, type) {
+            if (type === void 0) { type = 'full'; }
+            if (type === 'initials') {
+                return (item.first_name && item.last_name ? (item.first_name[0] + item.last_name[0]) : item.email[0]).toUpperCase();
+            }
+            return item.first_name && item.last_name ? (item.first_name + ' ' + item.last_name) : item.email;
+        };
+        return DrAvatarPipe;
+    }());
+    DrAvatarPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'drAvatar'
+                },] }
+    ];
+
     var POPUP_POSITIONS = {
         top: {
             originX: 'center',
@@ -2592,6 +2620,7 @@
                 if (data) {
                     this.option = data.option;
                     this.position = data.position;
+                    this.containerClass = data.class;
                     this.list = data.list || [];
                     this.list.forEach(function (item) {
                         var _a;
@@ -2670,9 +2699,9 @@
     DrDropdownComponent.decorators = [
         { type: i0.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             [class.item-selected]=\"selected(act)\">\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               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, 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",
+                    template: "<div #menuContainer\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\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             [class.item-selected]=\"selected(act)\">\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               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, 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: i0.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:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item .showOnHover{visibility:hidden}.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"]
+                    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:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item .showOnHover{visibility:hidden}.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-bottom-right{transform:translateY(45%)}.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 = function () { return [
@@ -2707,6 +2736,7 @@
                     option: option,
                     position: this.position,
                     list: this.drDropdown,
+                    class: this.drDropdownClass
                 });
             }
         };
@@ -2750,6 +2780,7 @@
     DrDropdownDirective.propDecorators = {
         position: [{ type: i0.Input }],
         drDropdown: [{ type: i0.Input }],
+        drDropdownClass: [{ type: i0.Input }],
         contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
         elementClick: [{ type: i0.HostListener, args: ['click',] }],
         documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
@@ -2765,14 +2796,16 @@
             setTimeout(this.calculatePosition.bind(this), 1);
         };
         DrDropdownPositionDirective.prototype.calculatePosition = function () {
+            var xDifference = 0;
             var defaultDelta = 10;
             var defaultPadding = 0;
             if (this.position === 'child') {
                 defaultDelta = 0;
                 defaultPadding = 10;
+                xDifference = this.el.nativeElement.parentElement.parentElement.offsetWidth - this.el.nativeElement.offsetWidth;
                 var parentRect = this.el.nativeElement.parentElement.parentElement.getBoundingClientRect();
                 this.position = {
-                    x: this.el.nativeElement.parentElement.parentElement.offsetWidth + 2,
+                    x: this.el.nativeElement.offsetWidth,
                     y: this.el.nativeElement.parentElement.parentElement.offsetTop - 9,
                     clientX: parentRect.x + this.el.nativeElement.parentElement.parentElement.offsetWidth,
                     clientY: parentRect.y
@@ -2808,17 +2841,21 @@
                             : 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.position === 'right' ? 'content-right'
+                                            : this.position === 'bottom-right' ? 'content-bottom-right' : '';
                 this.renderer.addClass(this.el.nativeElement, className);
                 this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
             }
             else {
+                var defaultChildPadding = 5;
                 var widthMoreWindowRight = window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
-                var deltaWidth = widthMoreWindowRight < 0 ? widthMoreWindowRight : defaultDelta;
                 var widthMoreWindowBottom = window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
+                var calculatedHorizantallyPos = widthMoreWindowRight < 0
+                    ? -this.position.x + -defaultChildPadding
+                    : this.position.x + defaultChildPadding + xDifference;
                 var 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, 'left', (calculatedHorizantallyPos) + 'px');
                 this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
             }
         };
@@ -2996,9 +3033,7 @@
     }());
     DrInputsModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [
-                        components$1,
-                    ],
+                    declarations: components$1,
                     exports: components$1,
                     imports: [
                         forms.FormsModule,
@@ -3040,10 +3075,12 @@
     DrAvatarModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [
-                        DrAvatarComponent
+                        DrAvatarComponent,
+                        DrAvatarPipe
                     ],
                     exports: [
-                        DrAvatarComponent
+                        DrAvatarComponent,
+                        DrAvatarPipe
                     ],
                     imports: [
                         tooltip.MatTooltipModule,
@@ -3160,6 +3197,7 @@
     exports.DayTagComponent = DayTagComponent;
     exports.DrAvatarComponent = DrAvatarComponent;
     exports.DrAvatarModule = DrAvatarModule;
+    exports.DrAvatarPipe = DrAvatarPipe;
     exports.DrButtonComponent = DrButtonComponent;
     exports.DrDatePickerComponent = DrDatePickerComponent;
     exports.DrDatePickerFormatDirective = DrDatePickerFormatDirective;