@abp/ng.components 10.6.0 → 10.7.0-rc.2
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.
|
@@ -497,7 +497,7 @@ class ExtensibleFormPropComponent {
|
|
|
497
497
|
return this.service.getType(prop);
|
|
498
498
|
}
|
|
499
499
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, isFirstGroup: { classPropertyName: "isFirstGroup", publicName: "isFirstGroup", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: 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 [class]=\"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]=\"isReadonly()\"\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 (ngModelChange)=\"typeaheadModel.set($event)\"\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]=\"isReadonly()\"\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\r\n class=\"btn btn-secondary\"\r\n type=\"button\"\r\n (click)=\"showPassword.update(value => !value)\"\r\n >\r\n <i\r\n class=\"fa\"\r\n aria-hidden=\"true\"\r\n [class]=\"{\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\" [class]=\"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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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: 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: [
|
|
500
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, isFirstGroup: { classPropertyName: "isFirstGroup", publicName: "isFirstGroup", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: 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 [class]=\"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]=\"isReadonly()\"\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 (ngModelChange)=\"typeaheadModel.set($event)\"\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]=\"isReadonly()\"\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\r\n class=\"btn btn-secondary\"\r\n type=\"button\"\r\n (click)=\"showPassword.update(value => !value)\"\r\n >\r\n <i\r\n class=\"fa\"\r\n aria-hidden=\"true\"\r\n [class]=\"{\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\" [class]=\"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 {{ prop().displayName | abpLocalization }}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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: 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: [
|
|
501
501
|
{
|
|
502
502
|
provide: ControlContainer,
|
|
503
503
|
useFactory: selfFactory,
|
|
@@ -534,7 +534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
534
534
|
},
|
|
535
535
|
{ provide: NgbDateAdapter, useClass: DateAdapter },
|
|
536
536
|
{ provide: NgbTimeAdapter, useClass: TimeAdapter },
|
|
537
|
-
], 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 [class]=\"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]=\"isReadonly()\"\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 (ngModelChange)=\"typeaheadModel.set($event)\"\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]=\"isReadonly()\"\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\r\n class=\"btn btn-secondary\"\r\n type=\"button\"\r\n (click)=\"showPassword.update(value => !value)\"\r\n >\r\n <i\r\n class=\"fa\"\r\n aria-hidden=\"true\"\r\n [class]=\"{\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\" [class]=\"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
|
|
537
|
+
], 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 [class]=\"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]=\"isReadonly()\"\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 (ngModelChange)=\"typeaheadModel.set($event)\"\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]=\"isReadonly()\"\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\r\n class=\"btn btn-secondary\"\r\n type=\"button\"\r\n (click)=\"showPassword.update(value => !value)\"\r\n >\r\n <i\r\n class=\"fa\"\r\n aria-hidden=\"true\"\r\n [class]=\"{\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\" [class]=\"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 {{ prop().displayName | abpLocalization }}\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" }]
|
|
538
538
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: true }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }], isFirstGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFirstGroup", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
|
|
539
539
|
|
|
540
540
|
class PropList extends LinkedList {
|
|
@@ -1272,7 +1272,7 @@ class ExtensibleTableComponent {
|
|
|
1272
1272
|
this.loadMoreSubscription.unsubscribe();
|
|
1273
1273
|
}
|
|
1274
1274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1275
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsTextInput: { classPropertyName: "actionsTextInput", publicName: "actionsText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, recordsTotal: { classPropertyName: "recordsTotal", publicName: "recordsTotal", isSignal: true, isRequired: true, transformFunction: null }, actionsColumnWidthInput: { classPropertyName: "actionsColumnWidthInput", publicName: "actionsColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeInput: { classPropertyName: "selectionTypeInput", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, rowDetailTemplate: { classPropertyName: "rowDetailTemplate", publicName: "rowDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowDetailHeight: { classPropertyName: "rowDetailHeight", publicName: "rowDetailHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore", rowDetailToggle: "rowDetailToggle" }, queries: [{ propertyName: "rowDetailComponent", first: true, predicate: ExtensibleTableRowDetailComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], exportAs: ["abpExtensibleTable"], ngImport: i0, template: "@if (isBrowser) {\r\n <ngx-datatable\r\n #table\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 (effectiveRowDetailTemplate) {\r\n @let detailRowHeight = effectiveRowDetailRowHeight();\r\n @if (detailRowHeight !== undefined) {\r\n <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n } @else {\r\n <ngx-datatable-row-detail>\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n }\r\n\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [resizeable]=\"false\"\r\n [sortable]=\"false\"\r\n [draggable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n >\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n (click)=\"toggleExpandRow(row)\"\r\n >\r\n <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n </button>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n @if (selectable()) {\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [sortable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n [draggable]=\"false\"\r\n [resizeable]=\"false\"\r\n >\r\n <ng-template\r\n ngx-datatable-header-template\r\n let-allRowsSelected=\"allRowsSelected\"\r\n let-selectFn=\"selectFn\"\r\n >\r\n @if (selectionType() !== 'single') {\r\n <div class=\"form-check\">\r\n <input\r\n class=\"form-check-input table-check\"\r\n type=\"checkbox\"\r\n [checked]=\"allRowsSelected\"\r\n (change)=\"selectFn()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template\r\n ngx-datatable-cell-template\r\n let-value=\"value\"\r\n let-row=\"row\"\r\n let-isSelected=\"isSelected\"\r\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\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\r\n class=\"form-check-input\"\r\n type=\"radio\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\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\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\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()\"\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 @if (actionsTemplate(); as template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n ></ng-container>\r\n } @else 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 </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()\"\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 [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn()\">\r\n {{ column.name }}\r\n </span>\r\n }\r\n </ng-template>\r\n <ng-template let-row=\"row\" let-i=\"rowIndex\" 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)\r\n | abpLocalization)\r\n \"\r\n (click)=\"\r\n prop.action &&\r\n prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [class]=\"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 &&\r\n prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [class]=\"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 />\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", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\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.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i1$1.DatatableRowDetailTemplateDirective, selector: "[ngx-datatable-row-detail-template]" }, { 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 }); }
|
|
1275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsTextInput: { classPropertyName: "actionsTextInput", publicName: "actionsText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, recordsTotal: { classPropertyName: "recordsTotal", publicName: "recordsTotal", isSignal: true, isRequired: true, transformFunction: null }, actionsColumnWidthInput: { classPropertyName: "actionsColumnWidthInput", publicName: "actionsColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeInput: { classPropertyName: "selectionTypeInput", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, rowDetailTemplate: { classPropertyName: "rowDetailTemplate", publicName: "rowDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowDetailHeight: { classPropertyName: "rowDetailHeight", publicName: "rowDetailHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore", rowDetailToggle: "rowDetailToggle" }, queries: [{ propertyName: "rowDetailComponent", first: true, predicate: ExtensibleTableRowDetailComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], exportAs: ["abpExtensibleTable"], ngImport: i0, template: "@if (isBrowser) {\r\n <ngx-datatable\r\n #table\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 (effectiveRowDetailTemplate) {\r\n @let detailRowHeight = effectiveRowDetailRowHeight();\r\n @if (detailRowHeight !== undefined) {\r\n <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n } @else {\r\n <ngx-datatable-row-detail>\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n }\r\n\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [resizeable]=\"false\"\r\n [sortable]=\"false\"\r\n [draggable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n >\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n (click)=\"toggleExpandRow(row)\"\r\n >\r\n <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n </button>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n @if (selectable()) {\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [sortable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n [draggable]=\"false\"\r\n [resizeable]=\"false\"\r\n >\r\n <ng-template\r\n ngx-datatable-header-template\r\n let-allRowsSelected=\"allRowsSelected\"\r\n let-selectFn=\"selectFn\"\r\n >\r\n @if (selectionType() !== 'single') {\r\n <div class=\"form-check\">\r\n <input\r\n class=\"form-check-input table-check\"\r\n type=\"checkbox\"\r\n [checked]=\"allRowsSelected\"\r\n (change)=\"selectFn()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template\r\n ngx-datatable-cell-template\r\n let-value=\"value\"\r\n let-row=\"row\"\r\n let-isSelected=\"isSelected\"\r\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\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\r\n class=\"form-check-input\"\r\n type=\"radio\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\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\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\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()\"\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 @if (actionsTemplate(); as template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n ></ng-container>\r\n } @else 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 </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.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()\"\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 [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn()\">\r\n {{ column.name }}\r\n </span>\r\n }\r\n </ng-template>\r\n <ng-template let-row=\"row\" let-i=\"rowIndex\" 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)\r\n | abpLocalization)\r\n \"\r\n (click)=\"\r\n prop.action &&\r\n prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [class]=\"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 &&\r\n prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [class]=\"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 />\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", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\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.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i1$1.DatatableRowDetailTemplateDirective, selector: "[ngx-datatable-row-detail-template]" }, { 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 }); }
|
|
1276
1276
|
}
|
|
1277
1277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
|
|
1278
1278
|
type: Component,
|
|
@@ -1289,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1289
1289
|
AsyncPipe,
|
|
1290
1290
|
NgTemplateOutlet,
|
|
1291
1291
|
NgComponentOutlet,
|
|
1292
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isBrowser) {\r\n <ngx-datatable\r\n #table\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 (effectiveRowDetailTemplate) {\r\n @let detailRowHeight = effectiveRowDetailRowHeight();\r\n @if (detailRowHeight !== undefined) {\r\n <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n } @else {\r\n <ngx-datatable-row-detail>\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n }\r\n\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [resizeable]=\"false\"\r\n [sortable]=\"false\"\r\n [draggable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n >\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n (click)=\"toggleExpandRow(row)\"\r\n >\r\n <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n </button>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n @if (selectable()) {\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [sortable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n [draggable]=\"false\"\r\n [resizeable]=\"false\"\r\n >\r\n <ng-template\r\n ngx-datatable-header-template\r\n let-allRowsSelected=\"allRowsSelected\"\r\n let-selectFn=\"selectFn\"\r\n >\r\n @if (selectionType() !== 'single') {\r\n <div class=\"form-check\">\r\n <input\r\n class=\"form-check-input table-check\"\r\n type=\"checkbox\"\r\n [checked]=\"allRowsSelected\"\r\n (change)=\"selectFn()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template\r\n ngx-datatable-cell-template\r\n let-value=\"value\"\r\n let-row=\"row\"\r\n let-isSelected=\"isSelected\"\r\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\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\r\n class=\"form-check-input\"\r\n type=\"radio\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\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\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\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()\"\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 @if (actionsTemplate(); as template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n ></ng-container>\r\n } @else 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 </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]=\"
|
|
1292
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isBrowser) {\r\n <ngx-datatable\r\n #table\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 (effectiveRowDetailTemplate) {\r\n @let detailRowHeight = effectiveRowDetailRowHeight();\r\n @if (detailRowHeight !== undefined) {\r\n <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n } @else {\r\n <ngx-datatable-row-detail>\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n <ng-container\r\n [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n />\r\n </ng-template>\r\n </ngx-datatable-row-detail>\r\n }\r\n\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [resizeable]=\"false\"\r\n [sortable]=\"false\"\r\n [draggable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n >\r\n <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n (click)=\"toggleExpandRow(row)\"\r\n >\r\n <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n </button>\r\n </ng-template>\r\n </ngx-datatable-column>\r\n }\r\n @if (selectable()) {\r\n <ngx-datatable-column\r\n [width]=\"50\"\r\n [sortable]=\"false\"\r\n [canAutoResize]=\"false\"\r\n [draggable]=\"false\"\r\n [resizeable]=\"false\"\r\n >\r\n <ng-template\r\n ngx-datatable-header-template\r\n let-allRowsSelected=\"allRowsSelected\"\r\n let-selectFn=\"selectFn\"\r\n >\r\n @if (selectionType() !== 'single') {\r\n <div class=\"form-check\">\r\n <input\r\n class=\"form-check-input table-check\"\r\n type=\"checkbox\"\r\n [checked]=\"allRowsSelected\"\r\n (change)=\"selectFn()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template\r\n ngx-datatable-cell-template\r\n let-value=\"value\"\r\n let-row=\"row\"\r\n let-isSelected=\"isSelected\"\r\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\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\r\n class=\"form-check-input\"\r\n type=\"radio\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\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\r\n class=\"form-check-input\"\r\n type=\"checkbox\"\r\n [checked]=\"isSelected\"\r\n (change)=\"onCheckboxChangeFn($event)\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\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()\"\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 @if (actionsTemplate(); as template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n ></ng-container>\r\n } @else 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 </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.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()\"\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 [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn()\">\r\n {{ column.name }}\r\n </span>\r\n }\r\n </ng-template>\r\n <ng-template let-row=\"row\" let-i=\"rowIndex\" 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)\r\n | abpLocalization)\r\n \"\r\n (click)=\"\r\n prop.action &&\r\n prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [class]=\"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 &&\r\n prop.action({ getInjected: getInjected, record: row, index: i })\r\n \"\r\n [class]=\"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 />\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", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\n"] }]
|
|
1293
1293
|
}], ctorParameters: () => [], propDecorators: { actionsTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsText", required: false }] }], dataInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], recordsTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordsTotal", required: true }] }], actionsColumnWidthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsColumnWidth", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionTypeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionType", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], tableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableHeight", required: false }] }], rowDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDetailTemplate", required: false }] }], rowDetailHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDetailHeight", required: false }] }], tableActivate: [{ type: i0.Output, args: ["tableActivate"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], rowDetailToggle: [{ type: i0.Output, args: ["rowDetailToggle"] }], rowDetailComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExtensibleTableRowDetailComponent), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }] } });
|
|
1294
1294
|
|
|
1295
1295
|
class CreateInjectorPipe {
|