@datarailsshared/datarailsshared 1.3.21 → 1.3.24

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,7 +1222,182 @@
     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 () {
@@ -1429,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; }),
@@ -1452,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 }],
@@ -1560,9 +1745,9 @@
     DrAvatarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-avatar',
-                    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",
+                    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;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"]
+                    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 []; };
@@ -1824,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 () { };
@@ -1835,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();
@@ -1864,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 [
@@ -1876,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 () {
@@ -2627,6 +2824,7 @@
                         if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
                             item.childOptions = {
                                 list: item.children,
+                                class: item.childOptions.class,
                                 position: 'child'
                             };
                         }
@@ -2847,7 +3045,7 @@
                 this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
             }
             else {
-                var defaultChildPadding = 5;
+                var defaultChildPadding = 3;
                 var widthMoreWindowRight = window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
                 var widthMoreWindowBottom = window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
                 var calculatedHorizantallyPos = widthMoreWindowRight < 0
@@ -3018,6 +3216,7 @@
     var components$1 = [
         DrButtonComponent,
         RadioButtonComponent,
+        RadioGroupComponent,
         CheckboxComponent,
         DrInputComponent,
         DrSelectComponent,
@@ -3234,6 +3433,7 @@
     exports.MonthTagComponent = MonthTagComponent;
     exports.QuarterTagComponent = QuarterTagComponent;
     exports.RadioButtonComponent = RadioButtonComponent;
+    exports.RadioGroupComponent = RadioGroupComponent;
     exports.TooltipComponent = TooltipComponent;
     exports.WeekTagComponent = WeekTagComponent;
     exports.YearTagComponent = YearTagComponent;