@datarailsshared/datarailsshared 1.3.17 → 1.3.18

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1480,7 +1480,7 @@
                             useExisting: DrSelectComponent,
                             multi: true
                         }],
-                    styles: [":host{width:100%;height:32px}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-value{line-height:1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:10px 12px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
+                    styles: [":host{width:100%;height:32px}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-value{line-height:1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:10px 12px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
                 },] }
     ];
     DrSelectComponent.propDecorators = {
@@ -1648,10 +1648,10 @@
     var POPUP_ANIMATION = [
         animations.transition(':enter', [
             animations.style({ opacity: 0 }),
-            animations.animate(300, animations.style({ opacity: 1 })),
+            animations.animate(150, animations.style({ opacity: 1 })),
         ]),
         animations.transition(':leave', [
-            animations.animate(300, animations.style({ opacity: 0 })),
+            animations.animate(150, animations.style({ opacity: 0 })),
         ]),
     ];
 
@@ -2286,6 +2286,31 @@
         return DrPopoverRef;
     }());
 
+    exports.DrPopoverAlignmentDimension = void 0;
+    (function (DrPopoverAlignmentDimension) {
+        DrPopoverAlignmentDimension["Width"] = "width";
+        DrPopoverAlignmentDimension["Height"] = "height";
+    })(exports.DrPopoverAlignmentDimension || (exports.DrPopoverAlignmentDimension = {}));
+    var DEFAULT_CONFIG = {
+        hasBackdrop: false,
+        closeOnBackdropClick: false,
+        backdropClass: 'dr-popover-transparent-backdrop',
+    };
+    var DEFAULT_MODEL = {
+        position: 'bottom',
+        class: '',
+        overlayConfig: {},
+        manualClosing: { enabled: false },
+    };
+    function getAlignmentDimension(position) {
+        if (!POPUP_POSITIONS[position])
+            return exports.DrPopoverAlignmentDimension.Width;
+        if ((position === null || position === void 0 ? void 0 : position.includes('left')) || (position === null || position === void 0 ? void 0 : position.includes('right'))) {
+            return exports.DrPopoverAlignmentDimension.Height;
+        }
+        return exports.DrPopoverAlignmentDimension.Width;
+    }
+
     var DrPopoverComponent = /** @class */ (function () {
         function DrPopoverComponent(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
             this.cdr = cdr;
@@ -2295,6 +2320,7 @@
             this.popoverRef = popoverRef;
             this.class = '';
             this.isContentTemplate = false;
+            this.popover = true;
         }
         DrPopoverComponent.prototype.clickOutside = function (e) {
             var isTargetHost = this.hostRef instanceof i0.ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
@@ -2318,6 +2344,9 @@
                 Object.assign(this.componentRef.instance, this.contentContext);
                 this.popoverContainer.nativeElement.appendChild(this.componentRef.location.nativeElement);
             }
+            if (this.alignment === 'host') {
+                this[getAlignmentDimension(this.position)] = '100%';
+            }
             this.cdr.detectChanges();
         };
         return DrPopoverComponent;
@@ -2346,22 +2375,15 @@
         class: [{ type: i0.Input }],
         hostRef: [{ type: i0.Input }],
         manualClosing: [{ type: i0.Input }],
+        alignment: [{ type: i0.Input }],
+        position: [{ type: i0.Input }],
         popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef, static: true },] }],
+        width: [{ type: i0.HostBinding, args: ['style.width',] }],
+        height: [{ type: i0.HostBinding, args: ['style.height',] }],
+        popover: [{ type: i0.HostBinding, args: ['@popover',] }],
         clickOutside: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
-    var DEFAULT_CONFIG = {
-        hasBackdrop: false,
-        closeOnBackdropClick: false,
-        backdropClass: 'dr-popover-transparent-backdrop',
-    };
-    var DEFAULT_MODEL = {
-        position: 'bottom',
-        class: '',
-        overlayConfig: {},
-        manualClosing: { enabled: false },
-    };
-
     var DrPopoverService = /** @class */ (function () {
         function DrPopoverService(overlay, overlayPositionBuilder, injector) {
             this.overlay = overlay;
@@ -2375,11 +2397,11 @@
             var overlayRef = this.createOverlay(model);
             var popoverRef = new DrPopoverRef(overlayRef);
             this.attachOverlayContainer(content, model, overlayRef, popoverRef);
-            this.registerCloseListeners(model, overlayRef, popoverRef);
+            this.registerListeners(model, overlayRef, popoverRef);
             return popoverRef;
         };
         DrPopoverService.prototype.attachOverlayContainer = function (content, _a, overlayRef, popoverRef) {
-            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef;
+            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef, alignment = _a.alignment;
             var componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
             var contentRef = overlayRef.attach(componentPortal);
             popoverRef.componentRef = contentRef;
@@ -2388,17 +2410,26 @@
             contentRef.instance.class = elementClass + ' ' + position;
             contentRef.instance.manualClosing = manualClosing;
             contentRef.instance.hostRef = hostRef;
+            contentRef.instance.alignment = alignment;
+            contentRef.instance.position = position;
         };
         DrPopoverService.prototype.createOverlay = function (popoverModel) {
             var overlayConfig = this.getOverlayConfig(popoverModel);
             return this.overlay.create(overlayConfig);
         };
         DrPopoverService.prototype.getOverlayConfig = function (popoverModel) {
+            if (!POPUP_POSITIONS[popoverModel.position])
+                throw new Error("DrPopover does not support the '" + (popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position) + "' position!");
             var config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
+            var hostElement = this.getHostElement(popoverModel.hostRef);
             var positionStrategy = this.overlayPositionBuilder
                 .flexibleConnectedTo(popoverModel.hostRef)
                 .withPositions([POPUP_POSITIONS[popoverModel.position]]);
             var overlayConfig = new i1.OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy: positionStrategy }, config));
+            if (popoverModel.alignment === 'host' && hostElement) {
+                var alignmentDimension = getAlignmentDimension(popoverModel.position);
+                overlayConfig[alignmentDimension] = hostElement.getBoundingClientRect()[alignmentDimension];
+            }
             return overlayConfig;
         };
         DrPopoverService.prototype.createInjector = function (popoverRef) {
@@ -2407,15 +2438,34 @@
             ];
             return i0.Injector.create({ providers: injectionTokens, parent: this.injector });
         };
-        DrPopoverService.prototype.registerCloseListeners = function (popoverModel, overlayRef, popoverRef) {
+        DrPopoverService.prototype.registerListeners = function (popoverModel, overlayRef, popoverRef) {
             var config = popoverModel.overlayConfig || {};
             var targetElement = popoverModel.targetElement;
+            var hostElement = this.getHostElement(popoverModel.hostRef);
             if ((config === null || config === void 0 ? void 0 : config.closeOnBackdropClick) && (config === null || config === void 0 ? void 0 : config.hasBackdrop)) {
                 overlayRef.backdropClick().subscribe(function () { return popoverRef.close(); });
             }
             if (targetElement) {
                 targetElement.addEventListener('mouseup', function () { return popoverRef.close(); }, { once: true });
             }
+            if (popoverModel.alignment === 'host' && hostElement) {
+                var alignmentDimension_1 = getAlignmentDimension(popoverModel.position);
+                var resizeObserver_1 = new ResizeObserver(function (entries) {
+                    entries.forEach(function (host) {
+                        var _a;
+                        return overlayRef.updateSize((_a = {}, _a[alignmentDimension_1] = host.target.getBoundingClientRect()[alignmentDimension_1], _a));
+                    });
+                });
+                resizeObserver_1.observe(hostElement);
+                popoverRef.onClose.pipe(operators.first()).subscribe(function () { return resizeObserver_1.unobserve(hostElement); });
+            }
+        };
+        DrPopoverService.prototype.getHostElement = function (hostRef) {
+            if (!hostRef || hostRef.x)
+                return null;
+            if (hostRef.nativeElement)
+                return hostRef.nativeElement;
+            return hostRef;
         };
         return DrPopoverService;
     }());
@@ -2467,6 +2517,7 @@
                 manualClosing: this.manualClosing,
                 position: this.position,
                 contentContext: this.contentContext,
+                alignment: this.alignment,
             });
             popoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
                 _this.closePopover();
@@ -2495,6 +2546,7 @@
         class: [{ type: i0.Input, args: ['drPopoverClass',] }],
         overlayConfig: [{ type: i0.Input, args: ['drPopoverOverlayConfig',] }],
         manualClosing: [{ type: i0.Input, args: ['drPopoverManualClosing',] }],
+        alignment: [{ type: i0.Input, args: ['drPopoverAlignment',] }],
         popoverClose: [{ type: i0.Output, args: ['drPopoverClose',] }],
         showStateChange: [{ type: i0.Output, args: ['drPopoverShowStateChange',] }],
         togglePopover: [{ type: i0.HostListener, args: ['click',] }]
@@ -2617,7 +2669,7 @@
                     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",
                     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}.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-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 [