@datarailsshared/datarailsshared 1.3.13 → 1.3.14

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1847,6 +1847,61 @@
         checkedChange: [{ type: i0.Output }]
     };
 
+    var DrToggleButtonComponent = /** @class */ (function () {
+        function DrToggleButtonComponent(cdr) {
+            this.cdr = cdr;
+            this._disabled = false;
+            this.onChange = function () { };
+            this.onTouched = function () { };
+        }
+        Object.defineProperty(DrToggleButtonComponent.prototype, "disabled", {
+            set: function (value) {
+                this.setDisabledState(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrToggleButtonComponent.prototype.writeValue = function (value) {
+            this.selectedValue = value;
+            this.cdr.markForCheck();
+        };
+        DrToggleButtonComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        DrToggleButtonComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        DrToggleButtonComponent.prototype.setDisabledState = function (isDisabled) {
+            this._disabled = isDisabled;
+        };
+        DrToggleButtonComponent.prototype.setValue = function (item) {
+            this.selectedValue = item;
+            this.onChange(this.selectedValue);
+            this.onTouched();
+            this.cdr.markForCheck();
+        };
+        return DrToggleButtonComponent;
+    }());
+    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",
+                    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"]
+                },] }
+    ];
+    DrToggleButtonComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrToggleButtonComponent.propDecorators = {
+        items: [{ type: i0.Input }],
+        selectedValue: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }]
+    };
+
     var ISpinnerOptions = /** @class */ (function (_super) {
         __extends(ISpinnerOptions, _super);
         function ISpinnerOptions() {
@@ -2518,6 +2573,17 @@
                 return act.disabled(act.data);
             }
         };
+        DrDropdownComponent.prototype.selected = function (act) {
+            if (!act.selected) {
+                return false;
+            }
+            if (typeof act.selected === 'boolean') {
+                return act.selected;
+            }
+            else {
+                return act.selected(act.data);
+            }
+        };
         DrDropdownComponent.prototype.tooltipToShow = function (act) {
             if (act.toolTipIfDisabled || this.disabled(act) || !act.toolTip) {
                 return '';
@@ -2546,9 +2612,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\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               (click)=\"onActionIconClick(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=\"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(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.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}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.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}.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"]
                 },] }
     ];
     DrDropdownComponent.ctorParameters = function () { return [
@@ -2854,7 +2920,17 @@
                 },] }
     ];
 
-    var components$1 = [DrButtonComponent, RadioButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrToggleComponent, DrDatePickerComponent, DrDatePickerFormatDirective];
+    var components$1 = [
+        DrButtonComponent,
+        RadioButtonComponent,
+        CheckboxComponent,
+        DrInputComponent,
+        DrSelectComponent,
+        DrToggleComponent,
+        DrToggleButtonComponent,
+        DrDatePickerComponent,
+        DrDatePickerFormatDirective
+    ];
     var DrInputsModule = /** @class */ (function () {
         function DrInputsModule() {
         }
@@ -3051,6 +3127,7 @@
     exports.DrTabsModule = DrTabsModule;
     exports.DrTagComponent = DrTagComponent;
     exports.DrTagModule = DrTagModule;
+    exports.DrToggleButtonComponent = DrToggleButtonComponent;
     exports.DrToggleComponent = DrToggleComponent;
     exports.DrTooltipDirective = DrTooltipDirective;
     exports.DrTooltipModule = DrTooltipModule;