@coreui/angular 4.2.0 → 4.2.3

package/fesm2015/coreui-angular.mjs

@@ -6229,10 +6229,10 @@ class PopoverComponent {
     }
 }
 PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: PopoverComponent, selector: "c-popover", inputs: { content: "content", visible: "visible", id: "id", role: "role" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["popoverTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div [ngClass]=\"{'popover-arrow': !!content}\" data-popper-arrow ></div>\n  <ng-container #popoverTemplate></ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: PopoverComponent, selector: "c-popover", inputs: { content: "content", visible: "visible", id: "id", role: "role" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["popoverTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\r\n  <div [ngClass]=\"{'popover-arrow': !!content}\" data-popper-arrow></div>\r\n  <ng-container #popoverTemplate></ng-container>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-popover', template: "<ng-container>\n  <div [ngClass]=\"{'popover-arrow': !!content}\" data-popper-arrow ></div>\n  <ng-container #popoverTemplate></ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'c-popover', template: "<ng-container>\r\n  <div [ngClass]=\"{'popover-arrow': !!content}\" data-popper-arrow></div>\r\n  <ng-container #popoverTemplate></ng-container>\r\n</ng-container>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { content: [{
                 type: Input
             }], visible: [{
@@ -6256,11 +6256,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             }] } });
 
 class PopoverDirective {
-    constructor(document, renderer, hostElement, componentFactoryResolver, viewContainerRef, listenersService) {
+    constructor(document, renderer, hostElement, viewContainerRef, listenersService) {
         this.document = document;
         this.renderer = renderer;
         this.hostElement = hostElement;
-        this.componentFactoryResolver = componentFactoryResolver;
         this.viewContainerRef = viewContainerRef;
         this.listenersService = listenersService;
         /**
@@ -6283,10 +6282,10 @@ class PopoverDirective {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 8],
-                    },
-                },
-            ],
+                        offset: [0, 8]
+                    }
+                }
+            ]
         };
     }
     /**
@@ -6309,20 +6308,19 @@ class PopoverDirective {
     get visible() {
         return this._visible;
     }
+    get ariaDescribedBy() {
+        return this.popoverId ? this.popoverId : null;
+    }
     ngOnChanges(changes) {
         if (changes['visible']) {
             changes['visible'].currentValue ? this.addPopoverElement() : this.removePopoverElement();
         }
     }
-    get ariaDescribedBy() {
-        return this.popoverId ? this.popoverId : null;
-    }
     ngOnDestroy() {
         this.clearListeners();
         this.destroyPopoverElement();
     }
     ngOnInit() {
-        // this.createPopoverElement();
         this.setListeners();
     }
     setListeners() {
@@ -6356,60 +6354,64 @@ class PopoverDirective {
     }
     createPopoverElement() {
         if (!this.popoverRef) {
-            const popoverComponent = this.componentFactoryResolver.resolveComponentFactory(PopoverComponent);
-            this.popoverRef = popoverComponent.create(this.viewContainerRef.injector);
+            this.popoverRef = this.viewContainerRef.createComponent(PopoverComponent);
+            // this.viewContainerRef.detach();
         }
     }
     destroyPopoverElement() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         (_a = this.popover) === null || _a === void 0 ? void 0 : _a.remove();
         (_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.destroy();
         // @ts-ignore
         this.popoverRef = undefined;
         (_c = this.popperInstance) === null || _c === void 0 ? void 0 : _c.destroy();
-        this.viewContainerRef.detach();
-        this.viewContainerRef.clear();
+        (_d = this.viewContainerRef) === null || _d === void 0 ? void 0 : _d.detach();
+        (_e = this.viewContainerRef) === null || _e === void 0 ? void 0 : _e.clear();
     }
     addPopoverElement() {
+        var _a;
         if (!this.popoverRef) {
             this.createPopoverElement();
         }
         this.popoverRef.instance.content = this.content;
         this.popover = this.popoverRef.location.nativeElement;
+        this.renderer.addClass(this.popover, 'd-none');
         this.renderer.addClass(this.popover, 'fade');
-        // this.renderer.setStyle(this.popover, 'visibility', 'hidden')
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         setTimeout(() => {
             this.popperInstance = createPopper(this.hostElement.nativeElement, this.popover, Object.assign({}, this.popperOptions));
             this.viewContainerRef.insert(this.popoverRef.hostView);
+            this.renderer.appendChild(this.document.body, this.popover);
+            if (!this.visible) {
+                this.removePopoverElement();
+                return;
+            }
             setTimeout(() => {
                 this.popoverId = this.getUID('popover');
                 this.popoverRef.instance.id = this.popoverId;
+                if (!this.visible) {
+                    this.removePopoverElement();
+                    return;
+                }
+                this.renderer.removeClass(this.popover, 'd-none');
                 this.popoverRef.instance.visible = this.visible;
-                // this.renderer.removeStyle(this.popover, 'visibility');
-                this.renderer.appendChild(this.document.body, this.popover);
                 this.popperInstance.forceUpdate();
-                // this.popoverRef.changeDetectorRef.detectChanges();
             }, 100);
         });
     }
     removePopoverElement() {
+        this.popoverId = '';
         if (!this.popoverRef) {
             return;
         }
         this.popoverRef.instance.visible = this.visible;
-        // this.popoverRef.changeDetectorRef?.detectChanges();
         this.popoverRef.instance.id = undefined;
         setTimeout(() => {
-            var _a;
             this.viewContainerRef.detach();
-            // this.viewContainerRef.remove();
-            // this.renderer.removeChild(this.document.body, this.popover);
-            (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.popoverId = '';
         }, 300);
     }
 }
-PopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverDirective, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverDirective, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Directive });
 PopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: PopoverDirective, selector: "[cPopover]", inputs: { content: ["cPopover", "content"], popperOptions: ["cPopoverOptions", "popperOptions"], placement: ["cPopoverPlacement", "placement"], trigger: ["cPopoverTrigger", "trigger"], visible: ["cPopoverVisible", "visible"] }, host: { properties: { "attr.aria-describedby": "this.ariaDescribedBy" } }, providers: [ListenersService], exportAs: ["cPopover"], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverDirective, decorators: [{
             type: Directive,
@@ -6422,7 +6424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: ListenersService }];
+                    }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: ListenersService }];
     }, propDecorators: { content: [{
                 type: Input,
                 args: ['cPopover']
@@ -8859,11 +8861,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             }] } });
 
 class TooltipDirective {
-    constructor(document, renderer, hostElement, componentFactoryResolver, viewContainerRef, listenersService) {
+    constructor(document, renderer, hostElement, viewContainerRef, listenersService) {
         this.document = document;
         this.renderer = renderer;
         this.hostElement = hostElement;
-        this.componentFactoryResolver = componentFactoryResolver;
         this.viewContainerRef = viewContainerRef;
         this.listenersService = listenersService;
         /**
@@ -8886,10 +8887,10 @@ class TooltipDirective {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 0],
-                    },
-                },
-            ],
+                        offset: [0, 0]
+                    }
+                }
+            ]
         };
     }
     /**
@@ -8907,10 +8908,7 @@ class TooltipDirective {
      * Toggle the visibility of tooltip component.
      */
     set visible(value) {
-        var _a;
         this._visible = value;
-        value ? this.addTooltipElement() : this.removeTooltipElement();
-        (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef.markForCheck();
     }
     get visible() {
         return this._visible;
@@ -8928,7 +8926,6 @@ class TooltipDirective {
         this.destroyTooltipElement();
     }
     ngOnInit() {
-        // this.createTooltipElement();
         this.setListeners();
     }
     setListeners() {
@@ -8937,12 +8934,15 @@ class TooltipDirective {
             trigger: this.trigger,
             callbackToggle: () => {
                 this.visible = !this.visible;
+                this.visible ? this.addTooltipElement() : this.removeTooltipElement();
             },
             callbackOff: () => {
                 this.visible = false;
+                this.removeTooltipElement();
             },
             callbackOn: () => {
                 this.visible = true;
+                this.addTooltipElement();
             }
         };
         this.listenersService.setListeners(config);
@@ -8959,55 +8959,65 @@ class TooltipDirective {
     }
     createTooltipElement() {
         if (!this.tooltipRef) {
-            const tooltipComponent = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
-            this.tooltipRef = this.viewContainerRef.createComponent(tooltipComponent);
+            this.tooltipRef = this.viewContainerRef.createComponent(TooltipComponent);
+            // this.viewContainerRef.detach();
         }
     }
     destroyTooltipElement() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.remove();
         (_b = this.tooltipRef) === null || _b === void 0 ? void 0 : _b.destroy();
         // @ts-ignore
         this.tooltipRef = undefined;
         (_c = this.popperInstance) === null || _c === void 0 ? void 0 : _c.destroy();
-        this.viewContainerRef.detach();
-        this.viewContainerRef.clear();
+        (_d = this.viewContainerRef) === null || _d === void 0 ? void 0 : _d.detach();
+        (_e = this.viewContainerRef) === null || _e === void 0 ? void 0 : _e.clear();
     }
     addTooltipElement() {
+        var _a;
         if (!this.tooltipRef) {
             this.createTooltipElement();
         }
         this.tooltipRef.instance.content = this.content;
         this.tooltip = this.tooltipRef.location.nativeElement;
+        this.renderer.addClass(this.tooltip, 'd-none');
+        this.renderer.addClass(this.tooltip, 'fade');
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         setTimeout(() => {
             this.popperInstance = createPopper(this.hostElement.nativeElement, this.tooltip, Object.assign({}, this.popperOptions));
+            this.viewContainerRef.insert(this.tooltipRef.hostView);
+            this.renderer.appendChild(this.document.body, this.tooltip);
+            if (!this.visible) {
+                this.removeTooltipElement();
+                return;
+            }
             setTimeout(() => {
                 this.tooltipId = this.getUID('tooltip');
                 this.tooltipRef.instance.id = this.tooltipId;
+                if (!this.visible) {
+                    this.removeTooltipElement();
+                    return;
+                }
+                this.renderer.removeClass(this.tooltip, 'd-none');
                 this.tooltipRef.instance.visible = this.visible;
-                this.renderer.appendChild(this.document.body, this.tooltip);
                 this.popperInstance.forceUpdate();
-                this.tooltipRef.changeDetectorRef.markForCheck();
-                // this.tooltipRef.changeDetectorRef.detectChanges();
             }, 100);
         });
     }
     removeTooltipElement() {
+        this.tooltipId = '';
         if (!this.tooltipRef) {
             return;
         }
         this.tooltipRef.instance.visible = this.visible;
+        this.tooltipRef.instance.id = undefined;
         setTimeout(() => {
             var _a;
-            // this.tooltipRef.changeDetectorRef.detectChanges();
-            this.tooltipRef.instance.id = undefined;
-            this.renderer.removeChild(this.document.body, this.tooltip);
-            (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.tooltipId = '';
+            (_a = this.viewContainerRef) === null || _a === void 0 ? void 0 : _a.detach();
         }, 300);
     }
 }
-TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Directive });
 TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TooltipDirective, selector: "[cTooltip]", inputs: { content: ["cTooltip", "content"], popperOptions: ["cTooltipOptions", "popperOptions"], placement: ["cTooltipPlacement", "placement"], trigger: ["cTooltipTrigger", "trigger"], visible: ["cTooltipVisible", "visible"] }, host: { properties: { "attr.aria-describedby": "this.ariaDescribedBy" } }, providers: [ListenersService], exportAs: ["cTooltip"], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -9017,10 +9027,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                     providers: [ListenersService]
                 }]
         }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
+        return [{ type: Document, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: ListenersService }];
+                    }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: ListenersService }];
     }, propDecorators: { content: [{
                 type: Input,
                 args: ['cTooltip']