@wolkabout/commons 0.1.8 → 0.1.9
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.
|
@@ -7322,8 +7322,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7322
7322
|
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], validationConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationConditions", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
7323
7323
|
|
|
7324
7324
|
class DoubleDrawerLayoutComponent {
|
|
7325
|
+
dialog = inject(MatDialog);
|
|
7326
|
+
translate = inject(TranslateService);
|
|
7327
|
+
fullscreenService = inject(FullscreenService);
|
|
7325
7328
|
onMouseMove() {
|
|
7326
|
-
if (this.
|
|
7329
|
+
if (this.fullScreenConfig()?.buttonEnabled) {
|
|
7327
7330
|
this.showFullscreenButton.set(true);
|
|
7328
7331
|
clearTimeout(this.timeout);
|
|
7329
7332
|
const timeoutFn = () => {
|
|
@@ -7334,16 +7337,19 @@ class DoubleDrawerLayoutComponent {
|
|
|
7334
7337
|
}
|
|
7335
7338
|
}
|
|
7336
7339
|
}
|
|
7337
|
-
|
|
7338
|
-
|
|
7339
|
-
|
|
7340
|
+
onKeyDown(event) {
|
|
7341
|
+
if (event.ctrlKey && event.shiftKey && event.key === 'F' && !!this.fullScreenConfig()?.hotkeyEnabled) {
|
|
7342
|
+
event.preventDefault();
|
|
7343
|
+
this.fullscreenService.toggleFullScreen();
|
|
7344
|
+
}
|
|
7345
|
+
}
|
|
7340
7346
|
timeout;
|
|
7341
7347
|
hoverActive = signal(false, ...(ngDevMode ? [{ debugName: "hoverActive" }] : []));
|
|
7342
7348
|
leftDrawerConfig = input.required(...(ngDevMode ? [{ debugName: "leftDrawerConfig" }] : []));
|
|
7343
7349
|
rightDrawerConfig = input(...(ngDevMode ? [undefined, { debugName: "rightDrawerConfig" }] : []));
|
|
7344
7350
|
backdropConfig = input.required(...(ngDevMode ? [{ debugName: "backdropConfig" }] : []));
|
|
7345
7351
|
dialogConfig = input(...(ngDevMode ? [undefined, { debugName: "dialogConfig" }] : []));
|
|
7346
|
-
|
|
7352
|
+
fullScreenConfig = input(...(ngDevMode ? [undefined, { debugName: "fullScreenConfig" }] : []));
|
|
7347
7353
|
leftDrawerToggled = output();
|
|
7348
7354
|
rightDrawerToggled = output();
|
|
7349
7355
|
isLeftDrawerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isLeftDrawerOpen" }] : []));
|
|
@@ -7405,7 +7411,7 @@ class DoubleDrawerLayoutComponent {
|
|
|
7405
7411
|
}
|
|
7406
7412
|
}
|
|
7407
7413
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7408
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null },
|
|
7414
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, fullScreenConfig: { classPropertyName: "fullScreenConfig", publicName: "fullScreenConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()", "window:keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\r\n <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n <button mat-flat-button class=\"drawer-toggle\"\r\n (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n [ngClass]=\"{\r\n 'destructive-flat-button': isLeftDrawerOpen(),\r\n 'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n }\"\r\n [matTooltip]=\"isLeftDrawerOpen() ?\r\n ('COMMON.COLLAPSE_NAVIGATION' | translate) :\r\n leftDrawerConfig().title ?\r\n leftDrawerConfig().title :\r\n ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n matTooltipPosition=\"right\">\r\n @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n <span>{{ leftDrawerConfig().title }}</span>\r\n } @else {\r\n <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n }\r\n </button>\r\n <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n <ng-content select=\"[left-drawer]\"></ng-content>\r\n </div>\r\n </div>\r\n <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n <span>{{ backdropConfig().message | translate }}</span>\r\n </div>\r\n <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n </div>\r\n <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n @if (showFullscreenButton()) {\r\n <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n @if (fullScreenEnabled()) {\r\n <mat-icon>fullscreen_exit</mat-icon>\r\n } @else {\r\n <mat-icon>fullscreen</mat-icon>\r\n }\r\n </button>\r\n }\r\n <ng-content select=\"[details]\"></ng-content>\r\n </div>\r\n </div>\r\n <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n <button mat-flat-button class=\"drawer-toggle\"\r\n (click)=\"toggleRightDrawer()\"\r\n [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n matTooltipPosition=\"right\">\r\n <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n </button>\r\n <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n <ng-content select=\"[right-drawer]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
7409
7415
|
}
|
|
7410
7416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, decorators: [{
|
|
7411
7417
|
type: Component,
|
|
@@ -7415,7 +7421,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7415
7421
|
}], ctorParameters: () => [], propDecorators: { onMouseMove: [{
|
|
7416
7422
|
type: HostListener,
|
|
7417
7423
|
args: ['window:mousemove']
|
|
7418
|
-
}],
|
|
7424
|
+
}], onKeyDown: [{
|
|
7425
|
+
type: HostListener,
|
|
7426
|
+
args: ['window:keydown', ['$event']]
|
|
7427
|
+
}], leftDrawerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftDrawerConfig", required: true }] }], rightDrawerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightDrawerConfig", required: false }] }], backdropConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropConfig", required: true }] }], dialogConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogConfig", required: false }] }], fullScreenConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreenConfig", required: false }] }], leftDrawerToggled: [{ type: i0.Output, args: ["leftDrawerToggled"] }], rightDrawerToggled: [{ type: i0.Output, args: ["rightDrawerToggled"] }] } });
|
|
7419
7428
|
|
|
7420
7429
|
// Config
|
|
7421
7430
|
|