@dotglitch/ngx-common 1.1.8 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/tooltip/tooltip.component.d.ts +7 -2
- package/directives/tooltip.directive.d.ts +2 -0
- package/esm2022/components/tooltip/tooltip.component.mjs +81 -31
- package/esm2022/directives/tooltip.directive.mjs +21 -18
- package/fesm2022/dotglitch-ngx-common.mjs +108 -55
- package/fesm2022/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2,8 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive, Pipe, Injectable, InjectionToken, EventEmitter, isDevMode, ViewContainerRef, ViewChild, Output, NgModule, ViewEncapsulation, SecurityContext, ContentChild, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/dialog';
|
|
4
4
|
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
|
|
5
|
-
import
|
|
6
|
-
import { CommonModule, NgIf, NgForOf, NgTemplateOutlet, DOCUMENT, NgComponentOutlet, DatePipe } from '@angular/common';
|
|
5
|
+
import { NgTemplateOutlet, NgComponentOutlet, NgIf, NgForOf, DOCUMENT, DatePipe, CommonModule } from '@angular/common';
|
|
7
6
|
import * as i1$1 from '@angular/platform-browser';
|
|
8
7
|
import { createApplication } from '@angular/platform-browser';
|
|
9
8
|
import { firstValueFrom, debounceTime, of, Subject, BehaviorSubject } from 'rxjs';
|
|
@@ -14,7 +13,7 @@ import * as i5$1 from '@angular/material/progress-spinner';
|
|
|
14
13
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
15
14
|
import * as i3 from '@angular/cdk/portal';
|
|
16
15
|
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
17
|
-
import * as i2
|
|
16
|
+
import * as i2 from '@angular/cdk/dialog';
|
|
18
17
|
import { retry } from 'rxjs/operators';
|
|
19
18
|
import * as i1$2 from '@angular/common/http';
|
|
20
19
|
import * as i3$1 from '@angular/material/input';
|
|
@@ -35,9 +34,9 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
|
35
34
|
import { TabulatorFull } from 'tabulator-tables';
|
|
36
35
|
import * as i7 from '@angular/material/progress-bar';
|
|
37
36
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
38
|
-
import * as i2$
|
|
37
|
+
import * as i2$1 from '@angular/material/button';
|
|
39
38
|
import { MatButtonModule } from '@angular/material/button';
|
|
40
|
-
import * as i2$
|
|
39
|
+
import * as i2$2 from '@angular/material/expansion';
|
|
41
40
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
42
41
|
import * as path from 'path-browserify';
|
|
43
42
|
import * as React from 'react';
|
|
@@ -163,7 +162,7 @@ const getPosition = (el, config = {}, bounds) => {
|
|
|
163
162
|
return cords;
|
|
164
163
|
};
|
|
165
164
|
|
|
166
|
-
const calcTooltipBounds = async (template, data) => {
|
|
165
|
+
const calcTooltipBounds = async (template, data, matDialogConfig) => {
|
|
167
166
|
const args = {
|
|
168
167
|
data: data || {},
|
|
169
168
|
template,
|
|
@@ -172,24 +171,43 @@ const calcTooltipBounds = async (template, data) => {
|
|
|
172
171
|
ownerCords: { x: 0, y: 0, width: 0, height: 0 },
|
|
173
172
|
id: null
|
|
174
173
|
};
|
|
175
|
-
//
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
174
|
+
// dimensions should be in px... Might need to handle vw/v
|
|
175
|
+
if (matDialogConfig?.width && matDialogConfig?.height) {
|
|
176
|
+
return {
|
|
177
|
+
width: parseInt(matDialogConfig.width),
|
|
178
|
+
height: parseInt(matDialogConfig.height),
|
|
179
|
+
top: 0,
|
|
180
|
+
left: 0,
|
|
181
|
+
right: 0,
|
|
182
|
+
bottom: 0
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
return new Promise((res, rej) => {
|
|
186
|
+
const zone = Zone.current.fork({
|
|
187
|
+
name: 'zone',
|
|
188
|
+
});
|
|
189
|
+
zone.run(async () => {
|
|
190
|
+
// Forcibly bootstrap the ctx menu outside of the client application's zone.
|
|
191
|
+
const app = await createApplication({
|
|
192
|
+
providers: [
|
|
193
|
+
{ provide: MAT_DIALOG_DATA, useValue: args }
|
|
194
|
+
]
|
|
195
|
+
});
|
|
196
|
+
app.injector;
|
|
197
|
+
const del = document.createElement("div");
|
|
198
|
+
del.style.position = "absolute";
|
|
199
|
+
del.style.left = '-1000vw';
|
|
200
|
+
document.body.append(del);
|
|
201
|
+
const base = app.bootstrap(TooltipComponent, del);
|
|
202
|
+
const { instance } = base;
|
|
203
|
+
await firstValueFrom(app.isStable);
|
|
204
|
+
const el = instance.viewContainer?.element?.nativeElement;
|
|
205
|
+
const rect = el.getBoundingClientRect();
|
|
206
|
+
app.destroy();
|
|
207
|
+
del.remove();
|
|
208
|
+
res(rect);
|
|
209
|
+
});
|
|
180
210
|
});
|
|
181
|
-
const del = document.createElement("div");
|
|
182
|
-
del.style.position = "absolute";
|
|
183
|
-
del.style.left = '-1000vw';
|
|
184
|
-
document.body.append(del);
|
|
185
|
-
const base = app.bootstrap(TooltipComponent, del);
|
|
186
|
-
const { instance } = base;
|
|
187
|
-
await firstValueFrom(app.isStable);
|
|
188
|
-
const el = instance.viewContainer?.element?.nativeElement;
|
|
189
|
-
const rect = el.getBoundingClientRect();
|
|
190
|
-
app.destroy();
|
|
191
|
-
del.remove();
|
|
192
|
-
return rect;
|
|
193
211
|
};
|
|
194
212
|
class TooltipComponent {
|
|
195
213
|
constructor(viewContainer, _data, dialog, // optional only for the purpose of estimating dimensions
|
|
@@ -201,6 +219,8 @@ class TooltipComponent {
|
|
|
201
219
|
this.hasBootstrapped = false;
|
|
202
220
|
this.pointerIsOnVoid = false;
|
|
203
221
|
this.isLockedOpen = false;
|
|
222
|
+
this.clientWidth = window.innerWidth;
|
|
223
|
+
this.clientHeight = window.innerHeight;
|
|
204
224
|
this.coverRectCords = {
|
|
205
225
|
top: 0,
|
|
206
226
|
left: 0,
|
|
@@ -250,32 +270,59 @@ class TooltipComponent {
|
|
|
250
270
|
this.isLockedOpen = true;
|
|
251
271
|
});
|
|
252
272
|
}
|
|
273
|
+
onKeyDown(evt) {
|
|
274
|
+
if (this.config.freezeOnKeyCode) {
|
|
275
|
+
if (evt.code == this.config.freezeOnKeyCode)
|
|
276
|
+
this.isLockedOpen = true;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
onVoidPointerDown(evt) {
|
|
280
|
+
if (!this.isLockedOpen) {
|
|
281
|
+
const el = this.viewContainer.element.nativeElement;
|
|
282
|
+
el.querySelector(".void").remove();
|
|
283
|
+
setTimeout(() => {
|
|
284
|
+
const clonedEvt = new PointerEvent("pointerdown", evt);
|
|
285
|
+
const target = document.elementFromPoint(evt.clientX, evt.clientY);
|
|
286
|
+
console.log("DEBUG EVENTS", { evt, clonedEvt });
|
|
287
|
+
target.dispatchEvent(clonedEvt);
|
|
288
|
+
}, 15);
|
|
289
|
+
}
|
|
290
|
+
this.closeOnVoid(true);
|
|
291
|
+
}
|
|
292
|
+
// If the void element gets stuck open, make wheel events pass through.
|
|
293
|
+
onWheel(evt) {
|
|
294
|
+
const el = this.viewContainer.element.nativeElement;
|
|
295
|
+
el.style.display = "none";
|
|
296
|
+
const target = document.elementFromPoint(evt.clientX, evt.clientY);
|
|
297
|
+
el.style.display = "block";
|
|
298
|
+
target.scroll({
|
|
299
|
+
top: evt.deltaY + target.scrollTop,
|
|
300
|
+
left: evt.deltaX + target.scrollLeft,
|
|
301
|
+
behavior: "smooth"
|
|
302
|
+
});
|
|
303
|
+
}
|
|
253
304
|
/**
|
|
254
305
|
* Close the tooltip if these actions occur
|
|
255
306
|
*/
|
|
256
307
|
onClose() {
|
|
257
308
|
if (!this.isLockedOpen)
|
|
258
309
|
this.dialogRef?.close();
|
|
310
|
+
this.clientWidth = window.innerWidth;
|
|
311
|
+
this.clientHeight = window.innerHeight;
|
|
259
312
|
}
|
|
260
313
|
closeOnVoid(force = false) {
|
|
261
314
|
if (!this.isLockedOpen || force)
|
|
262
315
|
this.dialogRef.close();
|
|
263
316
|
}
|
|
264
317
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ViewContainerRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
266
|
-
// NgIf,
|
|
267
|
-
// NgTemplateOutlet,
|
|
268
|
-
// NgComponentOutlet,
|
|
269
|
-
CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n <!-- <div\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n ></div> -->\n\n <div class=\"void left\"\n [style.top]=\"'0px'\"\n [style.left]=\"'0px'\"\n [style.height]=\"'100%'\"\n [style.width]=\"(ownerCords.left) + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n <div class=\"void top\"\n [style.top]=\"'0px'\"\n [style.left]=\"ownerCords.left + 'px'\"\n [style.height]=\"ownerCords.top + 'px'\"\n [style.width]=\"ownerCords.width + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n <div class=\"void right\"\n [style.top]=\"'0px'\"\n [style.left]=\"(ownerCords.left + ownerCords.width) + 'px'\"\n [style.height]=\"'100%'\"\n [style.width]=\"(clientWidth - (ownerCords.left + ownerCords.width)) + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n <div class=\"void\"\n [style.top]=\"(ownerCords.top + ownerCords.height) + 'px'\"\n [style.left]=\"ownerCords.left + 'px'\"\n [style.height]=\"(clientHeight - (ownerCords.top + ownerCords.height)) + 'px'\"\n [style.width]=\"ownerCords.width + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n}\n\n\n<div\n #container\n class=\"container\"\n>\n @if (isTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n }\n @else {\n <ng-container\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n }\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2;position:fixed}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
|
|
270
319
|
}
|
|
271
320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
272
321
|
type: Component,
|
|
273
322
|
args: [{ selector: 'ngx-tooltip', imports: [
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
CommonModule,
|
|
278
|
-
], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n *ngIf=\"coverRectCords\"\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n></div>\n\n<div\n #container\n class=\"container\"\n>\n <ng-container\n *ngIf=\"isTemplate == false\"\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n\n <ng-container\n *ngIf=\"isTemplate == true\"\n >\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
|
|
323
|
+
NgTemplateOutlet,
|
|
324
|
+
NgComponentOutlet
|
|
325
|
+
], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n <!-- <div\n class=\"owner-mask\"\n [style.top]=\"coverRectCords.top + 'px'\"\n [style.left]=\"coverRectCords.left + 'px'\"\n [style.height]=\"coverRectCords.height + 'px'\"\n [style.width]=\"coverRectCords.width + 'px'\"\n style=\"z-index: -1;\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n ></div> -->\n\n <div class=\"void left\"\n [style.top]=\"'0px'\"\n [style.left]=\"'0px'\"\n [style.height]=\"'100%'\"\n [style.width]=\"(ownerCords.left) + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n <div class=\"void top\"\n [style.top]=\"'0px'\"\n [style.left]=\"ownerCords.left + 'px'\"\n [style.height]=\"ownerCords.top + 'px'\"\n [style.width]=\"ownerCords.width + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n <div class=\"void right\"\n [style.top]=\"'0px'\"\n [style.left]=\"(ownerCords.left + ownerCords.width) + 'px'\"\n [style.height]=\"'100%'\"\n [style.width]=\"(clientWidth - (ownerCords.left + ownerCords.width)) + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n <div class=\"void\"\n [style.top]=\"(ownerCords.top + ownerCords.height) + 'px'\"\n [style.left]=\"ownerCords.left + 'px'\"\n [style.height]=\"(clientHeight - (ownerCords.top + ownerCords.height)) + 'px'\"\n [style.width]=\"ownerCords.width + 'px'\"\n (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n (pointerleave)=\"pointerIsOnVoid = false\"\n (pointerdown)=\"onVoidPointerDown($event)\"\n (wheel)=\"onWheel($event)\"\n ></div>\n}\n\n\n<div\n #container\n class=\"container\"\n>\n @if (isTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"$any(template)\"\n [ngTemplateOutletContext]=\"{\n '$implicit': data,\n 'dialog': dialogRef,\n 'element': container,\n 'tooltip': this\n }\"\n ></ng-container>\n }\n @else {\n <ng-container\n [ngComponentOutlet]=\"$any(template)\"\n >\n </ng-container>\n }\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2;position:fixed}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
|
|
279
326
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
|
|
280
327
|
type: Optional
|
|
281
328
|
}, {
|
|
@@ -295,6 +342,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
295
342
|
type: Input
|
|
296
343
|
}], template: [{
|
|
297
344
|
type: Input
|
|
345
|
+
}], onKeyDown: [{
|
|
346
|
+
type: HostListener,
|
|
347
|
+
args: ["window:keydown", ['$event']]
|
|
298
348
|
}], onClose: [{
|
|
299
349
|
type: HostListener,
|
|
300
350
|
args: ["window:resize"]
|
|
@@ -323,12 +373,20 @@ class TooltipDirective {
|
|
|
323
373
|
this.onKeyDownEvt = this.onKeyDown.bind(this);
|
|
324
374
|
if (this.config.freezeOnKeyCode !== null) {
|
|
325
375
|
this.isFreezeOnKeyCodeBound = true;
|
|
326
|
-
|
|
376
|
+
window.addEventListener("keydown", this.onKeyDownEvt);
|
|
327
377
|
}
|
|
328
378
|
}
|
|
379
|
+
ngAfterViewInit() {
|
|
380
|
+
const el = this.viewContainer.element.nativeElement;
|
|
381
|
+
this.config?.triggers?.forEach(t => {
|
|
382
|
+
el.addEventListener(t, () => {
|
|
383
|
+
this.open();
|
|
384
|
+
});
|
|
385
|
+
});
|
|
386
|
+
}
|
|
329
387
|
ngOnDestroy() {
|
|
330
388
|
if (this.isFreezeOnKeyCodeBound) {
|
|
331
|
-
|
|
389
|
+
window.removeEventListener("keydown", this.onKeyDownEvt);
|
|
332
390
|
}
|
|
333
391
|
}
|
|
334
392
|
onKeyDown(evt) {
|
|
@@ -337,20 +395,17 @@ class TooltipDirective {
|
|
|
337
395
|
this.dialogInstance.componentInstance.isLockedOpen = true;
|
|
338
396
|
}
|
|
339
397
|
}
|
|
340
|
-
|
|
398
|
+
async open() {
|
|
399
|
+
if (!this.dialogInstance) {
|
|
400
|
+
const el = this.viewContainer.element.nativeElement;
|
|
401
|
+
this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
|
|
402
|
+
}
|
|
403
|
+
}
|
|
341
404
|
async onPointerEnter(evt) {
|
|
342
405
|
// If the template is not a template ref, do nothing.
|
|
343
406
|
if (!(this.template instanceof TemplateRef))
|
|
344
407
|
return;
|
|
345
|
-
|
|
346
|
-
// This will bypass all other triggers.
|
|
347
|
-
if (this.config?.triggers?.includes("click")) {
|
|
348
|
-
if (!this.dialogInstance) {
|
|
349
|
-
const el = this.viewContainer.element.nativeElement;
|
|
350
|
-
const data = this.data;
|
|
351
|
-
data.isLockedOpen = true;
|
|
352
|
-
this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
|
|
353
|
-
}
|
|
408
|
+
if (Array.isArray(this.config?.triggers) && !this.config.triggers.includes("hover")) {
|
|
354
409
|
return;
|
|
355
410
|
}
|
|
356
411
|
this.isCursorOverTarget = true;
|
|
@@ -358,10 +413,7 @@ class TooltipDirective {
|
|
|
358
413
|
// If the cursor moved away in the time
|
|
359
414
|
if (!this.isCursorOverTarget)
|
|
360
415
|
return;
|
|
361
|
-
|
|
362
|
-
const el = this.viewContainer.element.nativeElement;
|
|
363
|
-
this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
|
|
364
|
-
}
|
|
416
|
+
this.open();
|
|
365
417
|
}, this.config.delay ?? 250);
|
|
366
418
|
}
|
|
367
419
|
async onPointerLeave(evt) {
|
|
@@ -408,7 +460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
408
460
|
}] } });
|
|
409
461
|
// Helper to open the context menu without using the directive.
|
|
410
462
|
const openTooltip = async (dialog, template, data, el, config, focusTrap = false, matPopupOptions) => {
|
|
411
|
-
const rect = await calcTooltipBounds(template, data);
|
|
463
|
+
const rect = await calcTooltipBounds(template, data, matPopupOptions);
|
|
412
464
|
const ownerCords = el.getBoundingClientRect();
|
|
413
465
|
const cords = getPosition(el, config, rect);
|
|
414
466
|
const specificId = ulid();
|
|
@@ -421,6 +473,7 @@ const openTooltip = async (dialog, template, data, el, config, focusTrap = false
|
|
|
421
473
|
data: data,
|
|
422
474
|
template: template,
|
|
423
475
|
config: config,
|
|
476
|
+
matPopupOptions,
|
|
424
477
|
ownerCords: ownerCords,
|
|
425
478
|
selfCords: cords,
|
|
426
479
|
id: specificId
|
|
@@ -1870,7 +1923,7 @@ class LazyLoaderComponent {
|
|
|
1870
1923
|
this.targetContainer.createComponent(this.config.errorComponent);
|
|
1871
1924
|
this.clearEmitter.emit();
|
|
1872
1925
|
}
|
|
1873
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LazyLoaderComponent, deps: [{ token: LazyLoaderService }, { token: i0.ViewContainerRef, optional: true }, { token: i2
|
|
1926
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LazyLoaderComponent, deps: [{ token: LazyLoaderService }, { token: i0.ViewContainerRef, optional: true }, { token: i2.DialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1874
1927
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LazyLoaderComponent, isStandalone: true, selector: "ngx-lazy-loader", inputs: { id: ["component", "id"], group: "group", inputs: "inputs", outputs: "outputs" }, outputs: { componentLoadError: "componentLoadError", componentLoaded: "componentLoaded" }, viewQueries: [{ propertyName: "targetContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #content></ng-container>\n\n<div\n *ngIf=\"renderSpinner\"\n class=\"ngx-lazy-loader-distractor\"\n [class.destroying]=\"isClearingLoader\"\n>\n <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999;animation:fade-in .3s ease}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}@keyframes fade-in{0%{opacity:0;pointer-events:none}to{opacity:1;pointer-events:all}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
1875
1928
|
}
|
|
1876
1929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LazyLoaderComponent, decorators: [{
|
|
@@ -1878,7 +1931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
1878
1931
|
args: [{ selector: 'ngx-lazy-loader', imports: [NgIf, NgComponentOutlet, NgTemplateOutlet], standalone: true, template: "<ng-container #content></ng-container>\n\n<div\n *ngIf=\"renderSpinner\"\n class=\"ngx-lazy-loader-distractor\"\n [class.destroying]=\"isClearingLoader\"\n>\n <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999;animation:fade-in .3s ease}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}@keyframes fade-in{0%{opacity:0;pointer-events:none}to{opacity:1;pointer-events:all}}\n"] }]
|
|
1879
1932
|
}], ctorParameters: () => [{ type: LazyLoaderService }, { type: i0.ViewContainerRef, decorators: [{
|
|
1880
1933
|
type: Optional
|
|
1881
|
-
}] }, { type: i2
|
|
1934
|
+
}] }, { type: i2.DialogRef, decorators: [{
|
|
1882
1935
|
type: Optional
|
|
1883
1936
|
}] }, { type: undefined, decorators: [{
|
|
1884
1937
|
type: Optional
|
|
@@ -9675,7 +9728,7 @@ class GtkIconButtonComponent {
|
|
|
9675
9728
|
this.click.emit();
|
|
9676
9729
|
}
|
|
9677
9730
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GtkIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: GtkIconButtonComponent, isStandalone: true, selector: "gtk-icon-button", inputs: { fontIcon: "fontIcon", disabled: "disabled" }, outputs: { click: "click" }, ngImport: i0, template: "<button mat-flat-button [disabled]=\"disabled\">\n <mat-icon [fontIcon]=\"fontIcon\"></mat-icon>\n</button>\n", styles: [":host{position:relative}button{padding:0;min-width:36px;background-color:var(--gtk-button-background-color)!important;color:var(--gtk-button-text-color)!important;border:1px solid var(--gtk-button-border-color);border-bottom-color:var(--gtk-button-border-bottom-color);transition:.25s ease;transition-property:border-color,background-color,color}mat-icon{margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$
|
|
9731
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: GtkIconButtonComponent, isStandalone: true, selector: "gtk-icon-button", inputs: { fontIcon: "fontIcon", disabled: "disabled" }, outputs: { click: "click" }, ngImport: i0, template: "<button mat-flat-button [disabled]=\"disabled\">\n <mat-icon [fontIcon]=\"fontIcon\"></mat-icon>\n</button>\n", styles: [":host{position:relative}button{padding:0;min-width:36px;background-color:var(--gtk-button-background-color)!important;color:var(--gtk-button-text-color)!important;border:1px solid var(--gtk-button-border-color);border-bottom-color:var(--gtk-button-border-bottom-color);transition:.25s ease;transition-property:border-color,background-color,color}mat-icon{margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
9679
9732
|
}
|
|
9680
9733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GtkIconButtonComponent, decorators: [{
|
|
9681
9734
|
type: Component,
|
|
@@ -9827,7 +9880,7 @@ class ToolbarComponent {
|
|
|
9827
9880
|
this.fileManager.refreshSorting();
|
|
9828
9881
|
}
|
|
9829
9882
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: FilemanagerComponent }, { token: DialogService }, { token: Fetch }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ToolbarComponent, isStandalone: true, selector: "app-toolbar", inputs: { config: "config", currentTab: "currentTab", showHiddenFiles: "showHiddenFiles", showSidebar: "showSidebar", drawerMode: "drawerMode", showBareMinimum: "showBareMinimum" }, outputs: { onBreadcrumbClick: "onBreadcrumbClick", showHiddenFilesChange: "showHiddenFilesChange", showSidebarChange: "showSidebarChange" }, viewQueries: [{ propertyName: "zoomTemplate", first: true, predicate: ["zoomTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }], ngImport: i0, template: "<button\n *ngIf=\"fileManager.sidebarOverlay && !drawerMode\"\n mat-icon-button\n (click)=\"toggleDrawer()\"\n>\n <mat-icon>list</mat-icon>\n</button>\n\n<ng-container *ngIf=\"!showBareMinimum\">\n <div class=\"buttongroup\">\n <gtk-icon-button\n fontIcon=\"arrow_back_ios_new\"\n (click)=\"historyBack(currentTab)\"\n [disabled]=\"currentTab.history?.length <= 1\"\n />\n <gtk-icon-button\n fontIcon=\"arrow_forward_ios\"\n (click)=\"historyForward(currentTab)\"\n [disabled]=\"currentTab.historyIndex >= (currentTab.history?.length-1)\"\n />\n </div>\n\n <div style=\"width: 40px\" *ngIf=\"!drawerMode\"></div>\n</ng-container>\n\n\n<app-breadcrumb\n *ngIf=\"currentTab\"\n style=\"flex: 1\"\n [crumbs]=\"currentTab.breadcrumb\"\n (crumbClick)=\"onBreadcrumbClick.next($event)\"\n [config]=\"config\"\n/>\n\n<ng-container *ngIf=\"!drawerMode\">\n <!-- <div style=\"flex: 1\"></div> -->\n\n <gtk-icon-button\n fontIcon=\"more_vert\"\n [ngx-menu]=\"fileOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n\n <div style=\"width: 8px\"></div>\n\n <!-- <gtk-icon-button\n fontIcon=\"search\"\n /> -->\n\n <div style=\"width: 100px\" *ngIf=\"fileManager.width > 800\"></div>\n\n <gtk-icon-button\n [fontIcon]=\"currentTab.viewMode == 'list' ? 'view_list' : 'grid_view'\"\n (click)=\"currentTab.viewMode = currentTab.viewMode == 'list' ? 'grid' : 'list'; fileManager.onResize()\"\n />\n\n <gtk-icon-button\n fontIcon=\"sort\"\n [ngx-menu]=\"sortOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n</ng-container>\n\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$
|
|
9883
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ToolbarComponent, isStandalone: true, selector: "app-toolbar", inputs: { config: "config", currentTab: "currentTab", showHiddenFiles: "showHiddenFiles", showSidebar: "showSidebar", drawerMode: "drawerMode", showBareMinimum: "showBareMinimum" }, outputs: { onBreadcrumbClick: "onBreadcrumbClick", showHiddenFilesChange: "showHiddenFilesChange", showSidebarChange: "showSidebarChange" }, viewQueries: [{ propertyName: "zoomTemplate", first: true, predicate: ["zoomTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }], ngImport: i0, template: "<button\n *ngIf=\"fileManager.sidebarOverlay && !drawerMode\"\n mat-icon-button\n (click)=\"toggleDrawer()\"\n>\n <mat-icon>list</mat-icon>\n</button>\n\n<ng-container *ngIf=\"!showBareMinimum\">\n <div class=\"buttongroup\">\n <gtk-icon-button\n fontIcon=\"arrow_back_ios_new\"\n (click)=\"historyBack(currentTab)\"\n [disabled]=\"currentTab.history?.length <= 1\"\n />\n <gtk-icon-button\n fontIcon=\"arrow_forward_ios\"\n (click)=\"historyForward(currentTab)\"\n [disabled]=\"currentTab.historyIndex >= (currentTab.history?.length-1)\"\n />\n </div>\n\n <div style=\"width: 40px\" *ngIf=\"!drawerMode\"></div>\n</ng-container>\n\n\n<app-breadcrumb\n *ngIf=\"currentTab\"\n style=\"flex: 1\"\n [crumbs]=\"currentTab.breadcrumb\"\n (crumbClick)=\"onBreadcrumbClick.next($event)\"\n [config]=\"config\"\n/>\n\n<ng-container *ngIf=\"!drawerMode\">\n <!-- <div style=\"flex: 1\"></div> -->\n\n <gtk-icon-button\n fontIcon=\"more_vert\"\n [ngx-menu]=\"fileOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n\n <div style=\"width: 8px\"></div>\n\n <!-- <gtk-icon-button\n fontIcon=\"search\"\n /> -->\n\n <div style=\"width: 100px\" *ngIf=\"fileManager.width > 800\"></div>\n\n <gtk-icon-button\n [fontIcon]=\"currentTab.viewMode == 'list' ? 'view_list' : 'grid_view'\"\n (click)=\"currentTab.viewMode = currentTab.viewMode == 'list' ? 'grid' : 'list'; fileManager.onResize()\"\n />\n\n <gtk-icon-button\n fontIcon=\"sort\"\n [ngx-menu]=\"sortOptions\"\n [ngx-menu-config]=\"{position: 'bottom'}\"\n />\n</ng-container>\n\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: GtkIconButtonComponent, selector: "gtk-icon-button", inputs: ["fontIcon", "disabled"], outputs: ["click"] }, { kind: "component", type: GtkBreadcrumbComponent, selector: "app-breadcrumb", inputs: ["crumbs", "config"], outputs: ["crumbClick"] }, { kind: "directive", type: MenuDirective, selector: "[ngx-contextmenu],[ngx-menu],[ngxContextmenu],[ngxMenu]", inputs: ["ngx-menu-context", "ngx-contextmenu", "ngx-menu", "ngx-menu-config"] }] }); }
|
|
9831
9884
|
}
|
|
9832
9885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
9833
9886
|
type: Component,
|
|
@@ -9884,7 +9937,7 @@ class TreeViewComponent {
|
|
|
9884
9937
|
});
|
|
9885
9938
|
}
|
|
9886
9939
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TreeViewComponent, deps: [{ token: FilemanagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9887
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TreeViewComponent, isStandalone: true, selector: "app-tree-view", inputs: { rowTemplateIn: ["rowTemplate", "rowTemplateIn"], data: "data" }, outputs: { click: "click", loadChildren: "loadChildren" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n <mat-expansion-panel\n #panel\n *ngFor=\"let item of data\"\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n <ng-container *ngIf=\"!panel.expanded\">\n <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path\"/>\n </ng-container>\n <ng-container *ngIf=\"panel.expanded\">\n <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"/>\n </ng-container>\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n <app-tree-view\n *ngIf=\"item['_children']; else loadingTemplate\"\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n <ng-template #loadingTemplate>\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n </ng-template>\n </mat-expansion-panel>\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"], dependencies: [{ kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$
|
|
9940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TreeViewComponent, isStandalone: true, selector: "app-tree-view", inputs: { rowTemplateIn: ["rowTemplate", "rowTemplateIn"], data: "data" }, outputs: { click: "click", loadChildren: "loadChildren" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n <mat-expansion-panel\n #panel\n *ngFor=\"let item of data\"\n expanded=\"false\"\n togglePosition=\"before\"\n [class.isleaf]=\"item['_children']?.length == 0\"\n (afterExpand)=\"tryLoadChildren(item, panel)\"\n >\n <mat-expansion-panel-header>\n <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n <ng-container *ngIf=\"!panel.expanded\">\n <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path\"/>\n </ng-container>\n <ng-container *ngIf=\"panel.expanded\">\n <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"/>\n </ng-container>\n {{item.name}}\n </div>\n </mat-expansion-panel-header>\n\n <app-tree-view\n *ngIf=\"item['_children']; else loadingTemplate\"\n [data]=\"item['_children']\"\n (click)=\"click.next(item)\"\n (loadChildren)=\"loadChildren.next($event)\"\n />\n <ng-template #loadingTemplate>\n <mat-progress-bar color=\"primary\" mode=\"query\"/>\n </ng-template>\n </mat-expansion-panel>\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:#0000}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"], dependencies: [{ kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
|
|
9888
9941
|
}
|
|
9889
9942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
9890
9943
|
type: Component,
|