@natec/mef-dev-ui-kit 20.1.25 → 20.1.27
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.
|
@@ -14474,8 +14474,12 @@ class MDPaginatorComponent {
|
|
|
14474
14474
|
height = 40;
|
|
14475
14475
|
/** Show first/last page buttons */
|
|
14476
14476
|
showFirstLast = true;
|
|
14477
|
+
/** Available page size options for the dropdown. Empty array hides the dropdown. */
|
|
14478
|
+
pageSizeOptions = [];
|
|
14477
14479
|
/** Page change event */
|
|
14478
14480
|
page = new EventEmitter();
|
|
14481
|
+
/** Emitted when page size changes via the dropdown */
|
|
14482
|
+
pageSizeChange = new EventEmitter();
|
|
14479
14483
|
/** Total number of pages */
|
|
14480
14484
|
get totalPages() {
|
|
14481
14485
|
return Math.ceil(this.count / this.limit) || 0;
|
|
@@ -14513,14 +14517,22 @@ class MDPaginatorComponent {
|
|
|
14513
14517
|
lastPage() {
|
|
14514
14518
|
this.setPage(this.totalPages - 1);
|
|
14515
14519
|
}
|
|
14520
|
+
/** Handle page size change from dropdown */
|
|
14521
|
+
onPageSizeChange(event) {
|
|
14522
|
+
const select = event.target;
|
|
14523
|
+
const newSize = Number(select.value);
|
|
14524
|
+
if (newSize > 0 && newSize !== this.limit) {
|
|
14525
|
+
this.pageSizeChange.emit(newSize);
|
|
14526
|
+
}
|
|
14527
|
+
}
|
|
14516
14528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14517
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDPaginatorComponent, isStandalone: true, selector: "md-paginator", inputs: { offset: ["offset", "offset", numberAttribute], limit: ["limit", "limit", numberAttribute], count: ["count", "count", numberAttribute], height: ["height", "height", numberAttribute], showFirstLast: ["showFirstLast", "showFirstLast", booleanAttribute] }, outputs: { page: "page" }, host: { classAttribute: "md-paginator" }, exportAs: ["mdPaginator"], ngImport: i0, template: "@if (
|
|
14529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDPaginatorComponent, isStandalone: true, selector: "md-paginator", inputs: { offset: ["offset", "offset", numberAttribute], limit: ["limit", "limit", numberAttribute], count: ["count", "count", numberAttribute], height: ["height", "height", numberAttribute], showFirstLast: ["showFirstLast", "showFirstLast", booleanAttribute], pageSizeOptions: "pageSizeOptions" }, outputs: { page: "page", pageSizeChange: "pageSizeChange" }, host: { classAttribute: "md-paginator" }, exportAs: ["mdPaginator"], ngImport: i0, template: "<div\r\n class=\"md-paginator-inner\"\r\n [style.height.px]=\"height\"\r\n>\r\n @if (pageSizeOptions.length > 0) {\r\n <div class=\"md-paginator-page-size\">\r\n <span class=\"md-paginator-page-size-label\">Items per page:</span>\r\n <select\r\n class=\"md-paginator-page-size-select\"\r\n [value]=\"limit\"\r\n (change)=\"onPageSizeChange($event)\"\r\n >\r\n @for (option of pageSizeOptions; track option) {\r\n <option [value]=\"option\" [selected]=\"option === limit\">{{ option }}</option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n\r\n @if (totalPages > 1) {\r\n <div class=\"md-paginator-pager\">\r\n @if (showFirstLast) {\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset === 0\"\r\n (click)=\"firstPage()\"\r\n title=\"First page\"\r\n >\r\n <span class=\"md-paginator-icon-first\"></span>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset === 0\"\r\n (click)=\"prevPage()\"\r\n title=\"Previous page\"\r\n >\r\n <span class=\"md-paginator-icon-prev\"></span>\r\n </button>\r\n\r\n <span class=\"md-paginator-info\">\r\n {{ currentPage }} / {{ totalPages }}\r\n </span>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset >= totalPages - 1\"\r\n (click)=\"nextPage()\"\r\n title=\"Next page\"\r\n >\r\n <span class=\"md-paginator-icon-next\"></span>\r\n </button>\r\n @if (showFirstLast) {\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset >= totalPages - 1\"\r\n (click)=\"lastPage()\"\r\n title=\"Last page\"\r\n >\r\n <span class=\"md-paginator-icon-last\"></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".md-paginator{display:block;width:100%;font-family:Open Sans,Arial,sans-serif;font-size:12px;background:transparent}.md-paginator *,.md-paginator *:before,.md-paginator *:after{box-sizing:border-box}.md-paginator-inner{display:flex;align-items:center;justify-content:flex-end;padding:12px 0 0;background:transparent;border-top:0;color:#4d4d4d}.md-paginator-pager{display:flex;align-items:center;gap:4px}.md-paginator-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #EAEAEA;border-radius:4px;background:#fff;color:#4d4d4d;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.md-paginator-btn:hover:not(:disabled){background:#f3f3f3;border-color:#929292}.md-paginator-btn:disabled{opacity:.4;cursor:not-allowed}.md-paginator-btn:focus{outline:2px solid #6d5cae;outline-offset:1px}.md-paginator-info{padding:0 12px;font-weight:500}.md-paginator-page-size{display:flex;align-items:center;gap:6px;margin-right:auto}.md-paginator-page-size-label{color:#4d4d4d;white-space:nowrap}.md-paginator-page-size-select{height:28px;padding:0 24px 0 8px;border:1px solid #EAEAEA;border-radius:4px;background:#fff;color:#4d4d4d;font-family:Open Sans,Arial,sans-serif;font-size:12px;cursor:pointer;outline:none;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center}.md-paginator-page-size-select:hover{border-color:#929292}.md-paginator-page-size-select:focus{border-color:#6d5cae;outline:2px solid #6d5cae;outline-offset:1px}.md-paginator-icon-first,.md-paginator-icon-prev,.md-paginator-icon-next,.md-paginator-icon-last{display:inline-block;width:12px;height:12px;position:relative}.md-paginator-icon-first:before,.md-paginator-icon-prev:before,.md-paginator-icon-next:before,.md-paginator-icon-last:before{content:\"\";position:absolute;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;top:50%;left:50%}.md-paginator-icon-prev:before{transform:translate(-25%,-50%) rotate(135deg)}.md-paginator-icon-next:before{transform:translate(-75%,-50%) rotate(-45deg)}.md-paginator-icon-first:before{transform:translate(-10%,-50%) rotate(135deg)}.md-paginator-icon-first:after{content:\"\";position:absolute;width:2px;height:10px;background:currentColor;top:50%;left:2px;transform:translateY(-50%)}.md-paginator-icon-last:before{transform:translate(-90%,-50%) rotate(-45deg)}.md-paginator-icon-last:after{content:\"\";position:absolute;width:2px;height:10px;background:currentColor;top:50%;right:2px;transform:translateY(-50%)}@media (max-width: 540px){.md-paginator-inner{flex-direction:column;gap:10px;padding:12px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14518
14530
|
}
|
|
14519
14531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDPaginatorComponent, decorators: [{
|
|
14520
14532
|
type: Component,
|
|
14521
14533
|
args: [{ selector: 'md-paginator', host: {
|
|
14522
14534
|
class: 'md-paginator',
|
|
14523
|
-
}, exportAs: 'mdPaginator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (
|
|
14535
|
+
}, exportAs: 'mdPaginator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\r\n class=\"md-paginator-inner\"\r\n [style.height.px]=\"height\"\r\n>\r\n @if (pageSizeOptions.length > 0) {\r\n <div class=\"md-paginator-page-size\">\r\n <span class=\"md-paginator-page-size-label\">Items per page:</span>\r\n <select\r\n class=\"md-paginator-page-size-select\"\r\n [value]=\"limit\"\r\n (change)=\"onPageSizeChange($event)\"\r\n >\r\n @for (option of pageSizeOptions; track option) {\r\n <option [value]=\"option\" [selected]=\"option === limit\">{{ option }}</option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n\r\n @if (totalPages > 1) {\r\n <div class=\"md-paginator-pager\">\r\n @if (showFirstLast) {\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset === 0\"\r\n (click)=\"firstPage()\"\r\n title=\"First page\"\r\n >\r\n <span class=\"md-paginator-icon-first\"></span>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset === 0\"\r\n (click)=\"prevPage()\"\r\n title=\"Previous page\"\r\n >\r\n <span class=\"md-paginator-icon-prev\"></span>\r\n </button>\r\n\r\n <span class=\"md-paginator-info\">\r\n {{ currentPage }} / {{ totalPages }}\r\n </span>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset >= totalPages - 1\"\r\n (click)=\"nextPage()\"\r\n title=\"Next page\"\r\n >\r\n <span class=\"md-paginator-icon-next\"></span>\r\n </button>\r\n @if (showFirstLast) {\r\n <button\r\n type=\"button\"\r\n class=\"md-paginator-btn\"\r\n [disabled]=\"offset >= totalPages - 1\"\r\n (click)=\"lastPage()\"\r\n title=\"Last page\"\r\n >\r\n <span class=\"md-paginator-icon-last\"></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".md-paginator{display:block;width:100%;font-family:Open Sans,Arial,sans-serif;font-size:12px;background:transparent}.md-paginator *,.md-paginator *:before,.md-paginator *:after{box-sizing:border-box}.md-paginator-inner{display:flex;align-items:center;justify-content:flex-end;padding:12px 0 0;background:transparent;border-top:0;color:#4d4d4d}.md-paginator-pager{display:flex;align-items:center;gap:4px}.md-paginator-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #EAEAEA;border-radius:4px;background:#fff;color:#4d4d4d;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.md-paginator-btn:hover:not(:disabled){background:#f3f3f3;border-color:#929292}.md-paginator-btn:disabled{opacity:.4;cursor:not-allowed}.md-paginator-btn:focus{outline:2px solid #6d5cae;outline-offset:1px}.md-paginator-info{padding:0 12px;font-weight:500}.md-paginator-page-size{display:flex;align-items:center;gap:6px;margin-right:auto}.md-paginator-page-size-label{color:#4d4d4d;white-space:nowrap}.md-paginator-page-size-select{height:28px;padding:0 24px 0 8px;border:1px solid #EAEAEA;border-radius:4px;background:#fff;color:#4d4d4d;font-family:Open Sans,Arial,sans-serif;font-size:12px;cursor:pointer;outline:none;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center}.md-paginator-page-size-select:hover{border-color:#929292}.md-paginator-page-size-select:focus{border-color:#6d5cae;outline:2px solid #6d5cae;outline-offset:1px}.md-paginator-icon-first,.md-paginator-icon-prev,.md-paginator-icon-next,.md-paginator-icon-last{display:inline-block;width:12px;height:12px;position:relative}.md-paginator-icon-first:before,.md-paginator-icon-prev:before,.md-paginator-icon-next:before,.md-paginator-icon-last:before{content:\"\";position:absolute;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;top:50%;left:50%}.md-paginator-icon-prev:before{transform:translate(-25%,-50%) rotate(135deg)}.md-paginator-icon-next:before{transform:translate(-75%,-50%) rotate(-45deg)}.md-paginator-icon-first:before{transform:translate(-10%,-50%) rotate(135deg)}.md-paginator-icon-first:after{content:\"\";position:absolute;width:2px;height:10px;background:currentColor;top:50%;left:2px;transform:translateY(-50%)}.md-paginator-icon-last:before{transform:translate(-90%,-50%) rotate(-45deg)}.md-paginator-icon-last:after{content:\"\";position:absolute;width:2px;height:10px;background:currentColor;top:50%;right:2px;transform:translateY(-50%)}@media (max-width: 540px){.md-paginator-inner{flex-direction:column;gap:10px;padding:12px}}\n"] }]
|
|
14524
14536
|
}], propDecorators: { offset: [{
|
|
14525
14537
|
type: Input,
|
|
14526
14538
|
args: [{ transform: numberAttribute }]
|
|
@@ -14536,8 +14548,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
14536
14548
|
}], showFirstLast: [{
|
|
14537
14549
|
type: Input,
|
|
14538
14550
|
args: [{ transform: booleanAttribute }]
|
|
14551
|
+
}], pageSizeOptions: [{
|
|
14552
|
+
type: Input
|
|
14539
14553
|
}], page: [{
|
|
14540
14554
|
type: Output
|
|
14555
|
+
}], pageSizeChange: [{
|
|
14556
|
+
type: Output
|
|
14541
14557
|
}] } });
|
|
14542
14558
|
|
|
14543
14559
|
/**
|
|
@@ -14980,6 +14996,10 @@ class MDGridComponent {
|
|
|
14980
14996
|
get isShrinkMode() {
|
|
14981
14997
|
return this.overflowMode === OverflowMode.shrink;
|
|
14982
14998
|
}
|
|
14999
|
+
/** Host binding: true when any column has flexGrow > 0 */
|
|
15000
|
+
get hasFlexGrow() {
|
|
15001
|
+
return this._internalColumns.some(col => col.flexGrow != null && col.flexGrow > 0);
|
|
15002
|
+
}
|
|
14983
15003
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
14984
15004
|
// DATA INPUTS
|
|
14985
15005
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -15012,6 +15032,10 @@ class MDGridComponent {
|
|
|
15012
15032
|
* - 'shrink': Shrink columns to fit, respecting minWidth constraints
|
|
15013
15033
|
*/
|
|
15014
15034
|
overflowMode = OverflowMode.scroll;
|
|
15035
|
+
/** Message to display when there are no rows */
|
|
15036
|
+
emptyMessage = 'No items to display';
|
|
15037
|
+
/** Custom template for the empty state */
|
|
15038
|
+
emptyTemplate;
|
|
15015
15039
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
15016
15040
|
// COLUMN RESIZE
|
|
15017
15041
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -15057,8 +15081,12 @@ class MDGridComponent {
|
|
|
15057
15081
|
showFooter = true;
|
|
15058
15082
|
/** Footer height in pixels */
|
|
15059
15083
|
footerHeight = 40;
|
|
15084
|
+
/** Available page size options for the dropdown. Empty array hides the dropdown. */
|
|
15085
|
+
pageSizeOptions = [];
|
|
15060
15086
|
/** Page event */
|
|
15061
15087
|
page = new EventEmitter();
|
|
15088
|
+
/** Emitted when page size changes via the paginator dropdown */
|
|
15089
|
+
pageSizeChange = new EventEmitter();
|
|
15062
15090
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
15063
15091
|
// EDIT MODE
|
|
15064
15092
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -15311,7 +15339,7 @@ class MDGridComponent {
|
|
|
15311
15339
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
15312
15340
|
/** Total items count for the paginator */
|
|
15313
15341
|
get _paginatorCount() {
|
|
15314
|
-
return this.count ?? this.rows
|
|
15342
|
+
return this.count ?? this.rows?.length ?? 0;
|
|
15315
15343
|
}
|
|
15316
15344
|
/**
|
|
15317
15345
|
* Handle page event from md-paginator
|
|
@@ -15323,6 +15351,17 @@ class MDGridComponent {
|
|
|
15323
15351
|
this._processRows();
|
|
15324
15352
|
}
|
|
15325
15353
|
}
|
|
15354
|
+
/**
|
|
15355
|
+
* Handle page size change from md-paginator dropdown
|
|
15356
|
+
*/
|
|
15357
|
+
onPaginatorPageSizeChange(newSize) {
|
|
15358
|
+
this.limit = newSize;
|
|
15359
|
+
this.offset = 0;
|
|
15360
|
+
this.pageSizeChange.emit(newSize);
|
|
15361
|
+
if (!this.externalPaging) {
|
|
15362
|
+
this._processRows();
|
|
15363
|
+
}
|
|
15364
|
+
}
|
|
15326
15365
|
/**
|
|
15327
15366
|
* Navigate to a page (kept for programmatic API)
|
|
15328
15367
|
*/
|
|
@@ -15411,7 +15450,7 @@ class MDGridComponent {
|
|
|
15411
15450
|
this._internalColumns = this.columns.map(col => toInternalColumn(col, this.defaultColumnWidth));
|
|
15412
15451
|
}
|
|
15413
15452
|
_processRows() {
|
|
15414
|
-
let processed = [...this
|
|
15453
|
+
let processed = [...this?.rows ?? []];
|
|
15415
15454
|
// Sort (if internal sorting)
|
|
15416
15455
|
if (!this.externalSorting && this.sorts.length > 0) {
|
|
15417
15456
|
processed = sortRows(processed, this.sorts, this._internalColumns);
|
|
@@ -15455,16 +15494,19 @@ class MDGridComponent {
|
|
|
15455
15494
|
this.editingRowChange.emit(null);
|
|
15456
15495
|
}
|
|
15457
15496
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15458
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDGridComponent, isStandalone: true, selector: "md-grid", inputs: { rows: "rows", columns: "columns", groupRowsBy: "groupRowsBy", groupHeaderTemplate: "groupHeaderTemplate", rowActionsTemplate: "rowActionsTemplate", headerHeight: ["headerHeight", "headerHeight", numberAttribute], cardHeight: "cardHeight", gap: ["gap", "gap", numberAttribute], defaultColumnWidth: ["defaultColumnWidth", "defaultColumnWidth", numberAttribute], showRowActions: ["showRowActions", "showRowActions", booleanAttribute], overflowMode: "overflowMode", enableColumnResize: ["enableColumnResize", "enableColumnResize", booleanAttribute], defaultMinColumnWidth: ["defaultMinColumnWidth", "defaultMinColumnWidth", numberAttribute], defaultMaxColumnWidth: ["defaultMaxColumnWidth", "defaultMaxColumnWidth", numberAttribute], sorts: "sorts", sortType: "sortType", externalSorting: ["externalSorting", "externalSorting", booleanAttribute], enableClearingSortState: ["enableClearingSortState", "enableClearingSortState", booleanAttribute], sortAscendingIcon: "sortAscendingIcon", sortDescendingIcon: "sortDescendingIcon", sortUnsetIcon: "sortUnsetIcon", limit: ["limit", "limit", numberAttribute], offset: ["offset", "offset", numberAttribute], count: ["count", "count", numberAttribute], externalPaging: ["externalPaging", "externalPaging", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], footerHeight: ["footerHeight", "footerHeight", numberAttribute], editingRow: "editingRow" }, outputs: { columnResize: "columnResize", sort: "sort", page: "page", editingRowChange: "editingRowChange", rowEditStart: "rowEditStart", rowEditSave: "rowEditSave", rowEditCancel: "rowEditCancel" }, host: { properties: { "class.md-grid-shrink-mode": "this.isShrinkMode" }, classAttribute: "md-grid" }, queries: [{ propertyName: "_columnDirectives", predicate: MDGridColumnDirective }], exportAs: ["mdGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Scrollable container for header and body -->\r\n<div class=\"md-grid-scroll-container\">\r\n<!-- Header -->\r\n@if (headerHeight > 0) {\r\n<div\r\n class=\"md-grid-header\"\r\n role=\"row\"\r\n [style.height.px]=\"headerHeight\"\r\n>\r\n <div class=\"md-grid-header-inner\">\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-header-cell\"\r\n role=\"columnheader\"\r\n [class.sortable]=\"column.sortable\"\r\n [class.resizeable]=\"isColumnResizeable(column)\"\r\n [class.sort-active]=\"getSortDir(column)\"\r\n [class.sort-asc]=\"getSortDir(column) === 'asc'\"\r\n [class.sort-desc]=\"getSortDir(column) === 'desc'\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n [attr.title]=\"column.name\"\r\n (click)=\"onColumnSort(column)\"\r\n (keydown.enter)=\"onColumnSort(column)\"\r\n [attr.tabindex]=\"column.sortable ? 0 : -1\"\r\n >\r\n <!-- Custom header template -->\r\n @if (column.headerTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n column: column,\r\n sortDir: getSortDir(column),\r\n sortFn: onColumnSort.bind(this, column)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default header -->\r\n <span class=\"md-grid-header-cell-label\">{{ column.name }}</span>\r\n @if (column.sortable) {\r\n <span class=\"md-grid-sort-icon\" [ngClass]=\"getSortClass(column)\"></span>\r\n }\r\n }\r\n\r\n <!-- Resize handle -->\r\n @if (isColumnResizeable(column)) {\r\n <span\r\n class=\"md-grid-resize-handle\"\r\n (mousedown)=\"onResizeStart($event, column)\"\r\n ></span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Actions header cell -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-header-cell md-grid-actions-cell\">\r\n <span class=\"md-grid-header-cell-label\"></span>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}\r\n\r\n<!-- Body -->\r\n<div class=\"md-grid-body\" [style.gap.px]=\"gap\">\r\n <!-- Grouped rows -->\r\n @if (_groupedRows) {\r\n @for (group of _groupedRows; track trackByGroup($index, group)) {\r\n <div class=\"md-grid-group\">\r\n <!-- Group header -->\r\n <div class=\"md-grid-group-header\">\r\n @if (groupHeaderTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"groupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{ group: group }\"\r\n />\r\n } @else {\r\n <span class=\"md-grid-group-title\">{{ group.key }}</span>\r\n }\r\n </div>\r\n\r\n <!-- Group rows -->\r\n <div class=\"md-grid-group-rows\" [style.gap.px]=\"gap\">\r\n @for (row of group.value; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: group.key }\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <!-- Non-grouped rows -->\r\n @for (row of _displayRows; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: null }\"\r\n />\r\n }\r\n }\r\n</div>\r\n</div><!-- End scroll container -->\r\n\r\n<!-- Row template -->\r\n<ng-template #rowTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-group=\"group\">\r\n <div\r\n class=\"md-grid-card\"\r\n [class.md-grid-card-editing]=\"isEditing(row)\"\r\n [class.md-grid-card-fixed-height]=\"cardHeight !== 'auto'\"\r\n [style.height]=\"cardHeight === 'auto' ? null : cardHeight + 'px'\"\r\n role=\"row\"\r\n >\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-cell\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n role=\"cell\"\r\n >\r\n <!-- Edit mode -->\r\n @if (isEditing(row) && column.editTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.editTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: getTemplateRow(row),\r\n originalRow: row,\r\n value: getCellValue(getTemplateRow(row), column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n }\r\n <!-- View mode with custom template -->\r\n @else if (column.cellTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n value: getCellValue(row, column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n group: group\r\n }\"\r\n />\r\n }\r\n <!-- Default view mode -->\r\n @else {\r\n <span class=\"md-grid-cell-value\">{{ getCellValue(row, column) }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Row actions -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-cell md-grid-actions-cell\">\r\n @if (rowActionsTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"rowActionsTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n editFn: editRow.bind(this, row),\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default actions -->\r\n @if (isEditing(row)) {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-save\"\r\n (click)=\"saveRow()\"\r\n title=\"Save\"\r\n >\r\n <span class=\"md-grid-icon-save\"></span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-cancel\"\r\n (click)=\"cancelEdit()\"\r\n title=\"Cancel\"\r\n >\r\n <span class=\"md-grid-icon-cancel\"></span>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-edit\"\r\n (click)=\"editRow(row)\"\r\n title=\"Edit\"\r\n >\r\n <span class=\"md-grid-icon-edit\"></span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Footer / Pagination -->\r\n@if (showFooter) {\r\n<md-paginator\r\n [offset]=\"offset\"\r\n [limit]=\"limit\"\r\n [count]=\"_paginatorCount\"\r\n [height]=\"footerHeight\"\r\n (page)=\"onPaginatorPage($event)\">\r\n</md-paginator>\r\n}\r\n", styles: [".md-grid{display:block;width:100%;font-family:Open Sans,Arial,sans-serif;font-size:13px;background:transparent;border:0;border-radius:0}.md-grid *,.md-grid *:before,.md-grid *:after{box-sizing:border-box}.md-grid-scroll-container{width:100%;overflow-x:auto;overflow-y:hidden}.md-grid-scroll-container::-webkit-scrollbar{height:6px}.md-grid-scroll-container::-webkit-scrollbar-track{background:#f3f3f3;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb{background:#929292;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#4d4d4d}.md-grid-shrink-mode .md-grid-scroll-container{overflow-x:hidden}.md-grid-shrink-mode .md-grid-header-inner,.md-grid-shrink-mode .md-grid-card{min-width:0}.md-grid-shrink-mode .md-grid-header-cell,.md-grid-shrink-mode .md-grid-cell{flex-shrink:1}.md-grid-header{display:block;background:transparent;margin:0;padding:0;border:0}.md-grid-header-inner{display:flex;align-items:center;height:100%;width:100%;min-width:fit-content}.md-grid-header-cell{display:flex;align-items:center;flex-shrink:0;height:100%;padding:14px 16px;background:#fff;font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:300;color:#4d4d4d;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.md-grid-header-cell:not(:first-child){border-left:2px solid #EAEAEA}.md-grid-header-cell.sortable{cursor:pointer;transition:background-color .2s ease}.md-grid-header-cell.sortable:hover{background:#f3f3f3}.md-grid-header-cell.sortable:focus{outline:0;outline-offset:0}.md-grid-header-cell.sort-active{color:#0185cf}.md-grid-header-cell.resizeable{position:relative}.md-grid-header-cell-label{flex:1;overflow:hidden;text-overflow:ellipsis}.md-grid-sort-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:2px;color:#929292;transition:color .2s ease}.md-grid-sort-icon:before{font-family:datatable;font-size:12px}.md-grid-sort-icon.md-grid-sort-asc,.md-grid-sort-icon.md-grid-sort-desc{color:#6d5cae}.md-grid-sort-icon.md-grid-sort-asc:after,.md-grid-sort-icon.md-grid-sort-desc:after{content:\"\";display:block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.md-grid-sort-icon.md-grid-sort-asc:after{border-bottom:5px solid currentColor}.md-grid-sort-icon.md-grid-sort-desc:after{border-top:5px solid currentColor}.md-grid-resize-handle{position:absolute;top:0;right:-8px;bottom:0;width:10px;cursor:col-resize;z-index:1}.md-grid-resize-handle:after{content:\"\";position:absolute;top:25%;right:2px;bottom:25%;width:3px;background:transparent;border-radius:1px;transition:background-color .2s ease}.md-grid-resize-handle:hover:after{background:#6d5cae}.md-grid-header-cell:last-of-type:not(.md-grid-actions-cell) .md-grid-resize-handle{right:0}.md-grid-header-cell:has(+.md-grid-actions-cell) .md-grid-resize-handle{right:0}body.md-grid-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.md-grid-resizing *{cursor:col-resize!important}.md-grid-body{display:flex;flex-direction:column;padding:12px 0 0;width:100%;min-width:fit-content;background:transparent}.md-grid-group{margin-bottom:12px}.md-grid-group:last-child{margin-bottom:0}.md-grid-group-header{display:flex;align-items:center;padding:10px 14px;margin-bottom:12px;background:#eaeaea;border-radius:0;font-size:13px;font-weight:600;color:#000}.md-grid-group-title{flex:1}.md-grid-group-rows{display:flex;flex-direction:column;width:100%;min-width:fit-content;gap:5px}.md-grid-card{display:inline-flex;align-items:stretch;width:100%;min-width:fit-content;background:#fff;border:0;border-radius:5px;box-shadow:none;transition:all .2s ease}.md-grid-card:hover{background:#fbfbfb;box-shadow:0 2px 8px #0000001f;transform:translateY(-1px)}.md-grid-card.md-grid-card-editing{background:#cf01061a;border:0;box-shadow:none}.md-grid-card.md-grid-card-fixed-height,.md-grid-card.md-grid-card-fixed-height .md-grid-cell{overflow:hidden}.md-grid-card.md-grid-card-fixed-height .md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-grid-cell{display:flex;align-items:center;flex-shrink:0;padding:14px 16px;font-size:14px;color:#000;border:0;overflow:hidden;min-width:0}.md-grid-cell:last-child{border-right:none}.md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:1.4}.md-grid-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:90px;width:auto!important;flex-grow:0!important;flex-shrink:0!important;padding:inherit;border:0}.md-grid-header-cell.md-grid-actions-cell{border-left:none;border-right:none}.md-grid-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:4px;background:transparent;color:#4d4d4d;cursor:pointer;transition:all .2s ease}.md-grid-action-btn:hover{transform:scale(1.1)}.md-grid-action-btn:focus{outline:2px solid #6d5cae;outline-offset:1px}.md-grid-action-btn:active{transform:scale(.95)}.md-grid-action-edit{color:#6d5cae}.md-grid-action-edit:hover{background:#e9e7f3;color:#564790}.md-grid-action-save{color:#28b446}.md-grid-action-save:hover{background:#dff4e3;color:#1f8a36}.md-grid-action-cancel{color:#cf0106}.md-grid-action-cancel:hover{background:#f8d9da;color:#9c0105}.md-grid-icon-edit,.md-grid-icon-save,.md-grid-icon-cancel{display:inline-block;width:18px;height:18px;position:relative}.md-grid-icon-edit:before,.md-grid-icon-edit:after{content:\"\";position:absolute}.md-grid-icon-edit:before{width:10px;height:10px;border:2px solid currentColor;border-radius:1px;transform:rotate(45deg);top:1px;left:1px}.md-grid-icon-edit:after{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid currentColor;bottom:0;left:0;transform:rotate(-45deg)}.md-grid-icon-save:before{content:\"\";position:absolute;width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);top:1px;left:5px}.md-grid-icon-cancel:before,.md-grid-icon-cancel:after{content:\"\";position:absolute;width:14px;height:2px;background:currentColor;top:50%;left:50%}.md-grid-icon-cancel:before{transform:translate(-50%,-50%) rotate(45deg)}.md-grid-icon-cancel:after{transform:translate(-50%,-50%) rotate(-45deg)}@media (max-width: 540px){.md-grid{font-size:12px}.md-grid-header{display:none}.md-grid-body{padding:8px}.md-grid-card{flex-direction:column}.md-grid-cell{padding:10px 12px;border-right:none;border-bottom:1px solid #EAEAEA}.md-grid-cell:last-child{border-bottom:none}.md-grid-actions-cell{border-left:none;border-top:1px solid #EAEAEA;justify-content:center;background:#f3f3f3}}.md-grid.grey .md-grid-header-cell,.md-grid.grey .md-grid-card{background:#f3f3f3}.md-grid.grey .md-grid-card:hover{background:#efefef}.md-grid.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-group-rows .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MDPaginatorComponent, selector: "md-paginator", inputs: ["offset", "limit", "count", "height", "showFirstLast"], outputs: ["page"], exportAs: ["mdPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15497
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDGridComponent, isStandalone: true, selector: "md-grid", inputs: { rows: "rows", columns: "columns", groupRowsBy: "groupRowsBy", groupHeaderTemplate: "groupHeaderTemplate", rowActionsTemplate: "rowActionsTemplate", headerHeight: ["headerHeight", "headerHeight", numberAttribute], cardHeight: "cardHeight", gap: ["gap", "gap", numberAttribute], defaultColumnWidth: ["defaultColumnWidth", "defaultColumnWidth", numberAttribute], showRowActions: ["showRowActions", "showRowActions", booleanAttribute], overflowMode: "overflowMode", emptyMessage: "emptyMessage", emptyTemplate: "emptyTemplate", enableColumnResize: ["enableColumnResize", "enableColumnResize", booleanAttribute], defaultMinColumnWidth: ["defaultMinColumnWidth", "defaultMinColumnWidth", numberAttribute], defaultMaxColumnWidth: ["defaultMaxColumnWidth", "defaultMaxColumnWidth", numberAttribute], sorts: "sorts", sortType: "sortType", externalSorting: ["externalSorting", "externalSorting", booleanAttribute], enableClearingSortState: ["enableClearingSortState", "enableClearingSortState", booleanAttribute], sortAscendingIcon: "sortAscendingIcon", sortDescendingIcon: "sortDescendingIcon", sortUnsetIcon: "sortUnsetIcon", limit: ["limit", "limit", numberAttribute], offset: ["offset", "offset", numberAttribute], count: ["count", "count", numberAttribute], externalPaging: ["externalPaging", "externalPaging", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], footerHeight: ["footerHeight", "footerHeight", numberAttribute], pageSizeOptions: "pageSizeOptions", editingRow: "editingRow" }, outputs: { columnResize: "columnResize", sort: "sort", page: "page", pageSizeChange: "pageSizeChange", editingRowChange: "editingRowChange", rowEditStart: "rowEditStart", rowEditSave: "rowEditSave", rowEditCancel: "rowEditCancel" }, host: { properties: { "class.md-grid-shrink-mode": "this.isShrinkMode", "class.md-grid-has-flex-grow": "this.hasFlexGrow" }, classAttribute: "md-grid" }, queries: [{ propertyName: "_columnDirectives", predicate: MDGridColumnDirective }], exportAs: ["mdGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Scrollable container for header and body -->\r\n<div class=\"md-grid-scroll-container\">\r\n<!-- Header -->\r\n@if (headerHeight > 0) {\r\n<div\r\n class=\"md-grid-header\"\r\n role=\"row\"\r\n [style.height.px]=\"headerHeight\"\r\n>\r\n <div class=\"md-grid-header-inner\">\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-header-cell\"\r\n role=\"columnheader\"\r\n [class.sortable]=\"column.sortable\"\r\n [class.resizeable]=\"isColumnResizeable(column)\"\r\n [class.sort-active]=\"getSortDir(column)\"\r\n [class.sort-asc]=\"getSortDir(column) === 'asc'\"\r\n [class.sort-desc]=\"getSortDir(column) === 'desc'\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n [attr.title]=\"column.name\"\r\n (click)=\"onColumnSort(column)\"\r\n (keydown.enter)=\"onColumnSort(column)\"\r\n [attr.tabindex]=\"column.sortable ? 0 : -1\"\r\n >\r\n <!-- Custom header template -->\r\n @if (column.headerTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n column: column,\r\n sortDir: getSortDir(column),\r\n sortFn: onColumnSort.bind(this, column)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default header -->\r\n <span class=\"md-grid-header-cell-label\">{{ column.name }}</span>\r\n @if (column.sortable) {\r\n <span class=\"md-grid-sort-icon\" [ngClass]=\"getSortClass(column)\"></span>\r\n }\r\n }\r\n\r\n <!-- Resize handle -->\r\n @if (isColumnResizeable(column)) {\r\n <span\r\n class=\"md-grid-resize-handle\"\r\n (mousedown)=\"onResizeStart($event, column)\"\r\n ></span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Actions header cell -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-header-cell md-grid-actions-cell\">\r\n <span class=\"md-grid-header-cell-label\"></span>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}\r\n\r\n<!-- Body -->\r\n<div class=\"md-grid-body\" [style.gap.px]=\"gap\">\r\n @if (_displayRows.length === 0) {\r\n <!-- Empty state -->\r\n <div class=\"md-grid-empty\">\r\n @if (emptyTemplate) {\r\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\" />\r\n } @else {\r\n <span class=\"md-grid-empty-text\">{{ emptyMessage }}</span>\r\n }\r\n </div>\r\n } @else if (_groupedRows) {\r\n <!-- Grouped rows -->\r\n @for (group of _groupedRows; track trackByGroup($index, group)) {\r\n <div class=\"md-grid-group\">\r\n <!-- Group header -->\r\n <div class=\"md-grid-group-header\">\r\n @if (groupHeaderTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"groupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{ group: group }\"\r\n />\r\n } @else {\r\n <span class=\"md-grid-group-title\">{{ group.key }}</span>\r\n }\r\n </div>\r\n\r\n <!-- Group rows -->\r\n <div class=\"md-grid-group-rows\" [style.gap.px]=\"gap\">\r\n @for (row of group.value; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: group.key }\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <!-- Non-grouped rows -->\r\n @for (row of _displayRows; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: null }\"\r\n />\r\n }\r\n }\r\n</div>\r\n</div><!-- End scroll container -->\r\n\r\n<!-- Row template -->\r\n<ng-template #rowTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-group=\"group\">\r\n <div\r\n class=\"md-grid-card\"\r\n [class.md-grid-card-editing]=\"isEditing(row)\"\r\n [class.md-grid-card-fixed-height]=\"cardHeight !== 'auto'\"\r\n [style.height]=\"cardHeight === 'auto' ? null : cardHeight + 'px'\"\r\n role=\"row\"\r\n >\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-cell\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n role=\"cell\"\r\n >\r\n <!-- Edit mode -->\r\n @if (isEditing(row) && column.editTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.editTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: getTemplateRow(row),\r\n originalRow: row,\r\n value: getCellValue(getTemplateRow(row), column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n }\r\n <!-- View mode with custom template -->\r\n @else if (column.cellTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n value: getCellValue(row, column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n group: group\r\n }\"\r\n />\r\n }\r\n <!-- Default view mode -->\r\n @else {\r\n <span class=\"md-grid-cell-value\">{{ getCellValue(row, column) }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Row actions -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-cell md-grid-actions-cell\">\r\n @if (rowActionsTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"rowActionsTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n editFn: editRow.bind(this, row),\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default actions -->\r\n @if (isEditing(row)) {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-save\"\r\n (click)=\"saveRow()\"\r\n title=\"Save\"\r\n >\r\n <span class=\"md-grid-icon-save\"></span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-cancel\"\r\n (click)=\"cancelEdit()\"\r\n title=\"Cancel\"\r\n >\r\n <span class=\"md-grid-icon-cancel\"></span>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-edit\"\r\n (click)=\"editRow(row)\"\r\n title=\"Edit\"\r\n >\r\n <span class=\"md-grid-icon-edit\"></span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Footer / Pagination -->\r\n@if (showFooter) {\r\n<md-paginator\r\n [offset]=\"offset\"\r\n [limit]=\"limit\"\r\n [count]=\"_paginatorCount\"\r\n [height]=\"footerHeight\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n (page)=\"onPaginatorPage($event)\"\r\n (pageSizeChange)=\"onPaginatorPageSizeChange($event)\">\r\n</md-paginator>\r\n}\r\n", styles: [".md-grid{display:block;width:100%;font-family:Open Sans,Arial,sans-serif;font-size:13px;background:transparent;border:0;border-radius:0}.md-grid *,.md-grid *:before,.md-grid *:after{box-sizing:border-box}.md-grid-scroll-container{width:100%;overflow-x:auto;overflow-y:hidden}.md-grid-scroll-container::-webkit-scrollbar{height:6px}.md-grid-scroll-container::-webkit-scrollbar-track{background:#f3f3f3;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb{background:#929292;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#4d4d4d}.md-grid-shrink-mode .md-grid-scroll-container{overflow-x:hidden}.md-grid-shrink-mode .md-grid-header-inner,.md-grid-shrink-mode .md-grid-card{min-width:0}.md-grid-shrink-mode .md-grid-header-cell,.md-grid-shrink-mode .md-grid-cell{flex-shrink:1}.md-grid-header{display:block;width:fit-content;min-width:fit-content;background:transparent;margin:0;padding:0;border:0}.md-grid-header-inner{display:flex;align-items:center;height:100%;width:100%;min-width:fit-content}.md-grid-has-flex-grow .md-grid-header{width:100%}.md-grid-header-cell{display:flex;align-items:center;flex-shrink:0;height:100%;padding:14px 16px;background:#fff;font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:300;color:#4d4d4d;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.md-grid-header-cell:not(:first-child){border-left:2px solid #EAEAEA}.md-grid-header-cell.sortable{cursor:pointer;transition:background-color .2s ease}.md-grid-header-cell.sortable:hover{background:#f3f3f3}.md-grid-header-cell.sortable:focus{outline:0;outline-offset:0}.md-grid-header-cell.sort-active{color:#0185cf}.md-grid-header-cell.resizeable{position:relative}.md-grid-header-cell-label{flex:1;overflow:hidden;text-overflow:ellipsis}.md-grid-sort-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:2px;color:#929292;transition:color .2s ease}.md-grid-sort-icon:before{font-family:datatable;font-size:12px}.md-grid-sort-icon.md-grid-sort-asc,.md-grid-sort-icon.md-grid-sort-desc{color:#6d5cae}.md-grid-sort-icon.md-grid-sort-asc:after,.md-grid-sort-icon.md-grid-sort-desc:after{content:\"\";display:block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.md-grid-sort-icon.md-grid-sort-asc:after{border-bottom:5px solid currentColor}.md-grid-sort-icon.md-grid-sort-desc:after{border-top:5px solid currentColor}.md-grid-resize-handle{position:absolute;top:0;right:-8px;bottom:0;width:10px;cursor:col-resize;z-index:1}.md-grid-resize-handle:after{content:\"\";position:absolute;top:25%;right:2px;bottom:25%;width:3px;background:transparent;border-radius:1px;transition:background-color .2s ease}.md-grid-resize-handle:hover:after{background:#6d5cae}.md-grid-header-cell:last-of-type:not(.md-grid-actions-cell) .md-grid-resize-handle{right:0}.md-grid-header-cell:has(+.md-grid-actions-cell) .md-grid-resize-handle{right:0}body.md-grid-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.md-grid-resizing *{cursor:col-resize!important}.md-grid-body{display:flex;flex-direction:column;padding:12px 0 0;width:fit-content;min-width:fit-content;background:transparent}.md-grid-has-flex-grow .md-grid-body{width:100%}.md-grid-empty{display:flex;align-items:center;justify-content:center;padding:32px 16px;width:100%;min-width:0}.md-grid-empty-text{font-size:14px;color:#4d4d4d;font-style:italic}.md-grid-group{margin-bottom:12px}.md-grid-group:last-child{margin-bottom:0}.md-grid-group-header{display:flex;align-items:center;padding:10px 14px;margin-bottom:12px;background:#eaeaea;border-radius:0;font-size:13px;font-weight:600;color:#000}.md-grid-group-title{flex:1}.md-grid-group-rows{display:flex;flex-direction:column;width:fit-content;min-width:fit-content;gap:5px}.md-grid-has-flex-grow .md-grid-group-rows{width:100%}.md-grid-card{display:inline-flex;align-items:stretch;width:fit-content;min-width:fit-content;background:#fff;border:0;border-radius:5px;box-shadow:none;transition:all .2s ease}.md-grid-card:hover{background:#fbfbfb;box-shadow:0 2px 8px #0000001f;transform:translateY(-1px)}.md-grid-card.md-grid-card-editing{background:#cf01061a;border:0;box-shadow:none}.md-grid-card.md-grid-card-fixed-height,.md-grid-card.md-grid-card-fixed-height .md-grid-cell{overflow:hidden}.md-grid-card.md-grid-card-fixed-height .md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-grid-has-flex-grow .md-grid-card{width:100%}.md-grid-cell{display:flex;align-items:center;flex-shrink:0;padding:14px 16px;font-size:14px;color:#000;border:0;overflow:hidden;min-width:0}.md-grid-cell:last-child{border-right:none}.md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:1.4}.md-grid-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:90px;width:auto!important;flex-grow:0!important;flex-shrink:0!important;padding:inherit;border:0}.md-grid-header-cell.md-grid-actions-cell{border-left:none;border-right:none}.md-grid-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:4px;background:transparent;color:#4d4d4d;cursor:pointer;transition:all .2s ease}.md-grid-action-btn:hover{transform:scale(1.1)}.md-grid-action-btn:focus{outline:2px solid #6d5cae;outline-offset:1px}.md-grid-action-btn:active{transform:scale(.95)}.md-grid-action-edit{color:#6d5cae}.md-grid-action-edit:hover{background:#e9e7f3;color:#564790}.md-grid-action-save{color:#28b446}.md-grid-action-save:hover{background:#dff4e3;color:#1f8a36}.md-grid-action-cancel{color:#cf0106}.md-grid-action-cancel:hover{background:#f8d9da;color:#9c0105}.md-grid-icon-edit,.md-grid-icon-save,.md-grid-icon-cancel{display:inline-block;width:18px;height:18px;position:relative}.md-grid-icon-edit:before,.md-grid-icon-edit:after{content:\"\";position:absolute}.md-grid-icon-edit:before{width:10px;height:10px;border:2px solid currentColor;border-radius:1px;transform:rotate(45deg);top:1px;left:1px}.md-grid-icon-edit:after{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid currentColor;bottom:0;left:0;transform:rotate(-45deg)}.md-grid-icon-save:before{content:\"\";position:absolute;width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);top:1px;left:5px}.md-grid-icon-cancel:before,.md-grid-icon-cancel:after{content:\"\";position:absolute;width:14px;height:2px;background:currentColor;top:50%;left:50%}.md-grid-icon-cancel:before{transform:translate(-50%,-50%) rotate(45deg)}.md-grid-icon-cancel:after{transform:translate(-50%,-50%) rotate(-45deg)}@media (max-width: 540px){.md-grid{font-size:12px}.md-grid-header{display:none}.md-grid-body{padding:8px}.md-grid-card{flex-direction:column}.md-grid-cell{padding:10px 12px;border-right:none;border-bottom:1px solid #EAEAEA}.md-grid-cell:last-child{border-bottom:none}.md-grid-actions-cell{border-left:none;border-top:1px solid #EAEAEA;justify-content:center;background:#f3f3f3}}.md-grid.grey .md-grid-header-cell,.md-grid.grey .md-grid-card{background:#f3f3f3}.md-grid.grey .md-grid-card:hover{background:#efefef}.md-grid.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-group-rows .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MDPaginatorComponent, selector: "md-paginator", inputs: ["offset", "limit", "count", "height", "showFirstLast", "pageSizeOptions"], outputs: ["page", "pageSizeChange"], exportAs: ["mdPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15459
15498
|
}
|
|
15460
15499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDGridComponent, decorators: [{
|
|
15461
15500
|
type: Component,
|
|
15462
15501
|
args: [{ selector: 'md-grid', host: {
|
|
15463
15502
|
class: 'md-grid',
|
|
15464
|
-
}, exportAs: 'mdGrid', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MDPaginatorComponent], template: "<!-- Scrollable container for header and body -->\r\n<div class=\"md-grid-scroll-container\">\r\n<!-- Header -->\r\n@if (headerHeight > 0) {\r\n<div\r\n class=\"md-grid-header\"\r\n role=\"row\"\r\n [style.height.px]=\"headerHeight\"\r\n>\r\n <div class=\"md-grid-header-inner\">\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-header-cell\"\r\n role=\"columnheader\"\r\n [class.sortable]=\"column.sortable\"\r\n [class.resizeable]=\"isColumnResizeable(column)\"\r\n [class.sort-active]=\"getSortDir(column)\"\r\n [class.sort-asc]=\"getSortDir(column) === 'asc'\"\r\n [class.sort-desc]=\"getSortDir(column) === 'desc'\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n [attr.title]=\"column.name\"\r\n (click)=\"onColumnSort(column)\"\r\n (keydown.enter)=\"onColumnSort(column)\"\r\n [attr.tabindex]=\"column.sortable ? 0 : -1\"\r\n >\r\n <!-- Custom header template -->\r\n @if (column.headerTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n column: column,\r\n sortDir: getSortDir(column),\r\n sortFn: onColumnSort.bind(this, column)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default header -->\r\n <span class=\"md-grid-header-cell-label\">{{ column.name }}</span>\r\n @if (column.sortable) {\r\n <span class=\"md-grid-sort-icon\" [ngClass]=\"getSortClass(column)\"></span>\r\n }\r\n }\r\n\r\n <!-- Resize handle -->\r\n @if (isColumnResizeable(column)) {\r\n <span\r\n class=\"md-grid-resize-handle\"\r\n (mousedown)=\"onResizeStart($event, column)\"\r\n ></span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Actions header cell -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-header-cell md-grid-actions-cell\">\r\n <span class=\"md-grid-header-cell-label\"></span>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}\r\n\r\n<!-- Body -->\r\n<div class=\"md-grid-body\" [style.gap.px]=\"gap\">\r\n <!-- Grouped rows -->\r\n @if (_groupedRows) {\r\n @for (group of _groupedRows; track trackByGroup($index, group)) {\r\n <div class=\"md-grid-group\">\r\n <!-- Group header -->\r\n <div class=\"md-grid-group-header\">\r\n @if (groupHeaderTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"groupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{ group: group }\"\r\n />\r\n } @else {\r\n <span class=\"md-grid-group-title\">{{ group.key }}</span>\r\n }\r\n </div>\r\n\r\n <!-- Group rows -->\r\n <div class=\"md-grid-group-rows\" [style.gap.px]=\"gap\">\r\n @for (row of group.value; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: group.key }\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <!-- Non-grouped rows -->\r\n @for (row of _displayRows; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: null }\"\r\n />\r\n }\r\n }\r\n</div>\r\n</div><!-- End scroll container -->\r\n\r\n<!-- Row template -->\r\n<ng-template #rowTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-group=\"group\">\r\n <div\r\n class=\"md-grid-card\"\r\n [class.md-grid-card-editing]=\"isEditing(row)\"\r\n [class.md-grid-card-fixed-height]=\"cardHeight !== 'auto'\"\r\n [style.height]=\"cardHeight === 'auto' ? null : cardHeight + 'px'\"\r\n role=\"row\"\r\n >\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-cell\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n role=\"cell\"\r\n >\r\n <!-- Edit mode -->\r\n @if (isEditing(row) && column.editTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.editTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: getTemplateRow(row),\r\n originalRow: row,\r\n value: getCellValue(getTemplateRow(row), column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n }\r\n <!-- View mode with custom template -->\r\n @else if (column.cellTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n value: getCellValue(row, column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n group: group\r\n }\"\r\n />\r\n }\r\n <!-- Default view mode -->\r\n @else {\r\n <span class=\"md-grid-cell-value\">{{ getCellValue(row, column) }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Row actions -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-cell md-grid-actions-cell\">\r\n @if (rowActionsTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"rowActionsTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n editFn: editRow.bind(this, row),\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default actions -->\r\n @if (isEditing(row)) {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-save\"\r\n (click)=\"saveRow()\"\r\n title=\"Save\"\r\n >\r\n <span class=\"md-grid-icon-save\"></span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-cancel\"\r\n (click)=\"cancelEdit()\"\r\n title=\"Cancel\"\r\n >\r\n <span class=\"md-grid-icon-cancel\"></span>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-edit\"\r\n (click)=\"editRow(row)\"\r\n title=\"Edit\"\r\n >\r\n <span class=\"md-grid-icon-edit\"></span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Footer / Pagination -->\r\n@if (showFooter) {\r\n<md-paginator\r\n [offset]=\"offset\"\r\n [limit]=\"limit\"\r\n [count]=\"_paginatorCount\"\r\n [height]=\"footerHeight\"\r\n (page)=\"onPaginatorPage($event)\">\r\n</md-paginator>\r\n}\r\n", styles: [".md-grid{display:block;width:100%;font-family:Open Sans,Arial,sans-serif;font-size:13px;background:transparent;border:0;border-radius:0}.md-grid *,.md-grid *:before,.md-grid *:after{box-sizing:border-box}.md-grid-scroll-container{width:100%;overflow-x:auto;overflow-y:hidden}.md-grid-scroll-container::-webkit-scrollbar{height:6px}.md-grid-scroll-container::-webkit-scrollbar-track{background:#f3f3f3;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb{background:#929292;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#4d4d4d}.md-grid-shrink-mode .md-grid-scroll-container{overflow-x:hidden}.md-grid-shrink-mode .md-grid-header-inner,.md-grid-shrink-mode .md-grid-card{min-width:0}.md-grid-shrink-mode .md-grid-header-cell,.md-grid-shrink-mode .md-grid-cell{flex-shrink:1}.md-grid-header{display:block;background:transparent;margin:0;padding:0;border:0}.md-grid-header-inner{display:flex;align-items:center;height:100%;width:100%;min-width:fit-content}.md-grid-header-cell{display:flex;align-items:center;flex-shrink:0;height:100%;padding:14px 16px;background:#fff;font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:300;color:#4d4d4d;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.md-grid-header-cell:not(:first-child){border-left:2px solid #EAEAEA}.md-grid-header-cell.sortable{cursor:pointer;transition:background-color .2s ease}.md-grid-header-cell.sortable:hover{background:#f3f3f3}.md-grid-header-cell.sortable:focus{outline:0;outline-offset:0}.md-grid-header-cell.sort-active{color:#0185cf}.md-grid-header-cell.resizeable{position:relative}.md-grid-header-cell-label{flex:1;overflow:hidden;text-overflow:ellipsis}.md-grid-sort-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:2px;color:#929292;transition:color .2s ease}.md-grid-sort-icon:before{font-family:datatable;font-size:12px}.md-grid-sort-icon.md-grid-sort-asc,.md-grid-sort-icon.md-grid-sort-desc{color:#6d5cae}.md-grid-sort-icon.md-grid-sort-asc:after,.md-grid-sort-icon.md-grid-sort-desc:after{content:\"\";display:block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.md-grid-sort-icon.md-grid-sort-asc:after{border-bottom:5px solid currentColor}.md-grid-sort-icon.md-grid-sort-desc:after{border-top:5px solid currentColor}.md-grid-resize-handle{position:absolute;top:0;right:-8px;bottom:0;width:10px;cursor:col-resize;z-index:1}.md-grid-resize-handle:after{content:\"\";position:absolute;top:25%;right:2px;bottom:25%;width:3px;background:transparent;border-radius:1px;transition:background-color .2s ease}.md-grid-resize-handle:hover:after{background:#6d5cae}.md-grid-header-cell:last-of-type:not(.md-grid-actions-cell) .md-grid-resize-handle{right:0}.md-grid-header-cell:has(+.md-grid-actions-cell) .md-grid-resize-handle{right:0}body.md-grid-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.md-grid-resizing *{cursor:col-resize!important}.md-grid-body{display:flex;flex-direction:column;padding:12px 0 0;width:100%;min-width:fit-content;background:transparent}.md-grid-group{margin-bottom:12px}.md-grid-group:last-child{margin-bottom:0}.md-grid-group-header{display:flex;align-items:center;padding:10px 14px;margin-bottom:12px;background:#eaeaea;border-radius:0;font-size:13px;font-weight:600;color:#000}.md-grid-group-title{flex:1}.md-grid-group-rows{display:flex;flex-direction:column;width:100%;min-width:fit-content;gap:5px}.md-grid-card{display:inline-flex;align-items:stretch;width:100%;min-width:fit-content;background:#fff;border:0;border-radius:5px;box-shadow:none;transition:all .2s ease}.md-grid-card:hover{background:#fbfbfb;box-shadow:0 2px 8px #0000001f;transform:translateY(-1px)}.md-grid-card.md-grid-card-editing{background:#cf01061a;border:0;box-shadow:none}.md-grid-card.md-grid-card-fixed-height,.md-grid-card.md-grid-card-fixed-height .md-grid-cell{overflow:hidden}.md-grid-card.md-grid-card-fixed-height .md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-grid-cell{display:flex;align-items:center;flex-shrink:0;padding:14px 16px;font-size:14px;color:#000;border:0;overflow:hidden;min-width:0}.md-grid-cell:last-child{border-right:none}.md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:1.4}.md-grid-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:90px;width:auto!important;flex-grow:0!important;flex-shrink:0!important;padding:inherit;border:0}.md-grid-header-cell.md-grid-actions-cell{border-left:none;border-right:none}.md-grid-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:4px;background:transparent;color:#4d4d4d;cursor:pointer;transition:all .2s ease}.md-grid-action-btn:hover{transform:scale(1.1)}.md-grid-action-btn:focus{outline:2px solid #6d5cae;outline-offset:1px}.md-grid-action-btn:active{transform:scale(.95)}.md-grid-action-edit{color:#6d5cae}.md-grid-action-edit:hover{background:#e9e7f3;color:#564790}.md-grid-action-save{color:#28b446}.md-grid-action-save:hover{background:#dff4e3;color:#1f8a36}.md-grid-action-cancel{color:#cf0106}.md-grid-action-cancel:hover{background:#f8d9da;color:#9c0105}.md-grid-icon-edit,.md-grid-icon-save,.md-grid-icon-cancel{display:inline-block;width:18px;height:18px;position:relative}.md-grid-icon-edit:before,.md-grid-icon-edit:after{content:\"\";position:absolute}.md-grid-icon-edit:before{width:10px;height:10px;border:2px solid currentColor;border-radius:1px;transform:rotate(45deg);top:1px;left:1px}.md-grid-icon-edit:after{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid currentColor;bottom:0;left:0;transform:rotate(-45deg)}.md-grid-icon-save:before{content:\"\";position:absolute;width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);top:1px;left:5px}.md-grid-icon-cancel:before,.md-grid-icon-cancel:after{content:\"\";position:absolute;width:14px;height:2px;background:currentColor;top:50%;left:50%}.md-grid-icon-cancel:before{transform:translate(-50%,-50%) rotate(45deg)}.md-grid-icon-cancel:after{transform:translate(-50%,-50%) rotate(-45deg)}@media (max-width: 540px){.md-grid{font-size:12px}.md-grid-header{display:none}.md-grid-body{padding:8px}.md-grid-card{flex-direction:column}.md-grid-cell{padding:10px 12px;border-right:none;border-bottom:1px solid #EAEAEA}.md-grid-cell:last-child{border-bottom:none}.md-grid-actions-cell{border-left:none;border-top:1px solid #EAEAEA;justify-content:center;background:#f3f3f3}}.md-grid.grey .md-grid-header-cell,.md-grid.grey .md-grid-card{background:#f3f3f3}.md-grid.grey .md-grid-card:hover{background:#efefef}.md-grid.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-group-rows .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}\n"] }]
|
|
15503
|
+
}, exportAs: 'mdGrid', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MDPaginatorComponent], template: "<!-- Scrollable container for header and body -->\r\n<div class=\"md-grid-scroll-container\">\r\n<!-- Header -->\r\n@if (headerHeight > 0) {\r\n<div\r\n class=\"md-grid-header\"\r\n role=\"row\"\r\n [style.height.px]=\"headerHeight\"\r\n>\r\n <div class=\"md-grid-header-inner\">\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-header-cell\"\r\n role=\"columnheader\"\r\n [class.sortable]=\"column.sortable\"\r\n [class.resizeable]=\"isColumnResizeable(column)\"\r\n [class.sort-active]=\"getSortDir(column)\"\r\n [class.sort-asc]=\"getSortDir(column) === 'asc'\"\r\n [class.sort-desc]=\"getSortDir(column) === 'desc'\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n [attr.title]=\"column.name\"\r\n (click)=\"onColumnSort(column)\"\r\n (keydown.enter)=\"onColumnSort(column)\"\r\n [attr.tabindex]=\"column.sortable ? 0 : -1\"\r\n >\r\n <!-- Custom header template -->\r\n @if (column.headerTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.headerTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n column: column,\r\n sortDir: getSortDir(column),\r\n sortFn: onColumnSort.bind(this, column)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default header -->\r\n <span class=\"md-grid-header-cell-label\">{{ column.name }}</span>\r\n @if (column.sortable) {\r\n <span class=\"md-grid-sort-icon\" [ngClass]=\"getSortClass(column)\"></span>\r\n }\r\n }\r\n\r\n <!-- Resize handle -->\r\n @if (isColumnResizeable(column)) {\r\n <span\r\n class=\"md-grid-resize-handle\"\r\n (mousedown)=\"onResizeStart($event, column)\"\r\n ></span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Actions header cell -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-header-cell md-grid-actions-cell\">\r\n <span class=\"md-grid-header-cell-label\"></span>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n}\r\n\r\n<!-- Body -->\r\n<div class=\"md-grid-body\" [style.gap.px]=\"gap\">\r\n @if (_displayRows.length === 0) {\r\n <!-- Empty state -->\r\n <div class=\"md-grid-empty\">\r\n @if (emptyTemplate) {\r\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\" />\r\n } @else {\r\n <span class=\"md-grid-empty-text\">{{ emptyMessage }}</span>\r\n }\r\n </div>\r\n } @else if (_groupedRows) {\r\n <!-- Grouped rows -->\r\n @for (group of _groupedRows; track trackByGroup($index, group)) {\r\n <div class=\"md-grid-group\">\r\n <!-- Group header -->\r\n <div class=\"md-grid-group-header\">\r\n @if (groupHeaderTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"groupHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"{ group: group }\"\r\n />\r\n } @else {\r\n <span class=\"md-grid-group-title\">{{ group.key }}</span>\r\n }\r\n </div>\r\n\r\n <!-- Group rows -->\r\n <div class=\"md-grid-group-rows\" [style.gap.px]=\"gap\">\r\n @for (row of group.value; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: group.key }\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <!-- Non-grouped rows -->\r\n @for (row of _displayRows; track trackByRow($index, row); let rowIndex = $index) {\r\n <ng-container\r\n *ngTemplateOutlet=\"rowTemplate; context: { row: row, rowIndex: rowIndex, group: null }\"\r\n />\r\n }\r\n }\r\n</div>\r\n</div><!-- End scroll container -->\r\n\r\n<!-- Row template -->\r\n<ng-template #rowTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-group=\"group\">\r\n <div\r\n class=\"md-grid-card\"\r\n [class.md-grid-card-editing]=\"isEditing(row)\"\r\n [class.md-grid-card-fixed-height]=\"cardHeight !== 'auto'\"\r\n [style.height]=\"cardHeight === 'auto' ? null : cardHeight + 'px'\"\r\n role=\"row\"\r\n >\r\n @for (column of _internalColumns; track trackByColumn($index, column)) {\r\n <div\r\n class=\"md-grid-cell\"\r\n [style.width.px]=\"column.width\"\r\n [style.min-width.px]=\"column.minWidth\"\r\n [style.max-width.px]=\"column.maxWidth\"\r\n [style.flex-grow]=\"column.flexGrow\"\r\n role=\"cell\"\r\n >\r\n <!-- Edit mode -->\r\n @if (isEditing(row) && column.editTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.editTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: getTemplateRow(row),\r\n originalRow: row,\r\n value: getCellValue(getTemplateRow(row), column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n }\r\n <!-- View mode with custom template -->\r\n @else if (column.cellTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"column.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n value: getCellValue(row, column),\r\n column: column,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n group: group\r\n }\"\r\n />\r\n }\r\n <!-- Default view mode -->\r\n @else {\r\n <span class=\"md-grid-cell-value\">{{ getCellValue(row, column) }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Row actions -->\r\n @if (showRowActions) {\r\n <div class=\"md-grid-cell md-grid-actions-cell\">\r\n @if (rowActionsTemplate) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"rowActionsTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n row: row,\r\n rowIndex: rowIndex,\r\n isEditing: isEditing(row),\r\n editFn: editRow.bind(this, row),\r\n saveFn: saveRow.bind(this),\r\n cancelFn: cancelEdit.bind(this)\r\n }\"\r\n />\r\n } @else {\r\n <!-- Default actions -->\r\n @if (isEditing(row)) {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-save\"\r\n (click)=\"saveRow()\"\r\n title=\"Save\"\r\n >\r\n <span class=\"md-grid-icon-save\"></span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-cancel\"\r\n (click)=\"cancelEdit()\"\r\n title=\"Cancel\"\r\n >\r\n <span class=\"md-grid-icon-cancel\"></span>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"md-grid-action-btn md-grid-action-edit\"\r\n (click)=\"editRow(row)\"\r\n title=\"Edit\"\r\n >\r\n <span class=\"md-grid-icon-edit\"></span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Footer / Pagination -->\r\n@if (showFooter) {\r\n<md-paginator\r\n [offset]=\"offset\"\r\n [limit]=\"limit\"\r\n [count]=\"_paginatorCount\"\r\n [height]=\"footerHeight\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n (page)=\"onPaginatorPage($event)\"\r\n (pageSizeChange)=\"onPaginatorPageSizeChange($event)\">\r\n</md-paginator>\r\n}\r\n", styles: [".md-grid{display:block;width:100%;font-family:Open Sans,Arial,sans-serif;font-size:13px;background:transparent;border:0;border-radius:0}.md-grid *,.md-grid *:before,.md-grid *:after{box-sizing:border-box}.md-grid-scroll-container{width:100%;overflow-x:auto;overflow-y:hidden}.md-grid-scroll-container::-webkit-scrollbar{height:6px}.md-grid-scroll-container::-webkit-scrollbar-track{background:#f3f3f3;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb{background:#929292;border-radius:3px}.md-grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#4d4d4d}.md-grid-shrink-mode .md-grid-scroll-container{overflow-x:hidden}.md-grid-shrink-mode .md-grid-header-inner,.md-grid-shrink-mode .md-grid-card{min-width:0}.md-grid-shrink-mode .md-grid-header-cell,.md-grid-shrink-mode .md-grid-cell{flex-shrink:1}.md-grid-header{display:block;width:fit-content;min-width:fit-content;background:transparent;margin:0;padding:0;border:0}.md-grid-header-inner{display:flex;align-items:center;height:100%;width:100%;min-width:fit-content}.md-grid-has-flex-grow .md-grid-header{width:100%}.md-grid-header-cell{display:flex;align-items:center;flex-shrink:0;height:100%;padding:14px 16px;background:#fff;font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:300;color:#4d4d4d;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.md-grid-header-cell:not(:first-child){border-left:2px solid #EAEAEA}.md-grid-header-cell.sortable{cursor:pointer;transition:background-color .2s ease}.md-grid-header-cell.sortable:hover{background:#f3f3f3}.md-grid-header-cell.sortable:focus{outline:0;outline-offset:0}.md-grid-header-cell.sort-active{color:#0185cf}.md-grid-header-cell.resizeable{position:relative}.md-grid-header-cell-label{flex:1;overflow:hidden;text-overflow:ellipsis}.md-grid-sort-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:2px;color:#929292;transition:color .2s ease}.md-grid-sort-icon:before{font-family:datatable;font-size:12px}.md-grid-sort-icon.md-grid-sort-asc,.md-grid-sort-icon.md-grid-sort-desc{color:#6d5cae}.md-grid-sort-icon.md-grid-sort-asc:after,.md-grid-sort-icon.md-grid-sort-desc:after{content:\"\";display:block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.md-grid-sort-icon.md-grid-sort-asc:after{border-bottom:5px solid currentColor}.md-grid-sort-icon.md-grid-sort-desc:after{border-top:5px solid currentColor}.md-grid-resize-handle{position:absolute;top:0;right:-8px;bottom:0;width:10px;cursor:col-resize;z-index:1}.md-grid-resize-handle:after{content:\"\";position:absolute;top:25%;right:2px;bottom:25%;width:3px;background:transparent;border-radius:1px;transition:background-color .2s ease}.md-grid-resize-handle:hover:after{background:#6d5cae}.md-grid-header-cell:last-of-type:not(.md-grid-actions-cell) .md-grid-resize-handle{right:0}.md-grid-header-cell:has(+.md-grid-actions-cell) .md-grid-resize-handle{right:0}body.md-grid-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.md-grid-resizing *{cursor:col-resize!important}.md-grid-body{display:flex;flex-direction:column;padding:12px 0 0;width:fit-content;min-width:fit-content;background:transparent}.md-grid-has-flex-grow .md-grid-body{width:100%}.md-grid-empty{display:flex;align-items:center;justify-content:center;padding:32px 16px;width:100%;min-width:0}.md-grid-empty-text{font-size:14px;color:#4d4d4d;font-style:italic}.md-grid-group{margin-bottom:12px}.md-grid-group:last-child{margin-bottom:0}.md-grid-group-header{display:flex;align-items:center;padding:10px 14px;margin-bottom:12px;background:#eaeaea;border-radius:0;font-size:13px;font-weight:600;color:#000}.md-grid-group-title{flex:1}.md-grid-group-rows{display:flex;flex-direction:column;width:fit-content;min-width:fit-content;gap:5px}.md-grid-has-flex-grow .md-grid-group-rows{width:100%}.md-grid-card{display:inline-flex;align-items:stretch;width:fit-content;min-width:fit-content;background:#fff;border:0;border-radius:5px;box-shadow:none;transition:all .2s ease}.md-grid-card:hover{background:#fbfbfb;box-shadow:0 2px 8px #0000001f;transform:translateY(-1px)}.md-grid-card.md-grid-card-editing{background:#cf01061a;border:0;box-shadow:none}.md-grid-card.md-grid-card-fixed-height,.md-grid-card.md-grid-card-fixed-height .md-grid-cell{overflow:hidden}.md-grid-card.md-grid-card-fixed-height .md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-grid-has-flex-grow .md-grid-card{width:100%}.md-grid-cell{display:flex;align-items:center;flex-shrink:0;padding:14px 16px;font-size:14px;color:#000;border:0;overflow:hidden;min-width:0}.md-grid-cell:last-child{border-right:none}.md-grid-cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:1.4}.md-grid-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:90px;width:auto!important;flex-grow:0!important;flex-shrink:0!important;padding:inherit;border:0}.md-grid-header-cell.md-grid-actions-cell{border-left:none;border-right:none}.md-grid-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:4px;background:transparent;color:#4d4d4d;cursor:pointer;transition:all .2s ease}.md-grid-action-btn:hover{transform:scale(1.1)}.md-grid-action-btn:focus{outline:2px solid #6d5cae;outline-offset:1px}.md-grid-action-btn:active{transform:scale(.95)}.md-grid-action-edit{color:#6d5cae}.md-grid-action-edit:hover{background:#e9e7f3;color:#564790}.md-grid-action-save{color:#28b446}.md-grid-action-save:hover{background:#dff4e3;color:#1f8a36}.md-grid-action-cancel{color:#cf0106}.md-grid-action-cancel:hover{background:#f8d9da;color:#9c0105}.md-grid-icon-edit,.md-grid-icon-save,.md-grid-icon-cancel{display:inline-block;width:18px;height:18px;position:relative}.md-grid-icon-edit:before,.md-grid-icon-edit:after{content:\"\";position:absolute}.md-grid-icon-edit:before{width:10px;height:10px;border:2px solid currentColor;border-radius:1px;transform:rotate(45deg);top:1px;left:1px}.md-grid-icon-edit:after{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid currentColor;bottom:0;left:0;transform:rotate(-45deg)}.md-grid-icon-save:before{content:\"\";position:absolute;width:6px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);top:1px;left:5px}.md-grid-icon-cancel:before,.md-grid-icon-cancel:after{content:\"\";position:absolute;width:14px;height:2px;background:currentColor;top:50%;left:50%}.md-grid-icon-cancel:before{transform:translate(-50%,-50%) rotate(45deg)}.md-grid-icon-cancel:after{transform:translate(-50%,-50%) rotate(-45deg)}@media (max-width: 540px){.md-grid{font-size:12px}.md-grid-header{display:none}.md-grid-body{padding:8px}.md-grid-card{flex-direction:column}.md-grid-cell{padding:10px 12px;border-right:none;border-bottom:1px solid #EAEAEA}.md-grid-cell:last-child{border-bottom:none}.md-grid-actions-cell{border-left:none;border-top:1px solid #EAEAEA;justify-content:center;background:#f3f3f3}}.md-grid.grey .md-grid-header-cell,.md-grid.grey .md-grid-card{background:#f3f3f3}.md-grid.grey .md-grid-card:hover{background:#efefef}.md-grid.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(odd){background:#fff}.md-grid.zebra .md-grid-group-rows .md-grid-card:nth-child(2n){background:#f3f3f3}.md-grid.zebra .md-grid-group-rows .md-grid-card:hover{background:#e4e4e4}.md-grid.zebra .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-card.md-grid-card-editing{background:#cf01061a}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(odd){background:#f3f3f3}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:nth-child(2n){background:#efefef}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card:hover{background:#d6d6d6}.md-grid.zebra.grey .md-grid-group-rows .md-grid-card.md-grid-card-editing{background:#cf01061a}\n"] }]
|
|
15465
15504
|
}], propDecorators: { isShrinkMode: [{
|
|
15466
15505
|
type: HostBinding,
|
|
15467
15506
|
args: ['class.md-grid-shrink-mode']
|
|
15507
|
+
}], hasFlexGrow: [{
|
|
15508
|
+
type: HostBinding,
|
|
15509
|
+
args: ['class.md-grid-has-flex-grow']
|
|
15468
15510
|
}], rows: [{
|
|
15469
15511
|
type: Input
|
|
15470
15512
|
}], columns: [{
|
|
@@ -15491,6 +15533,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
15491
15533
|
args: [{ transform: booleanAttribute }]
|
|
15492
15534
|
}], overflowMode: [{
|
|
15493
15535
|
type: Input
|
|
15536
|
+
}], emptyMessage: [{
|
|
15537
|
+
type: Input
|
|
15538
|
+
}], emptyTemplate: [{
|
|
15539
|
+
type: Input
|
|
15494
15540
|
}], enableColumnResize: [{
|
|
15495
15541
|
type: Input,
|
|
15496
15542
|
args: [{ transform: booleanAttribute }]
|
|
@@ -15538,8 +15584,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
15538
15584
|
}], footerHeight: [{
|
|
15539
15585
|
type: Input,
|
|
15540
15586
|
args: [{ transform: numberAttribute }]
|
|
15587
|
+
}], pageSizeOptions: [{
|
|
15588
|
+
type: Input
|
|
15541
15589
|
}], page: [{
|
|
15542
15590
|
type: Output
|
|
15591
|
+
}], pageSizeChange: [{
|
|
15592
|
+
type: Output
|
|
15543
15593
|
}], editingRow: [{
|
|
15544
15594
|
type: Input
|
|
15545
15595
|
}], editingRowChange: [{
|