ng-tailwind 2.30.357 → 2.30.358

package/bundles/ng-tailwind.umd.js

@@ -1763,6 +1763,7 @@
             var _this = this;
             this.ngtDropdownContainer = ngtDropdownContainer;
             this.autoYReverse = true;
+            this.closeTimeout = 1000;
             this.openMethod = exports.NgtDropdownOpenMethod.HOVER;
             this.onToggle = new core.EventEmitter();
             this.onHostClick = new core.EventEmitter();
@@ -1797,15 +1798,9 @@
             }
         };
         NgtDropdownComponent.prototype.close = function () {
-            var _this = this;
-            if (this.closeTimeoutInstance) {
-                clearTimeout(this.closeTimeoutInstance);
-            }
-            if (this.closeTimeout) {
-                this.closeTimeoutInstance = setTimeout(function () { return _this.hideContainer(); }, this.closeTimeout);
-                return;
-            }
-            this.hideContainer();
+            this.isOpen = false;
+            this.containerXPosition = null;
+            this.containerYPosition = null;
         };
         NgtDropdownComponent.prototype.toggle = function () {
             var _this = this;
@@ -1825,14 +1820,17 @@
                 this.watchHover(host, container);
             }
         };
-        NgtDropdownComponent.prototype.onClick = function (event) {
+        NgtDropdownComponent.prototype.onClick = function (event, host, container) {
             var _a;
             (_a = this.onHostClick) === null || _a === void 0 ? void 0 : _a.emit();
-            if (this.openMethod == exports.NgtDropdownOpenMethod.CLICK) {
+            if (this.isClickMethod()) {
                 event.preventDefault();
                 event.stopPropagation();
                 this.toggle();
             }
+            if (this.openMethod == exports.NgtDropdownOpenMethod.POPOVER_CLICK) {
+                this.watchHover(host, container);
+            }
         };
         NgtDropdownComponent.prototype.onRightClick = function (event) {
             if (this.openMethod == exports.NgtDropdownOpenMethod.RIGHT_CLICK) {
@@ -1891,7 +1889,7 @@
                     _this.close();
                     clearInterval(interval);
                 }
-            }, 1000);
+            }, this.closeTimeout);
         };
         NgtDropdownComponent.prototype.isInHover = function (host, container) {
             return host.parentElement.querySelector(':hover') == host ||
@@ -1901,17 +1899,16 @@
             this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
             this.subscriptions = [];
         };
-        NgtDropdownComponent.prototype.hideContainer = function () {
-            this.isOpen = false;
-            this.containerXPosition = null;
-            this.containerYPosition = null;
+        NgtDropdownComponent.prototype.isClickMethod = function () {
+            return this.openMethod == exports.NgtDropdownOpenMethod.CLICK
+                || this.openMethod == exports.NgtDropdownOpenMethod.POPOVER_CLICK;
         };
         return NgtDropdownComponent;
     }());
     NgtDropdownComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'ngt-dropdown',
-                    template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event)\" (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <ng-content select='[container]'></ng-content>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>",
+                    template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\" (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <ng-content select='[container]'></ng-content>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>\n",
                     animations: [
                         animations.trigger('openClose', [
                             animations.state('open', animations.style({ opacity: 1, transform: 'translateY(0px)' })),
@@ -1942,6 +1939,7 @@
     exports.NgtDropdownOpenMethod = void 0;
     (function (NgtDropdownOpenMethod) {
         NgtDropdownOpenMethod["CLICK"] = "CLICK";
+        NgtDropdownOpenMethod["POPOVER_CLICK"] = "POPOVER_CLICK";
         NgtDropdownOpenMethod["RIGHT_CLICK"] = "RIGHT_CLICK";
         NgtDropdownOpenMethod["HOVER"] = "HOVER";
     })(exports.NgtDropdownOpenMethod || (exports.NgtDropdownOpenMethod = {}));
@@ -7708,20 +7706,24 @@
             this.injector = injector;
             this.openMethod = exports.NgtPopoverOpenMethod.HOVER;
             this.onClick = new core.EventEmitter();
-            this.stylesToCompile = ['h', 'w', 'px', 'py', 'shadow', 'text', 'border', 'color.border', 'color.bg', 'color.text'];
+            this.stylesToCompile = ['h', 'w', 'px', 'py', 'm', 'mx', 'my', 'shadow', 'text', 'border', 'color.border', 'color.bg', 'color.text'];
             if (this.ngtStylizableDirective) {
                 this.ngtStyle = this.ngtStylizableDirective.getNgtStylizableService();
             }
             else {
                 this.ngtStyle = new NgtStylizableService();
             }
-            this.ngtStyle.load(this.injector, 'NgtHelper', {
+            this.ngtStyle.load(this.injector, 'NgtPopover', {
                 text: 'text-sm',
                 fontCase: '',
+                py: 'py-3',
+                px: 'px-2',
+                border: 'border',
                 color: {
+                    border: 'border-gray-400',
                     text: 'text-black',
-                    bg: 'bg-gray-200'
-                }
+                    bg: 'bg-white'
+                },
             });
         }
         NgtPopoverComponent.prototype.fireClickEvent = function () {
@@ -7739,7 +7741,7 @@
     NgtPopoverComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'ngt-popover',
-                    template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"closeOnClick\" [openMethod]=\"openMethod\"\n            [autoYReverse]=\"false\" [reverseXPosition]=\"true\" [reverseYPosition]=\"!placeOnBottom\" [closeTimeout]=\"closeTimeout\"\n            (onHostClick)=\"fireClickEvent()\" #dropdownRef>\n    <div #hostDiv host>\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"bg-gray-100 px-2 text-sm rounded-lg hover:opacity-100 text-gray-800 shadow-lg -mb-4\"\n        [ngClass]=\"ngtStyle.compile(stylesToCompile)\" container>\n\n        <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n</ngt-dropdown>\n"
+                    template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"closeOnClick\" [openMethod]=\"openMethod\"\n            [autoYReverse]=\"false\" [reverseXPosition]=\"!placeOnLeft\" [reverseYPosition]=\"!placeOnBottom\"\n            [closeTimeout]=\"closeTimeout\" (onHostClick)=\"fireClickEvent()\" #dropdownRef>\n    <div #hostDiv host>\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"bg-gray-100 rounded-lg hover:opacity-100 text-gray-800 shadow-lg -mb-4\"\n        [ngClass]=\"ngtStyle.compile(stylesToCompile)\" container>\n\n        <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n</ngt-dropdown>\n"
                 },] }
     ];
     NgtPopoverComponent.ctorParameters = function () { return [
@@ -7754,11 +7756,13 @@
         openMethod: [{ type: core.Input }],
         closeOnClick: [{ type: core.Input }],
         placeOnBottom: [{ type: core.Input }],
+        placeOnLeft: [{ type: core.Input }],
         onClick: [{ type: core.Output }]
     };
     exports.NgtPopoverOpenMethod = void 0;
     (function (NgtPopoverOpenMethod) {
         NgtPopoverOpenMethod["CLICK"] = "CLICK";
+        NgtPopoverOpenMethod["POPOVER_CLICK"] = "POPOVER_CLICK";
         NgtPopoverOpenMethod["RIGHT_CLICK"] = "RIGHT_CLICK";
         NgtPopoverOpenMethod["HOVER"] = "HOVER";
     })(exports.NgtPopoverOpenMethod || (exports.NgtPopoverOpenMethod = {}));