@datarailsshared/datarailsshared 1.4.63 → 1.4.65-rocket

package/assets/styles/img/dr-icon-info.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z" fill="#7B61FF"/>
+</svg>

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -2875,7 +2875,7 @@
                     selector: 'dr-dropdown',
                     template: "<div #menuContainer\n     (mouseleave)=\"onMouseLeave()\"\n     (mouseenter)=\"onMouseEnter()\"\n     (clickOutside)=\"onClickedOutside()\"\n     [drDropdownPosition]=\"option\"\n     #dropdownPosition=\"dropdownPosition\"\n     [position]=\"position\"\n     [class]=\"containerClass\"\n     class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\">\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n             (click)=\"action(act)\"\n             [drTooltip]=\"tooltipToShow(act)\"\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n             class=\"dr-dropdown__container__item\"\n             [class.item-disabled]=\"disabled(act)\"\n             [class.item-selected]=\"selected(act)\"\n             [class.separate-line]=\"act.separateLine\">\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\n               [class]=\"actionIcon.icon\"\n               [class.showOnHover]=\"actionIcon.showOnHover\"\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n        </div>\n    </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.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.separate-line{border-top:1px solid #BCBCBC}.dr-dropdown__container__item:hover{background-color:#f9faff}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.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 i{color:#4e566c}.dr-dropdown__container__item i:hover{color:#4646ce}.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(15%)}.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;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:fixed;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.separate-line{border-top:1px solid #BCBCBC}.dr-dropdown__container__item:hover{background-color:#f9faff}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.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 i{color:#4e566c}.dr-dropdown__container__item i:hover{color:#4646ce}.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(15%)}.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 [
@@ -3573,6 +3573,22 @@
         label: [{ type: i0.Input }]
     };
 
+    exports.TooltipPosition = void 0;
+    (function (TooltipPosition) {
+        TooltipPosition["TOP"] = "top";
+        TooltipPosition["BOTTOM"] = "bottom";
+        TooltipPosition["LEFT"] = "left";
+        TooltipPosition["RIGHT"] = "right";
+        TooltipPosition["TOP_RIGHT"] = "top-right";
+        TooltipPosition["TOP_LEFT"] = "top-left";
+        TooltipPosition["BOTTOM_RIGHT"] = "bottom-right";
+        TooltipPosition["BOTTOM_LEFT"] = "bottom-left";
+        TooltipPosition["RIGHT_TOP"] = "right-top";
+        TooltipPosition["RIGHT_BOTTOM"] = "right-bottom";
+        TooltipPosition["LEFT_TOP"] = "left-top";
+        TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
+    })(exports.TooltipPosition || (exports.TooltipPosition = {}));
+
     var DrModelDebounceChangeDirective = /** @class */ (function () {
         function DrModelDebounceChangeDirective(ngModel) {
             this.ngModel = ngModel;
@@ -4356,6 +4372,86 @@
                 },] }
     ];
 
+    var TooltipInfoComponent = /** @class */ (function () {
+        function TooltipInfoComponent() {
+        }
+        return TooltipInfoComponent;
+    }());
+    TooltipInfoComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tooltip-info',
+                    template: "<div class=\"tooltip-info\">\n    <i *ngIf=\"data?.icon else defaultIcon\" class=\"fa\" [class]=\"data.icon\" [style.fontSize.px]=\"14\"\n       [style.margin.px]=\"12\" [style.color]=\"data?.iconColor || '#7B61FF'\"></i>\n    <div class=\"tooltip-info-content-wrapper\">\n        <div *ngIf=\"data?.title\" class=\"tooltip-info_header\">\n            <span>{{data.title}}</span>\n        </div>\n        <div *ngIf=\"data?.description\" class=\"tooltip-info_description\"\n             [class.tooltip-info_description-no-border]=\"!data.title\">\n            <ng-container *ngIf=\"!data.title\"></ng-container>\n            <span>{{data.description}}</span>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultIcon>\n    <ng-container *ngIf=\"!data.icon\">\n        <div class=\"default-icon\"></div>\n    </ng-container>\n</ng-template>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".tooltip-info{width:316px;display:flex}.tooltip-info-content-wrapper{display:flex;flex-direction:column;padding-top:10px}.tooltip-info_header{padding:0 16px 6px 0;font-weight:bold;font-size:14px;line-height:16px;letter-spacing:.25px;display:flex;justify-content:flex-start}.tooltip-info_header>i{margin-right:10px}.tooltip-info-content-wrapper{padding-top:10px}.tooltip-info_description{display:flex;align-items:flex-start;border-top:1px solid #AEB5BB;padding:12px 10px 10px 0;text-align:left;font-weight:normal;font-size:14px;line-height:22px}.tooltip-info_description-no-border{padding-top:0;border-top:none}.tooltip-info_description>i{margin-right:10px}:host.tooltip-info-medium .tooltip-info{max-width:272px}:host.tooltip-info-medium .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-medium .tooltip-info_header,:host.tooltip-info-medium .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-medium .tooltip-info_header{padding:10px 10px 0 0}:host.tooltip-info-medium .tooltip-info_description{padding:10px 12px 10px 0}:host.tooltip-info-medium .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22 fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}:host.tooltip-info-small .tooltip-info{width:auto}:host.tooltip-info-small .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-small .tooltip-info_header,:host.tooltip-info-small .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-small .tooltip-info_header{padding:0 10px 0 0}:host.tooltip-info-small .tooltip-info_description{padding:0 12px 10px 0}:host.tooltip-info-small .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22 fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}.default-icon{position:relative;width:18px;height:18px;margin:10px}.default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22 fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:18px;width:18px;content:\"\"}\n"]
+                },] }
+    ];
+    TooltipInfoComponent.ctorParameters = function () { return []; };
+    TooltipInfoComponent.propDecorators = {
+        data: [{ type: i0.Input }]
+    };
+
+    var TooltipInfoSimpleComponent = /** @class */ (function () {
+        function TooltipInfoSimpleComponent() {
+        }
+        return TooltipInfoSimpleComponent;
+    }());
+    TooltipInfoSimpleComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tooltip-info-simple',
+                    template: "<div class=\"tooltip-info-simple\">\n    <div *ngIf=\"context?.title\" class=\"tooltip-info-simple__title\">{{context?.title}}</div>\n    <div *ngIf=\"context?.description\" class=\"tooltip-info-simple__description\">{{context?.description}}</div>\n</div>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".tooltip-info-simple{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px;color:#0c142b}.tooltip-info-simple__title{font-weight:600;overflow:hidden;text-overflow:ellipsis}\n"]
+                },] }
+    ];
+    TooltipInfoSimpleComponent.ctorParameters = function () { return []; };
+    TooltipInfoSimpleComponent.propDecorators = {
+        context: [{ type: i0.Input }]
+    };
+
+    var TooltipNoBodyComponent = /** @class */ (function () {
+        function TooltipNoBodyComponent() {
+        }
+        TooltipNoBodyComponent.prototype.ngOnInit = function () {
+        };
+        return TooltipNoBodyComponent;
+    }());
+    TooltipNoBodyComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tooltip-no-body',
+                    template: "<div class=\"tooltip-bold\" [ngClass]=\"{'tooltip-bold--icon': context?.icon}\">\n    <div class=\"tooltip-bold__title\">\n        <i *ngIf=\"context?.icon\" [class]=\"context?.icon\" [style.color]=\"context?.iconColor || 'black'\"></i>\n        {{ context.title }}\n    </div>\n    <div class=\"tooltip-bold-text\">\n        {{ context.text }}\n    </div>\n</div>",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".tooltip-bold{position:relative;box-shadow:0 4px 8px 1px #00000040;border:1px solid #C3C4CE;border-radius:8px;font-size:14px;line-height:22px;padding:10px 12px;background-color:#fff}.tooltip-bold--icon{padding-left:44px}.tooltip-bold__title{font-weight:bold}.tooltip-bold__title>i{position:absolute;width:16px;height:16px;left:10px}\n"]
+                },] }
+    ];
+    TooltipNoBodyComponent.ctorParameters = function () { return []; };
+    TooltipNoBodyComponent.propDecorators = {
+        context: [{ type: i0.Input }]
+    };
+
+    var TooltipProcessDefaultComponent = /** @class */ (function () {
+        function TooltipProcessDefaultComponent() {
+        }
+        return TooltipProcessDefaultComponent;
+    }());
+    TooltipProcessDefaultComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tooltip-process-default',
+                    template: "\n        <div class=\"container\" [innerHTML]=\"text\"></div>\n    ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: ["\n        .container {\n            width: auto;\n            max-width: 388px;\n            text-align: start;\n            font-size: 14px;\n            line-height: 22px;\n            padding: 10px 12px;\n            color: #151B3F;\n            background-color: #FFF;\n            border-radius: 8px;\n            box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.25);\n            border: 1px solid #C3C4CE;\n        }\n    "]
+                },] }
+    ];
+    TooltipProcessDefaultComponent.ctorParameters = function () { return []; };
+    TooltipProcessDefaultComponent.propDecorators = {
+        text: [{ type: i0.Input }]
+    };
+
+    var TOOLTIP_COMPONENTS = [
+        TooltipInfoComponent,
+        TooltipInfoSimpleComponent,
+        TooltipNoBodyComponent,
+        TooltipProcessDefaultComponent
+    ];
     var DrTooltipModule = /** @class */ (function () {
         function DrTooltipModule() {
         }
@@ -4366,15 +4462,15 @@
                     imports: [
                         common.CommonModule
                     ],
-                    exports: [
+                    exports: __spreadArray([
                         TooltipComponent,
-                        DrTooltipDirective,
-                    ],
+                        DrTooltipDirective
+                    ], __read(TOOLTIP_COMPONENTS)),
                     providers: [],
-                    declarations: [
+                    declarations: __spreadArray([
                         TooltipComponent,
-                        DrTooltipDirective,
-                    ],
+                        DrTooltipDirective
+                    ], __read(TOOLTIP_COMPONENTS)),
                 },] }
     ];
 
@@ -4626,6 +4722,10 @@
     exports["ɵf"] = DrDatePickerFormatDirective;
     exports["ɵg"] = DrDatePickerCustomHeaderComponent;
     exports["ɵh"] = DrShowTimeframePipe;
+    exports["ɵi"] = TooltipInfoComponent;
+    exports["ɵj"] = TooltipInfoSimpleComponent;
+    exports["ɵk"] = TooltipNoBodyComponent;
+    exports["ɵl"] = TooltipProcessDefaultComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });