@coreui/angular 4.2.0 → 4.2.3

package/fesm2020/coreui-angular.mjs

@@ -6183,10 +6183,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: [{
@@ -6210,11 +6210,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;
         /**
@@ -6237,10 +6236,10 @@ class PopoverDirective {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 8],
-                    },
-                },
-            ],
+                        offset: [0, 8]
+                    }
+                }
+            ]
         };
     }
     /**
@@ -6263,20 +6262,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() {
@@ -6310,8 +6308,8 @@ 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() {
@@ -6320,8 +6318,8 @@ class PopoverDirective {
         // @ts-ignore
         this.popoverRef = undefined;
         this.popperInstance?.destroy();
-        this.viewContainerRef.detach();
-        this.viewContainerRef.clear();
+        this.viewContainerRef?.detach();
+        this.viewContainerRef?.clear();
     }
     addPopoverElement() {
         if (!this.popoverRef) {
@@ -6329,39 +6327,43 @@ class PopoverDirective {
         }
         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')
+        this.popperInstance?.destroy();
         setTimeout(() => {
             this.popperInstance = createPopper(this.hostElement.nativeElement, this.popover, { ...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(() => {
             this.viewContainerRef.detach();
-            // this.viewContainerRef.remove();
-            // this.renderer.removeChild(this.document.body, this.popover);
-            this.popperInstance?.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,
@@ -6373,7 +6375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: ListenersService }]; }, propDecorators: { content: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: ListenersService }]; }, propDecorators: { content: [{
                 type: Input,
                 args: ['cPopover']
             }], popperOptions: [{
@@ -8786,11 +8788,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;
         /**
@@ -8813,10 +8814,10 @@ class TooltipDirective {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 0],
-                    },
-                },
-            ],
+                        offset: [0, 0]
+                    }
+                }
+            ]
         };
     }
     /**
@@ -8835,8 +8836,6 @@ class TooltipDirective {
      */
     set visible(value) {
         this._visible = value;
-        value ? this.addTooltipElement() : this.removeTooltipElement();
-        this.tooltipRef?.changeDetectorRef.markForCheck();
     }
     get visible() {
         return this._visible;
@@ -8854,7 +8853,6 @@ class TooltipDirective {
         this.destroyTooltipElement();
     }
     ngOnInit() {
-        // this.createTooltipElement();
         this.setListeners();
     }
     setListeners() {
@@ -8863,12 +8861,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);
@@ -8885,8 +8886,8 @@ 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() {
@@ -8895,8 +8896,8 @@ class TooltipDirective {
         // @ts-ignore
         this.tooltipRef = undefined;
         this.popperInstance?.destroy();
-        this.viewContainerRef.detach();
-        this.viewContainerRef.clear();
+        this.viewContainerRef?.detach();
+        this.viewContainerRef?.clear();
     }
     addTooltipElement() {
         if (!this.tooltipRef) {
@@ -8904,34 +8905,43 @@ class TooltipDirective {
         }
         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');
+        this.popperInstance?.destroy();
         setTimeout(() => {
             this.popperInstance = createPopper(this.hostElement.nativeElement, this.tooltip, { ...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(() => {
-            // this.tooltipRef.changeDetectorRef.detectChanges();
-            this.tooltipRef.instance.id = undefined;
-            this.renderer.removeChild(this.document.body, this.tooltip);
-            this.popperInstance?.destroy();
-            this.tooltipId = '';
+            this.viewContainerRef?.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,
@@ -8940,10 +8950,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                     exportAs: 'cTooltip',
                     providers: [ListenersService]
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: ListenersService }]; }, propDecorators: { content: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: ListenersService }]; }, propDecorators: { content: [{
                 type: Input,
                 args: ['cTooltip']
             }], popperOptions: [{