ng-tailwind 4.2.22 → 4.2.24

package/fesm2020/ng-tailwind.mjs

@@ -4840,9 +4840,9 @@ class NgtSliderComponent extends NgtBaseNgModel {
     }
 }
 NgtSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSliderComponent, selector: "ngt-slider", inputs: { label: "label", shining: "shining", name: "name", min: "min", max: "max", step: "step", color: "color" }, providers: [
+NgtSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSliderComponent, selector: "ngt-slider", inputs: { label: "label", shining: "shining", isDisabled: "isDisabled", showPercentageSymbol: "showPercentageSymbol", name: "name", min: "min", max: "max", step: "step", color: "color" }, providers: [
         NgtMakeProvider(NgtSliderComponent),
-    ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "display", first: true, predicate: ["display"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\" type=\"range\" [name]='name' ([ngModel])='value'\n            oninput=\"display.innerHTML=value\" onchange=\"display.innerHTML=value\" [min]='min' [max]='max' [step]='step'\n            #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display></span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>\n", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }], viewProviders: [
+    ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "display", first: true, predicate: ["display"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\"\n            [class.cursor-not-allowed]=\"isDisabled\" type=\"range\" [name]='name' ([ngModel])='value'\n            oninput=\"display.innerHTML=value\" onchange=\"display.innerHTML=value\" [min]='min' [max]='max' [step]='step'\n            [disabled]=\"isDisabled\" #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display></span>\n        <span *ngIf=\"showPercentageSymbol\" class=\"text-xs font-semibold\">%</span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderComponent, decorators: [{
@@ -4851,7 +4851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         NgtMakeProvider(NgtSliderComponent),
                     ], viewProviders: [
                         { provide: ControlContainer, useExisting: NgForm }
-                    ], template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\" type=\"range\" [name]='name' ([ngModel])='value'\n            oninput=\"display.innerHTML=value\" onchange=\"display.innerHTML=value\" [min]='min' [max]='max' [step]='step'\n            #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display></span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>\n", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"] }]
+                    ], template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\"\n            [class.cursor-not-allowed]=\"isDisabled\" type=\"range\" [name]='name' ([ngModel])='value'\n            oninput=\"display.innerHTML=value\" onchange=\"display.innerHTML=value\" [min]='min' [max]='max' [step]='step'\n            [disabled]=\"isDisabled\" #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display></span>\n        <span *ngIf=\"showPercentageSymbol\" class=\"text-xs font-semibold\">%</span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$2.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -4870,6 +4870,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Input
             }], shining: [{
                 type: Input
+            }], isDisabled: [{
+                type: Input
+            }], showPercentageSymbol: [{
+                type: Input
             }], name: [{
                 type: Input
             }], min: [{
@@ -7684,15 +7688,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class NgtPopoverTooltipComponent {
     constructor() {
+        this.onMouseHoverEvent = new EventEmitter();
+        this.onMouseLeaveEvent = new EventEmitter();
         this.position = NgtPopoverPosition.DEFAULT;
         this.positionClasses = {
             [NgtPopoverPosition.TOP]: '-mt-10',
             [NgtPopoverPosition.BOTTOM]: '-mb-10',
         };
     }
+    onMouseLeave() {
+        this.onMouseLeaveEvent.emit();
+    }
+    onMouseEnter() {
+        this.onMouseHoverEvent.emit();
+    }
 }
 NgtPopoverTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtPopoverTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPopoverTooltipComponent, selector: "ngt-popover-tooltip", ngImport: i0, template: "<div class=\"bg-white rounded-lg shadow-2xl border border-gray-200 absolute max-w-7xl\"\n    [ngClass]=\"positionClasses[position]\" [style.left.px]=\"positionX\" [style.top.px]=\"positionY\"\n    style=\"z-index: 999999 !important; width: max-content !important;\"\n    (click)=\"$event.stopPropagation()\" @enterAnimation>\n\n    <div *ngIf=\"!popoverTemplate; else showTemplate\" class=\"px-2 py-1 text-gray-700 whitespace-nowrap\">\n        {{ popover }}\n    </div>\n\n    <ng-template #showTemplate>\n        <ng-container [ngTemplateOutlet]=\"popoverTemplate\"></ng-container>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+NgtPopoverTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPopoverTooltipComponent, selector: "ngt-popover-tooltip", outputs: { onMouseHoverEvent: "onMouseHoverEvent", onMouseLeaveEvent: "onMouseLeaveEvent" }, host: { listeners: { "mouseleave": "onMouseLeave()", "mouseenter": "onMouseEnter()" } }, ngImport: i0, template: "<div class=\"bg-white rounded-lg shadow-2xl border border-gray-200 absolute max-w-7xl\"\n    [ngClass]=\"positionClasses[position]\" [style.left.px]=\"positionX\" [style.top.px]=\"positionY\"\n    style=\"z-index: 999999 !important; width: max-content !important;\"\n    (click)=\"$event.stopPropagation()\" @enterAnimation>\n\n    <div *ngIf=\"!popoverTemplate; else showTemplate\" class=\"px-2 py-1 text-gray-700 whitespace-nowrap\">\n        {{ popover }}\n    </div>\n\n    <ng-template #showTemplate>\n        <ng-container [ngTemplateOutlet]=\"popoverTemplate\"></ng-container>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
         trigger('enterAnimation', [
             state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
             transition(':enter', [
@@ -7710,7 +7722,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                             ])
                         ]),
                     ], template: "<div class=\"bg-white rounded-lg shadow-2xl border border-gray-200 absolute max-w-7xl\"\n    [ngClass]=\"positionClasses[position]\" [style.left.px]=\"positionX\" [style.top.px]=\"positionY\"\n    style=\"z-index: 999999 !important; width: max-content !important;\"\n    (click)=\"$event.stopPropagation()\" @enterAnimation>\n\n    <div *ngIf=\"!popoverTemplate; else showTemplate\" class=\"px-2 py-1 text-gray-700 whitespace-nowrap\">\n        {{ popover }}\n    </div>\n\n    <ng-template #showTemplate>\n        <ng-container [ngTemplateOutlet]=\"popoverTemplate\"></ng-container>\n    </ng-template>\n</div>\n" }]
-        }] });
+        }], propDecorators: { onMouseHoverEvent: [{
+                type: Output
+            }], onMouseLeaveEvent: [{
+                type: Output
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }] } });
 var NgtPopoverPosition;
 (function (NgtPopoverPosition) {
     NgtPopoverPosition["DEFAULT"] = "TOP";
@@ -7850,6 +7872,8 @@ class NgtPopoverDirective {
         this.setupPopoverComponent();
     }
     destroy() {
+        this.toolTipMouseHoverSubscription?.unsubscribe();
+        this.toolTipMouseLeaveSubscription?.unsubscribe();
         this.componentRef?.destroy();
         this.componentRef = null;
     }
@@ -7865,8 +7889,21 @@ class NgtPopoverDirective {
         this.componentRef.instance.popover = this.ngtPopoverContent;
         this.componentRef.instance.popoverTemplate = this.ngtPopoverTemplate;
         this.componentRef.instance.position = this.ngtPopoverPosition;
+        this.bindSubscriptions();
         document.body.appendChild(this.componentRef.location.nativeElement);
     }
+    bindSubscriptions() {
+        this.toolTipMouseHoverSubscription = this.componentRef.instance
+            .onMouseHoverEvent
+            .subscribe(() => {
+            if (this.dismissTimeoutInstance) {
+                clearTimeout(this.dismissTimeoutInstance);
+            }
+        });
+        this.toolTipMouseLeaveSubscription = this.componentRef.instance
+            .onMouseLeaveEvent
+            .subscribe(() => this.onMouseLeave());
+    }
 }
 NgtPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
 NgtPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NgtPopoverDirective, selector: "[ngt-popover]", inputs: { ngtPopoverContent: "ngtPopoverContent", ngtPopoverTemplate: "ngtPopoverTemplate", ngtPopoverPosition: "ngtPopoverPosition", dismissDelay: "dismissDelay", showDelay: "showDelay", closeOnClick: "closeOnClick", openMethod: "openMethod" }, host: { listeners: { "click": "onClick()", "document:click": "onDocumentClick($event.target)", "mouseleave": "onMouseLeave()", "mouseenter": "onMouseEnter()" } }, ngImport: i0 });