@cauca-911/datagrid 22.2.6 → 22.2.8
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.
|
@@ -21,7 +21,7 @@ import * as i3 from '@angular/material/menu';
|
|
|
21
21
|
import { MatMenuModule } from '@angular/material/menu';
|
|
22
22
|
import { formatDate, NgTemplateOutlet, NgStyle, NgClass, DatePipe } from '@angular/common';
|
|
23
23
|
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
|
24
|
-
import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
24
|
+
import { STANDARD_DROPDOWN_BELOW_POSITIONS, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
25
25
|
import * as i1$4 from '@angular/material/card';
|
|
26
26
|
import { MatCardModule } from '@angular/material/card';
|
|
27
27
|
import * as i2$1 from '@angular/material/checkbox';
|
|
@@ -336,6 +336,9 @@ const XLSX_MIME = 'application/vnd.openxmlformats-officedocument.spreadsheetml.s
|
|
|
336
336
|
const DATE_MASK = 'dd/MM/yyyy HH:mm';
|
|
337
337
|
const EXCEL_DATE_FORMAT = 'dd/mm/yyyy hh:mm';
|
|
338
338
|
const COLUMN_WIDTH = 24;
|
|
339
|
+
const FONT_NAME = 'Aptos Narrow';
|
|
340
|
+
const FONT_FAMILY = 2;
|
|
341
|
+
const EXCEL_TITLE_FONT_SIZE = 25;
|
|
339
342
|
const TITLE_FONT_SIZE = 14;
|
|
340
343
|
const PAGE_MARGIN = 14;
|
|
341
344
|
const TITLE_BASELINE = 15;
|
|
@@ -351,14 +354,18 @@ class GridExportService {
|
|
|
351
354
|
const worksheet = workbook.addWorksheet(fileName.slice(0, 31));
|
|
352
355
|
const columnCount = matrix.headers.length;
|
|
353
356
|
if (matrix.title) {
|
|
354
|
-
worksheet.addRow([matrix.title])
|
|
357
|
+
const titleRow = worksheet.addRow([matrix.title]);
|
|
358
|
+
titleRow.font = { name: FONT_NAME, family: FONT_FAMILY, bold: true, size: EXCEL_TITLE_FONT_SIZE };
|
|
359
|
+
titleRow.alignment = { horizontal: 'center', vertical: 'middle' };
|
|
355
360
|
if (columnCount > 1) {
|
|
356
361
|
worksheet.mergeCells(1, 1, 1, columnCount);
|
|
357
362
|
}
|
|
358
363
|
}
|
|
359
364
|
const headerRow = matrix.title ? 2 : 1;
|
|
360
|
-
worksheet.addRow(matrix.headers).font = { bold: true };
|
|
361
|
-
matrix.rows.forEach(row =>
|
|
365
|
+
worksheet.addRow(matrix.headers).font = { name: FONT_NAME, family: FONT_FAMILY, bold: true };
|
|
366
|
+
matrix.rows.forEach(row => {
|
|
367
|
+
worksheet.addRow(row.map(cell => this.localize(cell))).font = { name: FONT_NAME, family: FONT_FAMILY };
|
|
368
|
+
});
|
|
362
369
|
(worksheet.columns ?? []).forEach((column, index) => {
|
|
363
370
|
column.width = COLUMN_WIDTH;
|
|
364
371
|
if (matrix.rows.some(row => row[index] instanceof Date)) {
|
|
@@ -616,8 +623,8 @@ class ButtonPopoverComponent {
|
|
|
616
623
|
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
617
624
|
this.isActive = signal(false, /* @ts-ignore */
|
|
618
625
|
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
626
|
+
this.overlayPositions = STANDARD_DROPDOWN_BELOW_POSITIONS;
|
|
619
627
|
}
|
|
620
|
-
;
|
|
621
628
|
toggle() {
|
|
622
629
|
this.isActive.set(!this.isActive());
|
|
623
630
|
}
|
|
@@ -627,11 +634,11 @@ class ButtonPopoverComponent {
|
|
|
627
634
|
}
|
|
628
635
|
}
|
|
629
636
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: ButtonPopoverComponent, isStandalone: true, selector: "cauca-button-popover", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\r\n [cdkConnectedOverlayOpen]=\"isActive()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\r\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\r\n (backdropClick)=\"toggle()\">\r\n <ng-content></ng-content>\r\n</ng-template
|
|
637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: ButtonPopoverComponent, isStandalone: true, selector: "cauca-button-popover", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\r\n [cdkConnectedOverlayOpen]=\"isActive()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\r\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayViewportMargin]=\"8\"\r\n [cdkConnectedOverlayMinHeight]=\"200\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n (backdropClick)=\"toggle()\">\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
631
638
|
}
|
|
632
639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonPopoverComponent, decorators: [{
|
|
633
640
|
type: Component,
|
|
634
|
-
args: [{ selector: 'cauca-button-popover', imports: [CdkConnectedOverlay, BasicButtonComponent, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\r\n [cdkConnectedOverlayOpen]=\"isActive()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\r\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\r\n (backdropClick)=\"toggle()\">\r\n <ng-content></ng-content>\r\n</ng-template
|
|
641
|
+
args: [{ selector: 'cauca-button-popover', imports: [CdkConnectedOverlay, BasicButtonComponent, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\r\n [cdkConnectedOverlayOpen]=\"isActive()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\r\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayViewportMargin]=\"8\"\r\n [cdkConnectedOverlayMinHeight]=\"200\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n (backdropClick)=\"toggle()\">\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"] }]
|
|
635
642
|
}], propDecorators: { buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], buttonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIcon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
636
643
|
|
|
637
644
|
class DataGridTableOptionsComponent {
|
|
@@ -710,11 +717,11 @@ class DataGridTableOptionsComponent {
|
|
|
710
717
|
}));
|
|
711
718
|
}
|
|
712
719
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
713
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: { classPropertyName: "gridName", publicName: "gridName", isSignal: true, isRequired: true, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"showAllColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
720
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: { classPropertyName: "gridName", publicName: "gridName", isSignal: true, isRequired: true, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"showAllColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:650px;overflow-y:auto;overflow-x:hidden}.columns ::ng-deep .mat-mdc-checkbox-touch-target{display:none}mat-card{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{flex:0 0 auto;gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
714
721
|
}
|
|
715
722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, decorators: [{
|
|
716
723
|
type: Component,
|
|
717
|
-
args: [{ selector: 'cauca-data-grid-table-options', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslatePipe, MenuItemComponent], template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"showAllColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
|
|
724
|
+
args: [{ selector: 'cauca-data-grid-table-options', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslatePipe, MenuItemComponent], template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"showAllColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:650px;overflow-y:auto;overflow-x:hidden}.columns ::ng-deep .mat-mdc-checkbox-touch-target{display:none}mat-card{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{flex:0 0 auto;gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
|
|
718
725
|
}], propDecorators: { gridName: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridName", required: true }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], densityChanged: [{ type: i0.Output, args: ["densityChanged"] }], columnsChanged: [{ type: i0.Output, args: ["columnsChanged"] }], columnViewer: [{
|
|
719
726
|
type: ViewChild,
|
|
720
727
|
args: [ButtonPopoverComponent, { static: true }]
|