@trudb/tru-common-lib 0.1.804 → 0.1.805

package/fesm2022/trudb-tru-common-lib.mjs

@@ -3943,13 +3943,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
         }] });
 
 class TruToolbarMenuItem {
+    window;
     config;
     isMouseDown = false;
     maxHeight = 200;
-    constructor() {
-        document.addEventListener('mousedown', this.mouseDown);
-        document.addEventListener('mouseup', this.mouseUp);
-        document.addEventListener('mousemove', this.mouseMove);
+    constructor(window) {
+        this.window = window;
+        this.window.addEventListener('mousedown', this.mouseDown);
+        this.window.addEventListener('mouseup', this.mouseUp);
+        this.window.addEventListener('mousemove', this.mouseMove);
     }
     mouseDown = (event) => {
         this.isMouseDown = true;
@@ -3960,10 +3962,13 @@ class TruToolbarMenuItem {
     mouseMove = (event) => {
         let target = event.target;
         if (target && target.classList.contains('desktop-window-resizable-handle') && this.isMouseDown) {
-            this.maxHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 40;
+            this.updateMenuHeight();
             console.log(event);
         }
     };
+    updateMenuHeight = () => {
+        this.maxHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 40;
+    };
     onClick = (event) => {
         var target = event.target;
         var isActive = target.classList.contains('is-active');
@@ -3972,20 +3977,21 @@ class TruToolbarMenuItem {
         }
         else {
             target.classList.add('is-active');
+            this.updateMenuHeight();
         }
     };
     ngOnDestroy() {
-        document.removeEventListener('mousedown', this.mouseDown);
-        document.removeEventListener('mousemove', this.mouseMove);
-        document.removeEventListener('mouseup', this.mouseUp);
+        this.window.removeEventListener('mousedown', this.mouseDown);
+        this.window.removeEventListener('mousemove', this.mouseMove);
+        this.window.removeEventListener('mouseup', this.mouseUp);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruToolbarMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruToolbarMenuItem, deps: [{ token: Window }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: TruToolbarMenuItem, isStandalone: true, selector: "tru-toolbar-menu-item", inputs: { config: "config" }, ngImport: i0, template: "<div (click)=\"onClick($event)\">\r\n  <p *ngIf=\"config.menuLabel\">{{config.menuLabel}}</p>\r\n  <i *ngIf=\"config.menuIcon\" class=\"{{config.menuIcon}} sub-menu-icon\" tabindex=\"-1\"></i>\r\n  <div class=\"sub-menu\" *ngIf=\"config.choices\" [style.maxHeight.px]=\"[maxHeight]\">\r\n    <ul class=\"sub-menu-nav\">\r\n      <li *ngFor=\"let choice of config.choices\">\r\n        <p *ngIf=\"choice.separator && choice.title\" class=\"separator-title\">{{choice.title}}</p>\r\n        <hr *ngIf=\"choice.separator\" />\r\n        <div style=\"display: none\" *ngIf=\"choice?.openOnStart\">{{choice?.openOnStart | openOnStart}}</div>\r\n        <button *ngIf=\"!choice.separator\" tabindex=\"-1\" (click)=\"choice.fire()\" [disabled]=\"!choice.enabled()\">{{choice.label}}</button>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [".menu{padding:0 10px;border-bottom:1px solid #6b6b6b;background:#f7f7f7;height:26px}.menu,.menu a{color:#000}.menu-nav{float:left;height:26px}.menu-nav>*{margin-right:0}.menu-nav>*>a{padding:0 10px;height:20px;line-height:19px;display:block;margin:3px 2px 2px}.menu-nav>*>a:hover{background:#959595}.menu-nav>*:active>a{color:#fff}.menu-nav select::-ms-expand{display:none}.menu-nav{margin:0;list-style:none;padding:0}.menu-nav>*{float:left;position:relative;margin:0 .5em 0 0;line-height:1}.menu-nav>*:last-child{margin-right:0}li.has-sub-menu{padding:0 5px}.has-sub-menu{position:relative;cursor:pointer}.has-sub-menu button{background:transparent;border:none;text-decoration:none;cursor:pointer;display:block;width:100%;text-align:left;outline:none;padding:0 10px!important}.has-sub-menu p{background:transparent;border:none;text-decoration:none;cursor:pointer;display:block;width:100%;text-align:left;outline:none;padding:0 10px!important;line-height:26px;pointer-events:none}.has-sub-menu p.separator-title{padding:0!important;font-size:12px;color:#ababab}.has-sub-menu:hover{background:#959595}\n", "p{margin:0;line-height:26px;pointer-events:none}.sub-menu{display:none;position:absolute;left:-1px;min-width:200px;padding:5px 0;background:#fff;border:1px solid #d5d5d5;border-top:none;z-index:99999999;overflow-y:auto}.sub-menu-nav a{display:block;padding:0 20px;line-height:1.5}.sub-menu-nav a:hover{background:#959595;color:#fff}.sub-menu-nav hr{margin:0;color:#dedede}.sub-menu button{background:#fff;border:none;text-decoration:none;cursor:pointer;display:block;padding:0 20px!important;line-height:1.5;width:100%;text-align:left;outline:none;white-space:nowrap;overflow:hidden;font-size:12px}.sub-menu button:hover{background:#959595;color:#fff}.sub-menu button:disabled{background:#fff;color:#000;opacity:.5}.sub-menu-nav>li{position:relative;padding:0 3px}.sub-menu-nav>li:hover>.sub-menu{display:block;top:-6px;left:190px;border:1px solid #d5d5d5}.sub-menu-nav{margin:0;padding:0;list-style:none}.sub-menu-nav>*+*{display:block;margin-top:5px}.sub-menu-icon{font-size:18px;line-height:22px;vertical-align:middle;pointer-events:none}.is-active div.sub-menu{display:block}.sub-menu-nav p.separator-title{padding:0!important;font-size:12px;color:#ababab}.sub-menu-nav hr{margin:0;color:#dedede;border:0;border-top:1px solid #dfdfdf;border-bottom:1px solid #fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TruOpenOnStart, name: "openOnStart" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TruToolbarMenuItem, decorators: [{
             type: Component,
             args: [{ selector: 'tru-toolbar-menu-item', imports: [CommonModule, FormsModule, TruOpenOnStart], template: "<div (click)=\"onClick($event)\">\r\n  <p *ngIf=\"config.menuLabel\">{{config.menuLabel}}</p>\r\n  <i *ngIf=\"config.menuIcon\" class=\"{{config.menuIcon}} sub-menu-icon\" tabindex=\"-1\"></i>\r\n  <div class=\"sub-menu\" *ngIf=\"config.choices\" [style.maxHeight.px]=\"[maxHeight]\">\r\n    <ul class=\"sub-menu-nav\">\r\n      <li *ngFor=\"let choice of config.choices\">\r\n        <p *ngIf=\"choice.separator && choice.title\" class=\"separator-title\">{{choice.title}}</p>\r\n        <hr *ngIf=\"choice.separator\" />\r\n        <div style=\"display: none\" *ngIf=\"choice?.openOnStart\">{{choice?.openOnStart | openOnStart}}</div>\r\n        <button *ngIf=\"!choice.separator\" tabindex=\"-1\" (click)=\"choice.fire()\" [disabled]=\"!choice.enabled()\">{{choice.label}}</button>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [".menu{padding:0 10px;border-bottom:1px solid #6b6b6b;background:#f7f7f7;height:26px}.menu,.menu a{color:#000}.menu-nav{float:left;height:26px}.menu-nav>*{margin-right:0}.menu-nav>*>a{padding:0 10px;height:20px;line-height:19px;display:block;margin:3px 2px 2px}.menu-nav>*>a:hover{background:#959595}.menu-nav>*:active>a{color:#fff}.menu-nav select::-ms-expand{display:none}.menu-nav{margin:0;list-style:none;padding:0}.menu-nav>*{float:left;position:relative;margin:0 .5em 0 0;line-height:1}.menu-nav>*:last-child{margin-right:0}li.has-sub-menu{padding:0 5px}.has-sub-menu{position:relative;cursor:pointer}.has-sub-menu button{background:transparent;border:none;text-decoration:none;cursor:pointer;display:block;width:100%;text-align:left;outline:none;padding:0 10px!important}.has-sub-menu p{background:transparent;border:none;text-decoration:none;cursor:pointer;display:block;width:100%;text-align:left;outline:none;padding:0 10px!important;line-height:26px;pointer-events:none}.has-sub-menu p.separator-title{padding:0!important;font-size:12px;color:#ababab}.has-sub-menu:hover{background:#959595}\n", "p{margin:0;line-height:26px;pointer-events:none}.sub-menu{display:none;position:absolute;left:-1px;min-width:200px;padding:5px 0;background:#fff;border:1px solid #d5d5d5;border-top:none;z-index:99999999;overflow-y:auto}.sub-menu-nav a{display:block;padding:0 20px;line-height:1.5}.sub-menu-nav a:hover{background:#959595;color:#fff}.sub-menu-nav hr{margin:0;color:#dedede}.sub-menu button{background:#fff;border:none;text-decoration:none;cursor:pointer;display:block;padding:0 20px!important;line-height:1.5;width:100%;text-align:left;outline:none;white-space:nowrap;overflow:hidden;font-size:12px}.sub-menu button:hover{background:#959595;color:#fff}.sub-menu button:disabled{background:#fff;color:#000;opacity:.5}.sub-menu-nav>li{position:relative;padding:0 3px}.sub-menu-nav>li:hover>.sub-menu{display:block;top:-6px;left:190px;border:1px solid #d5d5d5}.sub-menu-nav{margin:0;padding:0;list-style:none}.sub-menu-nav>*+*{display:block;margin-top:5px}.sub-menu-icon{font-size:18px;line-height:22px;vertical-align:middle;pointer-events:none}.is-active div.sub-menu{display:block}.sub-menu-nav p.separator-title{padding:0!important;font-size:12px;color:#ababab}.sub-menu-nav hr{margin:0;color:#dedede;border:0;border-top:1px solid #dfdfdf;border-bottom:1px solid #fff}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: Window }], propDecorators: { config: [{
                 type: Input
             }] } });