@sumaris-net/ngx-components 18.7.25 → 18.7.26
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/doc/changelog.md +3 -0
- package/esm2022/src/app/core/menu/menu.component.mjs +3 -3
- package/esm2022/src/app/core/table/column/actions-column.component.mjs +3 -3
- package/esm2022/src/app/core/table/column/nav-actions-column.component.mjs +2 -2
- package/fesm2022/sumaris-net.ngx-components.mjs +6 -6
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/manifest.json +1 -1
|
@@ -73,11 +73,11 @@ export class NavActionsColumnComponent {
|
|
|
73
73
|
this._backwardEventSubject.next({ event, row });
|
|
74
74
|
}
|
|
75
75
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavActionsColumnComponent, deps: [{ token: i1.MatTable }, { token: i0.ChangeDetectorRef }, { token: i2.AppTable, optional: true }, { token: i3.AppAsyncTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
76
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: { appTable: "appTable", matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], showPending: ["showPending", "showPending", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate", throttleTime: "throttleTime" }, outputs: { optionsClick: "optionsClick" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
76
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: { appTable: "appTable", matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], showPending: ["showPending", "showPending", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate", throttleTime: "throttleTime" }, outputs: { optionsClick: "optionsClick" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
77
77
|
}
|
|
78
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavActionsColumnComponent, decorators: [{
|
|
79
79
|
type: Component,
|
|
80
|
-
args: [{ selector: 'app-nav-actions-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}\n"] }]
|
|
80
|
+
args: [{ selector: 'app-nav-actions-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"] }]
|
|
81
81
|
}], ctorParameters: () => [{ type: i1.MatTable }, { type: i0.ChangeDetectorRef }, { type: i2.AppTable, decorators: [{
|
|
82
82
|
type: Optional
|
|
83
83
|
}] }, { type: i3.AppAsyncTable, decorators: [{
|
|
@@ -30157,11 +30157,11 @@ class MenuComponent {
|
|
|
30157
30157
|
this.menuService.togglePinned(item);
|
|
30158
30158
|
}
|
|
30159
30159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [{ token: AccountService }, { token: i2$1.NavController }, { token: i2$1.MenuController }, { token: i2$1.ModalController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: i1$6.Router }, { token: ENVIRONMENT }, { token: i1$6.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
30160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button\n type=\"button\"\n mat-flat-button\n class=\"user-avatar\"\n [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n ></button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img\n *ngIf=\"logo; else noLogo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n alt=\"Logo\"\n width=\"108px\"\n />\n <ng-template #noLogo>\n <span style=\"width: 108px\">{{ appName }}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button\n mat-button\n type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n >\n <ion-label class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{ accountName }}</b>\n </h3>\n <h4>{{ accountEmail }}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar\n class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center\"\n >\n <img\n *ngIf=\"logo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n width=\"150px;\"\n alt=\"logo\"\n />\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button\n mat-icon-button\n color=\"accent\"\n (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n >\n <mat-icon>\n <span>{{ splitPane.when ? '«' : '»' }}</span>\n </mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n </ion-menu>\n\n <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n @if (item.divider) {\n <!-- divider -->\n <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n </ion-label>\n </ion-item-divider>\n } @else if (item.path && !item.action) {\n <!-- tappable link -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }}\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{\n paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n matrixParams: 'exact',\n fragment: 'ignored',\n }\"\n >\n @if (item.icon) {\n <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n } @else if (item.matIcon) {\n <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n }\n <ion-label *rxLet=\"item.$title; let title\">\n <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n } @else if (item.action) {\n <!-- action -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n (click)=\"executeAction($event, item)\"\n >\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label>\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n }\n\n <!-- children -->\n @if (item.$children) {\n <div class=\"sub-menu-container\">\n <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n </ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n <!-- pin button -->\n <ion-button\n *ngIf=\"level && item.pinnable\"\n slot=\"end\"\n shape=\"round\"\n fill=\"clear\"\n size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinned($event, item)\"\n >\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i12$1.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$2.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$2.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
30160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button\n type=\"button\"\n mat-flat-button\n class=\"user-avatar\"\n [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n ></button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img\n *ngIf=\"logo; else noLogo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n alt=\"Logo\"\n width=\"108px\"\n />\n <ng-template #noLogo>\n <span style=\"width: 108px\">{{ appName }}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button\n mat-button\n type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n >\n <ion-label class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{ accountName }}</b>\n </h3>\n <h4>{{ accountEmail }}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar\n class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center\"\n >\n <img\n *ngIf=\"logo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n width=\"150px;\"\n alt=\"logo\"\n />\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button\n mat-icon-button\n color=\"accent\"\n (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n >\n <mat-icon>\n <span>{{ splitPane.when ? '«' : '»' }}</span>\n </mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n </ion-menu>\n\n <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n @if (item.divider) {\n <!-- divider -->\n <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n </ion-label>\n </ion-item-divider>\n } @else if (item.path && !item.action) {\n <!-- tappable link -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }}\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{\n paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n matrixParams: 'exact',\n fragment: 'ignored',\n }\"\n >\n @if (item.icon) {\n <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n } @else if (item.matIcon) {\n <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n }\n <ion-label *rxLet=\"item.$title; let title\">\n <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n } @else if (item.action) {\n <!-- action -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n (click)=\"executeAction($event, item)\"\n >\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label>\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n }\n\n <!-- children -->\n @if (item.$children) {\n <div class=\"sub-menu-container\">\n <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n </ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n <!-- pin button -->\n @if (level && item.pinnable) {\n <ion-button\n slot=\"end\"\n shape=\"round\"\n fill=\"clear\"\n size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinned($event, item)\"\n >\n <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i12$1.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$2.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$2.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
30161
30161
|
}
|
|
30162
30162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
|
|
30163
30163
|
type: Component,
|
|
30164
|
-
args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button\n type=\"button\"\n mat-flat-button\n class=\"user-avatar\"\n [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n ></button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img\n *ngIf=\"logo; else noLogo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n alt=\"Logo\"\n width=\"108px\"\n />\n <ng-template #noLogo>\n <span style=\"width: 108px\">{{ appName }}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button\n mat-button\n type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n >\n <ion-label class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{ accountName }}</b>\n </h3>\n <h4>{{ accountEmail }}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar\n class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center\"\n >\n <img\n *ngIf=\"logo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n width=\"150px;\"\n alt=\"logo\"\n />\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button\n mat-icon-button\n color=\"accent\"\n (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n >\n <mat-icon>\n <span>{{ splitPane.when ? '«' : '»' }}</span>\n </mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n </ion-menu>\n\n <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n @if (item.divider) {\n <!-- divider -->\n <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n </ion-label>\n </ion-item-divider>\n } @else if (item.path && !item.action) {\n <!-- tappable link -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }}\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{\n paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n matrixParams: 'exact',\n fragment: 'ignored',\n }\"\n >\n @if (item.icon) {\n <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n } @else if (item.matIcon) {\n <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n }\n <ion-label *rxLet=\"item.$title; let title\">\n <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n } @else if (item.action) {\n <!-- action -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n (click)=\"executeAction($event, item)\"\n >\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label>\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n }\n\n <!-- children -->\n @if (item.$children) {\n <div class=\"sub-menu-container\">\n <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n </ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n <!-- pin button -->\n <ion-button\n *ngIf=\"level && item.pinnable\"\n slot=\"end\"\n shape=\"round\"\n fill=\"clear\"\n size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinned($event, item)\"\n >\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
|
|
30164
|
+
args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @fadeInSlowAnimation class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button\n type=\"button\"\n mat-flat-button\n class=\"user-avatar\"\n [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url(' + (accountAvatar || './assets/img/person.png') + ')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n ></button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img\n *ngIf=\"logo; else noLogo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n alt=\"Logo\"\n width=\"108px\"\n />\n <ng-template #noLogo>\n <span style=\"width: 108px\">{{ appName }}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button\n mat-button\n type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT' | translate\"\n >\n <ion-label class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{ accountName }}</b>\n </h3>\n <h4>{{ accountEmail }}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar\n class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center\"\n >\n <img\n *ngIf=\"logo\"\n [attr.src]=\"logo\"\n [title]=\"'APP_NAME' | translate: { appName: appName }\"\n width=\"150px;\"\n alt=\"logo\"\n />\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button\n mat-icon-button\n color=\"accent\"\n (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate\"\n >\n <mat-icon>\n <span>{{ splitPane.when ? '«' : '»' }}</span>\n </mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n </ion-menu>\n\n <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n @if (item.divider) {\n <!-- divider -->\n <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n </ion-label>\n </ion-item-divider>\n } @else if (item.path && !item.action) {\n <!-- tappable link -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }}\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{\n paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n matrixParams: 'exact',\n fragment: 'ignored',\n }\"\n >\n @if (item.icon) {\n <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n } @else if (item.matIcon) {\n <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n }\n <ion-label *rxLet=\"item.$title; let title\">\n <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n } @else if (item.action) {\n <!-- action -->\n <ion-item\n @fadeInSlowAnimation\n class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n [class.menu-item-sub]=\"level !== 0\"\n tappable\n (click)=\"executeAction($event, item)\"\n >\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n <ion-label>\n <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n </ion-label>\n\n <!-- pin button -->\n <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n </ion-item>\n }\n\n <!-- children -->\n @if (item.$children) {\n <div class=\"sub-menu-container\">\n <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n </ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n <!-- pin button -->\n @if (level && item.pinnable) {\n <ion-button\n slot=\"end\"\n shape=\"round\"\n fill=\"clear\"\n size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinned($event, item)\"\n >\n <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n }\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
|
|
30165
30165
|
}], ctorParameters: () => [{ type: AccountService }, { type: i2$1.NavController }, { type: i2$1.MenuController }, { type: i2$1.ModalController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: MenuService }, { type: i1$6.Router }, { type: Environment, decorators: [{
|
|
30166
30166
|
type: Inject,
|
|
30167
30167
|
args: [ENVIRONMENT]
|
|
@@ -35526,11 +35526,11 @@ class ActionsColumnComponent {
|
|
|
35526
35526
|
this.forward.unsubscribe();
|
|
35527
35527
|
}
|
|
35528
35528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsColumnComponent, deps: [{ token: i1$7.MatTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
35529
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canCancel: ["canCancel", "canCancel", booleanAttribute], canConfirm: ["canConfirm", "canConfirm", booleanAttribute], canDelete: ["canDelete", "canDelete", booleanAttribute], canBackward: ["canBackward", "canBackward", booleanAttribute], canForward: ["canForward", "canForward", booleanAttribute], canConfirmAndAdd: ["canConfirmAndAdd", "canConfirmAndAdd", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplateStart: "cellTemplateStart", cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n @switch (style) {\n <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n @case ('table') {\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n @let editing = row.editing;\n @let dirty = row.dirty;\n @let valid = row.valid;\n @let pending = row.pending;\n @let invalid = !pending && !valid;\n @if (editing) {\n <!-- pending -->\n @if (pending) {\n <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- Confirm button -->\n @if (canConfirm && dirty && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_APPLY' | translate\"\n (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>checkmark</mat-icon>\n </button>\n }\n\n <!-- new row -->\n @if (row.id === -1) {\n <!-- delete button -->\n @if (canDelete && invalid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n }\n\n <!-- add button -->\n @if (!canForward && canConfirmAndAdd && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_ADD' | translate\"\n (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <!-- existing row -->\n } @else if (canCancel && dirty) {\n <!-- cancel button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n }\n } @else if (dirtyIcon && dirty) {\n <!-- dirty icon -->\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n <!-- navigation buttons (invisible - focusable only) -->\n @if (canForward && editing && valid) {\n <!-- forward button -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n } @else if (canBackward && !editing) {\n <!-- backward button -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"backward.emit({ event: $event, row: row })\"\n ></button>\n }\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n }\n\n <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n @case ('mat-table') {\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- Confirm button -->\n @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_APPLY' | translate\"\n (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>checkmark</mat-icon>\n </button>\n }\n\n <!-- new row -->\n @if (row.id === -1) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n *ngIf=\"canDelete && row.validator?.invalid\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- add button -->\n @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_ADD' | translate\"\n (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <!-- next button (invisible - focusable only) -->\n @if (canForward && row.validator?.valid) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"forward.emit({ event: $event, row: row })\"\n ></button>\n }\n\n <!-- existing row -->\n } @else {\n <!-- cancel button -->\n @if (canCancel && row.validator?.dirty) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n }\n\n <!-- next button (invisible - focusable only) -->\n @if (canForward && row.validator?.valid) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"forward.emit({ event: $event, row: row })\"\n ></button>\n }\n }\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n @if (canBackward) {\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"backward.emit({ event: $event, row: row })\"\n ></button>\n }\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n }\n }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
35529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canCancel: ["canCancel", "canCancel", booleanAttribute], canConfirm: ["canConfirm", "canConfirm", booleanAttribute], canDelete: ["canDelete", "canDelete", booleanAttribute], canBackward: ["canBackward", "canBackward", booleanAttribute], canForward: ["canForward", "canForward", booleanAttribute], canConfirmAndAdd: ["canConfirmAndAdd", "canConfirmAndAdd", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplateStart: "cellTemplateStart", cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n @switch (style) {\n <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n @case ('table') {\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n @let editing = row.editing;\n @let dirty = row.dirty;\n @let valid = row.valid;\n @let pending = row.pending;\n @let invalid = !pending && !valid;\n @if (editing) {\n <!-- pending -->\n @if (pending) {\n <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- Confirm button -->\n @if (canConfirm && dirty && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_APPLY' | translate\"\n (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>checkmark</mat-icon>\n </button>\n }\n\n <!-- new row -->\n @if (row.id === -1) {\n <!-- delete button -->\n @if (canDelete && invalid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n }\n\n <!-- add button -->\n @if (!canForward && canConfirmAndAdd && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_ADD' | translate\"\n (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <!-- existing row -->\n } @else if (canCancel && dirty) {\n <!-- cancel button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n }\n } @else if (dirtyIcon && dirty) {\n <!-- dirty icon -->\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n <!-- navigation buttons (invisible - focusable only) -->\n @if (canForward && editing && valid) {\n <!-- forward button -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n } @else if (canBackward && !editing) {\n <!-- backward button -->\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"backward.emit({ event: $event, row: row })\"\n ></button>\n }\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n }\n\n <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n @case ('mat-table') {\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- Confirm button -->\n @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_APPLY' | translate\"\n (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>checkmark</mat-icon>\n </button>\n }\n\n <!-- new row -->\n @if (row.id === -1) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n *ngIf=\"canDelete && row.validator?.invalid\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- add button -->\n @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_ADD' | translate\"\n (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <!-- next button (invisible - focusable only) -->\n @if (canForward && row.validator?.valid) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"forward.emit({ event: $event, row: row })\"\n ></button>\n }\n\n <!-- existing row -->\n } @else {\n <!-- cancel button -->\n @if (canCancel && row.validator?.dirty) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n }\n\n <!-- next button (invisible - focusable only) -->\n @if (canForward && row.validator?.valid) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"forward.emit({ event: $event, row: row })\"\n ></button>\n }\n }\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n @if (canBackward) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"backward.emit({ event: $event, row: row })\"\n ></button>\n }\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n }\n }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
35530
35530
|
}
|
|
35531
35531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsColumnComponent, decorators: [{
|
|
35532
35532
|
type: Component,
|
|
35533
|
-
args: [{ selector: 'app-actions-column', template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n @switch (style) {\n <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n @case ('table') {\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n @let editing = row.editing;\n @let dirty = row.dirty;\n @let valid = row.valid;\n @let pending = row.pending;\n @let invalid = !pending && !valid;\n @if (editing) {\n <!-- pending -->\n @if (pending) {\n <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- Confirm button -->\n @if (canConfirm && dirty && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_APPLY' | translate\"\n (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>checkmark</mat-icon>\n </button>\n }\n\n <!-- new row -->\n @if (row.id === -1) {\n <!-- delete button -->\n @if (canDelete && invalid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n }\n\n <!-- add button -->\n @if (!canForward && canConfirmAndAdd && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_ADD' | translate\"\n (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <!-- existing row -->\n } @else if (canCancel && dirty) {\n <!-- cancel button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n }\n } @else if (dirtyIcon && dirty) {\n <!-- dirty icon -->\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n <!-- navigation buttons (invisible - focusable only) -->\n @if (canForward && editing && valid) {\n <!-- forward button -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n } @else if (canBackward && !editing) {\n <!-- backward button -->\n <button\n
|
|
35533
|
+
args: [{ selector: 'app-actions-column', template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n @switch (style) {\n <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n @case ('table') {\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n @let editing = row.editing;\n @let dirty = row.dirty;\n @let valid = row.valid;\n @let pending = row.pending;\n @let invalid = !pending && !valid;\n @if (editing) {\n <!-- pending -->\n @if (pending) {\n <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- Confirm button -->\n @if (canConfirm && dirty && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_APPLY' | translate\"\n (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>checkmark</mat-icon>\n </button>\n }\n\n <!-- new row -->\n @if (row.id === -1) {\n <!-- delete button -->\n @if (canDelete && invalid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n }\n\n <!-- add button -->\n @if (!canForward && canConfirmAndAdd && valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_ADD' | translate\"\n (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <!-- existing row -->\n } @else if (canCancel && dirty) {\n <!-- cancel button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n }\n } @else if (dirtyIcon && dirty) {\n <!-- dirty icon -->\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n <!-- navigation buttons (invisible - focusable only) -->\n @if (canForward && editing && valid) {\n <!-- forward button -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n } @else if (canBackward && !editing) {\n <!-- backward button -->\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"backward.emit({ event: $event, row: row })\"\n ></button>\n }\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n }\n\n <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n @case ('mat-table') {\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- Confirm button -->\n @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_APPLY' | translate\"\n (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>checkmark</mat-icon>\n </button>\n }\n\n <!-- new row -->\n @if (row.id === -1) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n *ngIf=\"canDelete && row.validator?.invalid\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- add button -->\n @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_ADD' | translate\"\n (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <!-- next button (invisible - focusable only) -->\n @if (canForward && row.validator?.valid) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"forward.emit({ event: $event, row: row })\"\n ></button>\n }\n\n <!-- existing row -->\n } @else {\n <!-- cancel button -->\n @if (canCancel && row.validator?.dirty) {\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n >\n <mat-icon>undo</mat-icon>\n </button>\n }\n\n <!-- next button (invisible - focusable only) -->\n @if (canForward && row.validator?.valid) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"forward.emit({ event: $event, row: row })\"\n ></button>\n }\n }\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n @if (canBackward) {\n <button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"backward.emit({ event: $event, row: row })\"\n ></button>\n }\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n }\n }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"] }]
|
|
35534
35534
|
}], ctorParameters: () => [{ type: i1$7.MatTable }, { type: i0.ChangeDetectorRef }], propDecorators: { columnDef: [{
|
|
35535
35535
|
type: ViewChild,
|
|
35536
35536
|
args: [MatColumnDef]
|
|
@@ -38180,11 +38180,11 @@ class NavActionsColumnComponent {
|
|
|
38180
38180
|
this._backwardEventSubject.next({ event, row });
|
|
38181
38181
|
}
|
|
38182
38182
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavActionsColumnComponent, deps: [{ token: i1$7.MatTable }, { token: i0.ChangeDetectorRef }, { token: AppTable, optional: true }, { token: AppAsyncTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
38183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: { appTable: "appTable", matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], showPending: ["showPending", "showPending", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate", throttleTime: "throttleTime" }, outputs: { optionsClick: "optionsClick" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
38183
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: { appTable: "appTable", matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], showPending: ["showPending", "showPending", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate", throttleTime: "throttleTime" }, outputs: { optionsClick: "optionsClick" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
38184
38184
|
}
|
|
38185
38185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavActionsColumnComponent, decorators: [{
|
|
38186
38186
|
type: Component,
|
|
38187
|
-
args: [{ selector: 'app-nav-actions-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}\n"] }]
|
|
38187
|
+
args: [{ selector: 'app-nav-actions-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n <ng-container *ngSwitchCase=\"'table'\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- valid row or invalid existing row -->\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- NOT editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'mat-table'\">\n <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button\n mat-icon-button\n *ngIf=\"optionsClick.observed\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n @if (row.editing) {\n <!-- pending -->\n @if (row.validator?.pending) {\n <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n }\n\n <!-- invalid new row -->\n @if (row.id === -1 && row.validator?.invalid) {\n <!-- delete button -->\n <button\n mat-icon-button\n color=\"light\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDelete($event, row)\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n } @else {\n <!-- forward button (invisible - focusable only) -->\n <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n }\n\n <!-- not editing row -->\n } @else {\n <!-- dirty icon -->\n @if (dirtyIcon && row.validator?.dirty) {\n <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n }\n\n <!-- backward button (invisible - focusable only) -->\n <button\n mat-icon-button\n class=\"mat-row-action-button-navigation\"\n (focus)=\"confirmAndBackward($event, row)\"\n ></button>\n }\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </mat-footer-cell>\n </ng-container>\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"] }]
|
|
38188
38188
|
}], ctorParameters: () => [{ type: i1$7.MatTable }, { type: i0.ChangeDetectorRef }, { type: AppTable, decorators: [{
|
|
38189
38189
|
type: Optional
|
|
38190
38190
|
}] }, { type: AppAsyncTable, decorators: [{
|