@dotglitch/ngx-common 1.1.19 → 1.1.21
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/lazy-loader/lazy-loader.service.d.ts +1 -1
- package/components/parallax-card/parallax-card.component.d.ts +57 -0
- package/esm2022/components/lazy-loader/lazy-loader.component.mjs +2 -2
- package/esm2022/components/lazy-loader/lazy-loader.module.mjs +6 -2
- package/esm2022/components/lazy-loader/lazy-loader.service.mjs +5 -3
- package/esm2022/components/parallax-card/parallax-card.component.mjs +135 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/{dotglitch-ngx-common-folder-rename.component-VI_uH5-6.mjs → dotglitch-ngx-common-folder-rename.component-xUdQXmcY.mjs} +2 -1
- package/fesm2022/dotglitch-ngx-common-folder-rename.component-xUdQXmcY.mjs.map +1 -0
- package/fesm2022/dotglitch-ngx-common.mjs +142 -4
- package/fesm2022/dotglitch-ngx-common.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/fesm2022/dotglitch-ngx-common-folder-rename.component-VI_uH5-6.mjs.map +0 -1
|
@@ -23,6 +23,7 @@ import 'rxjs/operators';
|
|
|
23
23
|
import '@angular/common/http';
|
|
24
24
|
import '@angular/cdk/scrolling';
|
|
25
25
|
import 'ngx-scrollbar';
|
|
26
|
+
import 'tslib';
|
|
26
27
|
import '@angular/material/tabs';
|
|
27
28
|
import '@angular/material/sidenav';
|
|
28
29
|
import 'angular-split';
|
|
@@ -79,4 +80,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
79
80
|
}] } });
|
|
80
81
|
|
|
81
82
|
export { FolderRenameComponent };
|
|
82
|
-
//# sourceMappingURL=dotglitch-ngx-common-folder-rename.component-
|
|
83
|
+
//# sourceMappingURL=dotglitch-ngx-common-folder-rename.component-xUdQXmcY.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dotglitch-ngx-common-folder-rename.component-xUdQXmcY.mjs","sources":["../../../packages/common/src/components/filemanager/folder-rename/folder-rename.component.ts","../../../packages/common/src/components/filemanager/folder-rename/folder-rename.component.html"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { NgxFileManagerConfiguration } from '../filemanager.component';\nimport { Fetch } from '../../../public-api';\n\n@Component({\n selector: 'app-folder-rename',\n templateUrl: './folder-rename.component.html',\n styleUrls: ['./folder-rename.component.scss'],\n imports: [\n MatInputModule,\n MatIconModule,\n MatButtonModule,\n FormsModule\n ],\n standalone: true\n})\nexport class FolderRenameComponent implements OnInit {\n\n @Input() path: string;\n @Input() name: string = '';\n @Input() config: NgxFileManagerConfiguration;\n\n isRename = false;\n\n constructor(\n public dialog: MatDialogRef<any>,\n private fetch: Fetch\n ) { }\n\n ngOnInit() {\n this.isRename = this.name.length > 0;\n }\n\n onSave() {\n if (this.isRename) {\n const url = this.config.apiSettings.renameEntryUrlTemplate\n ? this.config.apiSettings.renameEntryUrlTemplate(this.path + this.name)\n : this.config.apiSettings.renameEntryUrl\n\n this.fetch.post(url, { path: this.path + '/' + this.name });\n }\n else {\n const url = this.config.apiSettings.createDirectoryUrlTemplate\n ? this.config.apiSettings.createDirectoryUrlTemplate(this.path + this.name)\n : this.config.apiSettings.createDirectoryUrl\n\n this.fetch.post(url, {path: this.path +'/'+ this.name});\n }\n this.dialog.close(true);\n }\n}\n","<mat-form-field style=\"width: 280px;\">\n <mat-label>Name</mat-label>\n <input matInput type=\"text\" [(ngModel)]=\"name\" (keyup)=\"$event.key == 'Enter' && onSave()\">\n</mat-form-field>\n\n<div style=\"align-self: end;\">\n <button mat-flat-button (click)=\"onSave()\"><mat-icon>check</mat-icon>Ok</button>\n <button mat-flat-button (click)=\"dialog.close()\"><mat-icon>cancel</mat-icon>Cancel</button>\n</div>\n"],"names":["i2.Fetch","i5","i6"],"mappings":"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"}
|
|
@@ -24,6 +24,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
|
24
24
|
import * as i7 from 'ngx-scrollbar';
|
|
25
25
|
import { NgScrollbar, NgScrollbarModule } from 'ngx-scrollbar';
|
|
26
26
|
import * as i4$1 from '@angular/material/form-field';
|
|
27
|
+
import { __decorate, __param } from 'tslib';
|
|
27
28
|
import * as i4$2 from '@angular/material/tabs';
|
|
28
29
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
29
30
|
import * as i6$2 from '@angular/material/sidenav';
|
|
@@ -1707,7 +1708,7 @@ class LazyLoaderService {
|
|
|
1707
1708
|
}
|
|
1708
1709
|
}
|
|
1709
1710
|
}
|
|
1710
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LazyLoaderService, deps: [{ token: NGX_LAZY_LOADER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1711
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LazyLoaderService, deps: [{ token: NGX_LAZY_LOADER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1711
1712
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LazyLoaderService, providedIn: 'root' }); }
|
|
1712
1713
|
}
|
|
1713
1714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LazyLoaderService, decorators: [{
|
|
@@ -1716,6 +1717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
1716
1717
|
providedIn: 'root'
|
|
1717
1718
|
}]
|
|
1718
1719
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1720
|
+
type: Optional
|
|
1721
|
+
}, {
|
|
1719
1722
|
type: Inject,
|
|
1720
1723
|
args: [NGX_LAZY_LOADER_CONFIG]
|
|
1721
1724
|
}] }] });
|
|
@@ -1937,7 +1940,7 @@ class LazyLoaderComponent {
|
|
|
1937
1940
|
}
|
|
1938
1941
|
catch (ex) {
|
|
1939
1942
|
if (isDevMode()) {
|
|
1940
|
-
console.warn("Component " + this._id + " threw an error on mount!");
|
|
1943
|
+
console.warn("Component DDD " + this._id + " threw an error on mount!");
|
|
1941
1944
|
console.warn("This will cause you to see a 404 panel.");
|
|
1942
1945
|
console.error(ex);
|
|
1943
1946
|
}
|
|
@@ -2944,6 +2947,9 @@ class LazyLoaderModule {
|
|
|
2944
2947
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: LazyLoaderModule, imports: [LazyLoaderComponent], exports: [LazyLoaderComponent] }); }
|
|
2945
2948
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LazyLoaderModule }); }
|
|
2946
2949
|
}
|
|
2950
|
+
__decorate([
|
|
2951
|
+
__param(0, Optional())
|
|
2952
|
+
], LazyLoaderModule, "forRoot", null);
|
|
2947
2953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LazyLoaderModule, decorators: [{
|
|
2948
2954
|
type: NgModule,
|
|
2949
2955
|
args: [{
|
|
@@ -10317,7 +10323,7 @@ class FilemanagerComponent {
|
|
|
10317
10323
|
lazyLoader.registerComponent({
|
|
10318
10324
|
id: "folder-rename",
|
|
10319
10325
|
group: "@dotglitch/ngx-web-components",
|
|
10320
|
-
load: () => import('./dotglitch-ngx-common-folder-rename.component-
|
|
10326
|
+
load: () => import('./dotglitch-ngx-common-folder-rename.component-xUdQXmcY.mjs')
|
|
10321
10327
|
});
|
|
10322
10328
|
this.iconResolver = new IconResolver(libConfig.assetPath);
|
|
10323
10329
|
}
|
|
@@ -11376,6 +11382,138 @@ const InstallMonacoUMD = async (path) => {
|
|
|
11376
11382
|
});
|
|
11377
11383
|
};
|
|
11378
11384
|
|
|
11385
|
+
class ParallaxCardComponent {
|
|
11386
|
+
get wrapper() { return this.element.nativeElement; }
|
|
11387
|
+
get cardFront() { return this.wrapper.querySelector('.card.front'); }
|
|
11388
|
+
get cardBack() { return this.wrapper.querySelector('.card.backface'); }
|
|
11389
|
+
get backgroundElement() { return this.cardFront.querySelector('.card-bg'); }
|
|
11390
|
+
get backfaceBackgroundElement() { return this.cardBack.querySelector('.card-bg'); }
|
|
11391
|
+
constructor(element) {
|
|
11392
|
+
this.element = element;
|
|
11393
|
+
/**
|
|
11394
|
+
*
|
|
11395
|
+
*/
|
|
11396
|
+
this.loaded = new EventEmitter();
|
|
11397
|
+
/**
|
|
11398
|
+
* Width of the card
|
|
11399
|
+
* @default `240px`
|
|
11400
|
+
*/
|
|
11401
|
+
this.width = '240px';
|
|
11402
|
+
/**
|
|
11403
|
+
* Height of the card
|
|
11404
|
+
* @default `320px`
|
|
11405
|
+
*/
|
|
11406
|
+
this.height = '320px';
|
|
11407
|
+
/**
|
|
11408
|
+
* Inset padding of the parallax
|
|
11409
|
+
* @default 80
|
|
11410
|
+
*/
|
|
11411
|
+
this.bgInset = 80;
|
|
11412
|
+
/**
|
|
11413
|
+
* Duration for the flip animation in ms
|
|
11414
|
+
* @default 80
|
|
11415
|
+
*/
|
|
11416
|
+
this.flipAnimationDuration = 1600;
|
|
11417
|
+
this.renderCardFront = true;
|
|
11418
|
+
this.renderCardBack = true;
|
|
11419
|
+
this.showBackOfCard = false;
|
|
11420
|
+
this.pointerX = 0;
|
|
11421
|
+
this.pointerY = 0;
|
|
11422
|
+
this.pointerLeave = 0;
|
|
11423
|
+
this.render = () => {
|
|
11424
|
+
const { width, height } = this.wrapper.getBoundingClientRect();
|
|
11425
|
+
const mousePX = this.pointerX / width;
|
|
11426
|
+
const mousePY = this.pointerY / height;
|
|
11427
|
+
// Rotation factors
|
|
11428
|
+
const rX = mousePX * this.bgInset / 1.75;
|
|
11429
|
+
const rY = mousePY * -this.bgInset / 1.75;
|
|
11430
|
+
// Translation factors
|
|
11431
|
+
const tX = mousePX * -this.bgInset * 2;
|
|
11432
|
+
const tY = mousePY * -this.bgInset * 2;
|
|
11433
|
+
if (this.renderCardFront) {
|
|
11434
|
+
this.backgroundElement.style.transform = `translateX(${tX}px) translateY(${tY}px)`;
|
|
11435
|
+
}
|
|
11436
|
+
if (this.renderCardBack) {
|
|
11437
|
+
this.backfaceBackgroundElement.style.transform = `translateX(${tX}px) translateY(${tY}px)`;
|
|
11438
|
+
}
|
|
11439
|
+
if (this.showBackOfCard) {
|
|
11440
|
+
this.cardFront.style.transform = `rotateY(180deg) rotateX(${-rY}deg)`;
|
|
11441
|
+
this.cardBack.style.transform = `rotateY(${-rX}deg) rotateX(${-rY}deg)`;
|
|
11442
|
+
}
|
|
11443
|
+
else {
|
|
11444
|
+
this.cardFront.style.transform = `rotateY(${rX}deg) rotateX(${rY}deg)`;
|
|
11445
|
+
this.cardBack.style.transform = `rotateY(180deg) rotateX(${-rY}deg)`;
|
|
11446
|
+
}
|
|
11447
|
+
};
|
|
11448
|
+
}
|
|
11449
|
+
ngAfterViewInit() {
|
|
11450
|
+
const el = this.wrapper;
|
|
11451
|
+
// Directly attach events to the wrapper
|
|
11452
|
+
el.onpointermove = (e) => this.onPointerMove(e);
|
|
11453
|
+
el.onpointerenter = () => this.onPointerEnter();
|
|
11454
|
+
el.onpointerleave = () => this.onPointerLeave();
|
|
11455
|
+
el.onclick = () => this.onClick();
|
|
11456
|
+
this.loaded.emit();
|
|
11457
|
+
}
|
|
11458
|
+
onPointerMove(e) {
|
|
11459
|
+
const { width, height, left, top } = this.wrapper.getBoundingClientRect();
|
|
11460
|
+
this.pointerX = e.pageX - left - (width / 2);
|
|
11461
|
+
this.pointerY = e.pageY - top - (height / 2);
|
|
11462
|
+
this.render();
|
|
11463
|
+
}
|
|
11464
|
+
onPointerEnter() {
|
|
11465
|
+
clearTimeout(this.pointerLeave);
|
|
11466
|
+
}
|
|
11467
|
+
onPointerLeave() {
|
|
11468
|
+
this.pointerLeave = setTimeout(() => {
|
|
11469
|
+
this.pointerX = 0;
|
|
11470
|
+
this.pointerY = 0;
|
|
11471
|
+
this.render();
|
|
11472
|
+
}, 600);
|
|
11473
|
+
}
|
|
11474
|
+
// TODO: This can get intercepted in some states
|
|
11475
|
+
onClick() {
|
|
11476
|
+
this.showBackOfCard = !this.showBackOfCard;
|
|
11477
|
+
this.render();
|
|
11478
|
+
}
|
|
11479
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ParallaxCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ParallaxCardComponent, isStandalone: true, selector: "ngx-parallax-card", inputs: { width: "width", height: "height", bgInset: "bgInset", flipAnimationDuration: "flipAnimationDuration" }, outputs: { loaded: "loaded" }, host: { properties: { "style.width": "width", "style.height": "height", "style.--card-bg-inset": "-bgInset+\"px\"", "style.--flip-animation-duration": "flipAnimationDuration+\"ms\"", "class.flip": "showBackOfCard" } }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: TemplateRef }, { propertyName: "background", first: true, predicate: ["background"], descendants: true, read: TemplateRef }, { propertyName: "backContent", first: true, predicate: ["backContent"], descendants: true, read: TemplateRef }, { propertyName: "backBackground", first: true, predicate: ["backBackground"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (renderCardBack) {\n <div class=\"card backface\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"backBackground\" />\n </div>\n <div class=\"card-content\">\n <ng-template [ngTemplateOutlet]=\"backContent\" />\n </div>\n </div>\n}\n\n@if (renderCardFront) {\n <div class=\"card front\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"background\" />\n </div>\n <div class=\"card-content\">\n @if (content) {\n <ng-template [ngTemplateOutlet]=\"content\"/>\n }\n @else {\n <ng-content/>\n }\n </div>\n </div>\n}\n\n\n", styles: [":host{display:block;position:relative;cursor:pointer;--easing-function: cubic-bezier(.23, 1, .32, 1);--border-radius: 9px}.card{position:absolute;height:100%;width:100%;background-color:#333;backface-visibility:hidden;overflow:hidden;box-shadow:#0000 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px;border-radius:var(--border-radius);transition:transform var(--flip-animation-duration) var(--easing-function),box-shadow 2s var(--easing-function);transform-style:preserve-3d}.card:hover{box-shadow:#fff6 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px}.card:hover .card-content{border:2px solid #fff}.card-bg{inset:var(--card-bg-inset);position:absolute;pointer-events:none;transition:transform .6s var(--easing-function)}.card-content{position:absolute;top:0;color:#fff;height:100%;width:100%;z-index:1;border:2px solid rgba(255,255,255,0);border-radius:var(--border-radius);transition:transform .6s var(--easing-function),border-color .6s var(--easing-function)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
11481
|
+
}
|
|
11482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ParallaxCardComponent, decorators: [{
|
|
11483
|
+
type: Component,
|
|
11484
|
+
args: [{ selector: 'ngx-parallax-card', imports: [
|
|
11485
|
+
NgTemplateOutlet
|
|
11486
|
+
], host: {
|
|
11487
|
+
'[style.width]': 'width',
|
|
11488
|
+
'[style.height]': 'height',
|
|
11489
|
+
'[style.--card-bg-inset]': '-bgInset+"px"',
|
|
11490
|
+
'[style.--flip-animation-duration]': 'flipAnimationDuration+"ms"',
|
|
11491
|
+
'[class.flip]': 'showBackOfCard'
|
|
11492
|
+
}, standalone: true, template: "@if (renderCardBack) {\n <div class=\"card backface\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"backBackground\" />\n </div>\n <div class=\"card-content\">\n <ng-template [ngTemplateOutlet]=\"backContent\" />\n </div>\n </div>\n}\n\n@if (renderCardFront) {\n <div class=\"card front\">\n <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n <ng-template [ngTemplateOutlet]=\"background\" />\n </div>\n <div class=\"card-content\">\n @if (content) {\n <ng-template [ngTemplateOutlet]=\"content\"/>\n }\n @else {\n <ng-content/>\n }\n </div>\n </div>\n}\n\n\n", styles: [":host{display:block;position:relative;cursor:pointer;--easing-function: cubic-bezier(.23, 1, .32, 1);--border-radius: 9px}.card{position:absolute;height:100%;width:100%;background-color:#333;backface-visibility:hidden;overflow:hidden;box-shadow:#0000 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px;border-radius:var(--border-radius);transition:transform var(--flip-animation-duration) var(--easing-function),box-shadow 2s var(--easing-function);transform-style:preserve-3d}.card:hover{box-shadow:#fff6 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px}.card:hover .card-content{border:2px solid #fff}.card-bg{inset:var(--card-bg-inset);position:absolute;pointer-events:none;transition:transform .6s var(--easing-function)}.card-content{position:absolute;top:0;color:#fff;height:100%;width:100%;z-index:1;border:2px solid rgba(255,255,255,0);border-radius:var(--border-radius);transition:transform .6s var(--easing-function),border-color .6s var(--easing-function)}\n"] }]
|
|
11493
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
|
|
11494
|
+
type: ContentChild,
|
|
11495
|
+
args: ['content', { read: TemplateRef }]
|
|
11496
|
+
}], background: [{
|
|
11497
|
+
type: ContentChild,
|
|
11498
|
+
args: ['background', { read: TemplateRef }]
|
|
11499
|
+
}], backContent: [{
|
|
11500
|
+
type: ContentChild,
|
|
11501
|
+
args: ['backContent', { read: TemplateRef }]
|
|
11502
|
+
}], backBackground: [{
|
|
11503
|
+
type: ContentChild,
|
|
11504
|
+
args: ['backBackground', { read: TemplateRef }]
|
|
11505
|
+
}], loaded: [{
|
|
11506
|
+
type: Output
|
|
11507
|
+
}], width: [{
|
|
11508
|
+
type: Input
|
|
11509
|
+
}], height: [{
|
|
11510
|
+
type: Input
|
|
11511
|
+
}], bgInset: [{
|
|
11512
|
+
type: Input
|
|
11513
|
+
}], flipAnimationDuration: [{
|
|
11514
|
+
type: Input
|
|
11515
|
+
}] } });
|
|
11516
|
+
|
|
11379
11517
|
/**
|
|
11380
11518
|
* Extend this component to automatically generate
|
|
11381
11519
|
* bindings to a React component.
|
|
@@ -11453,5 +11591,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
11453
11591
|
* Generated bundle index. Do not edit.
|
|
11454
11592
|
*/
|
|
11455
11593
|
|
|
11456
|
-
export { CommandPaletteService, ComponentResolveStrategy, ConsoleLogger, DependencyService, DialogService, DynamicHTMLComponent, DynamicHTMLOptions, DynamicHTMLRenderer, Fetch, FileService, FilemanagerComponent, HtmlBypass, InstallMonacoUMD, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, LogIcon, MenuDirective, NGX_DYNAMIC_CONFIG, NGX_IMAGE_CACHE_CONFIG, NGX_LAZY_LOADER_CONFIG, NGX_WEB_COMPONENTS_CONFIG, NavigationService, NgxDynamicHTMLModule, NgxImageCacheDirective, OnMount, ReactMagicWrapperComponent, ResourceBypass, ScriptBypass, StyleBypass, TabulatorComponent, ThemeService, TooltipDirective, UrlBypass, VscodeComponent, openMenu, openTooltip };
|
|
11594
|
+
export { CommandPaletteService, ComponentResolveStrategy, ConsoleLogger, DependencyService, DialogService, DynamicHTMLComponent, DynamicHTMLOptions, DynamicHTMLRenderer, Fetch, FileService, FilemanagerComponent, HtmlBypass, InstallMonacoUMD, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, LogIcon, MenuDirective, NGX_DYNAMIC_CONFIG, NGX_IMAGE_CACHE_CONFIG, NGX_LAZY_LOADER_CONFIG, NGX_WEB_COMPONENTS_CONFIG, NavigationService, NgxDynamicHTMLModule, NgxImageCacheDirective, OnMount, ParallaxCardComponent, ReactMagicWrapperComponent, ResourceBypass, ScriptBypass, StyleBypass, TabulatorComponent, ThemeService, TooltipDirective, UrlBypass, VscodeComponent, openMenu, openTooltip };
|
|
11457
11595
|
//# sourceMappingURL=dotglitch-ngx-common.mjs.map
|