@ng-matero/extensions 14.8.1 → 14.8.3
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/datetimepicker/_datetimepicker-theme.scss +5 -1
- package/datetimepicker/time.scss +1 -1
- package/esm2020/datetimepicker/clock.mjs +7 -1
- package/esm2020/datetimepicker/time.mjs +2 -2
- package/esm2020/grid/column-menu.component.mjs +11 -5
- package/esm2020/grid/grid.component.mjs +10 -9
- package/esm2020/grid/grid.pipe.mjs +2 -2
- package/esm2020/select/select.component.mjs +16 -6
- package/fesm2015/mtxDatetimepicker.mjs +8 -2
- package/fesm2015/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2015/mtxGrid.mjs +19 -12
- package/fesm2015/mtxGrid.mjs.map +1 -1
- package/fesm2015/mtxSelect.mjs +15 -5
- package/fesm2015/mtxSelect.mjs.map +1 -1
- package/fesm2020/mtxDatetimepicker.mjs +8 -2
- package/fesm2020/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2020/mtxGrid.mjs +19 -12
- package/fesm2020/mtxGrid.mjs.map +1 -1
- package/fesm2020/mtxSelect.mjs +15 -5
- package/fesm2020/mtxSelect.mjs.map +1 -1
- package/grid/column-menu.component.d.ts +3 -4
- package/grid/grid.component.d.ts +2 -1
- package/grid/grid.pipe.d.ts +2 -2
- package/package.json +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/select/select.component.d.ts +2 -0
package/fesm2015/mtxGrid.mjs
CHANGED
|
@@ -363,7 +363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
363
363
|
}] });
|
|
364
364
|
class MtxGridRowClassPipe {
|
|
365
365
|
transform(rowData, index, dataIndex, rowClassFormatter) {
|
|
366
|
-
const rowIndex =
|
|
366
|
+
const rowIndex = index === undefined ? dataIndex : index;
|
|
367
367
|
const classList = rowIndex % 2 === 1 ? ['mat-row-odd'] : [];
|
|
368
368
|
if (rowClassFormatter) {
|
|
369
369
|
for (const key of Object.keys(rowClassFormatter)) {
|
|
@@ -593,7 +593,13 @@ class MtxGridColumnMenuComponent {
|
|
|
593
593
|
moveItemInArray(this.columns, e.previousIndex, e.currentIndex);
|
|
594
594
|
this.columnChange.emit(this.columns);
|
|
595
595
|
}
|
|
596
|
-
_handleChecked(
|
|
596
|
+
_handleChecked(col) {
|
|
597
|
+
if (this.selectableChecked === 'show') {
|
|
598
|
+
col.hide = !col.show;
|
|
599
|
+
}
|
|
600
|
+
else {
|
|
601
|
+
col.show = !col.hide;
|
|
602
|
+
}
|
|
597
603
|
this.columnChange.emit(this.columns);
|
|
598
604
|
}
|
|
599
605
|
_handlePinSelect(col, val) {
|
|
@@ -604,10 +610,10 @@ class MtxGridColumnMenuComponent {
|
|
|
604
610
|
}
|
|
605
611
|
}
|
|
606
612
|
/** @nocollapse */ MtxGridColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxGridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
607
|
-
/** @nocollapse */ MtxGridColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxGridColumnMenuComponent, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n </path>\r\n </svg>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <ng-container *ngIf=\"pinnable\">\r\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\r\n [matMenuTriggerFor]=\"pinList\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n </svg>\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n </svg>\r\n </button>\r\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\r\n *ngFor=\"let item of pinOptions\" mat-menu-item\r\n (click)=\"_handlePinSelect(col, item.value)\">\r\n <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </svg>\r\n </span>\r\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n (change)=\"_handleChecked($event)\">\r\n {{col.header | toObservable | async}}\r\n </mat-checkbox>\r\n <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n {{col.header | toObservable | async}}\r\n </span>\r\n</ng-template>\r\n", styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:8px 16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-icon-button{width:32px;height:32px;line-height:32px}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px}.mtx-grid-column-pin-option-text{padding:0 8px}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
613
|
+
/** @nocollapse */ MtxGridColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxGridColumnMenuComponent, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n </path>\r\n </svg>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <ng-container *ngIf=\"pinnable\">\r\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\r\n [matMenuTriggerFor]=\"pinList\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n </svg>\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n </svg>\r\n </button>\r\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\r\n *ngFor=\"let item of pinOptions\" mat-menu-item\r\n (click)=\"_handlePinSelect(col, item.value)\">\r\n <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </svg>\r\n </span>\r\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n (change)=\"_handleChecked(col)\">\r\n {{col.header | toObservable | async}}\r\n </mat-checkbox>\r\n <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n {{col.header | toObservable | async}}\r\n </span>\r\n</ng-template>\r\n", styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:8px 16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-icon-button{width:32px;height:32px;line-height:32px}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px}.mtx-grid-column-pin-option-text{padding:0 8px}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
608
614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxGridColumnMenuComponent, decorators: [{
|
|
609
615
|
type: Component,
|
|
610
|
-
args: [{ selector: 'mtx-grid-column-menu', exportAs: 'mtxGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n </path>\r\n </svg>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <ng-container *ngIf=\"pinnable\">\r\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\r\n [matMenuTriggerFor]=\"pinList\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n </svg>\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n </svg>\r\n </button>\r\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\r\n *ngFor=\"let item of pinOptions\" mat-menu-item\r\n (click)=\"_handlePinSelect(col, item.value)\">\r\n <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </svg>\r\n </span>\r\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n (change)=\"_handleChecked(
|
|
616
|
+
args: [{ selector: 'mtx-grid-column-menu', exportAs: 'mtxGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n </path>\r\n </svg>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <ng-container *ngIf=\"pinnable\">\r\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\r\n [matMenuTriggerFor]=\"pinList\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n </svg>\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n </svg>\r\n </button>\r\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\r\n *ngFor=\"let item of pinOptions\" mat-menu-item\r\n (click)=\"_handlePinSelect(col, item.value)\">\r\n <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </svg>\r\n </span>\r\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n (change)=\"_handleChecked(col)\">\r\n {{col.header | toObservable | async}}\r\n </mat-checkbox>\r\n <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n {{col.header | toObservable | async}}\r\n </span>\r\n</ng-template>\r\n", styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:8px 16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-icon-button{width:32px;height:32px;line-height:32px}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px}.mtx-grid-column-pin-option-text{padding:0 8px}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"] }]
|
|
611
617
|
}], propDecorators: { menuPanel: [{
|
|
612
618
|
type: ViewChild,
|
|
613
619
|
args: ['menu', { static: true }]
|
|
@@ -885,19 +891,20 @@ class MtxGridComponent {
|
|
|
885
891
|
_getColData(data, colDef) {
|
|
886
892
|
return this._gridSrv.getColData(data, colDef);
|
|
887
893
|
}
|
|
894
|
+
_isColumnHide(item) {
|
|
895
|
+
return item.hide !== undefined ? item.hide : item.show !== undefined ? !item.show : false;
|
|
896
|
+
}
|
|
888
897
|
// Waiting for async data
|
|
889
898
|
ngOnChanges(changes) {
|
|
890
899
|
var _a;
|
|
891
900
|
this._countPinnedPosition();
|
|
892
|
-
this.displayedColumns = this.columns
|
|
901
|
+
this.displayedColumns = this.columns
|
|
902
|
+
.filter(item => !this._isColumnHide(item))
|
|
903
|
+
.map(item => item.field);
|
|
893
904
|
if (this.showColumnMenuButton) {
|
|
894
905
|
this.columns.forEach(item => {
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
}
|
|
898
|
-
else {
|
|
899
|
-
item.hide = !!item.hide;
|
|
900
|
-
}
|
|
906
|
+
item.hide = this._isColumnHide(item);
|
|
907
|
+
item.show = !item.hide;
|
|
901
908
|
});
|
|
902
909
|
}
|
|
903
910
|
if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
|
|
@@ -954,7 +961,7 @@ class MtxGridComponent {
|
|
|
954
961
|
});
|
|
955
962
|
}
|
|
956
963
|
_getIndex(index, dataIndex) {
|
|
957
|
-
return
|
|
964
|
+
return index === undefined ? dataIndex : index;
|
|
958
965
|
}
|
|
959
966
|
_onSortChange(sort) {
|
|
960
967
|
this.sortChange.emit(sort);
|