@smartbit4all/ng-client 7.3.19 → 7.3.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/fesm2022/smartbit4all-ng-client.mjs +57 -28
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/package.json +6 -3
- package/smartbit4all-ng-client-7.3.21.tgz +0 -0
- package/src/styles/_ng-client-styles.scss +192 -0
- package/types/smartbit4all-ng-client.d.ts +5 -5
- package/smartbit4all-ng-client-7.3.19.tgz +0 -0
|
@@ -17,6 +17,7 @@ import { MatButton, MatIconButton, MatMiniFabButton } from '@angular/material/bu
|
|
|
17
17
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
18
18
|
import { MatIconRegistry, MatIcon } from '@angular/material/icon';
|
|
19
19
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
20
|
+
import { FocusTrapFactory } from '@angular/cdk/a11y';
|
|
20
21
|
import { ActivatedRoute } from '@angular/router';
|
|
21
22
|
import { MAT_SNACK_BAR_DATA, MatSnackBarLabel, MatSnackBar } from '@angular/material/snack-bar';
|
|
22
23
|
import { Overlay, OverlayPositionBuilder, ScrollDispatcher } from '@angular/cdk/overlay';
|
|
@@ -4113,18 +4114,19 @@ class MessageDialogComponent {
|
|
|
4113
4114
|
this.initialFocusCode = options.find((option) => option.type === MessageOptionType.CONFIRM)?.code;
|
|
4114
4115
|
}
|
|
4115
4116
|
/**
|
|
4116
|
-
* The template marks the button with `cdkFocusInitial`, which
|
|
4117
|
-
*
|
|
4118
|
-
*
|
|
4119
|
-
*
|
|
4120
|
-
* moved is left alone.
|
|
4117
|
+
* The template marks the button with `cdkFocusInitial`, which the container dialog focuses on
|
|
4118
|
+
* open (`focusPage`). The options may arrive later, then this method focuses the marked button
|
|
4119
|
+
* itself, unless the user has already moved the focus inside the dialog. A focus on the dialog
|
|
4120
|
+
* container, on the body or outside the dialog (the element that opened it) is taken.
|
|
4121
4121
|
*/
|
|
4122
4122
|
focusInitialOption() {
|
|
4123
|
+
const host = this.host.nativeElement;
|
|
4124
|
+
const dialog = host.closest('mat-dialog-container');
|
|
4123
4125
|
const active = this.document.activeElement;
|
|
4124
|
-
if (active && active !==
|
|
4126
|
+
if (active && active !== dialog && (dialog ?? host).contains(active)) {
|
|
4125
4127
|
return;
|
|
4126
4128
|
}
|
|
4127
|
-
|
|
4129
|
+
host.querySelector('[cdkFocusInitial] button')?.focus();
|
|
4128
4130
|
}
|
|
4129
4131
|
getColor(option) {
|
|
4130
4132
|
switch (option.type) {
|
|
@@ -6478,11 +6480,11 @@ class UiActionConfirmDialogComponent {
|
|
|
6478
6480
|
this.service.cancel();
|
|
6479
6481
|
}
|
|
6480
6482
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6481
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionConfirmDialogComponent, isStandalone: true, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "@if(descriptor){\r\n<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'
|
|
6483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionConfirmDialogComponent, isStandalone: true, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "@if(descriptor){\r\n<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\r\n </button>\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n <div class=\"folderNameDialogButtonsContainer\">\r\n <ui-action-button\r\n [descriptor]=\"getCancelButton()\"\r\n [addedCssClass]=\"getCancelCssClass()\"\r\n [code]=\"'confirm-cancel'\"\r\n (actionClick)=\"cancel()\"\r\n ></ui-action-button>\r\n <ui-action-button\r\n [descriptor]=\"getActionButton()\"\r\n [addedCssClass]=\"getActionCssClass()\"\r\n [code]=\"'confirm-action'\"\r\n (actionClick)=\"doAction()\"\r\n >\r\n </ui-action-button>\r\n </div>\r\n</div>\r\n}\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem;padding:.5rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
6482
6484
|
}
|
|
6483
6485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, decorators: [{
|
|
6484
6486
|
type: Component,
|
|
6485
|
-
args: [{ selector: 'app-ui-action-confirm-dialog', imports: [MatIconButton, SmartIconComponent, UiActionButtonComponent], template: "@if(descriptor){\r\n<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'
|
|
6487
|
+
args: [{ selector: 'app-ui-action-confirm-dialog', imports: [MatIconButton, SmartIconComponent, UiActionButtonComponent], template: "@if(descriptor){\r\n<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\r\n </button>\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n <div class=\"folderNameDialogButtonsContainer\">\r\n <ui-action-button\r\n [descriptor]=\"getCancelButton()\"\r\n [addedCssClass]=\"getCancelCssClass()\"\r\n [code]=\"'confirm-cancel'\"\r\n (actionClick)=\"cancel()\"\r\n ></ui-action-button>\r\n <ui-action-button\r\n [descriptor]=\"getActionButton()\"\r\n [addedCssClass]=\"getActionCssClass()\"\r\n [code]=\"'confirm-action'\"\r\n (actionClick)=\"doAction()\"\r\n >\r\n </ui-action-button>\r\n </div>\r\n</div>\r\n}\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem;padding:.5rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
|
|
6486
6488
|
}], ctorParameters: () => [] });
|
|
6487
6489
|
|
|
6488
6490
|
class SmartdialogService {
|
|
@@ -6496,9 +6498,9 @@ class SmartdialogService {
|
|
|
6496
6498
|
minWidth: 100,
|
|
6497
6499
|
};
|
|
6498
6500
|
}
|
|
6499
|
-
createDialog(smartDialog, component) {
|
|
6501
|
+
createDialog(smartDialog, component, config) {
|
|
6500
6502
|
this.dialogData = smartDialog;
|
|
6501
|
-
this.dialogRef = this.dialog.open(component, { data: this.dialogData });
|
|
6503
|
+
this.dialogRef = this.dialog.open(component, { ...config, data: this.dialogData });
|
|
6502
6504
|
this.dialogRef.afterClosed().subscribe((result) => {
|
|
6503
6505
|
this.closeDialog();
|
|
6504
6506
|
});
|
|
@@ -6559,7 +6561,11 @@ class UiActionConfirmDialogService extends SmartdialogService {
|
|
|
6559
6561
|
size: {},
|
|
6560
6562
|
customComponent: UiActionConfirmDialogComponent,
|
|
6561
6563
|
};
|
|
6562
|
-
|
|
6564
|
+
// The confirm option takes the focus, so a plain Enter confirms; the first tabbable element,
|
|
6565
|
+
// which Material would focus otherwise, is the header's close button.
|
|
6566
|
+
this.createDialog(dialogData, UiActionConfirmDialogComponent, {
|
|
6567
|
+
autoFocus: '[data-testid="confirm-action"]',
|
|
6568
|
+
});
|
|
6563
6569
|
}
|
|
6564
6570
|
doAction() {
|
|
6565
6571
|
this.shouldDoAction = true;
|
|
@@ -11364,11 +11370,11 @@ class UiActionInputDialogComponent {
|
|
|
11364
11370
|
return UiActionButtonType;
|
|
11365
11371
|
}
|
|
11366
11372
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionInputDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: UiActionInputDialogComponent, isStandalone: true, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'
|
|
11373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: UiActionInputDialogComponent, isStandalone: true, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\r\n </button>\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n <smartform #form [smartForm]=\"folderForm\"></smartform>\r\n <div class=\"folderNameDialogButtonsContainer\">\r\n <ui-action-dialog-button\r\n [descriptor]=\"getCancelButton()\"\r\n (click)=\"cancel()\"\r\n ></ui-action-dialog-button>\r\n <ui-action-dialog-button\r\n [descriptor]=\"getActionButton()\"\r\n [buttonType]=\"UiActionButtonType().RAISED\"\r\n (click)=\"save()\"\r\n ></ui-action-dialog-button>\r\n </div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: UiActionDialogButtonComponent, selector: "ui-action-dialog-button", inputs: ["descriptor", "buttonType"], outputs: ["click"] }] }); }
|
|
11368
11374
|
}
|
|
11369
11375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionInputDialogComponent, decorators: [{
|
|
11370
11376
|
type: Component,
|
|
11371
|
-
args: [{ selector: 'smart-ui-action-input-dialog', imports: [MatIconButton, SmartIconComponent, SmartformComponent, UiActionDialogButtonComponent], template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'
|
|
11377
|
+
args: [{ selector: 'smart-ui-action-input-dialog', imports: [MatIconButton, SmartIconComponent, SmartformComponent, UiActionDialogButtonComponent], template: "<div class=\"folderNameDialogContainer\">\r\n <div class=\"headerContainer\">\r\n <h3 class=\"color-accent-700\">\r\n {{ getTitle() }}\r\n </h3>\r\n <button mat-icon-button (click)=\"cancel()\">\r\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\r\n </button>\r\n </div>\r\n <p>\r\n {{ getText() }}\r\n </p>\r\n <smartform #form [smartForm]=\"folderForm\"></smartform>\r\n <div class=\"folderNameDialogButtonsContainer\">\r\n <ui-action-dialog-button\r\n [descriptor]=\"getCancelButton()\"\r\n (click)=\"cancel()\"\r\n ></ui-action-dialog-button>\r\n <ui-action-dialog-button\r\n [descriptor]=\"getActionButton()\"\r\n [buttonType]=\"UiActionButtonType().RAISED\"\r\n (click)=\"save()\"\r\n ></ui-action-dialog-button>\r\n </div>\r\n</div>\r\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
|
|
11372
11378
|
}], ctorParameters: () => [], propDecorators: { folderFormChild: [{
|
|
11373
11379
|
type: ViewChild,
|
|
11374
11380
|
args: ['form']
|
|
@@ -11567,7 +11573,7 @@ class SmartKeybindingService {
|
|
|
11567
11573
|
this.injector = inject(Injector);
|
|
11568
11574
|
this.isMac = isMacPlatform();
|
|
11569
11575
|
this.hosts = new Map();
|
|
11570
|
-
/** The elements of no view whose keys go to a view: a dialog's
|
|
11576
|
+
/** The elements of no view whose keys go to a view: a dialog's container to the page it shows. */
|
|
11571
11577
|
this.forwards = new Map();
|
|
11572
11578
|
const listener = (event) => this.onKeydown(event);
|
|
11573
11579
|
const focusListener = (event) => this.onFocusin(event);
|
|
@@ -11591,8 +11597,8 @@ class SmartKeybindingService {
|
|
|
11591
11597
|
};
|
|
11592
11598
|
}
|
|
11593
11599
|
/**
|
|
11594
|
-
* Sends the keys pressed with the focus in `from`, an element
|
|
11595
|
-
* of a dialog), to the view whose host is `to`; returns the function that stops it.
|
|
11600
|
+
* Sends the keys pressed with the focus in `from`, an element enclosing no view of its own (the
|
|
11601
|
+
* container of a dialog), to the view whose host is `to`; returns the function that stops it.
|
|
11596
11602
|
*/
|
|
11597
11603
|
forwardKeys(from, to) {
|
|
11598
11604
|
this.forwards.set(from, to);
|
|
@@ -11727,6 +11733,10 @@ class SmartContainerDialog {
|
|
|
11727
11733
|
this.TOOLBAR_DIALOG_HEADER = TOOLBAR_DIALOG_HEADER;
|
|
11728
11734
|
this.TOOLBAR_DIALOG_FOOTER = TOOLBAR_DIALOG_FOOTER;
|
|
11729
11735
|
this.data = inject(MAT_DIALOG_DATA);
|
|
11736
|
+
this.element = inject(ElementRef);
|
|
11737
|
+
this.document = inject(DOCUMENT);
|
|
11738
|
+
this.dialogRef = inject(MatDialogRef);
|
|
11739
|
+
this.focusTrapFactory = inject(FocusTrapFactory);
|
|
11730
11740
|
this.keybindings = inject(SmartKeybindingService);
|
|
11731
11741
|
this.destroyRef = inject(DestroyRef);
|
|
11732
11742
|
/** The client of the rendered page: the executor of the toolbar actions. */
|
|
@@ -11760,10 +11770,17 @@ class SmartContainerDialog {
|
|
|
11760
11770
|
}
|
|
11761
11771
|
ngAfterViewInit() {
|
|
11762
11772
|
const ref = this.vcRef.createComponent(this.data.component);
|
|
11773
|
+
const page = ref.location.nativeElement;
|
|
11774
|
+
this.dialogRef
|
|
11775
|
+
.afterOpened()
|
|
11776
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
11777
|
+
.subscribe(() => this.focusPage(page));
|
|
11763
11778
|
const client = ref.injector.get(SmartComponentHost, null)?.client;
|
|
11764
11779
|
if (client) {
|
|
11765
|
-
// The header
|
|
11766
|
-
|
|
11780
|
+
// The dialog container, its header and footer are outside the page's element, so their
|
|
11781
|
+
// keys would reach no view; the container holds the focus when nothing else can.
|
|
11782
|
+
const container = this.element.nativeElement.closest("mat-dialog-container");
|
|
11783
|
+
this.destroyRef.onDestroy(this.keybindings.forwardKeys(container, page));
|
|
11767
11784
|
// The window descriptor (title) can change with the page's data.
|
|
11768
11785
|
client.dataChanged
|
|
11769
11786
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
@@ -11775,6 +11792,19 @@ class SmartContainerDialog {
|
|
|
11775
11792
|
this.refreshDescriptor(client);
|
|
11776
11793
|
}
|
|
11777
11794
|
}
|
|
11795
|
+
/**
|
|
11796
|
+
* Gives the focus to the page's `[cdkFocusInitial]` element (a message marks its confirm
|
|
11797
|
+
* option), or without one to the first tabbable element of the page. Does nothing when the
|
|
11798
|
+
* focus is already inside the page or the page has nothing focusable; the container keeps it.
|
|
11799
|
+
*/
|
|
11800
|
+
focusPage(page) {
|
|
11801
|
+
if (page.contains(this.document.activeElement)) {
|
|
11802
|
+
return;
|
|
11803
|
+
}
|
|
11804
|
+
const trap = this.focusTrapFactory.create(page);
|
|
11805
|
+
trap.focusInitialElement();
|
|
11806
|
+
trap.destroy();
|
|
11807
|
+
}
|
|
11778
11808
|
refreshDescriptor(client) {
|
|
11779
11809
|
const next = windowDescriptorOf(client);
|
|
11780
11810
|
// Keep the descriptor from the dialog data until the client has one of its own.
|
|
@@ -11783,17 +11813,14 @@ class SmartContainerDialog {
|
|
|
11783
11813
|
}
|
|
11784
11814
|
}
|
|
11785
11815
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartContainerDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartContainerDialog, isStandalone: true, selector: "smart-container-dialog", viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponentHere"], descendants: true, read: ViewContainerRef, static: true }
|
|
11816
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartContainerDialog, isStandalone: true, selector: "smart-container-dialog", viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponentHere"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"dialog-container\">\r\n <div class=\"dialog-header\">\r\n <h2 class=\"dialog-title\">{{ title() }}</h2>\r\n\r\n @if (headerModels().length && executor()) {\r\n <smart-ui-action-toolbar\r\n class=\"dialog-header-toolbar\"\r\n [id]=\"TOOLBAR_DIALOG_HEADER\"\r\n [uiActionModels]=\"headerModels()\"\r\n [executor]=\"executor()\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </div>\r\n\r\n <mat-dialog-content class=\"dialog-content\">\r\n <ng-template #renderComponentHere></ng-template>\r\n </mat-dialog-content>\r\n\r\n @if (footerModels().length && executor()) {\r\n <div class=\"dialog-footer\">\r\n <smart-ui-action-toolbar\r\n class=\"dialog-footer-toolbar\"\r\n [id]=\"TOOLBAR_DIALOG_FOOTER\"\r\n [uiActionModels]=\"footerModels()\"\r\n [executor]=\"executor()\"\r\n ></smart-ui-action-toolbar>\r\n </div>\r\n }\r\n</div>", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".dialog-header-toolbar ::ng-deep button{min-width:unset}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }] }); }
|
|
11787
11817
|
}
|
|
11788
11818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartContainerDialog, decorators: [{
|
|
11789
11819
|
type: Component,
|
|
11790
|
-
args: [{ selector: "smart-container-dialog", imports: [MatDialogContent, UiActionToolbarComponent], template: "<div class=\"dialog-container\">\r\n <div class=\"dialog-header\"
|
|
11820
|
+
args: [{ selector: "smart-container-dialog", imports: [MatDialogContent, UiActionToolbarComponent], template: "<div class=\"dialog-container\">\r\n <div class=\"dialog-header\">\r\n <h2 class=\"dialog-title\">{{ title() }}</h2>\r\n\r\n @if (headerModels().length && executor()) {\r\n <smart-ui-action-toolbar\r\n class=\"dialog-header-toolbar\"\r\n [id]=\"TOOLBAR_DIALOG_HEADER\"\r\n [uiActionModels]=\"headerModels()\"\r\n [executor]=\"executor()\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </div>\r\n\r\n <mat-dialog-content class=\"dialog-content\">\r\n <ng-template #renderComponentHere></ng-template>\r\n </mat-dialog-content>\r\n\r\n @if (footerModels().length && executor()) {\r\n <div class=\"dialog-footer\">\r\n <smart-ui-action-toolbar\r\n class=\"dialog-footer-toolbar\"\r\n [id]=\"TOOLBAR_DIALOG_FOOTER\"\r\n [uiActionModels]=\"footerModels()\"\r\n [executor]=\"executor()\"\r\n ></smart-ui-action-toolbar>\r\n </div>\r\n }\r\n</div>", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".dialog-header-toolbar ::ng-deep button{min-width:unset}\n"] }]
|
|
11791
11821
|
}], propDecorators: { vcRef: [{
|
|
11792
11822
|
type: ViewChild,
|
|
11793
11823
|
args: ["renderComponentHere", { read: ViewContainerRef, static: true }]
|
|
11794
|
-
}], header: [{
|
|
11795
|
-
type: ViewChild,
|
|
11796
|
-
args: ["header", { static: true }]
|
|
11797
11824
|
}] } });
|
|
11798
11825
|
|
|
11799
11826
|
class SmartViewContextDialogService {
|
|
@@ -11824,6 +11851,8 @@ class SmartViewContextDialogService {
|
|
|
11824
11851
|
}
|
|
11825
11852
|
openContainerDialog(component, viewName, dialogDescriptor, config, uuid) {
|
|
11826
11853
|
return this.dialog.open(SmartContainerDialog, {
|
|
11854
|
+
// The page decides its own initial focus, see SmartContainerDialog.
|
|
11855
|
+
autoFocus: "dialog",
|
|
11827
11856
|
...config,
|
|
11828
11857
|
data: { component, descriptor: dialogDescriptor, viewName, uuid },
|
|
11829
11858
|
closeOnNavigation: false,
|
|
@@ -15260,11 +15289,11 @@ class SmartViewContextErrorDialogComponent {
|
|
|
15260
15289
|
this.service.closeDialog();
|
|
15261
15290
|
}
|
|
15262
15291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartViewContextErrorDialogComponent, isStandalone: true, selector: "lib-smart-view-context-error-dialog", ngImport: i0, template: "@if (smartViewContextApiError) {\r\n <div class=\"container\">\r\n <
|
|
15292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartViewContextErrorDialogComponent, isStandalone: true, selector: "lib-smart-view-context-error-dialog", ngImport: i0, template: "@if (smartViewContextApiError) {\r\n <div class=\"dialog-container error-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2 class=\"dialog-title\">{{ smartViewContextApiError.dialogTitle }}</h2>\r\n </div>\r\n\r\n <mat-dialog-content class=\"dialog-content\">\r\n <p>{{ smartViewContextApiError.message }}</p>\r\n </mat-dialog-content>\r\n\r\n <div class=\"dialog-footer\">\r\n <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\r\n </ui-action-button>\r\n </div>\r\n </div>\r\n}", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".error-dialog{--sb4-dialog-default-min-width: 25vw;--sb4-dialog-default-max-width: 75vw}.error-dialog .dialog-footer{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
|
|
15264
15293
|
}
|
|
15265
15294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, decorators: [{
|
|
15266
15295
|
type: Component,
|
|
15267
|
-
args: [{ selector: 'lib-smart-view-context-error-dialog', imports: [UiActionButtonComponent], template: "@if (smartViewContextApiError) {\r\n <div class=\"container\">\r\n <
|
|
15296
|
+
args: [{ selector: 'lib-smart-view-context-error-dialog', imports: [UiActionButtonComponent, MatDialogContent], template: "@if (smartViewContextApiError) {\r\n <div class=\"dialog-container error-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2 class=\"dialog-title\">{{ smartViewContextApiError.dialogTitle }}</h2>\r\n </div>\r\n\r\n <mat-dialog-content class=\"dialog-content\">\r\n <p>{{ smartViewContextApiError.message }}</p>\r\n </mat-dialog-content>\r\n\r\n <div class=\"dialog-footer\">\r\n <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\r\n </ui-action-button>\r\n </div>\r\n </div>\r\n}", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".error-dialog{--sb4-dialog-default-min-width: 25vw;--sb4-dialog-default-max-width: 75vw}.error-dialog .dialog-footer{display:flex;justify-content:flex-end}\n"] }]
|
|
15268
15297
|
}], ctorParameters: () => [] });
|
|
15269
15298
|
|
|
15270
15299
|
class SmartViewContextErrorDialogService extends SmartdialogService {
|
|
@@ -21670,7 +21699,7 @@ class SmartGridComponent {
|
|
|
21670
21699
|
};
|
|
21671
21700
|
}
|
|
21672
21701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21673
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\r\n<div class=\"smartGrid-container\">\r\n <div class=\"smart-grid-toolbar\">\r\n <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n @if (smartGrid.showEditColumns) {\r\n <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\r\n </ui-action-button>\r\n }\r\n </div>\r\n <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n <div class=\"smartGridContent\">\r\n <div>\r\n @if (smartGrid.showResultCount) {\r\n <div>\r\n <div class=\"smartGrid-data-number\">\r\n {{ smartGrid.gridModel.totalRowCount }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"smart-grid-table-container\">\r\n <ng-template #table></ng-template>\r\n </div>\r\n @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\r\n <div>\r\n @for (expandableSection of expandableSections; track expandableSection) {\r\n <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\r\n <div class=\"cards-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n @for (row of smartGrid.gridModel.page.rows; track row.id) {\r\n\r\n <app-smart-grid-card class=\"smartGrid-card-container\" [ngClass]=\"calcRowClasses(row)\"\r\n [ngStyle]=\"calcStyle(row.style)\"\r\n [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\r\n [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\r\n (click)=\"onCardClick(row, $event)\" (dblclick)=\"onCardDoubleClick(row, $event)\" [item]=\"row\"\r\n [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\r\n [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\r\n }\r\n @if (cardMenuRow(); as menuRow) {\r\n <lib-default-actions-popup [buttons]=\"cardMenuButtons()\" [row]=\"menuRow\"></lib-default-actions-popup>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\r\n <div class=\"tree-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button disabled class=\"tree-button\"></button>\r\n <mat-checkbox class=\"checklist-leaf-node\"\r\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </mat-icon>\r\n </button>\r\n <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\r\n getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n }\r\n </div>\r\n @if (smartGrid.paginator) {\r\n <div class=\"paginator-row-material\">\r\n @if (smartGrid.gridModel.refreshEnabled) {\r\n <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n }\r\n @if (smartGrid.paginator && !treeControl) {\r\n <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent", "layout"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
21702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\r\n<div class=\"smartGrid-container\">\r\n <div class=\"smart-grid-toolbar\">\r\n <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n @if (smartGrid.showEditColumns) {\r\n <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\r\n </ui-action-button>\r\n }\r\n </div>\r\n <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n <div class=\"smartGridContent\">\r\n <div>\r\n @if (smartGrid.showResultCount) {\r\n <div>\r\n <div class=\"smartGrid-data-number\">\r\n {{ smartGrid.gridModel.totalRowCount }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"smart-grid-table-container\">\r\n <ng-template #table></ng-template>\r\n </div>\r\n @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\r\n <div>\r\n @for (expandableSection of expandableSections; track expandableSection) {\r\n <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\r\n <div class=\"cards-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n @for (row of smartGrid.gridModel.page.rows; track row.id) {\r\n\r\n <app-smart-grid-card class=\"smartGrid-card-container\" [ngClass]=\"calcRowClasses(row)\"\r\n [ngStyle]=\"calcStyle(row.style)\"\r\n [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\r\n [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\r\n (click)=\"onCardClick(row, $event)\" (dblclick)=\"onCardDoubleClick(row, $event)\" [item]=\"row\"\r\n [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\r\n [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\r\n }\r\n @if (cardMenuRow(); as menuRow) {\r\n <lib-default-actions-popup [buttons]=\"cardMenuButtons()\" [row]=\"menuRow\"></lib-default-actions-popup>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\r\n <div class=\"tree-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button disabled class=\"tree-button\"></button>\r\n <mat-checkbox class=\"checklist-leaf-node\"\r\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </mat-icon>\r\n </button>\r\n <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\r\n getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n }\r\n </div>\r\n @if (smartGrid.paginator) {\r\n <div class=\"paginator-row-material\">\r\n @if (smartGrid.gridModel.refreshEnabled) {\r\n <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n }\r\n @if (smartGrid.paginator && !treeControl) {\r\n <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent", "layout"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
21674
21703
|
}
|
|
21675
21704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, decorators: [{
|
|
21676
21705
|
type: Component,
|
|
@@ -21693,7 +21722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
21693
21722
|
MatCheckbox,
|
|
21694
21723
|
MatTooltip,
|
|
21695
21724
|
MatPaginator,
|
|
21696
|
-
], template: "@if (smartGrid) {\r\n<div class=\"smartGrid-container\">\r\n <div class=\"smart-grid-toolbar\">\r\n <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n @if (smartGrid.showEditColumns) {\r\n <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\r\n </ui-action-button>\r\n }\r\n </div>\r\n <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n <div class=\"smartGridContent\">\r\n <div>\r\n @if (smartGrid.showResultCount) {\r\n <div>\r\n <div class=\"smartGrid-data-number\">\r\n {{ smartGrid.gridModel.totalRowCount }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"smart-grid-table-container\">\r\n <ng-template #table></ng-template>\r\n </div>\r\n @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\r\n <div>\r\n @for (expandableSection of expandableSections; track expandableSection) {\r\n <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\r\n <div class=\"cards-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n @for (row of smartGrid.gridModel.page.rows; track row.id) {\r\n\r\n <app-smart-grid-card class=\"smartGrid-card-container\" [ngClass]=\"calcRowClasses(row)\"\r\n [ngStyle]=\"calcStyle(row.style)\"\r\n [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\r\n [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\r\n (click)=\"onCardClick(row, $event)\" (dblclick)=\"onCardDoubleClick(row, $event)\" [item]=\"row\"\r\n [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\r\n [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\r\n }\r\n @if (cardMenuRow(); as menuRow) {\r\n <lib-default-actions-popup [buttons]=\"cardMenuButtons()\" [row]=\"menuRow\"></lib-default-actions-popup>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\r\n <div class=\"tree-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button disabled class=\"tree-button\"></button>\r\n <mat-checkbox class=\"checklist-leaf-node\"\r\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </mat-icon>\r\n </button>\r\n <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\r\n getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n }\r\n </div>\r\n @if (smartGrid.paginator) {\r\n <div class=\"paginator-row-material\">\r\n @if (smartGrid.gridModel.refreshEnabled) {\r\n <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n }\r\n @if (smartGrid.paginator && !treeControl) {\r\n <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".smartGrid-container{position:relative;padding
|
|
21725
|
+
], template: "@if (smartGrid) {\r\n<div class=\"smartGrid-container\">\r\n <div class=\"smart-grid-toolbar\">\r\n <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n @if (smartGrid.showEditColumns) {\r\n <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\r\n </ui-action-button>\r\n }\r\n </div>\r\n <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n <div class=\"smartGridContent\">\r\n <div>\r\n @if (smartGrid.showResultCount) {\r\n <div>\r\n <div class=\"smartGrid-data-number\">\r\n {{ smartGrid.gridModel.totalRowCount }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"smart-grid-table-container\">\r\n <ng-template #table></ng-template>\r\n </div>\r\n @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\r\n <div>\r\n @for (expandableSection of expandableSections; track expandableSection) {\r\n <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\r\n <div class=\"cards-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n @for (row of smartGrid.gridModel.page.rows; track row.id) {\r\n\r\n <app-smart-grid-card class=\"smartGrid-card-container\" [ngClass]=\"calcRowClasses(row)\"\r\n [ngStyle]=\"calcStyle(row.style)\"\r\n [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\r\n [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\r\n (click)=\"onCardClick(row, $event)\" (dblclick)=\"onCardDoubleClick(row, $event)\" [item]=\"row\"\r\n [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\r\n [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\r\n }\r\n @if (cardMenuRow(); as menuRow) {\r\n <lib-default-actions-popup [buttons]=\"cardMenuButtons()\" [row]=\"menuRow\"></lib-default-actions-popup>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\r\n <div class=\"tree-container\" [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\">\r\n <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button disabled class=\"tree-button\"></button>\r\n <mat-checkbox class=\"checklist-leaf-node\"\r\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\r\n <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </mat-icon>\r\n </button>\r\n <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\r\n getTreeItem(node) }}</mat-checkbox>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n }\r\n </div>\r\n @if (smartGrid.paginator) {\r\n <div class=\"paginator-row-material\">\r\n @if (smartGrid.gridModel.refreshEnabled) {\r\n <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n }\r\n @if (smartGrid.paginator && !treeControl) {\r\n <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"] }]
|
|
21697
21726
|
}], ctorParameters: () => [], propDecorators: { smartGrid: [{
|
|
21698
21727
|
type: Input
|
|
21699
21728
|
}], uuid: [{
|