monkey-style-guide 21.2.34 → 21.2.35
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.
|
@@ -5392,19 +5392,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
5392
5392
|
* This style guide was developed by Monkey Exchange Team
|
|
5393
5393
|
* MIT Licence
|
|
5394
5394
|
************************* */
|
|
5395
|
-
var
|
|
5396
|
-
(function (
|
|
5397
|
-
|
|
5398
|
-
|
|
5399
|
-
|
|
5400
|
-
|
|
5401
|
-
|
|
5402
|
-
|
|
5403
|
-
|
|
5404
|
-
|
|
5405
|
-
|
|
5406
|
-
|
|
5407
|
-
})(
|
|
5395
|
+
var MonkeyQuickActionsEnum;
|
|
5396
|
+
(function (MonkeyQuickActionsEnum) {
|
|
5397
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["LAST_30_DAYS"] = -30] = "LAST_30_DAYS";
|
|
5398
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["LAST_60_DAYS"] = -60] = "LAST_60_DAYS";
|
|
5399
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["LAST_90_DAYS"] = -90] = "LAST_90_DAYS";
|
|
5400
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["LAST_6_MONTHS"] = -180] = "LAST_6_MONTHS";
|
|
5401
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["LAST_12_MONTHS"] = -365] = "LAST_12_MONTHS";
|
|
5402
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["NEXT_30_DAYS"] = 30] = "NEXT_30_DAYS";
|
|
5403
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["NEXT_60_DAYS"] = 60] = "NEXT_60_DAYS";
|
|
5404
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["NEXT_90_DAYS"] = 90] = "NEXT_90_DAYS";
|
|
5405
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["NEXT_6_MONTHS"] = 180] = "NEXT_6_MONTHS";
|
|
5406
|
+
MonkeyQuickActionsEnum[MonkeyQuickActionsEnum["NEXT_12_MONTHS"] = 365] = "NEXT_12_MONTHS";
|
|
5407
|
+
})(MonkeyQuickActionsEnum || (MonkeyQuickActionsEnum = {}));
|
|
5408
5408
|
function parseStringDate(val) {
|
|
5409
5409
|
if (typeof val === 'string') {
|
|
5410
5410
|
return format(parseISO(val), 'yyyy-MM-dd');
|
|
@@ -5648,7 +5648,7 @@ class MonkeyDateRangeQuickActionsComponent {
|
|
|
5648
5648
|
this.onChange = new EventEmitter();
|
|
5649
5649
|
this._uid = inject(IdGenerator).getId('monkey-date-range-month-quick-actions-');
|
|
5650
5650
|
this.selectedAction = '';
|
|
5651
|
-
this.actions = getEnumKeys(
|
|
5651
|
+
this.actions = getEnumKeys(MonkeyQuickActionsEnum);
|
|
5652
5652
|
this.i18nDictionary = inject(MonkeyDictionaryService).get('DATE-RANGE');
|
|
5653
5653
|
// eslint-disable-next-line no-self-assign
|
|
5654
5654
|
this.id = this.id;
|
|
@@ -12139,7 +12139,7 @@ class MonkeyTableComponent {
|
|
|
12139
12139
|
useFactory: (table) => table.virtualStrategy,
|
|
12140
12140
|
deps: [MonkeyTableComponent]
|
|
12141
12141
|
}
|
|
12142
|
-
], queries: [{ propertyName: "_columns", predicate: (MonkeyTableColumnDirective), isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: MonkeyTableEmptyDirective, descendants: true, isSignal: true }, { propertyName: "loadingTemplate", first: true, predicate: MonkeyTableLoadingDirective, descendants: true, isSignal: true }, { propertyName: "rowDetailTemplate", first: true, predicate: (MonkeyTableRowDetailDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "plainScroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headClip", first: true, predicate: ["headClip"], descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-table-main\">\n <div class=\"mecx-table-viewport\">\n @if (virtual()) {\n <div #headClip class=\"mecx-table-head-clip\">\n <table\n class=\"mecx-table-grid mecx-table-grid--head\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n </table>\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n [itemSize]=\"rowHeight()\"\n [minBufferPx]=\"rowHeight() * 6\"\n [maxBufferPx]=\"rowHeight() * 12\"\n [style.height]=\"effectiveHeight()\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table\n class=\"mecx-table-grid\"\n [attr.aria-rowcount]=\"rows().length + 1\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n <tbody class=\"mecx-table-body\">\n <ng-container\n *cdkVirtualFor=\"\n let view of renderRows();\n trackBy: trackKey;\n templateCacheSize: 30\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n #scroller\n class=\"mecx-table-scroll\"\n [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n [style.max-height]=\"effectiveHeight() || null\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table class=\"mecx-table-grid\">\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n <tbody class=\"mecx-table-body\">\n @if (loading()) {\n @if (loadingTemplate(); as tpl) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n </td>\n </tr>\n } @else {\n @for (line of skeletonRange(); track line) {\n <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n <span class=\"mecx-table-skeleton\"></span>\n </td>\n }\n </tr>\n }\n }\n } @else if (rows().length === 0) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n @if (emptyTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n }\n </td>\n </tr>\n } @else {\n @for (view of renderRows(); track view.key) {\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n }\n }\n </tbody>\n </table>\n </div>\n }\n\n @if (pinnedStartWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow\"\n [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n [style.left.px]=\"0\"\n [style.width.px]=\"pinnedStartWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n @if (pinnedEndWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n [style.right.px]=\"0\"\n [style.width.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (pinnedStartWidth() === 0) {\n <div\n class=\"mecx-table-fade mecx-table-fade--start\"\n [class.mecx-table-fade--visible]=\"!atStart()\"\n aria-hidden=\"true\"\n ></div>\n }\n <div\n class=\"mecx-table-fade\"\n [class.mecx-table-fade--visible]=\"!atEnd()\"\n [style.right.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n </div>\n\n @if (effectiveHeight() && scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar-vertical\">\n <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n </div>\n }\n</div>\n\n@if (scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar\">\n <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n </div>\n}\n\n<div class=\"mecx-table-footer\">\n <ng-content select=\"monkey-pagination-size\"></ng-content>\n <div class=\"mecx-table-footer-actions\">\n <ng-content select=\"monkey-pagination-label\"></ng-content>\n <ng-content select=\"monkey-pagination-action\"></ng-content>\n </div>\n</div>\n\n<ng-template #colGroup>\n <colgroup>\n @for (slot of slots(); track slot.key) {\n <col [style.width]=\"slot.width\" />\n }\n </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n @if (caption()) {\n <caption class=\"mecx-table-caption\">\n {{\n caption()\n }}\n </caption>\n }\n\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n <thead>\n <tr class=\"mecx-table-row\">\n @for (slot of slots(); track slot.key) {\n <th\n scope=\"col\"\n class=\"mecx-table-cell mecx-table-cell--head\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-all\">\n <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n [disabled]=\"loading() || !hasSelectable()\"\n (onChange)=\"toggleAllRows()\"\n />\n </label>\n }\n @case ('expand') {\n <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n }\n @default {\n @if (hasMenu(slot.column)) {\n <button\n #trigger\n type=\"button\"\n class=\"mecx-table-heading mecx-table-trigger\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"openMenu() === slot.key\"\n (click)=\"toggleMenu(slot.column)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </button>\n\n <ng-template\n [monkeyPopover]=\"openMenu() === slot.key\"\n [monkeyPopoverTarget]=\"trigger\"\n [monkeyPopoverClosed]=\"closeMenu\"\n monkeyPopoverDir=\"ltr\"\n [monkeyPopoverHideHeader]=\"true\"\n monkeyPopoverCloseOnClick=\"monkey-option\"\n >\n <div class=\"mecx-table-menu\">\n @if (slot.column.sortable()) {\n @let sortText = sortLabels(slot.column);\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'ascending')\"\n (click)=\"sortBy(slot.column, 'ascending')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.asc }}\n </monkey-option>\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'descending')\"\n (click)=\"sortBy(slot.column, 'descending')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.desc }}\n </monkey-option>\n }\n\n @if (canReorder(slot.column)) {\n @if (slot.column.sortable()) {\n <monkey-divider />\n }\n <monkey-option\n [disabled]=\"!canMove(slot.column, -1)\"\n (click)=\"move(slot.column, -1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n {{ labels().moveLeft }}\n </monkey-option>\n <monkey-option\n [disabled]=\"!canMove(slot.column, 1)\"\n (click)=\"move(slot.column, 1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n {{ labels().moveRight }}\n </monkey-option>\n }\n\n @if (canHide(slot.column) || canPin(slot.column)) {\n @if (slot.column.sortable() || canReorder(slot.column)) {\n <monkey-divider />\n }\n @if (canHide(slot.column)) {\n <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n {{ labels().hide }}\n </monkey-option>\n }\n @if (canPin(slot.column)) {\n <monkey-option (click)=\"togglePin(slot.column)\">\n <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n </monkey-option>\n }\n }\n </div>\n </ng-template>\n } @else {\n <div class=\"mecx-table-heading\">\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </div>\n }\n }\n }\n </th>\n }\n </tr>\n </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n <tr\n class=\"mecx-table-row mecx-table-row--data\"\n [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n [class.mecx-table-row--selected]=\"view.selected\"\n [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n [style.height.px]=\"virtual() ? rowHeight() : null\"\n >\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"view.selected\"\n [disabled]=\"!!view.blockedReason\"\n (onChange)=\"toggleRow(view)\"\n />\n </label>\n }\n @case ('expand') {\n <monkey-icon-button\n type=\"tertiary\"\n size=\"sm\"\n icon=\"arrow-right\"\n class=\"mecx-table-expand-toggle\"\n [class.mecx-table-expand-toggle--open]=\"view.open\"\n [attr.aria-expanded]=\"view.open\"\n [attr.aria-label]=\"view.expandLabel\"\n (click)=\"toggleOpen(view)\"\n />\n }\n @default {\n @if (slot.column.cell(); as cell) {\n <ng-container\n [ngTemplateOutlet]=\"cell.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: view.row,\n row: view.row,\n index: view.index,\n first: view.index === 0,\n last: view.index === rows().length - 1\n }\"\n />\n }\n }\n }\n </td>\n }\n </tr>\n\n @if (expandable() && view.open) {\n @if (rowDetailTemplate(); as tpl) {\n <tr\n class=\"mecx-table-row mecx-table-row--detail\"\n [class.mecx-table-row--selected]=\"view.selected\"\n >\n <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n />\n </td>\n </tr>\n }\n }\n</ng-template>\n\n<ng-template #heading let-column>\n @if (column.headerCell(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n @if (column.labelHidden()) {\n <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n } @else {\n <span class=\"mecx-table-label\">{{ column.label() }}</span>\n @if (column.unit()) {\n <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n }\n }\n }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "color", "id"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12142
|
+
], queries: [{ propertyName: "_columns", predicate: (MonkeyTableColumnDirective), isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: MonkeyTableEmptyDirective, descendants: true, isSignal: true }, { propertyName: "loadingTemplate", first: true, predicate: MonkeyTableLoadingDirective, descendants: true, isSignal: true }, { propertyName: "rowDetailTemplate", first: true, predicate: (MonkeyTableRowDetailDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "plainScroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headClip", first: true, predicate: ["headClip"], descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-table-main\">\n <div class=\"mecx-table-viewport\">\n @if (virtual()) {\n <div #headClip class=\"mecx-table-head-clip\">\n <table\n class=\"mecx-table-grid mecx-table-grid--head\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n </table>\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n [itemSize]=\"rowHeight()\"\n [minBufferPx]=\"rowHeight() * 6\"\n [maxBufferPx]=\"rowHeight() * 12\"\n [style.height]=\"effectiveHeight()\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table\n class=\"mecx-table-grid\"\n [attr.aria-rowcount]=\"rows().length + 1\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n <tbody class=\"mecx-table-body\">\n <ng-container\n *cdkVirtualFor=\"\n let view of renderRows();\n trackBy: trackKey;\n templateCacheSize: 30\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n #scroller\n class=\"mecx-table-scroll\"\n [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n [style.max-height]=\"effectiveHeight() || null\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table class=\"mecx-table-grid\">\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n <tbody class=\"mecx-table-body\">\n @if (loading()) {\n @if (loadingTemplate(); as tpl) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n </td>\n </tr>\n } @else {\n @for (line of skeletonRange(); track line) {\n <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n <span class=\"mecx-table-skeleton\"></span>\n </td>\n }\n </tr>\n }\n }\n } @else if (rows().length === 0) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n @if (emptyTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n }\n </td>\n </tr>\n } @else {\n @for (view of renderRows(); track view.key) {\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n }\n }\n </tbody>\n </table>\n </div>\n }\n\n @if (pinnedStartWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow\"\n [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n [style.left.px]=\"0\"\n [style.width.px]=\"pinnedStartWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n @if (pinnedEndWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n [style.right.px]=\"0\"\n [style.width.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (pinnedStartWidth() === 0) {\n <div\n class=\"mecx-table-fade mecx-table-fade--start\"\n [class.mecx-table-fade--visible]=\"!atStart()\"\n aria-hidden=\"true\"\n ></div>\n }\n <div\n class=\"mecx-table-fade\"\n [class.mecx-table-fade--visible]=\"!atEnd()\"\n [style.right.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n </div>\n\n @if (effectiveHeight() && scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar-vertical\">\n <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n </div>\n }\n</div>\n\n@if (scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar\">\n <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n </div>\n}\n\n<div class=\"mecx-table-footer\">\n <ng-content select=\"monkey-pagination-size\"></ng-content>\n <div class=\"mecx-table-footer-actions\">\n <ng-content select=\"monkey-pagination-label\"></ng-content>\n <ng-content select=\"monkey-pagination-action\"></ng-content>\n </div>\n</div>\n\n<ng-template #colGroup>\n <colgroup>\n @for (slot of slots(); track slot.key) {\n <col [style.width]=\"slot.width\" />\n }\n </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n @if (caption()) {\n <caption class=\"mecx-table-caption\">\n {{\n caption()\n }}\n </caption>\n }\n\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n <thead>\n <tr class=\"mecx-table-row\">\n @for (slot of slots(); track slot.key) {\n <th\n scope=\"col\"\n class=\"mecx-table-cell mecx-table-cell--head\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-all\">\n <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n [disabled]=\"loading() || !hasSelectable()\"\n (onChange)=\"toggleAllRows()\"\n />\n </label>\n }\n @case ('expand') {\n <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n }\n @default {\n @if (hasMenu(slot.column)) {\n <button\n #trigger\n type=\"button\"\n class=\"mecx-table-heading mecx-table-trigger\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"openMenu() === slot.key\"\n (click)=\"toggleMenu(slot.column)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </button>\n\n <ng-template\n [monkeyPopover]=\"openMenu() === slot.key\"\n [monkeyPopoverTarget]=\"trigger\"\n [monkeyPopoverClosed]=\"closeMenu\"\n monkeyPopoverDir=\"ltr\"\n [monkeyPopoverHideHeader]=\"true\"\n monkeyPopoverCloseOnClick=\"monkey-option\"\n >\n <div class=\"mecx-table-menu\">\n @if (slot.column.sortable()) {\n @let sortText = sortLabels(slot.column);\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'asc')\"\n (click)=\"sortBy(slot.column, 'asc')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.asc }}\n </monkey-option>\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'desc')\"\n (click)=\"sortBy(slot.column, 'desc')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.desc }}\n </monkey-option>\n }\n\n @if (canReorder(slot.column)) {\n @if (slot.column.sortable()) {\n <monkey-divider />\n }\n <monkey-option\n [disabled]=\"!canMove(slot.column, -1)\"\n (click)=\"move(slot.column, -1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n {{ labels().moveLeft }}\n </monkey-option>\n <monkey-option\n [disabled]=\"!canMove(slot.column, 1)\"\n (click)=\"move(slot.column, 1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n {{ labels().moveRight }}\n </monkey-option>\n }\n\n @if (canHide(slot.column) || canPin(slot.column)) {\n @if (slot.column.sortable() || canReorder(slot.column)) {\n <monkey-divider />\n }\n @if (canHide(slot.column)) {\n <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n {{ labels().hide }}\n </monkey-option>\n }\n @if (canPin(slot.column)) {\n <monkey-option (click)=\"togglePin(slot.column)\">\n <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n </monkey-option>\n }\n }\n </div>\n </ng-template>\n } @else {\n <div class=\"mecx-table-heading\">\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </div>\n }\n }\n }\n </th>\n }\n </tr>\n </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n <tr\n class=\"mecx-table-row mecx-table-row--data\"\n [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n [class.mecx-table-row--selected]=\"view.selected\"\n [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n [style.height.px]=\"virtual() ? rowHeight() : null\"\n >\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"view.selected\"\n [disabled]=\"!!view.blockedReason\"\n (onChange)=\"toggleRow(view)\"\n />\n </label>\n }\n @case ('expand') {\n <monkey-icon-button\n type=\"tertiary\"\n size=\"sm\"\n icon=\"arrow-right\"\n class=\"mecx-table-expand-toggle\"\n [class.mecx-table-expand-toggle--open]=\"view.open\"\n [attr.aria-expanded]=\"view.open\"\n [attr.aria-label]=\"view.expandLabel\"\n (click)=\"toggleOpen(view)\"\n />\n }\n @default {\n @if (slot.column.cell(); as cell) {\n <ng-container\n [ngTemplateOutlet]=\"cell.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: view.row,\n row: view.row,\n index: view.index,\n first: view.index === 0,\n last: view.index === rows().length - 1\n }\"\n />\n }\n }\n }\n </td>\n }\n </tr>\n\n @if (expandable() && view.open) {\n @if (rowDetailTemplate(); as tpl) {\n <tr\n class=\"mecx-table-row mecx-table-row--detail\"\n [class.mecx-table-row--selected]=\"view.selected\"\n >\n <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n />\n </td>\n </tr>\n }\n }\n</ng-template>\n\n<ng-template #heading let-column>\n @if (column.headerCell(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n @if (column.labelHidden()) {\n <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n } @else {\n <span class=\"mecx-table-label\">{{ column.label() }}</span>\n @if (column.unit()) {\n <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n }\n }\n }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "color", "id"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12143
12143
|
}
|
|
12144
12144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyTableComponent, decorators: [{
|
|
12145
12145
|
type: Component,
|
|
@@ -12163,7 +12163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
12163
12163
|
'[class.mecx-table--striped]': 'striped()',
|
|
12164
12164
|
'[class.mecx-table--menu-open]': '!!openMenu()',
|
|
12165
12165
|
'[attr.aria-busy]': "loading() ? 'true' : null"
|
|
12166
|
-
}, template: "<div class=\"mecx-table-main\">\n <div class=\"mecx-table-viewport\">\n @if (virtual()) {\n <div #headClip class=\"mecx-table-head-clip\">\n <table\n class=\"mecx-table-grid mecx-table-grid--head\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n </table>\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n [itemSize]=\"rowHeight()\"\n [minBufferPx]=\"rowHeight() * 6\"\n [maxBufferPx]=\"rowHeight() * 12\"\n [style.height]=\"effectiveHeight()\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table\n class=\"mecx-table-grid\"\n [attr.aria-rowcount]=\"rows().length + 1\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n <tbody class=\"mecx-table-body\">\n <ng-container\n *cdkVirtualFor=\"\n let view of renderRows();\n trackBy: trackKey;\n templateCacheSize: 30\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n #scroller\n class=\"mecx-table-scroll\"\n [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n [style.max-height]=\"effectiveHeight() || null\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table class=\"mecx-table-grid\">\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n <tbody class=\"mecx-table-body\">\n @if (loading()) {\n @if (loadingTemplate(); as tpl) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n </td>\n </tr>\n } @else {\n @for (line of skeletonRange(); track line) {\n <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n <span class=\"mecx-table-skeleton\"></span>\n </td>\n }\n </tr>\n }\n }\n } @else if (rows().length === 0) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n @if (emptyTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n }\n </td>\n </tr>\n } @else {\n @for (view of renderRows(); track view.key) {\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n }\n }\n </tbody>\n </table>\n </div>\n }\n\n @if (pinnedStartWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow\"\n [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n [style.left.px]=\"0\"\n [style.width.px]=\"pinnedStartWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n @if (pinnedEndWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n [style.right.px]=\"0\"\n [style.width.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (pinnedStartWidth() === 0) {\n <div\n class=\"mecx-table-fade mecx-table-fade--start\"\n [class.mecx-table-fade--visible]=\"!atStart()\"\n aria-hidden=\"true\"\n ></div>\n }\n <div\n class=\"mecx-table-fade\"\n [class.mecx-table-fade--visible]=\"!atEnd()\"\n [style.right.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n </div>\n\n @if (effectiveHeight() && scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar-vertical\">\n <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n </div>\n }\n</div>\n\n@if (scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar\">\n <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n </div>\n}\n\n<div class=\"mecx-table-footer\">\n <ng-content select=\"monkey-pagination-size\"></ng-content>\n <div class=\"mecx-table-footer-actions\">\n <ng-content select=\"monkey-pagination-label\"></ng-content>\n <ng-content select=\"monkey-pagination-action\"></ng-content>\n </div>\n</div>\n\n<ng-template #colGroup>\n <colgroup>\n @for (slot of slots(); track slot.key) {\n <col [style.width]=\"slot.width\" />\n }\n </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n @if (caption()) {\n <caption class=\"mecx-table-caption\">\n {{\n caption()\n }}\n </caption>\n }\n\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n <thead>\n <tr class=\"mecx-table-row\">\n @for (slot of slots(); track slot.key) {\n <th\n scope=\"col\"\n class=\"mecx-table-cell mecx-table-cell--head\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-all\">\n <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n [disabled]=\"loading() || !hasSelectable()\"\n (onChange)=\"toggleAllRows()\"\n />\n </label>\n }\n @case ('expand') {\n <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n }\n @default {\n @if (hasMenu(slot.column)) {\n <button\n #trigger\n type=\"button\"\n class=\"mecx-table-heading mecx-table-trigger\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"openMenu() === slot.key\"\n (click)=\"toggleMenu(slot.column)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </button>\n\n <ng-template\n [monkeyPopover]=\"openMenu() === slot.key\"\n [monkeyPopoverTarget]=\"trigger\"\n [monkeyPopoverClosed]=\"closeMenu\"\n monkeyPopoverDir=\"ltr\"\n [monkeyPopoverHideHeader]=\"true\"\n monkeyPopoverCloseOnClick=\"monkey-option\"\n >\n <div class=\"mecx-table-menu\">\n @if (slot.column.sortable()) {\n @let sortText = sortLabels(slot.column);\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'ascending')\"\n (click)=\"sortBy(slot.column, 'ascending')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.asc }}\n </monkey-option>\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'descending')\"\n (click)=\"sortBy(slot.column, 'descending')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.desc }}\n </monkey-option>\n }\n\n @if (canReorder(slot.column)) {\n @if (slot.column.sortable()) {\n <monkey-divider />\n }\n <monkey-option\n [disabled]=\"!canMove(slot.column, -1)\"\n (click)=\"move(slot.column, -1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n {{ labels().moveLeft }}\n </monkey-option>\n <monkey-option\n [disabled]=\"!canMove(slot.column, 1)\"\n (click)=\"move(slot.column, 1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n {{ labels().moveRight }}\n </monkey-option>\n }\n\n @if (canHide(slot.column) || canPin(slot.column)) {\n @if (slot.column.sortable() || canReorder(slot.column)) {\n <monkey-divider />\n }\n @if (canHide(slot.column)) {\n <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n {{ labels().hide }}\n </monkey-option>\n }\n @if (canPin(slot.column)) {\n <monkey-option (click)=\"togglePin(slot.column)\">\n <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n </monkey-option>\n }\n }\n </div>\n </ng-template>\n } @else {\n <div class=\"mecx-table-heading\">\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </div>\n }\n }\n }\n </th>\n }\n </tr>\n </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n <tr\n class=\"mecx-table-row mecx-table-row--data\"\n [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n [class.mecx-table-row--selected]=\"view.selected\"\n [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n [style.height.px]=\"virtual() ? rowHeight() : null\"\n >\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"view.selected\"\n [disabled]=\"!!view.blockedReason\"\n (onChange)=\"toggleRow(view)\"\n />\n </label>\n }\n @case ('expand') {\n <monkey-icon-button\n type=\"tertiary\"\n size=\"sm\"\n icon=\"arrow-right\"\n class=\"mecx-table-expand-toggle\"\n [class.mecx-table-expand-toggle--open]=\"view.open\"\n [attr.aria-expanded]=\"view.open\"\n [attr.aria-label]=\"view.expandLabel\"\n (click)=\"toggleOpen(view)\"\n />\n }\n @default {\n @if (slot.column.cell(); as cell) {\n <ng-container\n [ngTemplateOutlet]=\"cell.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: view.row,\n row: view.row,\n index: view.index,\n first: view.index === 0,\n last: view.index === rows().length - 1\n }\"\n />\n }\n }\n }\n </td>\n }\n </tr>\n\n @if (expandable() && view.open) {\n @if (rowDetailTemplate(); as tpl) {\n <tr\n class=\"mecx-table-row mecx-table-row--detail\"\n [class.mecx-table-row--selected]=\"view.selected\"\n >\n <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n />\n </td>\n </tr>\n }\n }\n</ng-template>\n\n<ng-template #heading let-column>\n @if (column.headerCell(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n @if (column.labelHidden()) {\n <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n } @else {\n <span class=\"mecx-table-label\">{{ column.label() }}</span>\n @if (column.unit()) {\n <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n }\n }\n }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
|
|
12166
|
+
}, template: "<div class=\"mecx-table-main\">\n <div class=\"mecx-table-viewport\">\n @if (virtual()) {\n <div #headClip class=\"mecx-table-head-clip\">\n <table\n class=\"mecx-table-grid mecx-table-grid--head\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n </table>\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n [itemSize]=\"rowHeight()\"\n [minBufferPx]=\"rowHeight() * 6\"\n [maxBufferPx]=\"rowHeight() * 12\"\n [style.height]=\"effectiveHeight()\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table\n class=\"mecx-table-grid\"\n [attr.aria-rowcount]=\"rows().length + 1\"\n [style.width.px]=\"totalWidth() || null\"\n >\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n <tbody class=\"mecx-table-body\">\n <ng-container\n *cdkVirtualFor=\"\n let view of renderRows();\n trackBy: trackKey;\n templateCacheSize: 30\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n #scroller\n class=\"mecx-table-scroll\"\n [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n [style.max-height]=\"effectiveHeight() || null\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"overflowing() ? 0 : null\"\n >\n <table class=\"mecx-table-grid\">\n <ng-container [ngTemplateOutlet]=\"tableHead\" />\n <tbody class=\"mecx-table-body\">\n @if (loading()) {\n @if (loadingTemplate(); as tpl) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n </td>\n </tr>\n } @else {\n @for (line of skeletonRange(); track line) {\n <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n <span class=\"mecx-table-skeleton\"></span>\n </td>\n }\n </tr>\n }\n }\n } @else if (rows().length === 0) {\n <tr class=\"mecx-table-row\">\n <td\n class=\"mecx-table-cell mecx-table-cell--wide\"\n [attr.colspan]=\"slots().length\"\n >\n @if (emptyTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n }\n </td>\n </tr>\n } @else {\n @for (view of renderRows(); track view.key) {\n <ng-container\n [ngTemplateOutlet]=\"dataRow\"\n [ngTemplateOutletContext]=\"{ $implicit: view }\"\n />\n }\n }\n </tbody>\n </table>\n </div>\n }\n\n @if (pinnedStartWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow\"\n [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n [style.left.px]=\"0\"\n [style.width.px]=\"pinnedStartWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n @if (pinnedEndWidth() > 0) {\n <div\n class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n [style.right.px]=\"0\"\n [style.width.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (pinnedStartWidth() === 0) {\n <div\n class=\"mecx-table-fade mecx-table-fade--start\"\n [class.mecx-table-fade--visible]=\"!atStart()\"\n aria-hidden=\"true\"\n ></div>\n }\n <div\n class=\"mecx-table-fade\"\n [class.mecx-table-fade--visible]=\"!atEnd()\"\n [style.right.px]=\"pinnedEndWidth()\"\n aria-hidden=\"true\"\n ></div>\n </div>\n\n @if (effectiveHeight() && scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar-vertical\">\n <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n </div>\n }\n</div>\n\n@if (scrollTarget(); as target) {\n <div class=\"mecx-table-scrollbar\">\n <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n </div>\n}\n\n<div class=\"mecx-table-footer\">\n <ng-content select=\"monkey-pagination-size\"></ng-content>\n <div class=\"mecx-table-footer-actions\">\n <ng-content select=\"monkey-pagination-label\"></ng-content>\n <ng-content select=\"monkey-pagination-action\"></ng-content>\n </div>\n</div>\n\n<ng-template #colGroup>\n <colgroup>\n @for (slot of slots(); track slot.key) {\n <col [style.width]=\"slot.width\" />\n }\n </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n @if (caption()) {\n <caption class=\"mecx-table-caption\">\n {{\n caption()\n }}\n </caption>\n }\n\n <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n <thead>\n <tr class=\"mecx-table-row\">\n @for (slot of slots(); track slot.key) {\n <th\n scope=\"col\"\n class=\"mecx-table-cell mecx-table-cell--head\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-all\">\n <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n [disabled]=\"loading() || !hasSelectable()\"\n (onChange)=\"toggleAllRows()\"\n />\n </label>\n }\n @case ('expand') {\n <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n }\n @default {\n @if (hasMenu(slot.column)) {\n <button\n #trigger\n type=\"button\"\n class=\"mecx-table-heading mecx-table-trigger\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"openMenu() === slot.key\"\n (click)=\"toggleMenu(slot.column)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </button>\n\n <ng-template\n [monkeyPopover]=\"openMenu() === slot.key\"\n [monkeyPopoverTarget]=\"trigger\"\n [monkeyPopoverClosed]=\"closeMenu\"\n monkeyPopoverDir=\"ltr\"\n [monkeyPopoverHideHeader]=\"true\"\n monkeyPopoverCloseOnClick=\"monkey-option\"\n >\n <div class=\"mecx-table-menu\">\n @if (slot.column.sortable()) {\n @let sortText = sortLabels(slot.column);\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'asc')\"\n (click)=\"sortBy(slot.column, 'asc')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.asc }}\n </monkey-option>\n <monkey-option\n [selected]=\"isSortedBy(slot.column, 'desc')\"\n (click)=\"sortBy(slot.column, 'desc')\"\n >\n <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n {{ sortText.desc }}\n </monkey-option>\n }\n\n @if (canReorder(slot.column)) {\n @if (slot.column.sortable()) {\n <monkey-divider />\n }\n <monkey-option\n [disabled]=\"!canMove(slot.column, -1)\"\n (click)=\"move(slot.column, -1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n {{ labels().moveLeft }}\n </monkey-option>\n <monkey-option\n [disabled]=\"!canMove(slot.column, 1)\"\n (click)=\"move(slot.column, 1)\"\n >\n <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n {{ labels().moveRight }}\n </monkey-option>\n }\n\n @if (canHide(slot.column) || canPin(slot.column)) {\n @if (slot.column.sortable() || canReorder(slot.column)) {\n <monkey-divider />\n }\n @if (canHide(slot.column)) {\n <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n {{ labels().hide }}\n </monkey-option>\n }\n @if (canPin(slot.column)) {\n <monkey-option (click)=\"togglePin(slot.column)\">\n <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n </monkey-option>\n }\n }\n </div>\n </ng-template>\n } @else {\n <div class=\"mecx-table-heading\">\n <ng-container\n [ngTemplateOutlet]=\"heading\"\n [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n />\n </div>\n }\n }\n }\n </th>\n }\n </tr>\n </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n <tr\n class=\"mecx-table-row mecx-table-row--data\"\n [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n [class.mecx-table-row--selected]=\"view.selected\"\n [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n [style.height.px]=\"virtual() ? rowHeight() : null\"\n >\n @for (slot of slots(); track slot.key) {\n <td\n class=\"mecx-table-cell\"\n [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n >\n @switch (slot.kind) {\n @case ('selection') {\n <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n <monkey-checkbox\n size=\"sm\"\n [value]=\"view.selected\"\n [disabled]=\"!!view.blockedReason\"\n (onChange)=\"toggleRow(view)\"\n />\n </label>\n }\n @case ('expand') {\n <monkey-icon-button\n type=\"tertiary\"\n size=\"sm\"\n icon=\"arrow-right\"\n class=\"mecx-table-expand-toggle\"\n [class.mecx-table-expand-toggle--open]=\"view.open\"\n [attr.aria-expanded]=\"view.open\"\n [attr.aria-label]=\"view.expandLabel\"\n (click)=\"toggleOpen(view)\"\n />\n }\n @default {\n @if (slot.column.cell(); as cell) {\n <ng-container\n [ngTemplateOutlet]=\"cell.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: view.row,\n row: view.row,\n index: view.index,\n first: view.index === 0,\n last: view.index === rows().length - 1\n }\"\n />\n }\n }\n }\n </td>\n }\n </tr>\n\n @if (expandable() && view.open) {\n @if (rowDetailTemplate(); as tpl) {\n <tr\n class=\"mecx-table-row mecx-table-row--detail\"\n [class.mecx-table-row--selected]=\"view.selected\"\n >\n <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n />\n </td>\n </tr>\n }\n }\n</ng-template>\n\n<ng-template #heading let-column>\n @if (column.headerCell(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n } @else {\n @if (column.labelHidden()) {\n <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n } @else {\n <span class=\"mecx-table-label\">{{ column.label() }}</span>\n @if (column.unit()) {\n <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n }\n }\n }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
|
|
12167
12167
|
}], ctorParameters: () => [], propDecorators: { _columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyTableColumnDirective), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], rowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabel", required: false }] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], hideable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideable", required: false }] }], pinnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnable", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], maxVisibleRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleRows", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], columnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOrder", required: false }] }, { type: i0.Output, args: ["columnOrderChange"] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onColumnHidden: [{ type: i0.Output, args: ["onColumnHidden"] }], onColumnStateChange: [{ type: i0.Output, args: ["onColumnStateChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onExpandChange: [{ type: i0.Output, args: ["onExpandChange"] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyTableEmptyDirective), { isSignal: true }] }], loadingTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyTableLoadingDirective), { isSignal: true }] }], rowDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyTableRowDetailDirective), { isSignal: true }] }], plainScroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], headClip: [{ type: i0.ViewChild, args: ['headClip', { isSignal: true }] }], virtualViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }] } });
|
|
12168
12168
|
|
|
12169
12169
|
/** ************************
|