@abp/ng.theme.shared 6.0.0-rc.3 → 6.0.0-rc.4
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/esm2020/extensions/lib/components/extensible-form/extensible-form-prop.component.mjs +33 -10
- package/esm2020/extensions/lib/components/extensible-form/extensible-form.component.mjs +3 -3
- package/esm2020/extensions/lib/components/extensible-table/extensible-table.component.mjs +10 -7
- package/esm2020/extensions/lib/models/form-props.mjs +2 -2
- package/esm2020/extensions/lib/models/props.mjs +4 -2
- package/esm2020/extensions/lib/tokens/extensible-form-view-provider.token.mjs +3 -0
- package/esm2020/extensions/lib/tokens/extensions.token.mjs +3 -1
- package/esm2020/extensions/public-api.mjs +2 -1
- package/esm2020/lib/constants/validation.mjs +2 -1
- package/extensions/lib/components/extensible-form/extensible-form-prop.component.d.ts +7 -5
- package/extensions/lib/models/form-props.d.ts +2 -0
- package/extensions/lib/models/props.d.ts +3 -1
- package/extensions/lib/tokens/extensible-form-view-provider.token.d.ts +5 -0
- package/extensions/lib/tokens/extensions.token.d.ts +3 -0
- package/extensions/public-api.d.ts +1 -0
- package/fesm2015/abp-ng.theme.shared-extensions.mjs +62 -30
- package/fesm2015/abp-ng.theme.shared-extensions.mjs.map +1 -1
- package/fesm2015/abp-ng.theme.shared.mjs +1 -0
- package/fesm2015/abp-ng.theme.shared.mjs.map +1 -1
- package/fesm2020/abp-ng.theme.shared-extensions.mjs +61 -30
- package/fesm2020/abp-ng.theme.shared-extensions.mjs.map +1 -1
- package/fesm2020/abp-ng.theme.shared.mjs +1 -0
- package/fesm2020/abp-ng.theme.shared.mjs.map +1 -1
- package/lib/constants/validation.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Optional, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, Host,
|
|
2
|
+
import { Injectable, Optional, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, InjectionToken, Directive, Host, Injector, Inject, ViewChildren, LOCALE_ID, Pipe, NgModule } from '@angular/core';
|
|
3
3
|
import * as i5 from '@angular/common';
|
|
4
4
|
import { formatDate } from '@angular/common';
|
|
5
5
|
import * as i2 from '@ng-bootstrap/ng-bootstrap';
|
|
6
6
|
import { NgbDateAdapter, NgbTimeAdapter, NgbInputDatepicker, NgbTimepicker, NgbDatepickerModule, NgbDropdownModule, NgbTimepickerModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
|
|
7
7
|
import * as i2$1 from '@angular/forms';
|
|
8
|
-
import { ControlContainer, Validators, FormGroup, FormControl } from '@angular/forms';
|
|
8
|
+
import { ControlContainer, FormGroupDirective, Validators, FormGroup, FormControl } from '@angular/forms';
|
|
9
9
|
import { LinkedList } from '@abp/utils';
|
|
10
10
|
import * as i6 from '@ngx-validate/core';
|
|
11
11
|
import { NgxValidateCoreModule } from '@ngx-validate/core';
|
|
@@ -140,13 +140,15 @@ class PropData {
|
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
142
|
class Prop {
|
|
143
|
-
constructor(type, name, displayName, permission, visible = _ => true, isExtra = false) {
|
|
143
|
+
constructor(type, name, displayName, permission, visible = _ => true, isExtra = false, template, className) {
|
|
144
144
|
this.type = type;
|
|
145
145
|
this.name = name;
|
|
146
146
|
this.displayName = displayName;
|
|
147
147
|
this.permission = permission;
|
|
148
148
|
this.visible = visible;
|
|
149
149
|
this.isExtra = isExtra;
|
|
150
|
+
this.template = template;
|
|
151
|
+
this.className = className;
|
|
150
152
|
this.displayName = this.displayName || this.name;
|
|
151
153
|
}
|
|
152
154
|
}
|
|
@@ -199,7 +201,7 @@ class EditFormPropsFactory extends PropsFactory {
|
|
|
199
201
|
}
|
|
200
202
|
class FormProp extends Prop {
|
|
201
203
|
constructor(options) {
|
|
202
|
-
super(options.type, options.name, options.displayName, options.permission, options.visible, options.isExtra);
|
|
204
|
+
super(options.type, options.name, options.displayName, options.permission, options.visible, options.isExtra, options.template, options.className);
|
|
203
205
|
this.asyncValidators = options.asyncValidators || (_ => []);
|
|
204
206
|
this.validators = options.validators || (_ => []);
|
|
205
207
|
this.disabled = options.disabled || (_ => false);
|
|
@@ -331,6 +333,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
331
333
|
args: [NgbTimepicker]
|
|
332
334
|
}] } });
|
|
333
335
|
|
|
336
|
+
const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER');
|
|
337
|
+
const EXTENSIONS_ACTION_TYPE = new InjectionToken('EXTENSIONS_ACTION_TYPE');
|
|
338
|
+
const EXTENSIONS_ACTION_DATA = new InjectionToken('EXTENSIONS_ACTION_DATA');
|
|
339
|
+
const EXTENSIONS_ACTION_CALLBACK = new InjectionToken('EXTENSIONS_ACTION_DATA');
|
|
340
|
+
const PROP_DATA_STREAM = new InjectionToken('PROP_DATA_STREAM');
|
|
341
|
+
const ENTITY_PROP_TYPE_CLASSES = new InjectionToken('ENTITY_PROP_TYPE_CLASSES', {
|
|
342
|
+
factory: () => ({}),
|
|
343
|
+
});
|
|
344
|
+
const EXTENSIONS_FORM_PROP = new InjectionToken('EXTENSIONS_FORM_PROP');
|
|
345
|
+
const EXTENSIONS_FORM_PROP_DATA = new InjectionToken('EXTENSIONS_FORM_PROP_DATA');
|
|
346
|
+
|
|
334
347
|
const EXTRA_PROPERTIES_KEY = 'extraProperties';
|
|
335
348
|
|
|
336
349
|
const TYPEAHEAD_TEXT_SUFFIX = '_Text';
|
|
@@ -408,10 +421,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
408
421
|
}] } });
|
|
409
422
|
|
|
410
423
|
class ExtensibleFormPropComponent {
|
|
411
|
-
constructor(cdRef, track, configState, groupDirective) {
|
|
424
|
+
constructor(cdRef, track, configState, groupDirective, injector) {
|
|
412
425
|
this.cdRef = cdRef;
|
|
413
426
|
this.track = track;
|
|
414
427
|
this.configState = configState;
|
|
428
|
+
this.injector = injector;
|
|
415
429
|
this.asterisk = '';
|
|
416
430
|
this.options$ = of([]);
|
|
417
431
|
this.validators = [];
|
|
@@ -458,6 +472,9 @@ class ExtensibleFormPropComponent {
|
|
|
458
472
|
}
|
|
459
473
|
}
|
|
460
474
|
getComponent(prop) {
|
|
475
|
+
if (prop.template) {
|
|
476
|
+
return 'template';
|
|
477
|
+
}
|
|
461
478
|
switch (prop.type) {
|
|
462
479
|
case "boolean" /* Boolean */:
|
|
463
480
|
return 'checkbox';
|
|
@@ -496,9 +513,25 @@ class ExtensibleFormPropComponent {
|
|
|
496
513
|
return 'hidden';
|
|
497
514
|
}
|
|
498
515
|
}
|
|
499
|
-
ngOnChanges({ prop }) {
|
|
516
|
+
ngOnChanges({ prop, data }) {
|
|
500
517
|
const currentProp = prop?.currentValue;
|
|
501
|
-
const { options, readonly, disabled, validators } = currentProp || {};
|
|
518
|
+
const { options, readonly, disabled, validators, template } = currentProp || {};
|
|
519
|
+
if (template) {
|
|
520
|
+
this.injectorForCustomComponent = Injector.create({
|
|
521
|
+
providers: [
|
|
522
|
+
{
|
|
523
|
+
provide: EXTENSIONS_FORM_PROP,
|
|
524
|
+
useValue: currentProp,
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
provide: EXTENSIONS_FORM_PROP_DATA,
|
|
528
|
+
useValue: data?.currentValue?.record,
|
|
529
|
+
},
|
|
530
|
+
{ provide: ControlContainer, useExisting: FormGroupDirective },
|
|
531
|
+
],
|
|
532
|
+
parent: this.injector,
|
|
533
|
+
});
|
|
534
|
+
}
|
|
502
535
|
if (options)
|
|
503
536
|
this.options$ = options(this.data);
|
|
504
537
|
if (readonly)
|
|
@@ -515,8 +548,8 @@ class ExtensibleFormPropComponent {
|
|
|
515
548
|
this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
|
|
516
549
|
}
|
|
517
550
|
}
|
|
518
|
-
ExtensibleFormPropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleFormPropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i1.ConfigStateService }, { token: i2$1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
|
|
519
|
-
ExtensibleFormPropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first" }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<
|
|
551
|
+
ExtensibleFormPropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleFormPropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i1.ConfigStateService }, { token: i2$1.FormGroupDirective }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
552
|
+
ExtensibleFormPropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first" }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"getComponent(prop)\"\r\n *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n\r\n <ng-template ngSwitchCase=\"template\">\r\n <ng-container\r\n *ngComponentOutlet=\"prop.template;injector:injectorForCustomComponent\">\r\n </ng-container>\r\n </ng-template>\r\n\r\n <div\r\n class=\"mb-3 form-group\"\r\n >\r\n\r\n <ng-template ngSwitchCase=\"input\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"hidden\">\r\n <input [formControlName]=\"prop.name\" type=\"hidden\"/>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"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 ></ng-template>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"select\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 <option\r\n *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n [ngValue]=\"option.value\"\r\n >\r\n {{ option.key }}\r\n </option>\r\n </select>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"multiselect\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <select\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n multiple=\"multiple\"\r\n class=\"form-select form-control\"\r\n >\r\n <option\r\n *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n [ngValue]=\"option.value\"\r\n >\r\n {{ option.key }}\r\n </option>\r\n </select>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"typeahead\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"date\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"time\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"dateTime\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"textarea\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n </div>\r\n\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\" x\r\n >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\r\n >\r\n</ng-template>\r\n", components: [{ type: i2.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: ["prop", "meridian"], exportAs: ["abpDateTimePicker"] }], directives: [{ type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { type: i6.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i6.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i5.AsyncPipe, "abpLocalization": i1.LocalizationPipe }, viewProviders: [
|
|
520
553
|
{
|
|
521
554
|
provide: ControlContainer,
|
|
522
555
|
useFactory: selfFactory,
|
|
@@ -535,8 +568,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
535
568
|
},
|
|
536
569
|
{ provide: NgbDateAdapter, useClass: DateAdapter },
|
|
537
570
|
{ provide: NgbTimeAdapter, useClass: TimeAdapter },
|
|
538
|
-
], template: "<
|
|
539
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i1.ConfigStateService }, { type: i2$1.FormGroupDirective }]; }, propDecorators: { data: [{
|
|
571
|
+
], template: "<ng-container [ngSwitch]=\"getComponent(prop)\"\r\n *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n\r\n <ng-template ngSwitchCase=\"template\">\r\n <ng-container\r\n *ngComponentOutlet=\"prop.template;injector:injectorForCustomComponent\">\r\n </ng-container>\r\n </ng-template>\r\n\r\n <div\r\n class=\"mb-3 form-group\"\r\n >\r\n\r\n <ng-template ngSwitchCase=\"input\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"hidden\">\r\n <input [formControlName]=\"prop.name\" type=\"hidden\"/>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"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 ></ng-template>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"select\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 <option\r\n *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n [ngValue]=\"option.value\"\r\n >\r\n {{ option.key }}\r\n </option>\r\n </select>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"multiselect\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <select\r\n #field\r\n [id]=\"prop.id\"\r\n [formControlName]=\"prop.name\"\r\n [abpDisabled]=\"disabled\"\r\n multiple=\"multiple\"\r\n class=\"form-select form-control\"\r\n >\r\n <option\r\n *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n [ngValue]=\"option.value\"\r\n >\r\n {{ option.key }}\r\n </option>\r\n </select>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"typeahead\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"date\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"time\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"dateTime\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n </ng-template>\r\n\r\n <ng-template ngSwitchCase=\"textarea\">\r\n <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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 </ng-template>\r\n </div>\r\n\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\" x\r\n >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\r\n >\r\n</ng-template>\r\n" }]
|
|
572
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i1.ConfigStateService }, { type: i2$1.FormGroupDirective }, { type: i0.Injector }]; }, propDecorators: { data: [{
|
|
540
573
|
type: Input
|
|
541
574
|
}], prop: [{
|
|
542
575
|
type: Input
|
|
@@ -547,7 +580,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
547
580
|
args: ['field']
|
|
548
581
|
}] } });
|
|
549
582
|
function isRequired(validator) {
|
|
550
|
-
return validator === Validators.required ||
|
|
583
|
+
return (validator === Validators.required ||
|
|
584
|
+
validator === AbpValidators.required ||
|
|
585
|
+
validator.name === 'required');
|
|
551
586
|
}
|
|
552
587
|
|
|
553
588
|
class ActionList extends LinkedList {
|
|
@@ -717,15 +752,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
717
752
|
}]
|
|
718
753
|
}] });
|
|
719
754
|
|
|
720
|
-
const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER');
|
|
721
|
-
const EXTENSIONS_ACTION_TYPE = new InjectionToken('EXTENSIONS_ACTION_TYPE');
|
|
722
|
-
const EXTENSIONS_ACTION_DATA = new InjectionToken('EXTENSIONS_ACTION_DATA');
|
|
723
|
-
const EXTENSIONS_ACTION_CALLBACK = new InjectionToken('EXTENSIONS_ACTION_DATA');
|
|
724
|
-
const PROP_DATA_STREAM = new InjectionToken('PROP_DATA_STREAM');
|
|
725
|
-
const ENTITY_PROP_TYPE_CLASSES = new InjectionToken('ENTITY_PROP_TYPE_CLASSES', {
|
|
726
|
-
factory: () => ({}),
|
|
727
|
-
});
|
|
728
|
-
|
|
729
755
|
/* eslint-disable @angular-eslint/no-input-rename */
|
|
730
756
|
class PropDataDirective extends PropData {
|
|
731
757
|
constructor(tempRef, vcRef, injector) {
|
|
@@ -786,7 +812,7 @@ class ExtensibleFormComponent {
|
|
|
786
812
|
}
|
|
787
813
|
}
|
|
788
814
|
ExtensibleFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i2$1.ControlContainer }, { token: ExtensionsService }, { token: EXTENSIONS_IDENTIFIER }], target: i0.ɵɵFactoryTarget.Component });
|
|
789
|
-
ExtensibleFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "<ng-container *ngIf=\"form\">\r\n <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\r\n <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\r\n <ng-container *ngIf=\"prop.visible(data)\">\r\n <ng-container\r\n [formGroupName]=\"extraPropertiesKey\"\r\n *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n >\r\n <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\r\n </ng-container>\r\n\r\n <ng-template #tempDefault>\r\n <abp-extensible-form-prop\r\n *ngIf=\"form.get(prop.name)\"\r\n [prop]=\"prop\"\r\n [data]=\"data\"\r\n [first]=\"first\"\r\n ></abp-extensible-form-prop>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n", components: [{ type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i6.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }], viewProviders: [
|
|
815
|
+
ExtensibleFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "<ng-container *ngIf=\"form\">\r\n <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\r\n <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\r\n <ng-container *ngIf=\"prop.visible(data)\">\r\n <ng-container\r\n [formGroupName]=\"extraPropertiesKey\"\r\n *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n >\r\n <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\r\n </ng-container>\r\n\r\n <ng-template #tempDefault>\r\n <abp-extensible-form-prop [class]=\"prop.className\"\r\n *ngIf=\"form.get(prop.name)\"\r\n [prop]=\"prop\"\r\n [data]=\"data\"\r\n [first]=\"first\"\r\n ></abp-extensible-form-prop>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n", components: [{ type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i6.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }], viewProviders: [
|
|
790
816
|
{
|
|
791
817
|
provide: ControlContainer,
|
|
792
818
|
useFactory: selfFactory,
|
|
@@ -801,7 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
801
827
|
useFactory: selfFactory,
|
|
802
828
|
deps: [[new Optional(), new SkipSelf(), ControlContainer]],
|
|
803
829
|
},
|
|
804
|
-
], template: "<ng-container *ngIf=\"form\">\r\n <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\r\n <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\r\n <ng-container *ngIf=\"prop.visible(data)\">\r\n <ng-container\r\n [formGroupName]=\"extraPropertiesKey\"\r\n *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n >\r\n <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\r\n </ng-container>\r\n\r\n <ng-template #tempDefault>\r\n <abp-extensible-form-prop\r\n *ngIf=\"form.get(prop.name)\"\r\n [prop]=\"prop\"\r\n [data]=\"data\"\r\n [first]=\"first\"\r\n ></abp-extensible-form-prop>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n" }]
|
|
830
|
+
], template: "<ng-container *ngIf=\"form\">\r\n <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\r\n <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\r\n <ng-container *ngIf=\"prop.visible(data)\">\r\n <ng-container\r\n [formGroupName]=\"extraPropertiesKey\"\r\n *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n >\r\n <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\r\n </ng-container>\r\n\r\n <ng-template #tempDefault>\r\n <abp-extensible-form-prop [class]=\"prop.className\"\r\n *ngIf=\"form.get(prop.name)\"\r\n [prop]=\"prop\"\r\n [data]=\"data\"\r\n [first]=\"first\"\r\n ></abp-extensible-form-prop>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n" }]
|
|
805
831
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i2$1.ControlContainer }, { type: ExtensionsService }, { type: undefined, decorators: [{
|
|
806
832
|
type: Inject,
|
|
807
833
|
args: [EXTENSIONS_IDENTIFIER]
|
|
@@ -944,12 +970,15 @@ class ExtensibleTableComponent {
|
|
|
944
970
|
value,
|
|
945
971
|
};
|
|
946
972
|
if (prop.value.component) {
|
|
947
|
-
const injector = Injector.create(
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
973
|
+
const injector = Injector.create({
|
|
974
|
+
providers: [
|
|
975
|
+
{
|
|
976
|
+
provide: PROP_DATA_STREAM,
|
|
977
|
+
useValue: value,
|
|
978
|
+
},
|
|
979
|
+
],
|
|
980
|
+
parent: this.injector,
|
|
981
|
+
});
|
|
953
982
|
record[propKey].injector = injector;
|
|
954
983
|
record[propKey].component = prop.value.component;
|
|
955
984
|
}
|
|
@@ -1043,6 +1072,8 @@ var objectExtensions = /*#__PURE__*/Object.freeze({
|
|
|
1043
1072
|
__proto__: null
|
|
1044
1073
|
});
|
|
1045
1074
|
|
|
1075
|
+
const EXTENSIBLE_FORM_VIEW_PROVIDER = { provide: ControlContainer, useExisting: FormGroupDirective };
|
|
1076
|
+
|
|
1046
1077
|
class BaseUiExtensionsModule {
|
|
1047
1078
|
}
|
|
1048
1079
|
BaseUiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BaseUiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -1368,5 +1399,5 @@ function isUndefined(obj) {
|
|
|
1368
1399
|
* Generated bundle index. Do not edit.
|
|
1369
1400
|
*/
|
|
1370
1401
|
|
|
1371
|
-
export { ActionList, BaseUiExtensionsModule, CreateFormPropsFactory, CreateInjectorPipe, DateAdapter, DateTimeAdapter, DateTimePickerComponent, DisabledDirective, ENTITY_PROP_TYPE_CLASSES, EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA, EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER, EXTRA_PROPERTIES_KEY, EditFormPropsFactory, EntityAction, EntityActionList, EntityActions, EntityActionsFactory, EntityProp, EntityPropList, EntityProps, EntityPropsFactory, ExtensibleFormComponent, ExtensibleFormPropComponent, ExtensibleTableComponent, ExtensionsService, FormProp, FormPropData, FormPropList, FormProps, GridActionsComponent, objectExtensions as ObjectExtensions, PROP_DATA_STREAM, PageToolbarComponent, PropDataDirective, PropList, TimeAdapter, ToolbarAction, ToolbarActionList, ToolbarActions, ToolbarActionsFactory, ToolbarComponent, UiExtensionsModule, createExtraPropertyValueResolver, generateFormFromProps, getObjectExtensionEntitiesFromStore, mapEntitiesToContributors, mergeWithDefaultActions, mergeWithDefaultProps };
|
|
1402
|
+
export { ActionList, BaseUiExtensionsModule, CreateFormPropsFactory, CreateInjectorPipe, DateAdapter, DateTimeAdapter, DateTimePickerComponent, DisabledDirective, ENTITY_PROP_TYPE_CLASSES, EXTENSIBLE_FORM_VIEW_PROVIDER, EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA, EXTENSIONS_ACTION_TYPE, EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_IDENTIFIER, EXTRA_PROPERTIES_KEY, EditFormPropsFactory, EntityAction, EntityActionList, EntityActions, EntityActionsFactory, EntityProp, EntityPropList, EntityProps, EntityPropsFactory, ExtensibleFormComponent, ExtensibleFormPropComponent, ExtensibleTableComponent, ExtensionsService, FormProp, FormPropData, FormPropList, FormProps, GridActionsComponent, objectExtensions as ObjectExtensions, PROP_DATA_STREAM, PageToolbarComponent, PropDataDirective, PropList, TimeAdapter, ToolbarAction, ToolbarActionList, ToolbarActions, ToolbarActionsFactory, ToolbarComponent, UiExtensionsModule, createExtraPropertyValueResolver, generateFormFromProps, getObjectExtensionEntitiesFromStore, mapEntitiesToContributors, mergeWithDefaultActions, mergeWithDefaultProps };
|
|
1372
1403
|
//# sourceMappingURL=abp-ng.theme.shared-extensions.mjs.map
|