@datarailsshared/datarailsshared 1.3.37 → 1.3.40

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -2138,6 +2138,8 @@
         function DrToggleButtonComponent(cdr) {
             this.cdr = cdr;
             this._disabled = false;
+            this.bindLabel = null;
+            this.bindValue = null;
             this.onChange = function () { };
             this.onTouched = function () { };
         }
@@ -2162,7 +2164,7 @@
             this._disabled = isDisabled;
         };
         DrToggleButtonComponent.prototype.setValue = function (item) {
-            this.selectedValue = item;
+            this.selectedValue = item[this.bindValue] || item;
             this.onChange(this.selectedValue);
             this.onTouched();
             this.cdr.markForCheck();
@@ -2172,12 +2174,12 @@
     DrToggleButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-toggle-button',
-                    template: "<div class=\"toggle-container\" [class.disabled]=\"this._disabled \">\r\n    <div *ngFor=\"let item of items\" (click)=\"setValue(item)\"\r\n         [class.selected]=\"item === selectedValue\"\r\n         class=\"toggle-container__item\">\r\n        {{item.name || item}}\r\n    </div>\r\n</div>\r\n",
+                    template: "<div class=\"toggle-container\" [class.disabled]=\"this._disabled \">\r\n    <div *ngFor=\"let item of items\" (click)=\"setValue(item)\"\r\n         [class.selected]=\"item[bindValue] === selectedValue || item === selectedValue\"\r\n         class=\"toggle-container__item\">\r\n        {{item[bindLabel] || item.name || item}}\r\n    </div>\r\n</div>\r\n",
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return DrToggleButtonComponent; }), multi: true }
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".toggle-container{display:flex;flex-wrap:nowrap;background:#F6F7F8;border:1px solid #C3C4CE;box-sizing:border-box;border-radius:20px;height:28px}.toggle-container.disabled{pointer-events:none}.toggle-container__item{height:28px;display:flex;align-items:center;justify-content:center;padding:4px 16px;border-radius:20px;margin:-1px;cursor:pointer}.toggle-container__item.selected{background:#F3F7FF;border:1px solid #579BF2;color:#0061ff;font-weight:600}\n"]
+                    styles: [".toggle-container{display:flex;flex-wrap:nowrap;background:#F6F7F8;border:1px solid #C3C4CE;box-sizing:border-box;border-radius:20px;height:28px}.toggle-container.disabled{pointer-events:none}.toggle-container__item{height:28px;display:flex;align-items:center;justify-content:center;padding:4px 16px;border-radius:20px;margin:-1px;cursor:pointer;font-weight:400;font-size:12px;line-height:20px;white-space:nowrap;color:#4e566c}.toggle-container__item.selected{font-weight:400;background:#F2F2FB;border:1px solid #7F7FDD;color:#25258c}\n"]
                 },] }
     ];
     DrToggleButtonComponent.ctorParameters = function () { return [
@@ -2185,6 +2187,8 @@
     ]; };
     DrToggleButtonComponent.propDecorators = {
         items: [{ type: i0.Input }],
+        bindLabel: [{ type: i0.Input }],
+        bindValue: [{ type: i0.Input }],
         selectedValue: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }]
     };
@@ -3178,12 +3182,16 @@
             }
             else {
                 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 widthMoreWindowRight = window.innerWidth - (this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding);
+                var widthMoreWindowBottom = window.innerHeight - (this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding);
+                var spaceRightAmount = window.innerWidth - (this.position.clientX + this.el.nativeElement.offsetWidth + defaultPadding);
                 this.widthMoreRight = !(widthMoreWindowRight < 0);
                 var calculatedHorizantallyPos = widthMoreWindowRight < 0
                     ? -this.position.x + -defaultChildPadding
                     : this.position.x + defaultChildPadding + xDifference;
+                if (spaceRightAmount <= 0) {
+                    calculatedHorizantallyPos -= this.el.nativeElement.offsetWidth;
+                }
                 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', (calculatedHorizantallyPos) + 'px');