@datarailsshared/datarailsshared 1.3.11 → 1.3.12

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('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), require('rxjs'), 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', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', 'rxjs', '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.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, global.rxjs, 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, animations, overlay, portal, common, rxjs, 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('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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,6 +26,7 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var momentImported__namespace = /*#__PURE__*/_interopNamespace(momentImported);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     // import {*} from ""
     var DateTagComponent = /** @class */ (function () {
@@ -1203,7 +1204,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;min-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;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=\"%23579BF2\"/></svg> ');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: ["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 [
@@ -1275,7 +1276,7 @@
             this.readonly = false;
             this.clearable = false;
             this.blur = new i0.EventEmitter();
-            this.value = null;
+            this.innerValue = null;
             this._disabled = null;
             this._elementClass = [];
             this._buttonOptions = {
@@ -1288,6 +1289,8 @@
             this.searchHandler = new i0.EventEmitter();
             this.buttonHandler = new i0.EventEmitter();
             this.tabindex = -1;
+            this.onChangeCallback = rxjs.noop;
+            this.onTouchedCallback = rxjs.noop;
             this.onChange = function () { };
             this.onTouched = function () { };
         }
@@ -1336,6 +1339,20 @@
         DrInputComponent.prototype.set = function (val) {
             this._elementClass = val.split(' ');
         };
+        Object.defineProperty(DrInputComponent.prototype, "value", {
+            get: function () {
+                return this.innerValue;
+            },
+            set: function (v) {
+                if (v !== this.innerValue) {
+                    this.innerValue = v;
+                    this.onChangeCallback(v);
+                }
+                this.cdr.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
         DrInputComponent.prototype.ngAfterViewInit = function () {
             if (this.clearable) {
                 this._elementClass.push('clearable');
@@ -1351,15 +1368,17 @@
             }
         };
         DrInputComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
+            this.onChangeCallback = fn;
         };
         DrInputComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
+            this.onTouchedCallback = fn;
         };
         DrInputComponent.prototype.writeValue = function (value) {
-            this.value = value;
-            this.updateChanges();
-            this.cdr.markForCheck();
+            if (value !== this.innerValue) {
+                this.innerValue = value;
+                this.updateChanges();
+                this.cdr.markForCheck();
+            }
         };
         DrInputComponent.prototype.updateChanges = function () {
             this.onChange(this.value);
@@ -1755,8 +1774,8 @@
                 },] }
     ];
     DrTooltipDirective.ctorParameters = function () { return [
-        { type: overlay.Overlay },
-        { type: overlay.OverlayPositionBuilder },
+        { type: i1.Overlay },
+        { type: i1.OverlayPositionBuilder },
         { type: i0.ElementRef }
     ]; };
     DrTooltipDirective.propDecorators = {
@@ -1925,6 +1944,8 @@
             this.click = new i0.EventEmitter();
         }
         DrButtonComponent.prototype.onClick = function ($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
             this.click.emit($event);
         };
         return DrButtonComponent;
@@ -1932,7 +1953,7 @@
     DrButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-button',
-                    template: "<button (click)=\"onClick($event)\" [attr.disabled]=\"disabled\" [attr.is-loading]=\"isLoading\" [attr.bold]=\"isBold\"\r\n    [attr.icon]=\"icon ? true : false\" [attr.theme]=\"theme\">\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <i *ngIf=\"icon\" class=\"dr\" [ngClass]=\"icon\"></i>\r\n        <ng-content></ng-content>\r\n    </ng-container>\r\n    <i *ngIf=\"isLoading\" class=\"dr dr-spinner\"></i>\r\n</button>",
+                    template: "<button (click)=\"onClick($event)\" [disabled]=\"disabled\" [attr.is-loading]=\"isLoading\" [attr.bold]=\"isBold\"\r\n    [attr.icon]=\"icon ? true : false\" [attr.theme]=\"theme\">\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <i *ngIf=\"icon\" class=\"dr\" [ngClass]=\"icon\" [style.color]=\"iconColor || 'inherit'\"></i>\r\n        <ng-content></ng-content>\r\n    </ng-container>\r\n    <i *ngIf=\"isLoading\" class=\"dr dr-spinner\"></i>\r\n</button>",
                     styles: [":host{display:inline-block}:host button[theme]{cursor:pointer;border-radius:16px;padding:5px 16px;font-family:\"Poppins\";font-style:normal;font-weight:400;font-size:14px;line-height:22px;color:#4e566c;border:1px solid #7F7FDD;display:flex;justify-content:space-between;align-items:center;height:32px}:host button[theme] .dr{padding:0;margin-left:5.35px;margin-right:8.64px}:host button[theme] .dr-spinner{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}@keyframes rotate{0%{transform:rotate()}to{transform:rotate(360deg)}}:host button[theme][theme~=secondary]{padding:5px 16px;background:#FFFFFF;border-radius:16px;min-width:90px}:host button[theme][theme~=secondary]:hover:not([disabled=\"true\"]){color:#4e566c;transition:.2ms ease-in all;background:#F2F2FB;box-shadow:0 4px 14px #0000001a;border:1px solid #4646CE;border-radius:16px}:host button[theme][theme~=secondary]:active{box-shadow:none;background:#F2F2FB}:host button[theme][theme~=secondary][disabled=true]{background:#F0F1F4;color:#727583;border:none}:host button[theme][theme~=secondary][is-loading=true]{justify-content:center;padding:5px 16px}:host button[theme][theme~=primary]{background:#4646CE;color:#fff;border:none;min-width:90px}:host button[theme][theme~=primary]:hover:not([disabled=\"true\"]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);box-shadow:0 4px 14px #0000001a;border-radius:16px;border:none}:host button[theme][theme~=primary]:hover[disabled=false]{border:none}:host button[theme][theme~=primary]:active{background:#25258C}:host button[theme][theme~=primary][disabled=true]{background:#F0F1F4;color:#727583;border:none}:host button[theme][theme~=primary][is-loading=true]{justify-content:center;padding:5px 16px}:host button[theme][theme~=ghost]{background:none;border:none;color:#151b3f;padding:4px 8px}:host button[theme][theme~=ghost] .dr{margin-left:4.5px;margin-right:12.5px}:host button[theme][theme~=ghost]:hover:not([disabled=\"true\"]){color:#4646ce;background:#F2F2FB;border-radius:4px}:host button[theme][theme~=ghost][disabled=true]{color:#727583}:host button[theme][theme~=text-link]{background:none;border:none;color:#0b5af9;text-decoration:underline}:host button[theme][theme~=text-link][disabled=true]{color:#727583}:host button[theme][theme~=primary-icon]{padding:8px;width:28px;height:28px;justify-content:center;color:#fff;background:#4646CE;border:none}:host button[theme][theme~=primary-icon]:hover,:host button[theme][theme~=primary-icon]:active{background:linear-gradient(96.89deg,#131318 0%,#4646CE 100%)}:host button[theme][theme~=primary-icon][disabled=true]{color:#bcbcbc;background:#E5E6EA}:host button[theme][theme~=primary-icon] .dr{margin:0}:host button[theme][theme~=secondary-icon]{background:white;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:1px solid #7F7FDD}:host button[theme][theme~=secondary-icon]:hover,:host button[theme][theme~=secondary-icon]:active{color:#4646ce;background:#F2F2FB}:host button[theme][theme~=secondary-icon][disabled=true]{color:#bcbcbc;background:#E5E6EA;border:none}:host button[theme][theme~=secondary-icon] .dr{margin:0}:host button[theme][theme~=icon]{background:none;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:none}:host button[theme][theme~=icon]:hover,:host button[theme][theme~=icon]:active{background:#F0F3FC;color:#4646ce}:host button[theme][theme~=icon][disabled=true]{color:#bcbcbc;border:none}:host button[theme][theme~=icon][disabled=true]:hover,:host button[theme][theme~=icon][disabled=true]:active{background:none}:host button[theme][theme~=icon] .dr{margin:0}:host button[theme][bold=true]{font-weight:600}:host button[theme][icon=true]{padding-left:8px}:host button[theme][icon=false]{justify-content:center}\n"]
                 },] }
     ];
@@ -1944,6 +1965,7 @@
         icon: [{ type: i0.Input }],
         isBold: [{ type: i0.Input }],
         isLoading: [{ type: i0.Input }],
+        iconColor: [{ type: i0.Input }],
         click: [{ type: i0.Output }]
     };
     //  Examples:
@@ -1951,6 +1973,7 @@
     <dr-button [icon]="'dr-icon-arrow-down'">hello</dr-button>
     <dr-button [icon]="'dr-icon-refresh'" [theme]="'primary-icon'"></dr-button>
     <dr-button [icon]="'dr-icon-refresh'" [isDisabled]="true" [theme]="'primary-icon'"></dr-button>
+    <dr-button [theme]="'secondary'" [icon]="'dr-icon-excel'" [iconColor]="'#03A678'"></dr-button>
 
     <dr-button [icon]="'dr-icon-refresh'" [theme]="'secondary-icon'"></dr-button>
     <dr-button [icon]="'dr-icon-share'" [isDisabled]="true" [theme]="'secondary-icon'"></dr-button>
@@ -2191,7 +2214,12 @@
         function DrPopoverRef(overlayRef) {
             this.overlayRef = overlayRef;
             this.onClose$ = new rxjs.Subject();
+            // FIXME: this decision was made because of the incompatible rxjs version
+            /**
+             * Correct type is @type {Observable<any>}
+             */
             this.onClose = this.onClose$.asObservable();
+            this.onBackdropClick = this.overlayRef.backdropClick();
         }
         DrPopoverRef.prototype.close = function (res) {
             this.overlayRef.detach();
@@ -2212,32 +2240,30 @@
             this.class = '';
             this.isContentTemplate = false;
         }
-        Object.defineProperty(DrPopoverComponent.prototype, "popoverContainer", {
-            set: function (template) {
-                this.isContentTemplate = this.content instanceof i0.TemplateRef;
-                if (!this.isContentTemplate) {
-                    this.componentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
-                    Object.assign(this.componentRef.instance, this.contentContext);
-                    template.nativeElement.appendChild(this.componentRef.location.nativeElement);
-                }
-                this.cdr.detectChanges();
-            },
-            enumerable: false,
-            configurable: true
-        });
         DrPopoverComponent.prototype.clickOutside = function (e) {
-            var isTargetHost = this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target);
+            var isTargetHost = this.hostRef instanceof i0.ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
             var isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
             var isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
             var isTargetInSelect = e.target.closest('ng-dropdown-panel');
+            var isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
             if (!isTargetHost
                 && !isTargetInPopover
                 && !isTargetInDatepicker
                 && !isTargetInSelect
+                && !isTargetInDatepickerContent
                 && !this.manualClosing) {
                 this.popoverRef.close();
             }
         };
+        DrPopoverComponent.prototype.ngOnInit = function () {
+            this.isContentTemplate = this.content instanceof i0.TemplateRef;
+            if (!this.isContentTemplate) {
+                this.componentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
+                Object.assign(this.componentRef.instance, this.contentContext);
+                this.popoverContainer.nativeElement.appendChild(this.componentRef.location.nativeElement);
+            }
+            this.cdr.detectChanges();
+        };
         return DrPopoverComponent;
     }());
     DrPopoverComponent.decorators = [
@@ -2247,7 +2273,8 @@
                     animations: [
                         animations.trigger('popover', POPUP_ANIMATION),
                     ],
-                    styles: [".dr-popover{display:flex;background:#fff;border:1px solid #E5E5E5;border-radius:5px;box-sizing:border-box;box-shadow:0 4px 14px #0003;font-size:12px;color:#545a6b;max-height:100vh;max-width:100vw;overflow:auto}\n"]
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".dr-popover{display:flex;background:#fff;border:1px solid #E5E5E5;border-radius:5px;box-sizing:border-box;box-shadow:0 4px 14px #0003;font-size:12px;color:#545a6b;max-height:100vh;max-width:100vw;overflow:auto}::ng-deep .dr-popover-transparent-backdrop{background-color:transparent}\n"]
                 },] }
     ];
     DrPopoverComponent.ctorParameters = function () { return [
@@ -2263,16 +2290,95 @@
         class: [{ type: i0.Input }],
         hostRef: [{ type: i0.Input }],
         manualClosing: [{ type: i0.Input }],
-        popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef },] }],
+        popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef, static: true },] }],
         clickOutside: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
-    var DrPopoverDirective = /** @class */ (function () {
-        function DrPopoverDirective(overlay, overlayPositionBuilder, elementRef, injector) {
+    var DEFAULT_CONFIG = {
+        hasBackdrop: false,
+        closeOnBackdropClick: false,
+        backdropClass: 'dr-popover-transparent-backdrop',
+    };
+    var DEFAULT_MODEL = {
+        position: 'bottom',
+        class: '',
+        overlayConfig: {},
+        manualClosing: false,
+    };
+
+    var DrPopoverService = /** @class */ (function () {
+        function DrPopoverService(overlay, overlayPositionBuilder, injector) {
             this.overlay = overlay;
             this.overlayPositionBuilder = overlayPositionBuilder;
-            this.elementRef = elementRef;
             this.injector = injector;
+        }
+        DrPopoverService.prototype.open = function (content, popoverModel) {
+            if (!content)
+                return;
+            var model = Object.assign(Object.assign({}, DEFAULT_MODEL), popoverModel);
+            var overlayRef = this.createOverlay(model);
+            var popoverRef = new DrPopoverRef(overlayRef);
+            this.attachOverlayContainer(content, model, overlayRef, popoverRef);
+            this.registerCloseListeners(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 componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
+            var contentRef = overlayRef.attach(componentPortal);
+            popoverRef.componentRef = contentRef;
+            contentRef.instance.content = content;
+            contentRef.instance.contentContext = Object.assign(Object.assign({}, contentContext), { closePopover: popoverRef.close.bind(popoverRef) });
+            contentRef.instance.class = elementClass + ' ' + position;
+            contentRef.instance.manualClosing = manualClosing;
+            contentRef.instance.hostRef = hostRef;
+        };
+        DrPopoverService.prototype.createOverlay = function (popoverModel) {
+            var overlayConfig = this.getOverlayConfig(popoverModel);
+            return this.overlay.create(overlayConfig);
+        };
+        DrPopoverService.prototype.getOverlayConfig = function (popoverModel) {
+            var config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
+            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));
+            return overlayConfig;
+        };
+        DrPopoverService.prototype.createInjector = function (popoverRef) {
+            var injectionTokens = [
+                { provide: DrPopoverRef, useValue: popoverRef },
+            ];
+            return i0.Injector.create({ providers: injectionTokens, parent: this.injector });
+        };
+        DrPopoverService.prototype.registerCloseListeners = function (popoverModel, overlayRef, popoverRef) {
+            var config = popoverModel.overlayConfig || {};
+            var targetElement = popoverModel.targetElement;
+            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 });
+            }
+        };
+        return DrPopoverService;
+    }());
+    DrPopoverService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DrPopoverService_Factory() { return new DrPopoverService(i0__namespace.ɵɵinject(i1__namespace.Overlay), i0__namespace.ɵɵinject(i1__namespace.OverlayPositionBuilder), i0__namespace.ɵɵinject(i0__namespace.INJECTOR)); }, token: DrPopoverService, providedIn: "root" });
+    DrPopoverService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    DrPopoverService.ctorParameters = function () { return [
+        { type: i1.Overlay },
+        { type: i1.OverlayPositionBuilder },
+        { type: i0.Injector }
+    ]; };
+
+    var DrPopoverDirective = /** @class */ (function () {
+        function DrPopoverDirective(elementRef, drPopoverService) {
+            this.elementRef = elementRef;
+            this.drPopoverService = drPopoverService;
             this.contentContext = {};
             this.position = 'bottom';
             this.class = '';
@@ -2280,79 +2386,39 @@
             this.popoverClose = new i0.EventEmitter();
             this.showStateChange = new i0.EventEmitter();
         }
-        DrPopoverDirective.prototype.show = function () {
-            var _a;
-            if (this.overlayRef) {
-                this.destroyPopover();
+        DrPopoverDirective.prototype.togglePopover = function () {
+            if (this.popoverRef) {
+                this.closePopover();
             }
             else {
                 this.renderPopover();
-                this.showStateChange.emit({ isShown: (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached() });
+                this.showStateChange.emit({ isShown: !!this.popoverRef });
+            }
+        };
+        DrPopoverDirective.prototype.closePopover = function (res) {
+            if (this.popoverRef) {
+                this.popoverRef.close(res);
+                this.popoverRef = null;
             }
         };
         DrPopoverDirective.prototype.renderPopover = function () {
             var _this = this;
-            var _a;
-            if (((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) || !this.content)
-                return;
-            this.overlayRef = this.createOverlay(this.overlayConfig || {});
-            this.drPopoverRef = new DrPopoverRef(this.overlayRef);
-            this.drPopoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
-                var _a;
-                _this.destroyPopover();
-                _this.popoverClose.emit(res);
-                _this.showStateChange.emit({ isShown: !!((_a = _this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) });
+            var popoverRef = this.popoverRef = this.drPopoverService.open(this.content, {
+                hostRef: this.elementRef,
+                overlayConfig: this.overlayConfig,
+                class: this.class,
+                manualClosing: this.manualClosing,
+                position: this.position,
+                contentContext: this.contentContext,
             });
-            this.attachOverlayContainer();
-        };
-        DrPopoverDirective.prototype.destroyPopover = function () {
-            if (this.overlayRef) {
-                this.overlayRef.dispose();
-                this.overlayRef = null;
-            }
-            if (this.contentRef) {
-                this.contentRef.destroy();
-                this.contentRef = null;
-            }
-            if (this.drPopoverRef) {
-                this.drPopoverRef.close();
-                this.drPopoverRef = null;
-            }
-        };
-        DrPopoverDirective.prototype.attachOverlayContainer = function () {
-            var componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(this.drPopoverRef));
-            this.contentRef = this.overlayRef.attach(componentPortal);
-            this.drPopoverRef.componentRef = this.contentRef;
-            this.contentRef.instance.content = this.content;
-            this.contentRef.instance.contentContext = Object.assign(Object.assign({}, this.contentContext), { closePopover: this.destroyPopover.bind(this) });
-            this.contentRef.instance.class = this.class + ' ' + this.position;
-            this.contentRef.instance.manualClosing = this.manualClosing;
-            this.contentRef.instance.hostRef = this.elementRef;
-        };
-        DrPopoverDirective.prototype.createOverlay = function (config) {
-            var overlayConfig = this.getOverlayConfig(config);
-            return this.overlay.create(overlayConfig);
-        };
-        DrPopoverDirective.prototype.getOverlayConfig = function (config) {
-            var positionStrategy = this.overlayPositionBuilder
-                .flexibleConnectedTo(this.elementRef)
-                .withPositions([POPUP_POSITIONS[this.position]]);
-            var overlayConfig = new overlay.OverlayConfig({
-                hasBackdrop: false,
-                panelClass: config === null || config === void 0 ? void 0 : config.panelClass,
-                scrollStrategy: this.overlay.scrollStrategies.noop(),
-                positionStrategy: positionStrategy,
+            popoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
+                _this.closePopover();
+                _this.popoverClose.emit(res);
+                _this.showStateChange.emit({ isShown: !!_this.popoverRef });
             });
-            return overlayConfig;
-        };
-        DrPopoverDirective.prototype.createInjector = function (previewOverlayRef) {
-            var injectionTokens = [
-                { provide: DrPopoverRef, useValue: previewOverlayRef },
-            ];
-            return i0.Injector.create({ providers: injectionTokens, parent: this.injector });
         };
         DrPopoverDirective.prototype.ngOnDestroy = function () {
-            this.destroyPopover();
+            this.closePopover();
         };
         return DrPopoverDirective;
     }());
@@ -2362,10 +2428,8 @@
                 },] }
     ];
     DrPopoverDirective.ctorParameters = function () { return [
-        { type: overlay.Overlay },
-        { type: overlay.OverlayPositionBuilder },
         { type: i0.ElementRef },
-        { type: i0.Injector }
+        { type: DrPopoverService }
     ]; };
     DrPopoverDirective.propDecorators = {
         content: [{ type: i0.Input, args: ['drPopover',] }],
@@ -2376,7 +2440,7 @@
         manualClosing: [{ type: i0.Input, args: ['drPopoverManualClosing',] }],
         popoverClose: [{ type: i0.Output, args: ['drPopoverClose',] }],
         showStateChange: [{ type: i0.Output, args: ['drPopoverShowStateChange',] }],
-        show: [{ type: i0.HostListener, args: ['click',] }]
+        togglePopover: [{ type: i0.HostListener, args: ['click',] }]
     };
 
     var DrDropdownService = /** @class */ (function () {
@@ -2977,6 +3041,7 @@
     exports.DrPopoverDirective = DrPopoverDirective;
     exports.DrPopoverModule = DrPopoverModule;
     exports.DrPopoverRef = DrPopoverRef;
+    exports.DrPopoverService = DrPopoverService;
     exports.DrSelectComponent = DrSelectComponent;
     exports.DrSpinnerComponent = DrSpinnerComponent;
     exports.DrSpinnerDirective = DrSpinnerDirective;