tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #22942 from abpframework/auto-merge/rel-9-1/3741 

Merge branch rel-9.2 with rel-9.1
pull/22943/head
maliming 1 year ago
committed by GitHub
parent
313e0529e0 5fb90ad4ec
commit
6d77eb933a
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
1 changed files with 35 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html

68
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
View File

@ -1,15 +1,14 @@
<ng-container *abpPermission="prop.permission; runChangeDetection: false"> <ng-container *abpPermission="prop.permission; runChangeDetection: false">
@switch (getComponent(prop)) { @switch (getComponent(prop)) {
@case ('template') { @case ('template') {
<ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent"> <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" />
</ng-container>
} }
} }
<div [ngClass]="containerClassName" class="mb-2"> <div [ngClass]="containerClassName" class="mb-2">
@switch (getComponent(prop)) { @switch (getComponent(prop)) {
@case ('input') { @case ('input') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<input <input
#field #field
[id]="prop.id" [id]="prop.id"
@ -22,7 +21,7 @@
/> />
} }
@case ('hidden') { @case ('hidden') {
<input [formControlName]="prop.name" type="hidden"/> <input [formControlName]="prop.name" type="hidden" />
} }
@case ('checkbox') { @case ('checkbox') {
<div class="form-check" validationTarget> <div class="form-check" validationTarget>
@ -37,11 +36,11 @@
<ng-template <ng-template
[ngTemplateOutlet]="label" [ngTemplateOutlet]="label"
[ngTemplateOutletContext]="{ $implicit: 'form-check-label' }" [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
></ng-template> />
</div> </div>
} }
@case ('select') { @case ('select') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<select <select
#field #field
[id]="prop.id" [id]="prop.id"
@ -66,10 +65,11 @@
[prop]="prop" [prop]="prop"
[options]="options$ | async" [options]="options$ | async"
[formControlName]="prop.name" [formControlName]="prop.name"
[abpDisabled]="disabled"/> [abpDisabled]="disabled"
/>
} }
@case ('typeahead') { @case ('typeahead') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<div #typeahead class="position-relative" validationStyle validationTarget> <div #typeahead class="position-relative" validationStyle validationTarget>
<input <input
#field #field
@ -87,11 +87,11 @@
[class.is-invalid]="typeahead.classList.contains('is-invalid')" [class.is-invalid]="typeahead.classList.contains('is-invalid')"
class="form-control" class="form-control"
/> />
<input [formControlName]="prop.name" type="hidden"/> <input [formControlName]="prop.name" type="hidden" />
</div> </div>
} }
@case ('date') { @case ('date') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<input <input
[id]="prop.id" [id]="prop.id"
[formControlName]="prop.name" [formControlName]="prop.name"
@ -104,15 +104,15 @@
/> />
} }
@case ('time') { @case ('time') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<ngb-timepicker [formControlName]="prop.name"></ngb-timepicker> <ngb-timepicker [formControlName]="prop.name" />
} }
@case ('dateTime') { @case ('dateTime') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async"/> <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
} }
@case ('textarea') { @case ('textarea') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<textarea <textarea
#field #field
[id]="prop.id" [id]="prop.id"
@ -123,7 +123,7 @@
></textarea> ></textarea>
} }
@case ('passwordinputgroup') { @case ('passwordinputgroup') {
<ng-template [ngTemplateOutlet]="label"></ng-template> <ng-template [ngTemplateOutlet]="label" />
<div class="input-group form-group" validationTarget> <div class="input-group form-group" validationTarget>
<input <input
class="form-control" class="form-control"
@ -152,24 +152,26 @@
</ng-container> </ng-container>
<ng-template #label let-classes> <ng-template #label let-classes>
<label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'"> <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label d-inline-block'">
@if (prop.displayTextResolver) { <span class="d-inline-flex align-items-center gap-1 text-nowrap">
{{ prop.displayTextResolver(data) | abpLocalization }} @if (prop.displayTextResolver) {
} @else { {{ prop.displayTextResolver(data) | abpLocalization }}
@if (prop.isExtra) {
{{ '::' + prop.displayName | abpLocalization }}
} @else { } @else {
{{ prop.displayName | abpLocalization }} @if (prop.isExtra) {
{{ '::' + prop.displayName | abpLocalization }}
} @else {
{{ prop.displayName | abpLocalization }}
}
} }
} {{ asterisk }}
{{ asterisk }} @if (prop.tooltip) {
@if (prop.tooltip) { <i
<i [ngbTooltip]="prop.tooltip.text | abpLocalization"
[ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"
[placement]="prop.tooltip.placement || 'auto'" container="body"
container="body" class="bi bi-info-circle"
class="bi bi-info-circle" ></i>
></i> }
} </span>
</label> </label>
</ng-template> </ng-template>

Write Preview
Loading…
Cancel
Save