@ng-matero/extensions 17.1.2 → 17.1.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/esm2022/grid/column-menu.mjs +10 -4
- package/esm2022/grid/grid-pipes.mjs +2 -2
- package/esm2022/grid/grid.mjs +10 -9
- package/fesm2022/mtxGrid.mjs +19 -12
- package/fesm2022/mtxGrid.mjs.map +1 -1
- package/grid/column-menu.d.ts +1 -2
- package/grid/grid-pipes.d.ts +1 -1
- package/grid/grid.d.ts +2 -1
- package/package.json +7 -7
package/fesm2022/mtxGrid.mjs
CHANGED
|
@@ -410,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
410
410
|
}] });
|
|
411
411
|
class MtxGridRowClassPipe {
|
|
412
412
|
transform(rowData, index, dataIndex, rowClassFormatter) {
|
|
413
|
-
const rowIndex =
|
|
413
|
+
const rowIndex = index === undefined ? dataIndex : index;
|
|
414
414
|
const classList = rowIndex % 2 === 1 ? ['mat-row-odd'] : [];
|
|
415
415
|
if (rowClassFormatter) {
|
|
416
416
|
for (const key of Object.keys(rowClassFormatter)) {
|
|
@@ -676,7 +676,13 @@ class MtxGridColumnMenu {
|
|
|
676
676
|
moveItemInArray(this.columns, e.previousIndex, e.currentIndex);
|
|
677
677
|
this.columnChange.emit(this.columns);
|
|
678
678
|
}
|
|
679
|
-
_handleChecked(
|
|
679
|
+
_handleChecked(col) {
|
|
680
|
+
if (this.selectableChecked === 'show') {
|
|
681
|
+
col.hide = !col.show;
|
|
682
|
+
}
|
|
683
|
+
else {
|
|
684
|
+
col.show = !col.hide;
|
|
685
|
+
}
|
|
680
686
|
this.columnChange.emit(this.columns);
|
|
681
687
|
}
|
|
682
688
|
_handlePinSelect(col, val) {
|
|
@@ -686,7 +692,7 @@ class MtxGridColumnMenu {
|
|
|
686
692
|
}
|
|
687
693
|
}
|
|
688
694
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
689
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MtxGridColumnMenu, isStandalone: true, 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: "@switch (buttonType) {\n @case ('raised') {\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('stroked') {\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('flat') {\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('icon') {\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n </button>\n }\n @case ('fab') {\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('mini-fab') {\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @default {\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n <div class=\"mtx-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n @if (showHeader) {\n <div class=\"mtx-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else {\n {{headerText}}\n }\n </div>\n }\n\n <div class=\"mtx-grid-column-menu-body\">\n @if (sortable) {\n <div class=\"mtx-grid-column-menu-list\"\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\"\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n </svg>\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (!sortable) {\n <div class=\"mtx-grid-column-menu-list\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\">\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"mtx-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n {{footerText}}\n }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n [matMenuTriggerFor]=\"pinList\">\n @if (col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n }\n @if (!col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\">\n <span class=\"mtx-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n }\n\n @if (selectable) {\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n (change)=\"_handleChecked($event)\">{{col.header | toObservable | async}}</mat-checkbox>\n } @else {\n <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".mtx-grid-column-menu{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.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;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color)}.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-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-mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.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;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: 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: "directive", type: 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: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
695
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MtxGridColumnMenu, isStandalone: true, 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: "@switch (buttonType) {\n @case ('raised') {\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('stroked') {\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('flat') {\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('icon') {\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n </button>\n }\n @case ('fab') {\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('mini-fab') {\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @default {\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n <div class=\"mtx-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n @if (showHeader) {\n <div class=\"mtx-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else {\n {{headerText}}\n }\n </div>\n }\n\n <div class=\"mtx-grid-column-menu-body\">\n @if (sortable) {\n <div class=\"mtx-grid-column-menu-list\"\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\"\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n </svg>\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (!sortable) {\n <div class=\"mtx-grid-column-menu-list\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\">\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"mtx-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n {{footerText}}\n }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n [matMenuTriggerFor]=\"pinList\">\n @if (col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n }\n @if (!col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\">\n <span class=\"mtx-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n }\n\n @if (selectable) {\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\">{{col.header | toObservable | async}}</mat-checkbox>\n } @else {\n <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".mtx-grid-column-menu{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.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;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color)}.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-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-mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.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;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: 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: "directive", type: 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: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
690
696
|
}
|
|
691
697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxGridColumnMenu, decorators: [{
|
|
692
698
|
type: Component,
|
|
@@ -707,7 +713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
707
713
|
CdkDrag,
|
|
708
714
|
CdkDropList,
|
|
709
715
|
MtxToObservablePipe,
|
|
710
|
-
], template: "@switch (buttonType) {\n @case ('raised') {\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('stroked') {\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('flat') {\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('icon') {\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n </button>\n }\n @case ('fab') {\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('mini-fab') {\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @default {\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n <div class=\"mtx-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n @if (showHeader) {\n <div class=\"mtx-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else {\n {{headerText}}\n }\n </div>\n }\n\n <div class=\"mtx-grid-column-menu-body\">\n @if (sortable) {\n <div class=\"mtx-grid-column-menu-list\"\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\"\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n </svg>\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (!sortable) {\n <div class=\"mtx-grid-column-menu-list\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\">\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"mtx-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n {{footerText}}\n }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n [matMenuTriggerFor]=\"pinList\">\n @if (col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n }\n @if (!col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\">\n <span class=\"mtx-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n }\n\n @if (selectable) {\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(
|
|
716
|
+
], template: "@switch (buttonType) {\n @case ('raised') {\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('stroked') {\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('flat') {\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('icon') {\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n </button>\n }\n @case ('fab') {\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('mini-fab') {\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @default {\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n <div class=\"mtx-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n @if (showHeader) {\n <div class=\"mtx-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else {\n {{headerText}}\n }\n </div>\n }\n\n <div class=\"mtx-grid-column-menu-body\">\n @if (sortable) {\n <div class=\"mtx-grid-column-menu-list\"\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\"\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n </svg>\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (!sortable) {\n <div class=\"mtx-grid-column-menu-list\">\n @for (col of columns; track col) {\n <div class=\"mtx-grid-column-menu-item\">\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"mtx-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n {{footerText}}\n }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n [matMenuTriggerFor]=\"pinList\">\n @if (col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n }\n @if (!col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\">\n <span class=\"mtx-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n }\n\n @if (selectable) {\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\">{{col.header | toObservable | async}}</mat-checkbox>\n } @else {\n <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".mtx-grid-column-menu{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.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;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color)}.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-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-mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.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;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"] }]
|
|
711
717
|
}], propDecorators: { menuPanel: [{
|
|
712
718
|
type: ViewChild,
|
|
713
719
|
args: ['menu', { static: true }]
|
|
@@ -1042,18 +1048,19 @@ class MtxGrid {
|
|
|
1042
1048
|
_getColData(data, colDef) {
|
|
1043
1049
|
return this._utils.getColData(data, colDef);
|
|
1044
1050
|
}
|
|
1051
|
+
_isColumnHide(item) {
|
|
1052
|
+
return item.hide !== undefined ? item.hide : item.show !== undefined ? !item.show : false;
|
|
1053
|
+
}
|
|
1045
1054
|
// Waiting for async data
|
|
1046
1055
|
ngOnChanges(changes) {
|
|
1047
1056
|
this._countPinnedPosition();
|
|
1048
|
-
this.displayedColumns = this.columns
|
|
1057
|
+
this.displayedColumns = this.columns
|
|
1058
|
+
.filter(item => !this._isColumnHide(item))
|
|
1059
|
+
.map(item => item.field);
|
|
1049
1060
|
if (this.showColumnMenuButton) {
|
|
1050
1061
|
this.columns.forEach(item => {
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
}
|
|
1054
|
-
else {
|
|
1055
|
-
item.hide = !!item.hide;
|
|
1056
|
-
}
|
|
1062
|
+
item.hide = this._isColumnHide(item);
|
|
1063
|
+
item.show = !item.hide;
|
|
1057
1064
|
});
|
|
1058
1065
|
}
|
|
1059
1066
|
if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
|
|
@@ -1109,7 +1116,7 @@ class MtxGrid {
|
|
|
1109
1116
|
});
|
|
1110
1117
|
}
|
|
1111
1118
|
_getIndex(index, dataIndex) {
|
|
1112
|
-
return
|
|
1119
|
+
return index === undefined ? dataIndex : index;
|
|
1113
1120
|
}
|
|
1114
1121
|
_onSortChange(sort) {
|
|
1115
1122
|
this.sortChange.emit(sort);
|