@stemy/ngx-utils 19.2.22 → 19.2.24
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.
- package/fesm2022/stemy-ngx-utils.mjs +12 -11
- package/fesm2022/stemy-ngx-utils.mjs.map +1 -1
- package/ngx-utils/common-types.d.ts +2 -1
- package/ngx-utils/components/drop-list/drop-list.component.d.ts +2 -1
- package/ngx-utils/components/upload/upload.component.d.ts +2 -2
- package/ngx-utils/ngx-utils.imports.d.ts +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +1 -1
|
@@ -6190,11 +6190,11 @@ class DropListComponent {
|
|
|
6190
6190
|
this.onTouched?.();
|
|
6191
6191
|
}
|
|
6192
6192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DropListComponent, isStandalone: false, selector: "drop-list", inputs: { disabled: "disabled", unique: "unique", idField: "idField", labelField: "labelField", value: "value", context: "context", prepareItem: "prepareItem", checkFn: "checkFn", dropFn: "dropFn" }, providers: [{
|
|
6193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DropListComponent, isStandalone: false, selector: "drop-list", inputs: { disabled: "disabled", unique: "unique", message: "message", idField: "idField", labelField: "labelField", value: "value", context: "context", prepareItem: "prepareItem", checkFn: "checkFn", dropFn: "dropFn" }, providers: [{
|
|
6194
6194
|
provide: NG_VALUE_ACCESSOR,
|
|
6195
6195
|
useExisting: forwardRef(() => DropListComponent),
|
|
6196
6196
|
multi: true,
|
|
6197
|
-
}], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\n <div class=\"drop-list-item-label\">\n {{ item | getValue:labelField }}\n </div>\n</ng-template>\n<div class=\"drop-list\"\n #list\n (dragenter)=\"onDragEnter($event, list, this)\"\n (dragleave)=\"onDragLeave($event, list)\"\n (drop)=\"onDrop($event, list)\">\n <ng-container *ngFor=\"let id of value; let ix = index\">\n <div class=\"drop-list-item\">\n <ng-template #noItemTemplate>\n <div class=\"drop-list-item-label just-id\">\n {{ id }}\n </div>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n <
|
|
6197
|
+
}], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\n <div class=\"drop-list-item-label\">\n {{ item | getValue:labelField }}\n </div>\n</ng-template>\n<div class=\"drop-list\"\n #list\n (dragenter)=\"onDragEnter($event, list, this)\"\n (dragleave)=\"onDragLeave($event, list)\"\n (drop)=\"onDrop($event, list)\">\n <div class=\"drop-list-message\"\n [ngClass]=\"{'has-value': value?.length}\"\n [innerHTML]=\"message | translate | safe:'html'\"\n *ngIf=\"message\">\n </div>\n <ng-container *ngFor=\"let id of value; let ix = index\">\n <div class=\"drop-list-item\">\n <ng-template #noItemTemplate>\n <div class=\"drop-list-item-label just-id\">\n {{ id }}\n </div>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n </div>\n </ng-container>\n</div>\n", styles: [".drop-list{--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.drop-list a.remove-item-btn:after{--rotation: -45deg}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6198
6198
|
}
|
|
6199
6199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropListComponent, decorators: [{
|
|
6200
6200
|
type: Component,
|
|
@@ -6202,11 +6202,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6202
6202
|
provide: NG_VALUE_ACCESSOR,
|
|
6203
6203
|
useExisting: forwardRef(() => DropListComponent),
|
|
6204
6204
|
multi: true,
|
|
6205
|
-
}], template: "<ng-template #defaultTemplate let-item=\"item\">\n <div class=\"drop-list-item-label\">\n {{ item | getValue:labelField }}\n </div>\n</ng-template>\n<div class=\"drop-list\"\n #list\n (dragenter)=\"onDragEnter($event, list, this)\"\n (dragleave)=\"onDragLeave($event, list)\"\n (drop)=\"onDrop($event, list)\">\n <ng-container *ngFor=\"let id of value; let ix = index\">\n <div class=\"drop-list-item\">\n <ng-template #noItemTemplate>\n <div class=\"drop-list-item-label just-id\">\n {{ id }}\n </div>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n <
|
|
6205
|
+
}], template: "<ng-template #defaultTemplate let-item=\"item\">\n <div class=\"drop-list-item-label\">\n {{ item | getValue:labelField }}\n </div>\n</ng-template>\n<div class=\"drop-list\"\n #list\n (dragenter)=\"onDragEnter($event, list, this)\"\n (dragleave)=\"onDragLeave($event, list)\"\n (drop)=\"onDrop($event, list)\">\n <div class=\"drop-list-message\"\n [ngClass]=\"{'has-value': value?.length}\"\n [innerHTML]=\"message | translate | safe:'html'\"\n *ngIf=\"message\">\n </div>\n <ng-container *ngFor=\"let id of value; let ix = index\">\n <div class=\"drop-list-item\">\n <ng-template #noItemTemplate>\n <div class=\"drop-list-item-label just-id\">\n {{ id }}\n </div>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n </div>\n </ng-container>\n</div>\n", styles: [".drop-list{--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.drop-list a.remove-item-btn:after{--rotation: -45deg}\n"] }]
|
|
6206
6206
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
6207
6207
|
type: Input
|
|
6208
6208
|
}], unique: [{
|
|
6209
6209
|
type: Input
|
|
6210
|
+
}], message: [{
|
|
6211
|
+
type: Input
|
|
6210
6212
|
}], idField: [{
|
|
6211
6213
|
type: Input
|
|
6212
6214
|
}], labelField: [{
|
|
@@ -6527,11 +6529,11 @@ class DynamicTableComponent {
|
|
|
6527
6529
|
});
|
|
6528
6530
|
}
|
|
6529
6531
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6530
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n </ng-template>\r\n <ng-template #pureTemplate>\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n </ng-template>\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: templates[column],\r\n column: column\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr draggable=\"true\"\r\n #elem\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </ng-template>\r\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n <div class=\"table-dropdown table-sort-dropdown\" dd #sortDd=\"dropdown\" *ngIf=\"orderBy\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <div class=\"table-dropdown normal-dropdown\" dd>\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a class=\"dropdown-link\">{{ itemsPerPage }}</a>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <ng-template #optionItem let-option=\"option\">\r\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\r\n </ng-template>\r\n <div class=\"table-dropdown normal-dropdown\" dd [closeInside]=\"false\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a [ngClass]=\"'dropdown-link filter-link-' + column\">\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ realColumns[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </a>\r\n </div>\r\n <ul dropdownContent>\r\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n (click)=\"setQueryValue(column, option)\"\r\n *ngFor=\"let option of realColumns[column].enum\">\r\n <a [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .table-toggle,.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .table-toggle .toggle-placeholder,.dynamic-table .table-toggle ::placeholder,.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-toggle{cursor:pointer;min-width:fit-content}.dynamic-table .table-dropdown{position:relative;z-index:2;display:inline-block;width:calc(var(--list-width, 0));min-width:fit-content}.dynamic-table .table-dropdown a,.dynamic-table .table-dropdown span{white-space:nowrap}.dynamic-table .table-dropdown.table-sort-dropdown{display:none}.dynamic-table .table-dropdown .svg-icon{pointer-events:none}.dynamic-table .table-dropdown ul{margin:-1px 0 0;padding:0;list-style:none;position:absolute;z-index:1;width:100%;border-radius:0 0 5px 5px;overflow:hidden;height:0;min-height:0;min-width:fit-content;transition:height .25s}.dynamic-table .table-dropdown li{background:var(--bg-color);color:var(--text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px}.dynamic-table .table-dropdown.table-sort-dropdown .table-toggle:hover,.dynamic-table .table-dropdown li:hover,.dynamic-table .table-dropdown li.active{background-color:var(--highlight-color);color:#fff}.dynamic-table .table-dropdown.open .table-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}.dynamic-table .table-dropdown.open ul{height:auto;box-shadow:0 0 0 var(--border-size) var(--border-color)}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.dynamic-table .table-features-row:not(:empty){margin-bottom:20px}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .table-dropdown,.dynamic-table table.table thead th .search-input{width:calc(100% - 10px)}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color)}.dynamic-table a.sort,.dynamic-table a.dropdown-link{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.dynamic-table a.sort:before,.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:before,.dynamic-table a.dropdown-link:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color)}.dynamic-table a.sort:before,.dynamic-table a.dropdown-link:before{transform:rotate(calc(var(--arrow-rotation) * -1deg)) translate(var(--arrow-space))}.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:after{transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.dynamic-table a.sort.sort-desc:before,.dynamic-table a.dropdown-link.sort-desc:before{--arrow-color: black}.dynamic-table a.sort.sort-asc:after,.dynamic-table a.dropdown-link.sort-asc:after{--arrow-color: black}.dynamic-table .normal-dropdown a:before{display:none}.dynamic-table .normal-dropdown a:after{--arrow-color: black;--arrow-space: 0}.dynamic-table .normal-dropdown.open{--arrow-rotation: -90}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.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: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6532
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n </ng-template>\r\n <ng-template #pureTemplate>\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n </ng-template>\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: templates[column],\r\n column: column\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr draggable=\"true\"\r\n #elem\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </ng-template>\r\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n <div class=\"table-dropdown table-sort-dropdown\" dd #sortDd=\"dropdown\" *ngIf=\"orderBy\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <div class=\"table-dropdown normal-dropdown\" dd>\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a class=\"dropdown-link\">{{ itemsPerPage }}</a>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <ng-template #optionItem let-option=\"option\">\r\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\r\n </ng-template>\r\n <div class=\"table-dropdown normal-dropdown\" dd [closeInside]=\"false\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a [ngClass]=\"'dropdown-link filter-link-' + column\">\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ realColumns[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </a>\r\n </div>\r\n <ul dropdownContent>\r\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n (click)=\"setQueryValue(column, option)\"\r\n *ngFor=\"let option of realColumns[column].enum\">\r\n <a [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .table-toggle,.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .table-toggle .toggle-placeholder,.dynamic-table .table-toggle ::placeholder,.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-toggle{cursor:pointer;min-width:fit-content}.dynamic-table .table-dropdown{position:relative;z-index:2;display:inline-block;width:calc(var(--list-width, 0));min-width:fit-content}.dynamic-table .table-dropdown a,.dynamic-table .table-dropdown span{white-space:nowrap}.dynamic-table .table-dropdown.table-sort-dropdown{display:none}.dynamic-table .table-dropdown .svg-icon{pointer-events:none}.dynamic-table .table-dropdown ul{margin:-1px 0 0;padding:0;list-style:none;position:absolute;z-index:1;width:100%;border-radius:0 0 5px 5px;overflow:hidden;height:0;min-height:0;min-width:fit-content;transition:height .25s}.dynamic-table .table-dropdown li{background:var(--bg-color);color:var(--text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px}.dynamic-table .table-dropdown.table-sort-dropdown .table-toggle:hover,.dynamic-table .table-dropdown li:hover,.dynamic-table .table-dropdown li.active{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-dropdown.open .table-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}.dynamic-table .table-dropdown.open ul{height:auto;box-shadow:0 0 0 var(--border-size) var(--border-color)}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.dynamic-table .table-features-row:not(:empty){margin-bottom:20px}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .table-dropdown,.dynamic-table table.table thead th .search-input{width:calc(100% - 10px)}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table a.sort,.dynamic-table a.dropdown-link{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.dynamic-table a.sort:before,.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:before,.dynamic-table a.dropdown-link:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color)}.dynamic-table a.sort:before,.dynamic-table a.dropdown-link:before{transform:rotate(calc(var(--arrow-rotation) * -1deg)) translate(var(--arrow-space))}.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:after{transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.dynamic-table a.sort.sort-desc:before,.dynamic-table a.dropdown-link.sort-desc:before{--arrow-color: black}.dynamic-table a.sort.sort-asc:after,.dynamic-table a.dropdown-link.sort-asc:after{--arrow-color: black}.dynamic-table .normal-dropdown a:before{display:none}.dynamic-table .normal-dropdown a:after{--arrow-color: black;--arrow-space: 0}.dynamic-table .normal-dropdown.open{--arrow-rotation: -90}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.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: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6531
6533
|
}
|
|
6532
6534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
6533
6535
|
type: Component,
|
|
6534
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n </ng-template>\r\n <ng-template #pureTemplate>\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n </ng-template>\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: templates[column],\r\n column: column\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr draggable=\"true\"\r\n #elem\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </ng-template>\r\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n <div class=\"table-dropdown table-sort-dropdown\" dd #sortDd=\"dropdown\" *ngIf=\"orderBy\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <div class=\"table-dropdown normal-dropdown\" dd>\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a class=\"dropdown-link\">{{ itemsPerPage }}</a>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <ng-template #optionItem let-option=\"option\">\r\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\r\n </ng-template>\r\n <div class=\"table-dropdown normal-dropdown\" dd [closeInside]=\"false\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a [ngClass]=\"'dropdown-link filter-link-' + column\">\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ realColumns[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </a>\r\n </div>\r\n <ul dropdownContent>\r\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n (click)=\"setQueryValue(column, option)\"\r\n *ngFor=\"let option of realColumns[column].enum\">\r\n <a [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .table-toggle,.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .table-toggle .toggle-placeholder,.dynamic-table .table-toggle ::placeholder,.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-toggle{cursor:pointer;min-width:fit-content}.dynamic-table .table-dropdown{position:relative;z-index:2;display:inline-block;width:calc(var(--list-width, 0));min-width:fit-content}.dynamic-table .table-dropdown a,.dynamic-table .table-dropdown span{white-space:nowrap}.dynamic-table .table-dropdown.table-sort-dropdown{display:none}.dynamic-table .table-dropdown .svg-icon{pointer-events:none}.dynamic-table .table-dropdown ul{margin:-1px 0 0;padding:0;list-style:none;position:absolute;z-index:1;width:100%;border-radius:0 0 5px 5px;overflow:hidden;height:0;min-height:0;min-width:fit-content;transition:height .25s}.dynamic-table .table-dropdown li{background:var(--bg-color);color:var(--text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px}.dynamic-table .table-dropdown.table-sort-dropdown .table-toggle:hover,.dynamic-table .table-dropdown li:hover,.dynamic-table .table-dropdown li.active{background-color:var(--highlight-color);color:#fff}.dynamic-table .table-dropdown.open .table-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}.dynamic-table .table-dropdown.open ul{height:auto;box-shadow:0 0 0 var(--border-size) var(--border-color)}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.dynamic-table .table-features-row:not(:empty){margin-bottom:20px}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .table-dropdown,.dynamic-table table.table thead th .search-input{width:calc(100% - 10px)}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color)}.dynamic-table a.sort,.dynamic-table a.dropdown-link{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.dynamic-table a.sort:before,.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:before,.dynamic-table a.dropdown-link:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color)}.dynamic-table a.sort:before,.dynamic-table a.dropdown-link:before{transform:rotate(calc(var(--arrow-rotation) * -1deg)) translate(var(--arrow-space))}.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:after{transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.dynamic-table a.sort.sort-desc:before,.dynamic-table a.dropdown-link.sort-desc:before{--arrow-color: black}.dynamic-table a.sort.sort-asc:after,.dynamic-table a.dropdown-link.sort-asc:after{--arrow-color: black}.dynamic-table .normal-dropdown a:before{display:none}.dynamic-table .normal-dropdown a:after{--arrow-color: black;--arrow-space: 0}.dynamic-table .normal-dropdown.open{--arrow-rotation: -90}\n"] }]
|
|
6536
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n </ng-template>\r\n <ng-template #pureTemplate>\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n </ng-template>\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: templates[column],\r\n column: column\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr draggable=\"true\"\r\n #elem\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </ng-template>\r\n <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ realColumns[column].title | translate }}</span>\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n <div class=\"table-dropdown table-sort-dropdown\" dd #sortDd=\"dropdown\" *ngIf=\"orderBy\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <div class=\"table-dropdown normal-dropdown\" dd>\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a class=\"dropdown-link\">{{ itemsPerPage }}</a>\r\n </div>\r\n <ul dropdownContent>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n <ng-template #optionItem let-option=\"option\">\r\n {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\r\n </ng-template>\r\n <div class=\"table-dropdown normal-dropdown\" dd [closeInside]=\"false\">\r\n <div class=\"table-toggle\" dropdownToggle>\r\n <a [ngClass]=\"'dropdown-link filter-link-' + column\">\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ realColumns[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </a>\r\n </div>\r\n <ul dropdownContent>\r\n <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n (click)=\"setQueryValue(column, option)\"\r\n *ngFor=\"let option of realColumns[column].enum\">\r\n <a [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"realColumns[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--border-color: #ced4da;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table .table-toggle,.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);box-shadow:0 0 0 var(--border-size) var(--border-color);border:none;border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .table-toggle .toggle-placeholder,.dynamic-table .table-toggle ::placeholder,.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-toggle{cursor:pointer;min-width:fit-content}.dynamic-table .table-dropdown{position:relative;z-index:2;display:inline-block;width:calc(var(--list-width, 0));min-width:fit-content}.dynamic-table .table-dropdown a,.dynamic-table .table-dropdown span{white-space:nowrap}.dynamic-table .table-dropdown.table-sort-dropdown{display:none}.dynamic-table .table-dropdown .svg-icon{pointer-events:none}.dynamic-table .table-dropdown ul{margin:-1px 0 0;padding:0;list-style:none;position:absolute;z-index:1;width:100%;border-radius:0 0 5px 5px;overflow:hidden;height:0;min-height:0;min-width:fit-content;transition:height .25s}.dynamic-table .table-dropdown li{background:var(--bg-color);color:var(--text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px}.dynamic-table .table-dropdown.table-sort-dropdown .table-toggle:hover,.dynamic-table .table-dropdown li:hover,.dynamic-table .table-dropdown li.active{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-dropdown.open .table-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}.dynamic-table .table-dropdown.open ul{height:auto;box-shadow:0 0 0 var(--border-size) var(--border-color)}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.dynamic-table .table-features-row:not(:empty){margin-bottom:20px}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .table-dropdown,.dynamic-table table.table thead th .search-input{width:calc(100% - 10px)}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table a.sort,.dynamic-table a.dropdown-link{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.dynamic-table a.sort:before,.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:before,.dynamic-table a.dropdown-link:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color)}.dynamic-table a.sort:before,.dynamic-table a.dropdown-link:before{transform:rotate(calc(var(--arrow-rotation) * -1deg)) translate(var(--arrow-space))}.dynamic-table a.sort:after,.dynamic-table a.dropdown-link:after{transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.dynamic-table a.sort.sort-desc:before,.dynamic-table a.dropdown-link.sort-desc:before{--arrow-color: black}.dynamic-table a.sort.sort-asc:after,.dynamic-table a.dropdown-link.sort-asc:after{--arrow-color: black}.dynamic-table .normal-dropdown a:before{display:none}.dynamic-table .normal-dropdown a:after{--arrow-color: black;--arrow-space: 0}.dynamic-table .normal-dropdown.open{--arrow-rotation: -90}\n"] }]
|
|
6535
6537
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
|
|
6536
6538
|
type: Input
|
|
6537
6539
|
}], data: [{
|
|
@@ -6862,11 +6864,11 @@ class UploadComponent {
|
|
|
6862
6864
|
return results.filter(r => r !== null);
|
|
6863
6865
|
}
|
|
6864
6866
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6865
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", accept: "accept", baseUrl: "baseUrl", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [{
|
|
6867
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", accept: "accept", baseUrl: "baseUrl", message: "message", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [{
|
|
6866
6868
|
provide: NG_VALUE_ACCESSOR,
|
|
6867
6869
|
useExisting: forwardRef(() => UploadComponent),
|
|
6868
6870
|
multi: true,
|
|
6869
|
-
}], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }
|
|
6871
|
+
}], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ buttonText | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ 'button.download' | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\r\n <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n <input type=\"file\"\r\n #input\r\n [multiple]=\"multiple\"\r\n [accept]=\"acceptAttr\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDrop()\"\r\n (drop)=\"onDrop()\"\r\n (click)=\"onInputClick($event)\"\r\n (blur)=\"onTouched($event)\"\r\n (change)=\"onInputChange($event)\"/>\r\n <div class=\"upload-message\"\r\n [ngClass]=\"{'has-value': value?.length}\"\r\n [innerHTML]=\"message | translate | safe:'html'\"\r\n *ngIf=\"message\">\r\n </div>\r\n <div class=\"upload-container\">\r\n\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{item: value, index: 0}\"\r\n *ngIf=\"!multiple && value\">\r\n </ng-container>\r\n <ng-container *ngIf=\"multiple\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{item: image, index: ix}\"\r\n *ngFor=\"let image of value; let ix = index\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"upload-item\"\r\n [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n *ngFor=\"let proc of processing\">\r\n <div class=\"upload-progress\">\r\n <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"upload-btn\" (click)=\"input.click()\">\r\n <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\r\n [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.upload a.remove-item-btn:after{--rotation: -45deg}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6870
6872
|
}
|
|
6871
6873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, decorators: [{
|
|
6872
6874
|
type: Component,
|
|
@@ -6874,7 +6876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6874
6876
|
provide: NG_VALUE_ACCESSOR,
|
|
6875
6877
|
useExisting: forwardRef(() => UploadComponent),
|
|
6876
6878
|
multi: true,
|
|
6877
|
-
}], template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ buttonText | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ 'button.download' | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #
|
|
6879
|
+
}], template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ buttonText | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ 'button.download' | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\r\n <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n <input type=\"file\"\r\n #input\r\n [multiple]=\"multiple\"\r\n [accept]=\"acceptAttr\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDrop()\"\r\n (drop)=\"onDrop()\"\r\n (click)=\"onInputClick($event)\"\r\n (blur)=\"onTouched($event)\"\r\n (change)=\"onInputChange($event)\"/>\r\n <div class=\"upload-message\"\r\n [ngClass]=\"{'has-value': value?.length}\"\r\n [innerHTML]=\"message | translate | safe:'html'\"\r\n *ngIf=\"message\">\r\n </div>\r\n <div class=\"upload-container\">\r\n\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{item: value, index: 0}\"\r\n *ngIf=\"!multiple && value\">\r\n </ng-container>\r\n <ng-container *ngIf=\"multiple\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{item: image, index: ix}\"\r\n *ngFor=\"let image of value; let ix = index\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"upload-item\"\r\n [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n *ngFor=\"let proc of processing\">\r\n <div class=\"upload-progress\">\r\n <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"upload-btn\" (click)=\"input.click()\">\r\n <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\r\n [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.upload a.remove-item-btn:after{--rotation: -45deg}\n"] }]
|
|
6878
6880
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
6879
6881
|
type: Inject,
|
|
6880
6882
|
args: [API_SERVICE]
|
|
@@ -6889,6 +6891,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6889
6891
|
type: Input
|
|
6890
6892
|
}], baseUrl: [{
|
|
6891
6893
|
type: Input
|
|
6894
|
+
}], message: [{
|
|
6895
|
+
type: Input
|
|
6892
6896
|
}], multiple: [{
|
|
6893
6897
|
type: Input
|
|
6894
6898
|
}], buttonText: [{
|
|
@@ -6904,9 +6908,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6904
6908
|
}], uploadButton: [{
|
|
6905
6909
|
type: ContentChild,
|
|
6906
6910
|
args: ["uploadButton"]
|
|
6907
|
-
}], removeButton: [{
|
|
6908
|
-
type: ContentChild,
|
|
6909
|
-
args: ["removeButton"]
|
|
6910
6911
|
}] } });
|
|
6911
6912
|
|
|
6912
6913
|
// --- Pipes ---
|