@datarailsshared/datarailsshared 1.3.20 → 1.3.23

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

@@ -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('rxjs'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), 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', 'rxjs', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', '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.rxjs, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, 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, rxjs, animations, i1, portal, common, operators, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { '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/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), 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/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@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.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, 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, common, rxjs, operators, animations, i1, portal, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1162,6 +1162,7 @@
     var RadioButtonComponent = /** @class */ (function () {
         function RadioButtonComponent(cdr) {
             this.cdr = cdr;
+            this.valueChange = new i0.EventEmitter();
             this.onChange = (function (onchanges) { });
             this.onTouched = function () { };
         }
@@ -1189,6 +1190,14 @@
         };
         RadioButtonComponent.prototype.valueChanged = function (event) {
             this.onChange(this.modelValue);
+            this.valueChange.emit(this.value);
+        };
+        RadioButtonComponent.prototype._setName = function (name) {
+            this.name = name;
+            this.cdr.markForCheck();
+        };
+        RadioButtonComponent.prototype._markForCheck = function () {
+            this.cdr.markForCheck();
         };
         return RadioButtonComponent;
     }());
@@ -1204,8 +1213,7 @@
                         }
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.ShadowDom,
-                    styles: ["label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #C3C4CE;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:white;border-color:#579bf2;color:#579bf2}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23579BF2\"/></svg> ');background-repeat:no-repeat;background-position:center;color:#579bf2}label input:disabled+span:before{border-color:#bcbcbc}label input[disabled]:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23BCBCBC\"/></svg> ');border-color:#bcbcbc}label span:hover:before{border-color:#85889c}\n"]
+                    styles: [":host{display:flex;line-height:22px}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #C3C4CE;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:white;border-color:#579bf2;color:#579bf2}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23579BF2\"/></svg> ');background-repeat:no-repeat;background-position:center;color:#579bf2}label input:disabled+span:before{border-color:#bcbcbc}label input[disabled]:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23BCBCBC\"/></svg> ');border-color:#bcbcbc}label span:hover:before{border-color:#85889c}\n"]
                 },] }
     ];
     RadioButtonComponent.ctorParameters = function () { return [
@@ -1214,17 +1222,205 @@
     RadioButtonComponent.propDecorators = {
         disabled: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
-        _value: [{ type: i0.Input, args: ['value',] }]
+        _value: [{ type: i0.Input, args: ['value',] }],
+        valueChange: [{ type: i0.Output }]
+    };
+
+    var RadioGroupComponent = /** @class */ (function () {
+        function RadioGroupComponent(hostElement, platformId, document) {
+            this.hostElement = hostElement;
+            this.platformId = platformId;
+            this.document = document;
+            this.destroy$ = new rxjs.Subject();
+            this.valueChange = new i0.EventEmitter();
+            this.onChange = function (value) { };
+            this.onTouched = function () { };
+        }
+        Object.defineProperty(RadioGroupComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                this._value = value;
+                this.updateValues();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(RadioGroupComponent.prototype, "name", {
+            get: function () {
+                return this._name;
+            },
+            set: function (name) {
+                this._name = name;
+                this.updateNames();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(RadioGroupComponent.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (disabled) {
+                this._disabled = !!disabled;
+                this.updateDisabled();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RadioGroupComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            // In case option 'name' isn't set on nb-radio component,
+            // we need to set it's name right away, so it won't overlap with options
+            // without names from other radio groups. Otherwise they all would have
+            // same name and will be considered as options from one group so only the
+            // last option will stay selected.
+            this.updateNames();
+            this.radios.changes
+                .pipe(operators.startWith(this.radios), 
+            // 'changes' emit during change detection run and we can't update
+            // option properties right of since they already was initialized.
+            // Instead we schedule microtask to update radios after change detection
+            // run is finished and trigger one more change detection run.
+            operators.switchMap(function (radios) { return rxjs.from(Promise.resolve(radios)); }), operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.updateAndSubscribeToRadios(); });
+        };
+        RadioGroupComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        RadioGroupComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        RadioGroupComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        RadioGroupComponent.prototype.writeValue = function (value) {
+            this.value = value;
+        };
+        RadioGroupComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        RadioGroupComponent.prototype.updateAndSubscribeToRadios = function () {
+            this.updateValueFromCheckedOption();
+            this.updateNames();
+            this.updateValues();
+            this.updateDisabled();
+            this.subscribeOnRadiosValueChange();
+            this.subscribeOnRadiosBlur();
+        };
+        RadioGroupComponent.prototype.updateNames = function () {
+            var _this = this;
+            if (this.radios) {
+                this.radios.forEach(function (radio) { return radio._setName(_this.name); });
+            }
+        };
+        RadioGroupComponent.prototype.updateValues = function () {
+            var _this = this;
+            this.updateAndMarkForCheckRadios(function (radio) {
+                if (radio.value === _this.value) {
+                    radio.modelValue = radio.value;
+                }
+            });
+        };
+        RadioGroupComponent.prototype.updateDisabled = function () {
+            var _this = this;
+            if (typeof this.disabled !== 'undefined') {
+                this.updateAndMarkForCheckRadios(function (radio) { return radio.disabled = _this.disabled; });
+            }
+        };
+        RadioGroupComponent.prototype.subscribeOnRadiosValueChange = function () {
+            var _this = this;
+            if (!this.radios || !this.radios.length) {
+                return;
+            }
+            rxjs.merge.apply(void 0, __spreadArray([], __read(this.radios.map(function (radio) { return radio.valueChange; })))).pipe(operators.takeUntil(rxjs.merge(this.radios.changes, this.destroy$)))
+                .subscribe(function (value) {
+                _this.writeValue(value);
+                _this.propagateValue(value);
+            });
+        };
+        RadioGroupComponent.prototype.propagateValue = function (value) {
+            this.valueChange.emit(value);
+            this.onChange(value);
+        };
+        RadioGroupComponent.prototype.subscribeOnRadiosBlur = function () {
+            var _this = this;
+            var hasNoRadios = !this.radios || !this.radios.length;
+            if (!common.isPlatformBrowser(this.platformId) || hasNoRadios) {
+                return;
+            }
+            var hostElement = this.hostElement.nativeElement;
+            rxjs.fromEvent(hostElement, 'focusin')
+                .pipe(operators.filter(function (event) { return hostElement.contains(event.target); }), operators.switchMap(function () { return rxjs.merge(rxjs.fromEvent(_this.document, 'focusin'), rxjs.fromEvent(_this.document, 'click')); }), operators.filter(function (event) { return !hostElement.contains(event.target); }), operators.takeUntil(rxjs.merge(this.radios.changes, this.destroy$)))
+                .subscribe(function () { return _this.onTouched(); });
+        };
+        RadioGroupComponent.prototype.updateAndMarkForCheckRadios = function (updateFn) {
+            if (this.radios) {
+                this.radios.forEach(function (radio) {
+                    updateFn(radio);
+                    radio._markForCheck();
+                });
+            }
+        };
+        RadioGroupComponent.prototype.updateValueFromCheckedOption = function () {
+            var checkedRadio = this.radios.find(function (radio) { return radio.modelValue; });
+            var isValueMissing = this.value === undefined || this.value === null;
+            if (checkedRadio && isValueMissing && checkedRadio.value !== this.value) {
+                this.value = checkedRadio.value;
+            }
+        };
+        return RadioGroupComponent;
+    }());
+    RadioGroupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-radio-group',
+                    template: "\n    <ng-content select=\"dr-radio-button\"></ng-content>",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return RadioGroupComponent; }),
+                            multi: true,
+                        },
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    RadioGroupComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
+    ]; };
+    RadioGroupComponent.propDecorators = {
+        value: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        radios: [{ type: i0.ContentChildren, args: [RadioButtonComponent, { descendants: true },] }],
+        valueChange: [{ type: i0.Output }]
     };
 
     var CheckboxComponent = /** @class */ (function () {
         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 +1434,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 +1447,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 +1461,8 @@
     CheckboxComponent.propDecorators = {
         checkedStatus: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
+        indeterminate: [{ type: i0.Input }],
         checkedChange: [{ type: i0.Output }]
     };
 
@@ -1413,7 +1612,7 @@
     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)=\"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",
+                    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       [min]=\"min\"\r\n       [step]=\"step\"\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; }),
@@ -1436,6 +1635,8 @@
         placeholder: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         clearable: [{ type: i0.Input }],
+        min: [{ type: i0.Input }],
+        step: [{ type: i0.Input }],
         blur: [{ type: i0.Output }],
         elementClass: [{ type: i0.HostBinding, args: ['class',] }],
         searchHandler: [{ type: i0.Output }],
@@ -1512,28 +1713,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 +1740,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    </div>\r\n\r\n    <div *ngFor=\"let user of getFirstUsers()\"\r\n         class=\"users-section__user\"\r\n         [class]=\"'icon-' + user.colorNumber + ' ' + user.status\"\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.online:after,.users-section__user.offline:after,.users-section__user.warning:after{content:\"\";display:flex;width:8px;height:8px;position:absolute;border-radius:4px;top:-2px;right:0}.users-section__user.online:after{background:#03A678}.users-section__user.offline:after{background:#DE2833}.users-section__user.warning:after{background:#FDA014}\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',
@@ -1796,6 +2009,7 @@
         function DrToggleComponent(cdr) {
             this.cdr = cdr;
             this._disabled = false;
+            this._elementClass = [];
             this.checkedChange = new i0.EventEmitter();
             this.onChange = function () { };
             this.onTouched = function () { };
@@ -1807,6 +2021,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DrToggleComponent.prototype, "elementClass", {
+            get: function () { return this._elementClass.join(' '); },
+            enumerable: false,
+            configurable: true
+        });
+        DrToggleComponent.prototype.ngAfterViewInit = function () {
+            if (this.toggleTitleRight) {
+                this._elementClass.push('toggle-label-alignment');
+            }
+        };
         DrToggleComponent.prototype.writeValue = function (value) {
             this.checkedStatus = value;
             this.cdr.markForCheck();
@@ -1836,7 +2060,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;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"]
+                    styles: [":host{display:flex;justify-content:space-between;align-items:center}:host.toggle-label-alignment{justify-content:start}: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 [
@@ -1848,7 +2072,8 @@
         successType: [{ type: i0.Input }],
         checkedStatus: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
-        checkedChange: [{ type: i0.Output }]
+        checkedChange: [{ type: i0.Output }],
+        elementClass: [{ type: i0.HostBinding, args: ['class',] }]
     };
 
     var DrToggleButtonComponent = /** @class */ (function () {
@@ -2592,12 +2817,14 @@
                 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;
                         if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
                             item.childOptions = {
                                 list: item.children,
+                                class: item.childOptions.class,
                                 position: 'child'
                             };
                         }
@@ -2670,9 +2897,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 +2934,7 @@
                     option: option,
                     position: this.position,
                     list: this.drDropdown,
+                    class: this.drDropdownClass
                 });
             }
         };
@@ -2750,6 +2978,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 +2994,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 +3039,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 = 3;
                 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');
             }
         };
@@ -2981,6 +3216,7 @@
     var components$1 = [
         DrButtonComponent,
         RadioButtonComponent,
+        RadioGroupComponent,
         CheckboxComponent,
         DrInputComponent,
         DrSelectComponent,
@@ -2996,9 +3232,7 @@
     }());
     DrInputsModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [
-                        components$1,
-                    ],
+                    declarations: components$1,
                     exports: components$1,
                     imports: [
                         forms.FormsModule,
@@ -3040,10 +3274,12 @@
     DrAvatarModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [
-                        DrAvatarComponent
+                        DrAvatarComponent,
+                        DrAvatarPipe
                     ],
                     exports: [
-                        DrAvatarComponent
+                        DrAvatarComponent,
+                        DrAvatarPipe
                     ],
                     imports: [
                         tooltip.MatTooltipModule,
@@ -3160,6 +3396,7 @@
     exports.DayTagComponent = DayTagComponent;
     exports.DrAvatarComponent = DrAvatarComponent;
     exports.DrAvatarModule = DrAvatarModule;
+    exports.DrAvatarPipe = DrAvatarPipe;
     exports.DrButtonComponent = DrButtonComponent;
     exports.DrDatePickerComponent = DrDatePickerComponent;
     exports.DrDatePickerFormatDirective = DrDatePickerFormatDirective;
@@ -3196,6 +3433,7 @@
     exports.MonthTagComponent = MonthTagComponent;
     exports.QuarterTagComponent = QuarterTagComponent;
     exports.RadioButtonComponent = RadioButtonComponent;
+    exports.RadioGroupComponent = RadioGroupComponent;
     exports.TooltipComponent = TooltipComponent;
     exports.WeekTagComponent = WeekTagComponent;
     exports.YearTagComponent = YearTagComponent;