@datarailsshared/datarailsshared 1.3.20 → 1.3.21

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,5 +1,5 @@
 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, Injector, Injectable, Pipe, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, Inject, ViewChild, Optional, Injector, Injectable, ContentChildren, 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';
@@ -839,10 +839,19 @@ class CheckboxComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.disabled = false;
+        this.icon = '';
+        this._indeterminate = false;
         this.checkedChange = new EventEmitter();
         this.onChange = () => { };
         this.onTouched = () => { };
     }
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    set indeterminate(value) {
+        this._indeterminate = !!value;
+        this.cdr.markForCheck();
+    }
     writeValue(value) {
         this.checkedStatus = value;
         this.cdr.markForCheck();
@@ -856,23 +865,24 @@ class CheckboxComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    setValue() {
-        this.checkedStatus = !this.checkedStatus;
-        this.onChange(this.checkedStatus);
+    setValue(event) {
+        const input = event.target;
+        this.checkedStatus = input.checked;
         this.checkedChange.emit(this.checkedStatus);
+        this.onChange(this.checkedStatus);
+        this.indeterminate = input.indeterminate;
         this.onTouched();
     }
 }
 CheckboxComponent.decorators = [
     { type: 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: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: 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 = () => [
@@ -881,6 +891,8 @@ CheckboxComponent.ctorParameters = () => [
 CheckboxComponent.propDecorators = {
     checkedStatus: [{ type: Input }],
     disabled: [{ type: Input }],
+    icon: [{ type: Input }],
+    indeterminate: [{ type: Input }],
     checkedChange: [{ type: Output }]
 };
 
@@ -1110,23 +1122,20 @@ DrSelectComponent.propDecorators = {
 
 class DrAvatarComponent {
     constructor() {
+        this.warning = false;
         this.userClicked = new EventEmitter();
         this.parsedUsers = [];
     }
-    set users(user) {
-        if (user) {
-            this.parsedUsers = this.parseUsers(user);
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.users) {
-            this.getFirstUsers().forEach((user) => user.class = `icon-${this.getRandomValue(5)}`);
-            this.getLastUsers().forEach((user) => user.class = `icon-${this.getRandomValue(5)}`);
+    set users(users) {
+        if (users) {
+            this.parsedUsers = Array.isArray(users) ? users : [users];
+            this.parsedUsers.forEach((user, index) => {
+                if (!user.colorNumber) {
+                    user.colorNumber = index % 5;
+                }
+            });
         }
     }
-    parseUsers(value) {
-        return Array.isArray(value) ? value : Array.of(value);
-    }
     getFirstUsers() {
         return this.parsedUsers.slice(0, 2);
     }
@@ -1136,24 +1145,36 @@ class DrAvatarComponent {
         }
         return [];
     }
-    getRandomValue(limit) {
-        return ~~(limit * Math.random());
-    }
 }
 DrAvatarComponent.decorators = [
     { type: 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: 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 = () => [];
 DrAvatarComponent.propDecorators = {
     users: [{ type: Input }],
+    warning: [{ type: Input }],
     userClicked: [{ type: Output }]
 };
 
+class DrAvatarPipe {
+    transform(item, 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;
+    }
+}
+DrAvatarPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'drAvatar'
+            },] }
+];
+
 const POPUP_POSITIONS = {
     top: {
         originX: 'center',
@@ -2109,6 +2130,7 @@ class DrDropdownComponent {
         if (data) {
             this.option = data.option;
             this.position = data.position;
+            this.containerClass = data.class;
             this.list = data.list || [];
             this.list.forEach(item => {
                 var _a;
@@ -2183,9 +2205,9 @@ class DrDropdownComponent {
 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             [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: 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 = () => [
@@ -2220,6 +2242,7 @@ class DrDropdownDirective {
                 option,
                 position: this.position,
                 list: this.drDropdown,
+                class: this.drDropdownClass
             });
         }
     }
@@ -2262,6 +2285,7 @@ DrDropdownDirective.ctorParameters = () => [
 DrDropdownDirective.propDecorators = {
     position: [{ type: Input }],
     drDropdown: [{ type: Input }],
+    drDropdownClass: [{ type: Input }],
     contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
     elementClick: [{ type: HostListener, args: ['click',] }],
     documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
@@ -2277,14 +2301,16 @@ class DrDropdownPositionDirective {
         setTimeout(this.calculatePosition.bind(this), 1);
     }
     calculatePosition() {
+        let xDifference = 0;
         let defaultDelta = 10;
         let defaultPadding = 0;
         if (this.position === 'child') {
             defaultDelta = 0;
             defaultPadding = 10;
+            xDifference = this.el.nativeElement.parentElement.parentElement.offsetWidth - this.el.nativeElement.offsetWidth;
             const 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
@@ -2320,17 +2346,21 @@ class DrDropdownPositionDirective {
                         : 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 {
+            const defaultChildPadding = 5;
             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 calculatedHorizantallyPos = widthMoreWindowRight < 0
+                ? -this.position.x + -defaultChildPadding
+                : this.position.x + defaultChildPadding + xDifference;
             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, 'left', (calculatedHorizantallyPos) + 'px');
             this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
         }
     }
@@ -2493,9 +2523,7 @@ class DrInputsModule {
 }
 DrInputsModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [
-                    components$1,
-                ],
+                declarations: components$1,
                 exports: components$1,
                 imports: [
                     FormsModule,
@@ -2531,10 +2559,12 @@ class DrAvatarModule {
 DrAvatarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
-                    DrAvatarComponent
+                    DrAvatarComponent,
+                    DrAvatarPipe
                 ],
                 exports: [
-                    DrAvatarComponent
+                    DrAvatarComponent,
+                    DrAvatarPipe
                 ],
                 imports: [
                     MatTooltipModule,
@@ -2632,5 +2662,5 @@ DrTabsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
+export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, 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