@igo2/common 16.1.0 → 16.1.1
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.
|
@@ -803,13 +803,13 @@ export class EntityTableComponent {
|
|
|
803
803
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntityTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.UntypedFormBuilder }, { token: i2.FocusMonitor }, { token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormControlName, optional: true }, { token: i3.ErrorStateMatcher }, { token: i3.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
804
804
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EntityTableComponent, selector: "igo-entity-table", inputs: { store: "store", paginator: "paginator", template: "template", scrollBehavior: "scrollBehavior", sortNullsFirst: "sortNullsFirst", withPaginator: "withPaginator", paginatorOptions: "paginatorOptions" }, outputs: { entityClick: "entityClick", entitySelectChange: "entitySelectChange", entitySortChange: "entitySortChange" }, providers: [
|
|
805
805
|
{ provide: MatFormFieldControl, useExisting: EntityTableComponent }
|
|
806
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:rgba(166,166,166,.2)}:host input{border-bottom:1px solid darkgrey}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i13.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: i14.EntityTablePaginatorComponent, selector: "igo-entity-table-paginator", inputs: ["entitySortChange$", "store", "paginatorOptions"], outputs: ["page", "paginatorChange"] }, { kind: "directive", type: i15.ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i16.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i18.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i19.EntityTableRowDirective, selector: "[igoEntityTableRow]", inputs: ["selection", "selectOnClick", "highlightSelection", "selected", "scrollBehavior"], outputs: ["select"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i20.SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: i21.SecureImagePipe, name: "secureImage" }, { kind: "pipe", type: i22.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
806
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:#a6a6a633}:host input{border-bottom:1px solid darkgrey}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i13.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: i14.EntityTablePaginatorComponent, selector: "igo-entity-table-paginator", inputs: ["entitySortChange$", "store", "paginatorOptions"], outputs: ["page", "paginatorChange"] }, { kind: "directive", type: i15.ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i16.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i18.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i19.EntityTableRowDirective, selector: "[igoEntityTableRow]", inputs: ["selection", "selectOnClick", "highlightSelection", "selected", "scrollBehavior"], outputs: ["select"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i20.SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: i21.SecureImagePipe, name: "secureImage" }, { kind: "pipe", type: i22.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
807
807
|
}
|
|
808
808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntityTableComponent, decorators: [{
|
|
809
809
|
type: Component,
|
|
810
810
|
args: [{ selector: 'igo-entity-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
811
811
|
{ provide: MatFormFieldControl, useExisting: EntityTableComponent }
|
|
812
|
-
], template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:rgba(166,166,166,.2)}:host input{border-bottom:1px solid darkgrey}\n"] }]
|
|
812
|
+
], template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:#a6a6a633}:host input{border-bottom:1px solid darkgrey}\n"] }]
|
|
813
813
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.UntypedFormBuilder }, { type: i2.FocusMonitor }, { type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
|
|
814
814
|
type: Optional
|
|
815
815
|
}, {
|
|
@@ -3,4 +3,4 @@ export * from './entity-selector/entity-selector.component';
|
|
|
3
3
|
export * from './entity-table/entity-table.component';
|
|
4
4
|
export * from './entity-table-paginator/entity-table-paginator.component';
|
|
5
5
|
export * from './entity-table-paginator/entity-table-paginator.interface';
|
|
6
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vc3JjL2xpYi9lbnRpdHkvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyw2Q0FBNkMsQ0FBQztBQUM1RCxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsMkRBQTJELENBQUM7QUFDMUUsY0FBYywyREFBMkQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vc2hhcmVkJztcbmV4cG9ydCAqIGZyb20gJy4vZW50aXR5LXNlbGVjdG9yL2VudGl0eS1zZWxlY3Rvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9lbnRpdHktdGFibGUvZW50aXR5LXRhYmxlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2VudGl0eS10YWJsZS1wYWdpbmF0b3IvZW50aXR5LXRhYmxlLXBhZ2luYXRvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9lbnRpdHktdGFibGUtcGFnaW5hdG9yL2VudGl0eS10YWJsZS1wYWdpbmF0b3IuaW50ZXJmYWNlJztcbiJdfQ==
|
package/fesm2022/igo2-common.mjs
CHANGED
|
@@ -3212,13 +3212,13 @@ class EntityTableComponent {
|
|
|
3212
3212
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntityTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.UntypedFormBuilder }, { token: i2$3.FocusMonitor }, { token: i0.ElementRef }, { token: i1$4.NgControl, optional: true, self: true }, { token: i1$4.NgForm, optional: true }, { token: i1$4.FormControlName, optional: true }, { token: i3$2.ErrorStateMatcher }, { token: i3$2.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
3213
3213
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EntityTableComponent, selector: "igo-entity-table", inputs: { store: "store", paginator: "paginator", template: "template", scrollBehavior: "scrollBehavior", sortNullsFirst: "sortNullsFirst", withPaginator: "withPaginator", paginatorOptions: "paginatorOptions" }, outputs: { entityClick: "entityClick", entitySelectChange: "entitySelectChange", entitySortChange: "entitySortChange" }, providers: [
|
|
3214
3214
|
{ provide: MatFormFieldControl, useExisting: EntityTableComponent }
|
|
3215
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:rgba(166,166,166,.2)}:host input{border-bottom:1px solid darkgrey}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: EntityTablePaginatorComponent, selector: "igo-entity-table-paginator", inputs: ["entitySortChange$", "store", "paginatorOptions"], outputs: ["page", "paginatorChange"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EntityTableRowDirective, selector: "[igoEntityTableRow]", inputs: ["selection", "selectOnClick", "highlightSelection", "selected", "scrollBehavior"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3215
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:#a6a6a633}:host input{border-bottom:1px solid darkgrey}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: EntityTablePaginatorComponent, selector: "igo-entity-table-paginator", inputs: ["entitySortChange$", "store", "paginatorOptions"], outputs: ["page", "paginatorChange"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EntityTableRowDirective, selector: "[igoEntityTableRow]", inputs: ["selection", "selectOnClick", "highlightSelection", "selected", "scrollBehavior"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3216
3216
|
}
|
|
3217
3217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntityTableComponent, decorators: [{
|
|
3218
3218
|
type: Component,
|
|
3219
3219
|
args: [{ selector: 'igo-entity-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
3220
3220
|
{ provide: MatFormFieldControl, useExisting: EntityTableComponent }
|
|
3221
|
-
], template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:rgba(166,166,166,.2)}:host input{border-bottom:1px solid darkgrey}\n"] }]
|
|
3221
|
+
], template: "<div class=\"table-container\" [ngStyle]=\"{ height: tableHeight }\">\r\n <table\r\n id=\"currentWorkspaceTable\"\r\n mat-table\r\n matSort\r\n [ngClass]=\"getTableClass()\"\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"getTrackByFunction()\"\r\n (matSortChange)=\"onSort($event)\"\r\n >\r\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ng-container *ngIf=\"selectMany\">\r\n <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n <mat-checkbox\r\n (change)=\"onToggleRows($event.checked)\"\r\n [checked]=\"selectionState === entityTableSelectionState.All\"\r\n [indeterminate]=\"\r\n selectionState === entityTableSelectionState.Some\r\n \"\r\n >\r\n </mat-checkbox>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\r\n (click)=\"\r\n $event.shiftKey\r\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\r\n : $event.stopPropagation()\r\n \"\r\n (change)=\"onToggleRow($event.checked, row.record)\"\r\n [checked]=\"rowIsSelected(row.record)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container\r\n [matColumnDef]=\"column.name\"\r\n *ngFor=\"let column of template.columns\"\r\n >\r\n <ng-container *ngIf=\"columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlDefault\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n {{ row.cellData[column.name].value }}\r\n </td>\r\n <ng-template #isAnUrlDefault>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"!row.cellData[column.name].isUrl; else isAnUrlHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value\"\r\n ></td>\r\n <ng-template #isAnUrlHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text edition\"\r\n [formGroup]=\"formGroup\"\r\n *ngIf=\"isEdition(row.record); else isUnsanitizedHTML\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (dateChange)=\"onDateChange(column.name, row.record, $event)\"\r\n />\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n <input\r\n matInput\r\n type=\"time\"\r\n *ngIf=\"column.type === 'time'\"\r\n [formControlName]=\"column.name\"\r\n step=\"900\"\r\n (focus)=\"column.onFocus($event)\"\r\n (keypress)=\"column.onChange($event)\"\r\n (blur)=\"column.onBlur($event)\"\r\n />\r\n <input\r\n matInput\r\n type=\"number\"\r\n class=\"class_number_edition\"\r\n *ngIf=\"column.type === 'number'\"\r\n [formControlName]=\"column.name\"\r\n step=\"{{ column.step }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n min=\"{{ getValidationAttributeValue(column, 'minValue') }}\"\r\n max=\"{{ getValidationAttributeValue(column, 'maxValue') }}\"\r\n />\r\n <input\r\n matInput\r\n type=\"text\"\r\n *ngIf=\"!column.type || column.type === 'string'\"\r\n [formControlName]=\"column.name\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n (input)=\"onValueChange(column.name, row.record, $event)\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n />\r\n <mat-checkbox\r\n *ngIf=\"column.type === 'boolean'\"\r\n [formControlName]=\"column.name\"\r\n [checked]=\"row.cellData[column.name].value\"\r\n (change)=\"onBooleanValueChange(column.name, row.record, $event)\"\r\n ></mat-checkbox>\r\n <mat-select\r\n *ngIf=\"column.type === 'list'\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n [formControlName]=\"column.name\"\r\n [multiple]=\"column.multiple\"\r\n (selectionChange)=\"\r\n onSelectValueChange(column.name, row.record, $event)\r\n \"\r\n [value]=\"row.cellData[column.name].value\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of column.domainValues\"\r\n [value]=\"option.id\"\r\n [disabled]=\"option.disabled\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [formControlName]=\"column.name\"\r\n *ngIf=\"column.type === 'autocomplete'\"\r\n [matAutocomplete]=\"auto\"\r\n required=\"{{\r\n getValidationAttributeValue(column, 'mandatory')\r\n }}\"\r\n value=\"{{ row.cellData[column.name].value }}\"\r\n readonly=\"{{ getValidationAttributeValue(column, 'readonly') }}\"\r\n />\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n (optionSelected)=\"\r\n onAutocompleteValueChange(column, row.record, $event)\r\n \"\r\n panelWidth=\"430px\"\r\n >\r\n <mat-option\r\n *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n [value]=\"option.id\"\r\n >\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <ng-template #isUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n *ngIf=\"\r\n !row.cellData[column.name].isUrl;\r\n else isAnUrlUnsanitizedHTML\r\n \"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n [innerHTML]=\"row.cellData[column.name].value | sanitizeHtml\"\r\n ></td>\r\n <ng-template #isAnUrlUnsanitizedHTML>\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <a\r\n href=\"{{ row.cellData[column.name].value }}\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <img\r\n igoImageError\r\n *ngIf=\"row.cellData[column.name].isImg; else notImg\"\r\n src=\"{{\r\n row.cellData[column.name].value | secureImage | async\r\n }}\"\r\n width=\"50\"\r\n heigth=\"auto\"\r\n />\r\n <ng-template #notImg\r\n ><span\r\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\r\n </span></ng-template\r\n >\r\n </a>\r\n </td>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let row\"\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <mat-icon\r\n *ngIf=\"column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n (click)=\"column.onClick($event)\"\r\n ></mat-icon>\r\n <mat-icon\r\n *ngIf=\"!column.onClick\"\r\n svgIcon=\"{{ row.cellData[column.name].value || column.icon }}\"\r\n ></mat-icon>\r\n </td>\r\n </ng-container>\r\n <ng-container\r\n *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\"\r\n >\r\n <ng-container *matCellDef=\"let row\">\r\n <td\r\n mat-cell\r\n class=\"mat-cell-text\"\r\n [ngClass]=\"row.cellData[column.name].class\"\r\n >\r\n <span *ngFor=\"let button of row.cellData[column.name].value\">\r\n <ng-container\r\n *ngIf=\"\r\n isEdition(row.record) === button.editMode ||\r\n button.editMode === undefined\r\n \"\r\n >\r\n <button\r\n *ngIf=\"button.style === 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-icon-button\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"button.style !== 'mat-icon-button'\"\r\n igoStopPropagation\r\n mat-mini-fab\r\n [color]=\"button.color\"\r\n (mousedown)=\"onButtonClick(button.click, row.record)\"\r\n [disabled]=\"button.disabled\"\r\n >\r\n <mat-icon svgIcon=\"{{ button.icon }}\"></mat-icon>\r\n </button>\r\n </ng-container>\r\n </span>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\r\n [ngClass]=\"getHeaderClass()\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n igoEntityTableRow\r\n *matRowDef=\"let row; columns: headers\"\r\n [scrollBehavior]=\"scrollBehavior\"\r\n [ngClass]=\"getRowClass(row.record)\"\r\n [selection]=\"selection\"\r\n [selected]=\"rowIsSelected(row.record)\"\r\n (select)=\"onRowSelect(row.record)\"\r\n (click)=\"onRowClick(row.record)\"\r\n ></tr>\r\n </table>\r\n <igo-entity-table-paginator\r\n *ngIf=\"withPaginator\"\r\n [store]=\"store\"\r\n [paginatorOptions]=\"paginatorOptions\"\r\n [entitySortChange$]=\"entitySortChange$\"\r\n (paginatorChange)=\"paginatorChange($event)\"\r\n >\r\n </igo-entity-table-paginator>\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}:host .table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}:host .mat-cell-text{overflow:hidden;word-wrap:break-word}:host entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}:host table button{margin:7px}:host .class_hidden{visibility:hidden}:host .class_display_none{display:none}:host .class_boolean,:host .class_icon,:host .class_number{text-align:center;padding-right:35px!important}:host .class_string,:host .class_text,:host .class_number_edition{text-align:left}:host td.edition{background:#a6a6a633}:host input{border-bottom:1px solid darkgrey}\n"] }]
|
|
3222
3222
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.UntypedFormBuilder }, { type: i2$3.FocusMonitor }, { type: i0.ElementRef }, { type: i1$4.NgControl, decorators: [{
|
|
3223
3223
|
type: Optional
|
|
3224
3224
|
}, {
|