mirror of https://github.com/abpframework/abp.git
Fahri Gedik
8 months ago
committed by
GitHub
GitHub
36 changed files with 499 additions and 768 deletions
@ -1,177 +1,113 @@ |
|||||
<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" /> |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
<div [ngClass]="containerClassName" class="mb-2"> |
<div [class]="containerClassName" class="mb-2"> |
||||
@switch (getComponent(prop)) { |
@switch (getComponent(prop)) { |
||||
@case ('input') { |
@case ('input') { |
||||
<ng-template [ngTemplateOutlet]="label" /> |
<ng-template [ngTemplateOutlet]="label" /> |
||||
<input |
<input #field [id]="prop.id" [formControlName]="prop.name" [autocomplete]="prop.autocomplete" [type]="getType(prop)" |
||||
#field |
[abpDisabled]="disabled" [readonly]="readonly" class="form-control" /> |
||||
[id]="prop.id" |
} |
||||
[formControlName]="prop.name" |
@case ('hidden') { |
||||
[autocomplete]="prop.autocomplete" |
<input [formControlName]="prop.name" type="hidden" /> |
||||
[type]="getType(prop)" |
} |
||||
[abpDisabled]="disabled" |
@case ('checkbox') { |
||||
[readonly]="readonly" |
<div class="form-check" validationTarget> |
||||
class="form-control" |
<input #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" type="checkbox" |
||||
/> |
class="form-check-input" /> |
||||
} |
<ng-template [ngTemplateOutlet]="label" [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }" /> |
||||
@case ('hidden') { |
</div> |
||||
<input [formControlName]="prop.name" type="hidden" /> |
} |
||||
} |
@case ('select') { |
||||
@case ('checkbox') { |
<ng-template [ngTemplateOutlet]="label" /> |
||||
<div class="form-check" validationTarget> |
<select #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" |
||||
<input |
class="form-select form-control"> |
||||
#field |
@for (option of options$ | async; track option.value) { |
||||
[id]="prop.id" |
<option [ngValue]="option.value"> |
||||
[formControlName]="prop.name" |
@if (prop.isExtra) { |
||||
[abpDisabled]="disabled" |
{{ '::' + option.key | abpLocalization }} |
||||
type="checkbox" |
} @else { |
||||
class="form-check-input" |
{{ option.key }} |
||||
/> |
} |
||||
<ng-template |
</option> |
||||
[ngTemplateOutlet]="label" |
|
||||
[ngTemplateOutletContext]="{ $implicit: 'form-check-label' }" |
|
||||
/> |
|
||||
</div> |
|
||||
} |
|
||||
@case ('select') { |
|
||||
<ng-template [ngTemplateOutlet]="label" /> |
|
||||
<select |
|
||||
#field |
|
||||
[id]="prop.id" |
|
||||
[formControlName]="prop.name" |
|
||||
[abpDisabled]="disabled" |
|
||||
class="form-select form-control" |
|
||||
> |
|
||||
@for (option of options$ | async; track option.value) { |
|
||||
<option [ngValue]="option.value"> |
|
||||
@if (prop.isExtra) { |
|
||||
{{ '::' + option.key | abpLocalization }} |
|
||||
} @else { |
|
||||
{{ option.key }} |
|
||||
} |
|
||||
</option> |
|
||||
} |
|
||||
</select> |
|
||||
} |
|
||||
@case ('multiselect') { |
|
||||
<ng-template [ngTemplateOutlet]="label"></ng-template> |
|
||||
<abp-extensible-form-multi-select |
|
||||
[prop]="prop" |
|
||||
[options]="options$ | async" |
|
||||
[formControlName]="prop.name" |
|
||||
[abpDisabled]="disabled" |
|
||||
/> |
|
||||
} |
|
||||
@case ('typeahead') { |
|
||||
<ng-template [ngTemplateOutlet]="label" /> |
|
||||
<div #typeahead class="position-relative" validationStyle validationTarget> |
|
||||
<input |
|
||||
#field |
|
||||
[id]="prop.id" |
|
||||
[autocomplete]="prop.autocomplete" |
|
||||
[abpDisabled]="disabled" |
|
||||
[ngbTypeahead]="search" |
|
||||
[editable]="false" |
|
||||
[inputFormatter]="typeaheadFormatter" |
|
||||
[resultFormatter]="typeaheadFormatter" |
|
||||
[ngModelOptions]="{ standalone: true }" |
|
||||
[(ngModel)]="typeaheadModel" |
|
||||
(selectItem)="setTypeaheadValue($event.item)" |
|
||||
(blur)="setTypeaheadValue(typeaheadModel)" |
|
||||
[class.is-invalid]="typeahead.classList.contains('is-invalid')" |
|
||||
class="form-control" |
|
||||
/> |
|
||||
<input [formControlName]="prop.name" type="hidden" /> |
|
||||
</div> |
|
||||
} |
|
||||
@case ('date') { |
|
||||
<ng-template [ngTemplateOutlet]="label" /> |
|
||||
<input |
|
||||
[id]="prop.id" |
|
||||
[formControlName]="prop.name" |
|
||||
(click)="datepicker.open()" |
|
||||
(keyup.space)="datepicker.open()" |
|
||||
ngbDatepicker |
|
||||
#datepicker="ngbDatepicker" |
|
||||
type="text" |
|
||||
class="form-control" |
|
||||
/> |
|
||||
} |
|
||||
@case ('time') { |
|
||||
<ng-template [ngTemplateOutlet]="label" /> |
|
||||
<ngb-timepicker [formControlName]="prop.name" /> |
|
||||
} |
|
||||
@case ('dateTime') { |
|
||||
<ng-template [ngTemplateOutlet]="label" /> |
|
||||
<abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" /> |
|
||||
} |
|
||||
@case ('textarea') { |
|
||||
<ng-template [ngTemplateOutlet]="label" /> |
|
||||
<textarea |
|
||||
#field |
|
||||
[id]="prop.id" |
|
||||
[formControlName]="prop.name" |
|
||||
[abpDisabled]="disabled" |
|
||||
[readonly]="readonly" |
|
||||
class="form-control" |
|
||||
></textarea> |
|
||||
} |
} |
||||
@case ('passwordinputgroup') { |
</select> |
||||
<ng-template [ngTemplateOutlet]="label" /> |
} |
||||
<div class="input-group form-group" validationTarget> |
@case ('multiselect') { |
||||
<input |
<ng-template [ngTemplateOutlet]="label"></ng-template> |
||||
class="form-control" |
<abp-extensible-form-multi-select [prop]="prop" [options]="options$ | async" [formControlName]="prop.name" |
||||
[id]="prop.id" |
[abpDisabled]="disabled" /> |
||||
[formControlName]="prop.name" |
} |
||||
[abpShowPassword]="showPassword" |
@case ('typeahead') { |
||||
/> |
<ng-template [ngTemplateOutlet]="label" /> |
||||
<button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword"> |
<div #typeahead class="position-relative" validationStyle validationTarget> |
||||
<i |
<input #field [id]="prop.id" [autocomplete]="prop.autocomplete" [abpDisabled]="disabled" [ngbTypeahead]="search" |
||||
class="fa" |
[editable]="false" [inputFormatter]="typeaheadFormatter" [resultFormatter]="typeaheadFormatter" |
||||
aria-hidden="true" |
[ngModelOptions]="{ standalone: true }" [(ngModel)]="typeaheadModel" |
||||
[ngClass]="{ |
(selectItem)="setTypeaheadValue($event.item)" (blur)="setTypeaheadValue(typeaheadModel)" |
||||
|
[class.is-invalid]="typeahead.classList.contains('is-invalid')" class="form-control" /> |
||||
|
<input [formControlName]="prop.name" type="hidden" /> |
||||
|
</div> |
||||
|
} |
||||
|
@case ('date') { |
||||
|
<ng-template [ngTemplateOutlet]="label" /> |
||||
|
<input [id]="prop.id" [formControlName]="prop.name" (click)="datepicker.open()" (keyup.space)="datepicker.open()" |
||||
|
ngbDatepicker #datepicker="ngbDatepicker" type="text" class="form-control" /> |
||||
|
} |
||||
|
@case ('time') { |
||||
|
<ng-template [ngTemplateOutlet]="label" /> |
||||
|
<ngb-timepicker [formControlName]="prop.name" /> |
||||
|
} |
||||
|
@case ('dateTime') { |
||||
|
<ng-template [ngTemplateOutlet]="label" /> |
||||
|
<abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" /> |
||||
|
} |
||||
|
@case ('textarea') { |
||||
|
<ng-template [ngTemplateOutlet]="label" /> |
||||
|
<textarea #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" [readonly]="readonly" |
||||
|
class="form-control"></textarea> |
||||
|
} |
||||
|
@case ('passwordinputgroup') { |
||||
|
<ng-template [ngTemplateOutlet]="label" /> |
||||
|
<div class="input-group form-group" validationTarget> |
||||
|
<input class="form-control" [id]="prop.id" [formControlName]="prop.name" [abpShowPassword]="showPassword" /> |
||||
|
<button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword"> |
||||
|
<i class="fa" aria-hidden="true" [class]="{ |
||||
'fa-eye-slash': !showPassword, |
'fa-eye-slash': !showPassword, |
||||
'fa-eye': showPassword, |
'fa-eye': showPassword, |
||||
}" |
}"></i> |
||||
></i> |
</button> |
||||
</button> |
</div> |
||||
</div> |
} |
||||
} |
|
||||
} |
} |
||||
|
|
||||
@if (prop.formText) { |
@if (prop.formText) { |
||||
<small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small> |
<small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small> |
||||
} |
} |
||||
</div> |
</div> |
||||
</ng-container> |
</ng-container> |
||||
|
|
||||
<ng-template #label let-classes> |
<ng-template #label let-classes> |
||||
<label [htmlFor]="prop.id" [ngClass]="classes || 'form-label d-inline-block'"> |
<label [htmlFor]="prop.id" [class]="classes || 'form-label d-inline-block'"> |
||||
<span class="d-inline-flex align-items-center gap-1 text-nowrap"> |
<span class="d-inline-flex align-items-center gap-1 text-nowrap"> |
||||
@if (prop.displayTextResolver) { |
@if (prop.displayTextResolver) { |
||||
{{ prop.displayTextResolver(data) | abpLocalization }} |
{{ prop.displayTextResolver(data) | abpLocalization }} |
||||
} @else { |
} @else { |
||||
@if (prop.isExtra) { |
@if (prop.isExtra) { |
||||
{{ '::' + prop.displayName | abpLocalization }} |
{{ '::' + prop.displayName | abpLocalization }} |
||||
} @else { |
} @else { |
||||
{{ prop.displayName | abpLocalization }} |
{{ prop.displayName | abpLocalization }} |
||||
} |
} |
||||
} |
} |
||||
{{ asterisk }} |
{{ asterisk }} |
||||
@if (prop.tooltip) { |
@if (prop.tooltip) { |
||||
<i |
<i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'" |
||||
[ngbTooltip]="prop.tooltip.text | abpLocalization" |
container="body" class="bi bi-info-circle"></i> |
||||
[placement]="prop.tooltip.placement || 'auto'" |
|
||||
container="body" |
|
||||
class="bi bi-info-circle" |
|
||||
></i> |
|
||||
} |
} |
||||
</span> |
</span> |
||||
</label> |
</label> |
||||
</ng-template> |
</ng-template> |
||||
@ -1,46 +1,35 @@ |
|||||
@if (form) { |
@if (form) { |
||||
@for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) { |
@for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) { |
||||
<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record"> |
<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record"> |
||||
@if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) { |
@if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) { |
||||
<div |
<div [class]="groupedProp.group?.className" |
||||
[ngClass]="groupedProp.group?.className" |
[attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"> |
||||
[attr.data-name]="groupedProp.group?.name || groupedProp.group?.className" |
<ng-container [ngTemplateOutlet]="propListTemplate" |
||||
> |
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first}"> |
||||
<ng-container |
|
||||
[ngTemplateOutlet]="propListTemplate" |
|
||||
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first}" |
|
||||
> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
} @else { |
|
||||
<ng-container |
|
||||
[ngTemplateOutlet]="propListTemplate" |
|
||||
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first }" |
|
||||
> |
|
||||
</ng-container> |
|
||||
} |
|
||||
</ng-container> |
</ng-container> |
||||
|
</div> |
||||
|
} @else { |
||||
|
<ng-container [ngTemplateOutlet]="propListTemplate" |
||||
|
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first }"> |
||||
|
</ng-container> |
||||
} |
} |
||||
|
</ng-container> |
||||
|
} |
||||
} |
} |
||||
|
|
||||
<ng-template let-groupedProp="groupedProp" let-data="data" let-isFirstGroup="isFirstGroup" #propListTemplate> |
<ng-template let-groupedProp="groupedProp" let-data="data" let-isFirstGroup="isFirstGroup" #propListTemplate> |
||||
@for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) { |
@for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) { |
||||
@if (prop.visible(data)) { |
@if (prop.visible(data)) { |
||||
@if (extraProperties.controls[prop.name]) { |
@if (extraProperties.controls[prop.name]) { |
||||
<ng-container [formGroupName]="extraPropertiesKey"> |
<ng-container [formGroupName]="extraPropertiesKey"> |
||||
<abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" /> |
<abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" /> |
||||
</ng-container> |
</ng-container> |
||||
} @else { |
} @else { |
||||
@if (form.get(prop.name)) { |
@if (form.get(prop.name)) { |
||||
<abp-extensible-form-prop |
<abp-extensible-form-prop [class]="prop.className" [prop]="prop" [data]="data" [first]="first" |
||||
[class]="prop.className" |
[isFirstGroup]="isFirstGroup" /> |
||||
[prop]="prop" |
} |
||||
[data]="data" |
} |
||||
[first]="first" |
} |
||||
[isFirstGroup]="isFirstGroup" |
|
||||
/> |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
</ng-template> |
</ng-template> |
||||
@ -1,88 +1,55 @@ |
|||||
@if (actionList.length > 1) { |
@if (actionList.length > 1) { |
||||
<div ngbDropdown container="body" class="d-inline-block"> |
<div ngbDropdown container="body" class="d-inline-block"> |
||||
<button |
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ngbDropdownToggle> |
||||
class="btn btn-primary btn-sm dropdown-toggle" |
<i [class]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }} |
||||
data-toggle="dropdown" |
</button> |
||||
aria-haspopup="true" |
<div ngbDropdownMenu> |
||||
ngbDropdownToggle |
@for (action of actionList; track action.text) { |
||||
> |
<ng-container [ngTemplateOutlet]="dropDownBtnItemTmp" [ngTemplateOutletContext]="{ $implicit: action }"> |
||||
<i [ngClass]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }} |
</ng-container> |
||||
</button> |
} |
||||
<div ngbDropdownMenu> |
|
||||
@for (action of actionList; track action.text) { |
|
||||
<ng-container |
|
||||
[ngTemplateOutlet]="dropDownBtnItemTmp" |
|
||||
[ngTemplateOutletContext]="{ $implicit: action }" |
|
||||
> |
|
||||
</ng-container> |
|
||||
} |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
|
</div> |
||||
} |
} |
||||
|
|
||||
@if (actionList.length === 1) { |
@if (actionList.length === 1) { |
||||
<ng-container |
<ng-container [ngTemplateOutlet]="btnTmp" |
||||
[ngTemplateOutlet]="btnTmp" |
[ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"></ng-container> |
||||
[ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }" |
|
||||
></ng-container> |
|
||||
} |
} |
||||
|
|
||||
<ng-template #dropDownBtnItemTmp let-action> |
<ng-template #dropDownBtnItemTmp let-action> |
||||
@if (action.visible(data)) { |
@if (action.visible(data)) { |
||||
<button |
<button ngbDropdownItem *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" |
||||
ngbDropdownItem |
type="button"> |
||||
*abpPermission="action.permission; runChangeDetection: false" |
<ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container> |
||||
(click)="action.action(data)" |
</button> |
||||
type="button" |
|
||||
> |
|
||||
<ng-container |
|
||||
*ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }" |
|
||||
></ng-container> |
|
||||
</button> |
|
||||
} |
} |
||||
</ng-template> |
</ng-template> |
||||
|
|
||||
<ng-template #buttonContentTmp let-action> |
<ng-template #buttonContentTmp let-action> |
||||
<i [ngClass]="action.icon" [class.me-1]="action.icon && !action.showOnlyIcon"></i> |
<i [class]="action.icon" [class.me-1]="action.icon && !action.showOnlyIcon"></i> |
||||
@if (!action.showOnlyIcon) { |
@if (!action.showOnlyIcon) { |
||||
@if (action.icon) { |
@if (action.icon) { |
||||
<span>{{ action.text | abpLocalization }}</span> |
<span>{{ action.text | abpLocalization }}</span> |
||||
} @else { |
} @else { |
||||
<div abpEllipsis>{{ action.text | abpLocalization }}</div> |
<div abpEllipsis>{{ action.text | abpLocalization }}</div> |
||||
} |
} |
||||
} |
} |
||||
</ng-template> |
</ng-template> |
||||
|
|
||||
<ng-template #btnTmp let-action> |
<ng-template #btnTmp let-action> |
||||
@if (action.visible(data)) { |
@if (action.visible(data)) { |
||||
@if (action.tooltip) { |
@if (action.tooltip) { |
||||
<button |
<button *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button" |
||||
*abpPermission="action.permission; runChangeDetection: false" |
[class]="action.btnClass" [style]="action.btnStyle" [ngbTooltip]="action.tooltip.text | abpLocalization" |
||||
(click)="action.action(data)" |
[placement]="action.tooltip.placement || 'auto'" triggers="hover" container="body"> |
||||
type="button" |
<ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container> |
||||
[class]="action.btnClass" |
</button> |
||||
[style]="action.btnStyle" |
} @else { |
||||
[ngbTooltip]="action.tooltip.text | abpLocalization" |
<button *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button" |
||||
[placement]="action.tooltip.placement || 'auto'" |
[class]="action.btnClass" [style]="action.btnStyle"> |
||||
triggers="hover" |
<ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container> |
||||
container="body" |
</button> |
||||
> |
|
||||
<ng-container |
|
||||
*ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }" |
|
||||
></ng-container> |
|
||||
</button> |
|
||||
} @else { |
|
||||
<button |
|
||||
*abpPermission="action.permission; runChangeDetection: false" |
|
||||
(click)="action.action(data)" |
|
||||
type="button" |
|
||||
[class]="action.btnClass" |
|
||||
[style]="action.btnStyle" |
|
||||
> |
|
||||
<ng-container |
|
||||
*ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }" |
|
||||
></ng-container> |
|
||||
</button> |
|
||||
} |
|
||||
} |
} |
||||
</ng-template> |
} |
||||
|
</ng-template> |
||||
@ -1,26 +1,12 @@ |
|||||
@for (alert of service.alerts$ | async; track i; let i = $index) { |
@for (alert of service.alerts$ | async; track i; let i = $index) { |
||||
<div |
<div class="alert alert-{{ alert.type }} fade show" [class.alert-dismissible]="alert.dismissible" role="alert"> |
||||
class="alert alert-{{ alert.type }} fade show" |
@if (alert.title) { |
||||
[ngClass]="{ 'alert-dismissible fade show': alert.dismissible }" |
<h4 class="alert-heading" [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams"> |
||||
role="alert" |
</h4> |
||||
> |
} |
||||
@if (alert.title) { |
<span [innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams"></span> |
||||
<h4 |
@if (alert.dismissible) { |
||||
class="alert-heading" |
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="service.remove(i)"></button> |
||||
[innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams" |
} |
||||
></h4> |
</div> |
||||
} |
} |
||||
<span |
|
||||
[innerHTML]="alert.message | abpSafeHtml | abpLocalization: alert.messageLocalizationParams" |
|
||||
></span> |
|
||||
@if (alert.dismissible) { |
|
||||
<button |
|
||||
type="button" |
|
||||
class="btn-close" |
|
||||
data-dismiss="alert" |
|
||||
aria-label="Close" |
|
||||
(click)="service.remove(i)" |
|
||||
></button> |
|
||||
} |
|
||||
</div> |
|
||||
} |
|
||||
@ -1,51 +1,34 @@ |
|||||
@if (confirmation$ | async; as data) { |
@if (confirmation$ | async; as data) { |
||||
<div class="confirmation"> |
<div class="confirmation"> |
||||
<div |
<div class="confirmation-backdrop" (click)="data.options?.dismissible ? close(dismiss) : null"></div> |
||||
class="confirmation-backdrop" |
<div class="confirmation-dialog"> |
||||
(click)="data.options?.dismissible ? close(dismiss) : null" |
@if (data.severity || isCustomIconExists(data)) { |
||||
></div> |
<div class="icon-container" [class]="data.severity"> |
||||
<div class="confirmation-dialog"> |
@if (isIconTemplateExits(data)) { |
||||
@if (data.severity || isCustomIconExists(data)) { |
<div [outerHTML]="data.options.iconTemplate"></div> |
||||
<div class="icon-container" [ngClass]="data.severity"> |
} @else { |
||||
@if (isIconTemplateExits(data)) { |
<i class="icon" [class]="getIconClass(data)"></i> |
||||
<div [outerHTML]="data.options.iconTemplate"></div> |
} |
||||
} @else { |
</div> |
||||
<i class="icon" [ngClass]="getIconClass(data)"></i> |
} |
||||
} |
<div class="content"> |
||||
</div> |
@if (data.title) { |
||||
|
<h1 class="title" [innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams"></h1> |
||||
|
} |
||||
|
@if (data.message) { |
||||
|
<p class="message" [innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams"></p> |
||||
|
} |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
@if (!data?.options?.hideCancelBtn) { |
||||
|
<button id="cancel" class="btn btn-outline-primary me-2" |
||||
|
[innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization" (click)="close(reject)"></button> |
||||
|
} |
||||
|
@if (!data?.options?.hideYesBtn) { |
||||
|
<button id="confirm" class="btn btn-primary" [innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization" |
||||
|
(click)="close(confirm)"></button> |
||||
} |
} |
||||
<div class="content"> |
|
||||
@if (data.title) { |
|
||||
<h1 |
|
||||
class="title" |
|
||||
[innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams" |
|
||||
></h1> |
|
||||
} |
|
||||
@if (data.message) { |
|
||||
<p |
|
||||
class="message" |
|
||||
[innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams" |
|
||||
></p> |
|
||||
} |
|
||||
</div> |
|
||||
<div class="footer"> |
|
||||
@if (!data?.options?.hideCancelBtn) { |
|
||||
<button |
|
||||
id="cancel" |
|
||||
class="btn btn-outline-primary me-2" |
|
||||
[innerHTML]="data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization" |
|
||||
(click)="close(reject)" |
|
||||
></button> |
|
||||
} |
|
||||
@if (!data?.options?.hideYesBtn) { |
|
||||
<button |
|
||||
id="confirm" |
|
||||
class="btn btn-primary" |
|
||||
[innerHTML]="data.options?.yesText || 'AbpUi::Yes' | abpLocalization" |
|
||||
(click)="close(confirm)" |
|
||||
></button> |
|
||||
} |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
} |
</div> |
||||
|
} |
||||
@ -1,19 +1,17 @@ |
|||||
<div class="abp-toast" [ngClass]="severityClass" (click)="tap()"> |
<div class="abp-toast" [class]="severityClass" (click)="tap()"> |
||||
<div class="abp-toast-icon"> |
<div class="abp-toast-icon"> |
||||
<i class="bi icon" [ngClass]="iconClass" aria-hidden="true"></i> |
<i class="bi icon" [class]="iconClass" aria-hidden="true"></i> |
||||
</div> |
</div> |
||||
<div class="abp-toast-content"> |
<div class="abp-toast-content"> |
||||
@if (toast.options?.closable) { |
@if (toast.options?.closable) { |
||||
<button class="abp-toast-close-button" (click)="close()"> |
<button class="abp-toast-close-button" (click)="close()"> |
||||
<i class="bi bi-x fs-4" aria-hidden="true"></i> |
<i class="bi bi-x fs-4" aria-hidden="true"></i> |
||||
</button> |
</button> |
||||
} |
} |
||||
<div class="abp-toast-title"> |
<div class="abp-toast-title"> |
||||
{{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }} |
{{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }} |
||||
</div> |
</div> |
||||
<p |
<p class="abp-toast-message" |
||||
class="abp-toast-message" |
[innerHTML]="toast.message | abpLocalization: toast.options?.messageLocalizationParams"></p> |
||||
[innerHTML]="toast.message | abpLocalization: toast.options?.messageLocalizationParams" |
|
||||
></p> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
Loading…
Reference in new issue