chrv-components 1.10.25 → 1.10.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
Binary file
|
|
@@ -2795,7 +2795,7 @@ class ChrDataTable {
|
|
|
2795
2795
|
return value;
|
|
2796
2796
|
}
|
|
2797
2797
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChrDataTable, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2798
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ChrDataTable, isStandalone: true, selector: "chr-table", inputs: { data: "data", selectable: "selectable", selection: "selection", actions: "actions",
|
|
2798
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ChrDataTable, isStandalone: true, selector: "chr-table", inputs: { data: "data", selectable: "selectable", selection: "selection", actions: "actions", isAsc: "isAsc", sortBy: "sortBy", pageSize: "pageSize", currentPage: "currentPage", id: "id", color: "color", columns: "columns" }, outputs: { selectionChange: "selectionChange", isAscChange: "isAscChange", sortByChange: "sortByChange", pageSizeChange: "pageSizeChange", currentPageChange: "currentPageChange" }, providers: [PaginationService], ngImport: i0, template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"selectable\" [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" class=\"w-min\">\r\n </th>\r\n <th *ngFor=\"let column of columns || []\" class=\"header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <p class=\"header-cell-content\">{{column.display}}</p>\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"sortBy == column.properties && isAsc\">arrow_upward</mat-icon>\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"sortBy == column.properties && !isAsc\">arrow_downward</mat-icon>\r\n </div>\r\n </th>\r\n <th *ngIf=\"actions\" class=\"actions-header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngIf=\"data === null || data === undefined || data.length <= 0\">\r\n <td *ngIf=\"selectable\"></td>\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n <tr [ngClass]=\"getBorderColor(color)\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <td *ngIf=\"selectable\" class=\"w-min\">\r\n <input type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </td>\r\n <td *ngFor=\"let column of columns || []\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"actions\">\r\n <div class=\"actions-cell\">\r\n <app-chr-button *ngFor=\"let action of actions\" [display]=\"action.display\" [icon]=\"action.icon\"\r\n [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<app-chr-paginator [id]=\"this.id\" [(pageSize)]=\"pageSize\" [(page)]=\"currentPage\" (pageSizeChange)=\"emitPageSize($event)\"\r\n (pageChange)=\"emitCurrentPage($event)\"></app-chr-paginator>\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val}}</p>\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val | date: column.format}}</p>\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n <a *ngIf=\"column.callback? column.callback(value) : value as val\" target=\"_blank\"\r\n [href]=\"column.url + '/'+ val\">{{val}}</a>\r\n</ng-template>\r\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\">\r\n <app-chr-form class=\"form-wrapper\" [model]=\"{key: value}\"\r\n (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\r\n {\r\n controls:[\r\n {\r\n name: 'key',\r\n type: column.inputType || 'text',\r\n validations: column.validations,\r\n width: 'row'\r\n }\r\n ]\r\n }\r\n ]\">\r\n </app-chr-form>\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n <div *ngIf=\"column.callback? column.callback(value) : value as val\"\r\n class=\"w-full h-full flex flex-row items-center align-middle\">\r\n <span *ngIf=\"column.chips?.[val] as chip\"\r\n class=\"w-full flex text-center content-center align-middle items-center justify-center text-xs font-medium py-0.5 rounded-full\"\r\n [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\r\n {{ chip.display }}\r\n </span>\r\n </div>\r\n</ng-template>", styles: ["table{table-layout:auto;width:100%;box-shadow:1px 6px 10px #0003;border-radius:.5rem}td>*{text-wrap:pretty}th{height:3rem;padding:.5rem .25rem;text-align:left}th:is(:first-child){border-top-left-radius:.25rem}th:is(:last-child){border-top-right-radius:.25rem}td{color:var(--text-color)}td:is(:first-child){border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}td:is(:last-child){border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}tr{border-radius:.5rem}tr{border-bottom-width:2px}tr:is(:last-child){border:0}td{height:3rem;padding:.25rem .125rem}tr:nth-child(2n){background-color:var(--neutral-color)}.header-cell{cursor:pointer}.header-cell-content-wrapper{color:inherit;display:flex;flex-direction:row;width:100%;height:100%;justify-content:space-between;align-items:center}.header-cell-content{color:inherit}.actions-cell{display:flex;flex-direction:row;flex:1;gap:.5rem}.actions-header-cell{text-align:center}::ng-deep .form-wrapper *{padding:0!important;margin:0!important}::ng-deep .form-wrapper{display:flex;flex-direction:row;align-items:center;align-content:center;justify-items:center;width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i1.PaginatePipe, name: "paginate" }, { kind: "component", type: ChrButtonComponent, selector: "app-chr-button", inputs: ["display", "icon", "click", "clickWhileDisabled", "color", "textColor", "flat", "predicate", "type", "href", "target", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: ChrFormComponent, selector: "app-chr-form", inputs: ["sections", "controls", "validators", "valid", "model", "disabled", "submit", "compact", "debounceTime", "tabDisplay", "form"], outputs: ["validChange", "modelChange", "valuesChanges", "formChange", "valueChanges", "formChanges"] }, { kind: "pipe", type: SortPipe, name: "sort" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TabToInputHandlerDirective, selector: "[tab-input-only]" }] }); }
|
|
2799
2799
|
}
|
|
2800
2800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChrDataTable, decorators: [{
|
|
2801
2801
|
type: Component,
|
|
@@ -2808,7 +2808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2808
2808
|
SortPipe,
|
|
2809
2809
|
MatIcon,
|
|
2810
2810
|
TabToInputHandlerDirective,
|
|
2811
|
-
], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"selectable\" [
|
|
2811
|
+
], providers: [PaginationService], template: "<table class=\"hidden md:!table chr-table\">\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"selectable\" [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" class=\"w-min\">\r\n </th>\r\n <th *ngFor=\"let column of columns || []\" class=\"header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\" (click)=\"sort(column.properties)\">\r\n <div class=\"header-cell-content-wrapper\">\r\n <p class=\"header-cell-content\">{{column.display}}</p>\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"sortBy == column.properties && isAsc\">arrow_upward</mat-icon>\r\n <!-- \uD83E\uDC71 \uD83E\uDC73 -->\r\n <mat-icon class=\"header-cell-content\"\r\n *ngIf=\"sortBy == column.properties && !isAsc\">arrow_downward</mat-icon>\r\n </div>\r\n </th>\r\n <th *ngIf=\"actions\" class=\"actions-header-cell\"\r\n [ngClass]=\"[getBackgroundColor(color), getContrastTextColor(color)]\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngIf=\"data === null || data === undefined || data.length <= 0\">\r\n <td *ngIf=\"selectable\"></td>\r\n <td>Pas de donn\u00E9es</td>\r\n </tr>\r\n <tr [ngClass]=\"getBorderColor(color)\"\r\n *ngFor=\"let entry of (data || []) | sort:isAsc:sortBy | paginate: {itemsPerPage: pageSize, currentPage: currentPage, id: this.id};\">\r\n <td *ngIf=\"selectable\" class=\"w-min\">\r\n <input type=\"checkbox\" (click)=\"select(entry, $event)\" [checked]=\"contains(entry)\" />\r\n </td>\r\n <td *ngFor=\"let column of columns || []\" [ngSwitch]=\"column.type\" tab-input-only>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\" [ngTemplateOutlet]=\"date\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" class=\"form-wrapper\"\r\n [ngTemplateOutletContext]=\"{entry: entry, value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{value: getNestedProperty(entry, column.properties), column: column}\">\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"actions\">\r\n <div class=\"actions-cell\">\r\n <app-chr-button *ngFor=\"let action of actions\" [display]=\"action.display\" [icon]=\"action.icon\"\r\n [click]=\"action.callback.bind(null, entry)\" [color]=\"action.color\" [disabled]=\"\r\n action.disabledCallback\r\n ? action.disabledCallback(entry)\r\n : action.disabled || false\">\r\n </app-chr-button>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <tfoot></tfoot>\r\n</table>\r\n\r\n<app-chr-paginator [id]=\"this.id\" [(pageSize)]=\"pageSize\" [(page)]=\"currentPage\" (pageSizeChange)=\"emitPageSize($event)\"\r\n (pageChange)=\"emitCurrentPage($event)\"></app-chr-paginator>\r\n\r\n<!-- CELL TEMPLATES -->\r\n<ng-template #default let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val}}</p>\r\n</ng-template>\r\n<ng-template #date let-column='column' let-value=\"value\">\r\n <p *ngIf=\"column.callback? column.callback(value) : value as val\">{{val | date: column.format}}</p>\r\n</ng-template>\r\n<ng-template #link let-column='column' let-value=\"value\">\r\n <a *ngIf=\"column.callback? column.callback(value) : value as val\" target=\"_blank\"\r\n [href]=\"column.url + '/'+ val\">{{val}}</a>\r\n</ng-template>\r\n<ng-template #input let-entry=\"entry\" let-column='column' let-value=\"value\">\r\n <app-chr-form class=\"form-wrapper\" [model]=\"{key: value}\"\r\n (modelChange)=\"updateModel(entry, column.properties, $event)\" [sections]=\"[\r\n {\r\n controls:[\r\n {\r\n name: 'key',\r\n type: column.inputType || 'text',\r\n validations: column.validations,\r\n width: 'row'\r\n }\r\n ]\r\n }\r\n ]\">\r\n </app-chr-form>\r\n</ng-template>\r\n<ng-template #chip let-column='column' let-value=\"value\">\r\n <div *ngIf=\"column.callback? column.callback(value) : value as val\"\r\n class=\"w-full h-full flex flex-row items-center align-middle\">\r\n <span *ngIf=\"column.chips?.[val] as chip\"\r\n class=\"w-full flex text-center content-center align-middle items-center justify-center text-xs font-medium py-0.5 rounded-full\"\r\n [ngClass]=\"[getBackgroundColor(chip.color), getContrastTextColor(chip.color)]\">\r\n {{ chip.display }}\r\n </span>\r\n </div>\r\n</ng-template>", styles: ["table{table-layout:auto;width:100%;box-shadow:1px 6px 10px #0003;border-radius:.5rem}td>*{text-wrap:pretty}th{height:3rem;padding:.5rem .25rem;text-align:left}th:is(:first-child){border-top-left-radius:.25rem}th:is(:last-child){border-top-right-radius:.25rem}td{color:var(--text-color)}td:is(:first-child){border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}td:is(:last-child){border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}tr{border-radius:.5rem}tr{border-bottom-width:2px}tr:is(:last-child){border:0}td{height:3rem;padding:.25rem .125rem}tr:nth-child(2n){background-color:var(--neutral-color)}.header-cell{cursor:pointer}.header-cell-content-wrapper{color:inherit;display:flex;flex-direction:row;width:100%;height:100%;justify-content:space-between;align-items:center}.header-cell-content{color:inherit}.actions-cell{display:flex;flex-direction:row;flex:1;gap:.5rem}.actions-header-cell{text-align:center}::ng-deep .form-wrapper *{padding:0!important;margin:0!important}::ng-deep .form-wrapper{display:flex;flex-direction:row;align-items:center;align-content:center;justify-items:center;width:100%!important}\n"] }]
|
|
2812
2812
|
}], ctorParameters: () => [{ type: DataService }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
|
|
2813
2813
|
type: Input
|
|
2814
2814
|
}], selectable: [{
|
|
@@ -2819,8 +2819,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2819
2819
|
type: Output
|
|
2820
2820
|
}], actions: [{
|
|
2821
2821
|
type: Input
|
|
2822
|
-
}], actionsWidth: [{
|
|
2823
|
-
type: Input
|
|
2824
2822
|
}], isAsc: [{
|
|
2825
2823
|
type: Input
|
|
2826
2824
|
}], isAscChange: [{
|