@abp/ng.components 10.0.2 → 10.1.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/abp-ng.components-chart.js.mjs +7 -7
- package/fesm2022/abp-ng.components-chart.js.mjs.map +1 -1
- package/fesm2022/abp-ng.components-extensible.mjs +53 -53
- package/fesm2022/abp-ng.components-extensible.mjs.map +1 -1
- package/fesm2022/abp-ng.components-lookup.mjs +107 -0
- package/fesm2022/abp-ng.components-lookup.mjs.map +1 -0
- package/fesm2022/abp-ng.components-page.mjs +19 -19
- package/fesm2022/abp-ng.components-page.mjs.map +1 -1
- package/fesm2022/abp-ng.components-tree.mjs +14 -14
- package/fesm2022/abp-ng.components-tree.mjs.map +1 -1
- package/fesm2022/abp-ng.components.mjs.map +1 -1
- package/package.json +16 -12
- package/{extensible/index.d.ts → types/abp-ng.components-extensible.d.ts} +2 -2
- package/types/abp-ng.components-lookup.d.ts +46 -0
- /package/{chart.js/index.d.ts → types/abp-ng.components-chart.js.d.ts} +0 -0
- /package/{page/index.d.ts → types/abp-ng.components-page.d.ts} +0 -0
- /package/{tree/index.d.ts → types/abp-ng.components-tree.d.ts} +0 -0
- /package/{index.d.ts → types/abp-ng.components.d.ts} +0 -0
|
@@ -11,7 +11,7 @@ import { RestService, ConfigStateService, AbpValidators, LocalizationPipe, Track
|
|
|
11
11
|
import { of, Subject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, map as map$1, filter, merge, pipe, zip } from 'rxjs';
|
|
12
12
|
import { map, debounceTime, distinctUntilChanged, switchMap, filter as filter$1, take } from 'rxjs/operators';
|
|
13
13
|
import { LinkedList } from '@abp/utils';
|
|
14
|
-
import {
|
|
14
|
+
import { NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe, isPlatformBrowser } from '@angular/common';
|
|
15
15
|
import * as i1$1 from '@swimlane/ngx-datatable';
|
|
16
16
|
import { SelectionType, NgxDatatableModule } from '@swimlane/ngx-datatable';
|
|
17
17
|
|
|
@@ -22,9 +22,9 @@ function selfFactory(dependency) {
|
|
|
22
22
|
class ExtensibleDateTimePickerComponent {
|
|
23
23
|
constructor() {
|
|
24
24
|
this.cdRef = inject(ChangeDetectorRef);
|
|
25
|
-
this.prop = input();
|
|
26
|
-
this.meridian = input(false);
|
|
27
|
-
this.placement = input('bottom-left');
|
|
25
|
+
this.prop = input(...(ngDevMode ? [undefined, { debugName: "prop" }] : []));
|
|
26
|
+
this.meridian = input(false, ...(ngDevMode ? [{ debugName: "meridian" }] : []));
|
|
27
|
+
this.placement = input('bottom-left', ...(ngDevMode ? [{ debugName: "placement" }] : []));
|
|
28
28
|
}
|
|
29
29
|
setDate(dateStr) {
|
|
30
30
|
this.date.writeValue(dateStr);
|
|
@@ -32,8 +32,8 @@ class ExtensibleDateTimePickerComponent {
|
|
|
32
32
|
setTime(dateStr) {
|
|
33
33
|
this.time.writeValue(dateStr);
|
|
34
34
|
}
|
|
35
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: ExtensibleDateTimePickerComponent, isStandalone: true, selector: "abp-extensible-date-time-picker", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "date", first: true, predicate: NgbInputDatepicker, descendants: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true }], exportAs: ["abpExtensibleDateTimePicker"], ngImport: i0, template: `
|
|
37
37
|
<input
|
|
38
38
|
[id]="prop().id"
|
|
39
39
|
[formControlName]="prop().name"
|
|
@@ -68,7 +68,7 @@ class ExtensibleDateTimePickerComponent {
|
|
|
68
68
|
},
|
|
69
69
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
70
70
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleDateTimePickerComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
73
|
args: [{
|
|
74
74
|
exportAs: 'abpExtensibleDateTimePicker',
|
|
@@ -116,7 +116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
|
|
|
116
116
|
},
|
|
117
117
|
],
|
|
118
118
|
}]
|
|
119
|
-
}], propDecorators: { date: [{
|
|
119
|
+
}], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], meridian: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridian", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], date: [{
|
|
120
120
|
type: ViewChild,
|
|
121
121
|
args: [NgbInputDatepicker]
|
|
122
122
|
}], time: [{
|
|
@@ -384,10 +384,10 @@ class ExtensibleFormPropService {
|
|
|
384
384
|
const required = validators.find(v => this.isRequired(v));
|
|
385
385
|
return required ? '*' : '';
|
|
386
386
|
}
|
|
387
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
388
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormPropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
388
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormPropService }); }
|
|
389
389
|
}
|
|
390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormPropService, decorators: [{
|
|
391
391
|
type: Injectable
|
|
392
392
|
}] });
|
|
393
393
|
|
|
@@ -398,8 +398,8 @@ const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
|
|
|
398
398
|
};
|
|
399
399
|
class ExtensibleFormMultiselectComponent {
|
|
400
400
|
constructor() {
|
|
401
|
-
this.prop = input.required();
|
|
402
|
-
this.options = input.required();
|
|
401
|
+
this.prop = input.required(...(ngDevMode ? [{ debugName: "prop" }] : []));
|
|
402
|
+
this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
403
403
|
this.selectedValues = [];
|
|
404
404
|
this.disabled = false;
|
|
405
405
|
this.onChange = () => { };
|
|
@@ -427,8 +427,8 @@ class ExtensibleFormMultiselectComponent {
|
|
|
427
427
|
registerOnTouched(fn) {
|
|
428
428
|
this.onTouched = fn;
|
|
429
429
|
}
|
|
430
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
430
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
431
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ExtensibleFormMultiselectComponent, isStandalone: true, selector: "abp-extensible-form-multi-select", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `
|
|
432
432
|
<div [id]="prop().id">
|
|
433
433
|
@for (option of options(); track option.value) {
|
|
434
434
|
<div class="form-check" validationTarget>
|
|
@@ -450,9 +450,9 @@ class ExtensibleFormMultiselectComponent {
|
|
|
450
450
|
</div>
|
|
451
451
|
}
|
|
452
452
|
</div>
|
|
453
|
-
`, isInline: true, dependencies: [{ kind: "
|
|
453
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
454
454
|
}
|
|
455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormMultiselectComponent, decorators: [{
|
|
456
456
|
type: Component,
|
|
457
457
|
args: [{
|
|
458
458
|
selector: 'abp-extensible-form-multi-select',
|
|
@@ -483,7 +483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
|
|
|
483
483
|
imports: [LocalizationPipe, NgxValidateCoreModule],
|
|
484
484
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
485
485
|
}]
|
|
486
|
-
}] });
|
|
486
|
+
}], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
|
|
487
487
|
|
|
488
488
|
class ExtensibleFormPropComponent {
|
|
489
489
|
constructor() {
|
|
@@ -584,8 +584,8 @@ class ExtensibleFormPropComponent {
|
|
|
584
584
|
if (keyControl && valueControl)
|
|
585
585
|
this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
|
|
586
586
|
}
|
|
587
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first", isFirstGroup: "isFirstGroup" }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n @switch (getComponent(prop)) {\r\n @case ('template') {\r\n <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n }\r\n }\r\n\r\n <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n @switch (getComponent(prop)) {\r\n @case ('input') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <input\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [autocomplete]=\"prop.autocomplete\"\r\n [type]=\"getType(prop)\"\r\n [abpDisabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n class=\"form-control\"\r\n />\r\n }\r\n @case ('hidden') {\r\n <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n }\r\n @case ('checkbox') {\r\n <div class=\"form-check\" validationTarget>\r\n <input\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n />\r\n <ng-template\r\n [ngTemplateOutlet]=\"label\"\r\n [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n />\r\n </div>\r\n }\r\n @case ('select') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <select\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n class=\"form-select form-control\"\r\n >\r\n @for (option of options$ | async; track option.value) {\r\n <option [ngValue]=\"option.value\">\r\n @if (prop.isExtra) {\r\n {{ '::' + option.key | abpLocalization }}\r\n } @else {\r\n {{ option.key }}\r\n }\r\n </option>\r\n }\r\n </select>\r\n }\r\n @case ('multiselect') {\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <abp-extensible-form-multi-select\r\n [prop]=\"prop\"\r\n [options]=\"options$ | async\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n />\r\n }\r\n @case ('typeahead') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n <input\r\n #field\r\n [id]=\"prop.id\"\r\n [autocomplete]=\"prop.autocomplete\"\r\n [abpDisabled]=\"disabled\"\r\n [ngbTypeahead]=\"search\"\r\n [editable]=\"false\"\r\n [inputFormatter]=\"typeaheadFormatter\"\r\n [resultFormatter]=\"typeaheadFormatter\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [(ngModel)]=\"typeaheadModel\"\r\n (selectItem)=\"setTypeaheadValue($event.item)\"\r\n (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n class=\"form-control\"\r\n />\r\n <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n </div>\r\n }\r\n @case ('date') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <input\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n (click)=\"datepicker.open()\"\r\n (keyup.space)=\"datepicker.open()\"\r\n ngbDatepicker\r\n #datepicker=\"ngbDatepicker\"\r\n type=\"text\"\r\n class=\"form-control\"\r\n />\r\n }\r\n @case ('time') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <ngb-timepicker [formControlName]=\"prop.name\" />\r\n }\r\n @case ('dateTime') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n }\r\n @case ('textarea') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <textarea\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n class=\"form-control\"\r\n ></textarea>\r\n }\r\n @case ('passwordinputgroup') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <div class=\"input-group form-group\" validationTarget>\r\n <input\r\n class=\"form-control\"\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpShowPassword]=\"showPassword\"\r\n />\r\n <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n <i\r\n class=\"fa\"\r\n aria-hidden=\"true\"\r\n [ngClass]=\"{\r\n 'fa-eye-slash': !showPassword,\r\n 'fa-eye': showPassword,\r\n }\"\r\n ></i>\r\n </button>\r\n </div>\r\n }\r\n }\r\n\r\n @if (prop.formText) {\r\n <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n }\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n @if (prop.displayTextResolver) {\r\n {{ prop.displayTextResolver(data) | abpLocalization }}\r\n } @else {\r\n @if (prop.isExtra) {\r\n {{ '::' + prop.displayName | abpLocalization }}\r\n } @else {\r\n {{ prop.displayName | abpLocalization }}\r\n }\r\n }\r\n {{ asterisk }}\r\n @if (prop.tooltip) {\r\n <i\r\n [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n [placement]=\"prop.tooltip.placement || 'auto'\"\r\n container=\"body\"\r\n class=\"bi bi-info-circle\"\r\n ></i>\r\n }\r\n </span>\r\n </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [
|
|
587
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
588
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first", isFirstGroup: "isFirstGroup" }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n @switch (getComponent(prop)) {\r\n @case ('template') {\r\n <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n }\r\n }\r\n\r\n <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n @switch (getComponent(prop)) {\r\n @case ('input') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <input\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [autocomplete]=\"prop.autocomplete\"\r\n [type]=\"getType(prop)\"\r\n [abpDisabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n class=\"form-control\"\r\n />\r\n }\r\n @case ('hidden') {\r\n <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n }\r\n @case ('checkbox') {\r\n <div class=\"form-check\" validationTarget>\r\n <input\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n type=\"checkbox\"\r\n class=\"form-check-input\"\r\n />\r\n <ng-template\r\n [ngTemplateOutlet]=\"label\"\r\n [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n />\r\n </div>\r\n }\r\n @case ('select') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <select\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n class=\"form-select form-control\"\r\n >\r\n @for (option of options$ | async; track option.value) {\r\n <option [ngValue]=\"option.value\">\r\n @if (prop.isExtra) {\r\n {{ '::' + option.key | abpLocalization }}\r\n } @else {\r\n {{ option.key }}\r\n }\r\n </option>\r\n }\r\n </select>\r\n }\r\n @case ('multiselect') {\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <abp-extensible-form-multi-select\r\n [prop]=\"prop\"\r\n [options]=\"options$ | async\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n />\r\n }\r\n @case ('typeahead') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n <input\r\n #field\r\n [id]=\"prop.id\"\r\n [autocomplete]=\"prop.autocomplete\"\r\n [abpDisabled]=\"disabled\"\r\n [ngbTypeahead]=\"search\"\r\n [editable]=\"false\"\r\n [inputFormatter]=\"typeaheadFormatter\"\r\n [resultFormatter]=\"typeaheadFormatter\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [(ngModel)]=\"typeaheadModel\"\r\n (selectItem)=\"setTypeaheadValue($event.item)\"\r\n (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n class=\"form-control\"\r\n />\r\n <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n </div>\r\n }\r\n @case ('date') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <input\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n (click)=\"datepicker.open()\"\r\n (keyup.space)=\"datepicker.open()\"\r\n ngbDatepicker\r\n #datepicker=\"ngbDatepicker\"\r\n type=\"text\"\r\n class=\"form-control\"\r\n />\r\n }\r\n @case ('time') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <ngb-timepicker [formControlName]=\"prop.name\" />\r\n }\r\n @case ('dateTime') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n }\r\n @case ('textarea') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <textarea\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n class=\"form-control\"\r\n ></textarea>\r\n }\r\n @case ('passwordinputgroup') {\r\n <ng-template [ngTemplateOutlet]=\"label\" />\r\n <div class=\"input-group form-group\" validationTarget>\r\n <input\r\n class=\"form-control\"\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpShowPassword]=\"showPassword\"\r\n />\r\n <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n <i\r\n class=\"fa\"\r\n aria-hidden=\"true\"\r\n [ngClass]=\"{\r\n 'fa-eye-slash': !showPassword,\r\n 'fa-eye': showPassword,\r\n }\"\r\n ></i>\r\n </button>\r\n </div>\r\n }\r\n }\r\n\r\n @if (prop.formText) {\r\n <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n }\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n @if (prop.displayTextResolver) {\r\n {{ prop.displayTextResolver(data) | abpLocalization }}\r\n } @else {\r\n @if (prop.isExtra) {\r\n {{ '::' + prop.displayName | abpLocalization }}\r\n } @else {\r\n {{ prop.displayName | abpLocalization }}\r\n }\r\n }\r\n {{ asterisk }}\r\n @if (prop.tooltip) {\r\n <i\r\n [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n [placement]=\"prop.tooltip.placement || 'auto'\"\r\n container=\"body\"\r\n class=\"bi bi-info-circle\"\r\n ></i>\r\n }\r\n </span>\r\n </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
|
|
589
589
|
{
|
|
590
590
|
provide: ControlContainer,
|
|
591
591
|
useFactory: selfFactory,
|
|
@@ -595,7 +595,7 @@ class ExtensibleFormPropComponent {
|
|
|
595
595
|
{ provide: NgbTimeAdapter, useClass: TimeAdapter },
|
|
596
596
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
597
597
|
}
|
|
598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
|
|
599
599
|
type: Component,
|
|
600
600
|
args: [{ selector: 'abp-extensible-form-prop', imports: [
|
|
601
601
|
ExtensibleDateTimePickerComponent,
|
|
@@ -809,10 +809,10 @@ class ExtensionsService {
|
|
|
809
809
|
this.createFormProps = new CreateFormPropsFactory();
|
|
810
810
|
this.editFormProps = new EditFormPropsFactory();
|
|
811
811
|
}
|
|
812
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
813
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
812
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
813
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensionsService, providedIn: 'root' }); }
|
|
814
814
|
}
|
|
815
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
815
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensionsService, decorators: [{
|
|
816
816
|
type: Injectable,
|
|
817
817
|
args: [{
|
|
818
818
|
providedIn: 'root',
|
|
@@ -838,10 +838,10 @@ class PropDataDirective extends PropData {
|
|
|
838
838
|
ngOnDestroy() {
|
|
839
839
|
this.vcRef.clear();
|
|
840
840
|
}
|
|
841
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
842
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
841
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
842
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: PropDataDirective, isStandalone: true, selector: "[abpPropData]", inputs: { propList: ["abpPropDataFromList", "propList"], record: ["abpPropDataWithRecord", "record"], index: ["abpPropDataAtIndex", "index"] }, exportAs: ["abpPropData"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
|
|
843
843
|
}
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropDataDirective, decorators: [{
|
|
845
845
|
type: Directive,
|
|
846
846
|
args: [{
|
|
847
847
|
exportAs: 'abpPropData',
|
|
@@ -892,8 +892,8 @@ class ExtensibleFormComponent {
|
|
|
892
892
|
const formPropList = items[index].formPropList.toArray();
|
|
893
893
|
return formPropList.some(prop => prop.visible(data));
|
|
894
894
|
}
|
|
895
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
896
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
895
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
896
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ExtensibleFormComponent, isStandalone: true, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "@if (form) {\r\n @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {\r\n <ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record\">\r\n @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n <div\r\n [ngClass]=\"groupedProp.group?.className\"\r\n [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"propListTemplate\"\r\n [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\"\r\n >\r\n </ng-container>\r\n </div>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"propListTemplate\"\r\n [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\"\r\n >\r\n </ng-container>\r\n }\r\n </ng-container>\r\n }\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n @if (prop.visible(data)) {\r\n @if (extraProperties.controls[prop.name]) {\r\n <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n </ng-container>\r\n } @else {\r\n @if (form.get(prop.name)) {\r\n <abp-extensible-form-prop\r\n [class]=\"prop.className\"\r\n [prop]=\"prop\"\r\n [data]=\"data\"\r\n [first]=\"first\"\r\n [isFirstGroup]=\"isFirstGroup\"\r\n />\r\n }\r\n }\r\n }\r\n }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first", "isFirstGroup"] }], viewProviders: [
|
|
897
897
|
{
|
|
898
898
|
provide: ControlContainer,
|
|
899
899
|
useFactory: selfFactory,
|
|
@@ -901,7 +901,7 @@ class ExtensibleFormComponent {
|
|
|
901
901
|
},
|
|
902
902
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
903
903
|
}
|
|
904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
|
|
905
905
|
type: Component,
|
|
906
906
|
args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', imports: [NgClass, NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
907
907
|
{
|
|
@@ -929,10 +929,10 @@ class AbstractActionsComponent extends ActionData {
|
|
|
929
929
|
const type = injector.get(EXTENSIONS_ACTION_TYPE);
|
|
930
930
|
this.actionList = extensions[type].get(name).actions;
|
|
931
931
|
}
|
|
932
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
933
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
932
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
933
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AbstractActionsComponent, isStandalone: true, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 }); }
|
|
934
934
|
}
|
|
935
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractActionsComponent, decorators: [{
|
|
936
936
|
type: Directive
|
|
937
937
|
}], ctorParameters: () => [], propDecorators: { record: [{
|
|
938
938
|
type: Input
|
|
@@ -945,15 +945,15 @@ class GridActionsComponent extends AbstractActionsComponent {
|
|
|
945
945
|
this.text = '';
|
|
946
946
|
this.trackByFn = (_, item) => item.text;
|
|
947
947
|
}
|
|
948
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
948
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GridActionsComponent, isStandalone: true, selector: "abp-grid-actions", inputs: { icon: "icon", index: "index", text: "text" }, providers: [
|
|
950
950
|
{
|
|
951
951
|
provide: EXTENSIONS_ACTION_TYPE,
|
|
952
952
|
useValue: 'entityActions',
|
|
953
953
|
},
|
|
954
|
-
], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "@if (actionList.length > 1) {\r\n <div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n <button\r\n class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n ngbDropdownToggle\r\n >\r\n <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n </button>\r\n <div ngbDropdownMenu>\r\n @for (action of actionList; track action.text) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n >\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"btnTmp\"\r\n [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n ></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n @if (action.visible(data)) {\r\n <button\r\n ngbDropdownItem\r\n *abpPermission=\"action.permission; runChangeDetection: false\"\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n ></ng-container>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n @if (!action.showOnlyIcon) {\r\n @if (action.icon) {\r\n <span>{{ action.text | abpLocalization }}</span>\r\n } @else {\r\n <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n @if (action.visible(data)) {\r\n @if (action.tooltip) {\r\n <button\r\n *abpPermission=\"action.permission; runChangeDetection: false\"\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n [class]=\"action.btnClass\"\r\n [style]=\"action.btnStyle\"\r\n [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n [placement]=\"action.tooltip.placement || 'auto'\"\r\n triggers=\"hover\"\r\n container=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n ></ng-container>\r\n </button>\r\n } @else {\r\n <button\r\n *abpPermission=\"action.permission; runChangeDetection: false\"\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n [class]=\"action.btnClass\"\r\n [style]=\"action.btnStyle\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n ></ng-container>\r\n </button>\r\n }\r\n }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "
|
|
954
|
+
], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "@if (actionList.length > 1) {\r\n <div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n <button\r\n class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n ngbDropdownToggle\r\n >\r\n <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n </button>\r\n <div ngbDropdownMenu>\r\n @for (action of actionList; track action.text) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n >\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"btnTmp\"\r\n [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n ></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n @if (action.visible(data)) {\r\n <button\r\n ngbDropdownItem\r\n *abpPermission=\"action.permission; runChangeDetection: false\"\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n ></ng-container>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n @if (!action.showOnlyIcon) {\r\n @if (action.icon) {\r\n <span>{{ action.text | abpLocalization }}</span>\r\n } @else {\r\n <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n @if (action.visible(data)) {\r\n @if (action.tooltip) {\r\n <button\r\n *abpPermission=\"action.permission; runChangeDetection: false\"\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n [class]=\"action.btnClass\"\r\n [style]=\"action.btnStyle\"\r\n [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n [placement]=\"action.tooltip.placement || 'auto'\"\r\n triggers=\"hover\"\r\n container=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n ></ng-container>\r\n </button>\r\n } @else {\r\n <button\r\n *abpPermission=\"action.permission; runChangeDetection: false\"\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n [class]=\"action.btnClass\"\r\n [style]=\"action.btnStyle\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n ></ng-container>\r\n </button>\r\n }\r\n }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
955
955
|
}
|
|
956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridActionsComponent, decorators: [{
|
|
957
957
|
type: Component,
|
|
958
958
|
args: [{ exportAs: 'abpGridActions', imports: [
|
|
959
959
|
NgbDropdownModule,
|
|
@@ -1015,7 +1015,7 @@ class ExtensibleTableComponent {
|
|
|
1015
1015
|
this.loadMore = new EventEmitter();
|
|
1016
1016
|
this.trackByFn = (_, item) => item.name;
|
|
1017
1017
|
// Signal for actions column width
|
|
1018
|
-
this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH);
|
|
1018
|
+
this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH, ...(ngDevMode ? [{ debugName: "_actionsColumnWidth" }] : []));
|
|
1019
1019
|
// Infinite scroll: debounced load more subject
|
|
1020
1020
|
this.loadMoreSubject = new Subject();
|
|
1021
1021
|
this.loadMoreSubscription = this.loadMoreSubject
|
|
@@ -1023,7 +1023,7 @@ class ExtensibleTableComponent {
|
|
|
1023
1023
|
.subscribe(() => this.triggerLoadMore());
|
|
1024
1024
|
this.columnWidths = computed(() => {
|
|
1025
1025
|
return this.propList.toArray().map(prop => prop.columnWidth);
|
|
1026
|
-
});
|
|
1026
|
+
}, ...(ngDevMode ? [{ debugName: "columnWidths" }] : []));
|
|
1027
1027
|
const extensions = this.#injector.get(ExtensionsService);
|
|
1028
1028
|
const name = this.#injector.get(EXTENSIONS_IDENTIFIER);
|
|
1029
1029
|
this.propList = extensions.entityProps.get(name).props;
|
|
@@ -1150,10 +1150,10 @@ class ExtensibleTableComponent {
|
|
|
1150
1150
|
ngOnDestroy() {
|
|
1151
1151
|
this.loadMoreSubscription.unsubscribe();
|
|
1152
1152
|
}
|
|
1153
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1154
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate", selectable: "selectable", selectionType: "selectionType", selected: "selected", infiniteScroll: "infiniteScroll", isLoading: "isLoading", scrollThreshold: "scrollThreshold", tableHeight: "tableHeight" }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "@if (isBrowser) {\r\n <ngx-datatable\r\n default\r\n [rows]=\"data\"\r\n [count]=\"recordsTotal\"\r\n [list]=\"list\"\r\n [selectionType]=\"selectable ? _selectionType : undefined\"\r\n (activate)=\"tableActivate.emit($event)\"\r\n (select)=\"onSelect($event)\"\r\n [selected]=\"selected\"\r\n (scroll)=\"onScroll($event)\"\r\n [scrollbarV]=\"infiniteScroll\"\r\n [style.height]=\"getTableHeight()\"\r\n [loadingIndicator]=\"infiniteScroll && isLoading\"\r\n [footerHeight]=\"infiniteScroll ? false : 50\"\r\n>\r\n@if(selectable) {\r\n <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n\r\n <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n let-selectFn=\"selectFn\">\r\n @if (_selectionType !== 'single') {\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n (change)=\"selectFn(!allRowsSelected)\" />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n @if(_selectionType === 'single') {\r\n <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n </div>\r\n }\r\n @if (_selectionType !== 'single') {\r\n <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n </ngx-datatable-column>\r\n }\r\n @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n <ngx-datatable-column\r\n [name]=\"actionsText | abpLocalization\"\r\n [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n [width]=\"_actionsColumnWidth() ?? 200\"\r\n [canAutoResize]=\"!_actionsColumnWidth()\"\r\n [sortable]=\"false\"\r\n >\r\n <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n ></ng-container>\r\n <ng-template #gridActions>\r\n @if (isVisibleActions(row)) {\r\n <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n }\r\n </ng-template>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n @for (prop of propList; track prop.name; let i = $index) {\r\n <ngx-datatable-column\r\n *abpVisible=\"prop.columnVisible(getInjected)\"\r\n [width]=\"columnWidths[i] ?? 200\"\r\n [canAutoResize]=\"!columnWidths[i]\"\r\n [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n [prop]=\"prop.name\"\r\n [sortable]=\"prop.sortable\"\r\n >\r\n <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n @if (prop.tooltip) {\r\n <span\r\n [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n [placement]=\"prop.tooltip.placement || 'auto'\"\r\n container=\"body\"\r\n [class.pointer]=\"prop.sortable\"\r\n (click)=\"prop.sortable && sortFn(column)\"\r\n >\r\n {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n </span>\r\n } @else {\r\n <span\r\n [class.pointer]=\"prop.sortable\"\r\n (click)=\"prop.sortable && sortFn(column)\"\r\n >\r\n {{ column.name }}\r\n </span>\r\n }\r\n </ng-template>\r\n <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n @if (!row['_' + prop.name].component) {\r\n @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n <div\r\n [innerHTML]=\"\r\n !prop.isExtra\r\n ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n \"\r\n (click)=\"\r\n prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n [class.pointer]=\"prop.action\"\r\n ></div>\r\n } @else {\r\n <div\r\n [innerHTML]=\"\r\n !prop.isExtra\r\n ? (row['_' + prop.name]?.value | async)\r\n : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n \"\r\n (click)=\"\r\n prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n [class.pointer]=\"prop.action\"\r\n ></div>\r\n }\r\n } @else {\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n row['_' + prop.name].component;\r\n injector: row['_' + prop.name].injector\r\n \"\r\n ></ng-container>\r\n }\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n</ngx-datatable>\r\n}\r\n", dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate", selectable: "selectable", selectionType: "selectionType", selected: "selected", infiniteScroll: "infiniteScroll", isLoading: "isLoading", scrollThreshold: "scrollThreshold", tableHeight: "tableHeight" }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "@if (isBrowser) {\r\n <ngx-datatable\r\n default\r\n [rows]=\"data\"\r\n [count]=\"recordsTotal\"\r\n [list]=\"list\"\r\n [selectionType]=\"selectable ? _selectionType : undefined\"\r\n (activate)=\"tableActivate.emit($event)\"\r\n (select)=\"onSelect($event)\"\r\n [selected]=\"selected\"\r\n (scroll)=\"onScroll($event)\"\r\n [scrollbarV]=\"infiniteScroll\"\r\n [style.height]=\"getTableHeight()\"\r\n [loadingIndicator]=\"infiniteScroll && isLoading\"\r\n [footerHeight]=\"infiniteScroll ? false : 50\"\r\n>\r\n@if(selectable) {\r\n <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n\r\n <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n let-selectFn=\"selectFn\">\r\n @if (_selectionType !== 'single') {\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n (change)=\"selectFn(!allRowsSelected)\" />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n @if(_selectionType === 'single') {\r\n <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n </div>\r\n }\r\n @if (_selectionType !== 'single') {\r\n <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n </ngx-datatable-column>\r\n }\r\n @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n <ngx-datatable-column\r\n [name]=\"actionsText | abpLocalization\"\r\n [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n [width]=\"_actionsColumnWidth() ?? 200\"\r\n [canAutoResize]=\"!_actionsColumnWidth()\"\r\n [sortable]=\"false\"\r\n >\r\n <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n ></ng-container>\r\n <ng-template #gridActions>\r\n @if (isVisibleActions(row)) {\r\n <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n }\r\n </ng-template>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n @for (prop of propList; track prop.name; let i = $index) {\r\n <ngx-datatable-column\r\n *abpVisible=\"prop.columnVisible(getInjected)\"\r\n [width]=\"columnWidths[i] ?? 200\"\r\n [canAutoResize]=\"!columnWidths[i]\"\r\n [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n [prop]=\"prop.name\"\r\n [sortable]=\"prop.sortable\"\r\n >\r\n <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n @if (prop.tooltip) {\r\n <span\r\n [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n [placement]=\"prop.tooltip.placement || 'auto'\"\r\n container=\"body\"\r\n [class.pointer]=\"prop.sortable\"\r\n (click)=\"prop.sortable && sortFn(column)\"\r\n >\r\n {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n </span>\r\n } @else {\r\n <span\r\n [class.pointer]=\"prop.sortable\"\r\n (click)=\"prop.sortable && sortFn(column)\"\r\n >\r\n {{ column.name }}\r\n </span>\r\n }\r\n </ng-template>\r\n <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n @if (!row['_' + prop.name].component) {\r\n @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n <div\r\n [innerHTML]=\"\r\n !prop.isExtra\r\n ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n \"\r\n (click)=\"\r\n prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n [class.pointer]=\"prop.action\"\r\n ></div>\r\n } @else {\r\n <div\r\n [innerHTML]=\"\r\n !prop.isExtra\r\n ? (row['_' + prop.name]?.value | async)\r\n : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n \"\r\n (click)=\"\r\n prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n [class.pointer]=\"prop.action\"\r\n ></div>\r\n }\r\n } @else {\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n row['_' + prop.name].component;\r\n injector: row['_' + prop.name].injector\r\n \"\r\n ></ng-container>\r\n }\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n</ngx-datatable>\r\n}\r\n", dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1155
1155
|
}
|
|
1156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
|
|
1157
1157
|
type: Component,
|
|
1158
1158
|
args: [{ exportAs: 'abpExtensibleTable', selector: 'abp-extensible-table', imports: [
|
|
1159
1159
|
AbpVisibleDirective,
|
|
@@ -1226,10 +1226,10 @@ class CreateInjectorPipe {
|
|
|
1226
1226
|
};
|
|
1227
1227
|
return { get };
|
|
1228
1228
|
}
|
|
1229
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1230
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1229
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1230
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: CreateInjectorPipe, isStandalone: true, name: "createInjector" }); }
|
|
1231
1231
|
}
|
|
1232
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CreateInjectorPipe, decorators: [{
|
|
1233
1233
|
type: Pipe,
|
|
1234
1234
|
args: [{
|
|
1235
1235
|
name: 'createInjector',
|
|
@@ -1250,15 +1250,15 @@ class PageToolbarComponent extends AbstractActionsComponent {
|
|
|
1250
1250
|
value: value,
|
|
1251
1251
|
};
|
|
1252
1252
|
}
|
|
1253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PageToolbarComponent, isStandalone: true, selector: "abp-page-toolbar", providers: [
|
|
1255
1255
|
{
|
|
1256
1256
|
provide: EXTENSIONS_ACTION_TYPE,
|
|
1257
1257
|
useValue: 'toolbarActions',
|
|
1258
1258
|
},
|
|
1259
|
-
], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n @for (action of actionList; track action.component || action.action; let last = $last) {\r\n <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n @if (action.visible(data)) {\r\n <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n @if (action.component; as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n ></ng-container>\r\n\r\n }@else {\r\n @if (asToolbarAction(action).value; as toolbarAction ) {\r\n <button\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n [ngClass]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n class=\"d-inline-flex align-items-center gap-1\"\r\n >\r\n <i [ngClass]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n {{ toolbarAction?.text | abpLocalization }}\r\n </button>\r\n } \r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", dependencies: [{ kind: "
|
|
1259
|
+
], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n @for (action of actionList; track action.component || action.action; let last = $last) {\r\n <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n @if (action.visible(data)) {\r\n <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n @if (action.component; as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n ></ng-container>\r\n\r\n }@else {\r\n @if (asToolbarAction(action).value; as toolbarAction ) {\r\n <button\r\n (click)=\"action.action(data)\"\r\n type=\"button\"\r\n [ngClass]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n class=\"d-inline-flex align-items-center gap-1\"\r\n >\r\n <i [ngClass]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n {{ toolbarAction?.text | abpLocalization }}\r\n </button>\r\n } \r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1260
1260
|
}
|
|
1261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageToolbarComponent, decorators: [{
|
|
1262
1262
|
type: Component,
|
|
1263
1263
|
args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', imports: [
|
|
1264
1264
|
CreateInjectorPipe,
|
|
@@ -1582,8 +1582,8 @@ const importWithExport = [
|
|
|
1582
1582
|
ExtensibleFormMultiselectComponent,
|
|
1583
1583
|
];
|
|
1584
1584
|
class ExtensibleModule {
|
|
1585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1586
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1586
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
|
|
1587
1587
|
ThemeSharedModule,
|
|
1588
1588
|
NgxValidateCoreModule,
|
|
1589
1589
|
NgbDatepickerModule,
|
|
@@ -1609,7 +1609,7 @@ class ExtensibleModule {
|
|
|
1609
1609
|
ExtensibleFormComponent,
|
|
1610
1610
|
ExtensibleTableComponent,
|
|
1611
1611
|
ExtensibleFormMultiselectComponent] }); }
|
|
1612
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1612
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
|
|
1613
1613
|
ThemeSharedModule,
|
|
1614
1614
|
NgxValidateCoreModule,
|
|
1615
1615
|
NgbDatepickerModule,
|
|
@@ -1623,7 +1623,7 @@ class ExtensibleModule {
|
|
|
1623
1623
|
ExtensibleTableComponent,
|
|
1624
1624
|
ExtensibleFormMultiselectComponent] }); }
|
|
1625
1625
|
}
|
|
1626
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExtensibleModule, decorators: [{
|
|
1627
1627
|
type: NgModule,
|
|
1628
1628
|
args: [{
|
|
1629
1629
|
declarations: [],
|