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"> |
|||
@switch (getComponent(prop)) { |
|||
@case ('template') { |
|||
<ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" /> |
|||
} |
|||
@case ('template') { |
|||
<ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" /> |
|||
} |
|||
} |
|||
|
|||
<div [ngClass]="containerClassName" class="mb-2"> |
|||
<div [class]="containerClassName" class="mb-2"> |
|||
@switch (getComponent(prop)) { |
|||
@case ('input') { |
|||
<ng-template [ngTemplateOutlet]="label" /> |
|||
<input |
|||
#field |
|||
[id]="prop.id" |
|||
[formControlName]="prop.name" |
|||
[autocomplete]="prop.autocomplete" |
|||
[type]="getType(prop)" |
|||
[abpDisabled]="disabled" |
|||
[readonly]="readonly" |
|||
class="form-control" |
|||
/> |
|||
} |
|||
@case ('hidden') { |
|||
<input [formControlName]="prop.name" type="hidden" /> |
|||
} |
|||
@case ('checkbox') { |
|||
<div class="form-check" validationTarget> |
|||
<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' }" |
|||
/> |
|||
</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 ('input') { |
|||
<ng-template [ngTemplateOutlet]="label" /> |
|||
<input #field [id]="prop.id" [formControlName]="prop.name" [autocomplete]="prop.autocomplete" [type]="getType(prop)" |
|||
[abpDisabled]="disabled" [readonly]="readonly" class="form-control" /> |
|||
} |
|||
@case ('hidden') { |
|||
<input [formControlName]="prop.name" type="hidden" /> |
|||
} |
|||
@case ('checkbox') { |
|||
<div class="form-check" validationTarget> |
|||
<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' }" /> |
|||
</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> |
|||
} |
|||
@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" |
|||
[ngClass]="{ |
|||
</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') { |
|||
<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': showPassword, |
|||
}" |
|||
></i> |
|||
</button> |
|||
</div> |
|||
} |
|||
}"></i> |
|||
</button> |
|||
</div> |
|||
} |
|||
} |
|||
|
|||
@if (prop.formText) { |
|||
<small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small> |
|||
<small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small> |
|||
} |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<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"> |
|||
@if (prop.displayTextResolver) { |
|||
{{ prop.displayTextResolver(data) | abpLocalization }} |
|||
{{ prop.displayTextResolver(data) | abpLocalization }} |
|||
} @else { |
|||
@if (prop.isExtra) { |
|||
{{ '::' + prop.displayName | abpLocalization }} |
|||
} @else { |
|||
{{ prop.displayName | abpLocalization }} |
|||
} |
|||
@if (prop.isExtra) { |
|||
{{ '::' + prop.displayName | abpLocalization }} |
|||
} @else { |
|||
{{ prop.displayName | abpLocalization }} |
|||
} |
|||
} |
|||
{{ asterisk }} |
|||
@if (prop.tooltip) { |
|||
<i |
|||
[ngbTooltip]="prop.tooltip.text | abpLocalization" |
|||
[placement]="prop.tooltip.placement || 'auto'" |
|||
container="body" |
|||
class="bi bi-info-circle" |
|||
></i> |
|||
<i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'" |
|||
container="body" class="bi bi-info-circle"></i> |
|||
} |
|||
</span> |
|||
</label> |
|||
</ng-template> |
|||
</ng-template> |
|||
@ -1,46 +1,35 @@ |
|||
@if (form) { |
|||
@for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) { |
|||
<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record"> |
|||
@if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) { |
|||
<div |
|||
[ngClass]="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> |
|||
</div> |
|||
} @else { |
|||
<ng-container |
|||
[ngTemplateOutlet]="propListTemplate" |
|||
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first }" |
|||
> |
|||
</ng-container> |
|||
} |
|||
@for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) { |
|||
<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record"> |
|||
@if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) { |
|||
<div [class]="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> |
|||
</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> |
|||
@for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) { |
|||
@if (prop.visible(data)) { |
|||
@if (extraProperties.controls[prop.name]) { |
|||
<ng-container [formGroupName]="extraPropertiesKey"> |
|||
<abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" /> |
|||
</ng-container> |
|||
} @else { |
|||
@if (form.get(prop.name)) { |
|||
<abp-extensible-form-prop |
|||
[class]="prop.className" |
|||
[prop]="prop" |
|||
[data]="data" |
|||
[first]="first" |
|||
[isFirstGroup]="isFirstGroup" |
|||
/> |
|||
} |
|||
} |
|||
} |
|||
@if (prop.visible(data)) { |
|||
@if (extraProperties.controls[prop.name]) { |
|||
<ng-container [formGroupName]="extraPropertiesKey"> |
|||
<abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" /> |
|||
</ng-container> |
|||
} @else { |
|||
@if (form.get(prop.name)) { |
|||
<abp-extensible-form-prop [class]="prop.className" [prop]="prop" [data]="data" [first]="first" |
|||
[isFirstGroup]="isFirstGroup" /> |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</ng-template> |
|||
</ng-template> |
|||
@ -1,88 +1,55 @@ |
|||
@if (actionList.length > 1) { |
|||
<div ngbDropdown container="body" class="d-inline-block"> |
|||
<button |
|||
class="btn btn-primary btn-sm dropdown-toggle" |
|||
data-toggle="dropdown" |
|||
aria-haspopup="true" |
|||
ngbDropdownToggle |
|||
> |
|||
<i [ngClass]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }} |
|||
</button> |
|||
<div ngbDropdownMenu> |
|||
@for (action of actionList; track action.text) { |
|||
<ng-container |
|||
[ngTemplateOutlet]="dropDownBtnItemTmp" |
|||
[ngTemplateOutletContext]="{ $implicit: action }" |
|||
> |
|||
</ng-container> |
|||
} |
|||
</div> |
|||
<div ngbDropdown container="body" class="d-inline-block"> |
|||
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ngbDropdownToggle> |
|||
<i [class]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }} |
|||
</button> |
|||
<div ngbDropdownMenu> |
|||
@for (action of actionList; track action.text) { |
|||
<ng-container [ngTemplateOutlet]="dropDownBtnItemTmp" [ngTemplateOutletContext]="{ $implicit: action }"> |
|||
</ng-container> |
|||
} |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
@if (actionList.length === 1) { |
|||
<ng-container |
|||
[ngTemplateOutlet]="btnTmp" |
|||
[ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }" |
|||
></ng-container> |
|||
<ng-container [ngTemplateOutlet]="btnTmp" |
|||
[ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"></ng-container> |
|||
} |
|||
|
|||
<ng-template #dropDownBtnItemTmp let-action> |
|||
@if (action.visible(data)) { |
|||
<button |
|||
ngbDropdownItem |
|||
*abpPermission="action.permission; runChangeDetection: false" |
|||
(click)="action.action(data)" |
|||
type="button" |
|||
> |
|||
<ng-container |
|||
*ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }" |
|||
></ng-container> |
|||
</button> |
|||
<button ngbDropdownItem *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" |
|||
type="button"> |
|||
<ng-container *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"></ng-container> |
|||
</button> |
|||
} |
|||
</ng-template> |
|||
|
|||
<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.icon) { |
|||
<span>{{ action.text | abpLocalization }}</span> |
|||
} @else { |
|||
<div abpEllipsis>{{ action.text | abpLocalization }}</div> |
|||
} |
|||
@if (action.icon) { |
|||
<span>{{ action.text | abpLocalization }}</span> |
|||
} @else { |
|||
<div abpEllipsis>{{ action.text | abpLocalization }}</div> |
|||
} |
|||
} |
|||
</ng-template> |
|||
|
|||
<ng-template #btnTmp let-action> |
|||
@if (action.visible(data)) { |
|||
@if (action.tooltip) { |
|||
<button |
|||
*abpPermission="action.permission; runChangeDetection: false" |
|||
(click)="action.action(data)" |
|||
type="button" |
|||
[class]="action.btnClass" |
|||
[style]="action.btnStyle" |
|||
[ngbTooltip]="action.tooltip.text | abpLocalization" |
|||
[placement]="action.tooltip.placement || 'auto'" |
|||
triggers="hover" |
|||
container="body" |
|||
> |
|||
<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> |
|||
} |
|||
@if (action.tooltip) { |
|||
<button *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button" |
|||
[class]="action.btnClass" [style]="action.btnStyle" [ngbTooltip]="action.tooltip.text | abpLocalization" |
|||
[placement]="action.tooltip.placement || 'auto'" triggers="hover" container="body"> |
|||
<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) { |
|||
<div |
|||
class="alert alert-{{ alert.type }} fade show" |
|||
[ngClass]="{ 'alert-dismissible fade show': alert.dismissible }" |
|||
role="alert" |
|||
> |
|||
@if (alert.title) { |
|||
<h4 |
|||
class="alert-heading" |
|||
[innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams" |
|||
></h4> |
|||
} |
|||
<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> |
|||
} |
|||
<div class="alert alert-{{ alert.type }} fade show" [class.alert-dismissible]="alert.dismissible" role="alert"> |
|||
@if (alert.title) { |
|||
<h4 class="alert-heading" [innerHTML]="alert.title | abpSafeHtml | abpLocalization: alert.titleLocalizationParams"> |
|||
</h4> |
|||
} |
|||
<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) { |
|||
<div class="confirmation"> |
|||
<div |
|||
class="confirmation-backdrop" |
|||
(click)="data.options?.dismissible ? close(dismiss) : null" |
|||
></div> |
|||
<div class="confirmation-dialog"> |
|||
@if (data.severity || isCustomIconExists(data)) { |
|||
<div class="icon-container" [ngClass]="data.severity"> |
|||
@if (isIconTemplateExits(data)) { |
|||
<div [outerHTML]="data.options.iconTemplate"></div> |
|||
} @else { |
|||
<i class="icon" [ngClass]="getIconClass(data)"></i> |
|||
} |
|||
</div> |
|||
<div class="confirmation"> |
|||
<div class="confirmation-backdrop" (click)="data.options?.dismissible ? close(dismiss) : null"></div> |
|||
<div class="confirmation-dialog"> |
|||
@if (data.severity || isCustomIconExists(data)) { |
|||
<div class="icon-container" [class]="data.severity"> |
|||
@if (isIconTemplateExits(data)) { |
|||
<div [outerHTML]="data.options.iconTemplate"></div> |
|||
} @else { |
|||
<i class="icon" [class]="getIconClass(data)"></i> |
|||
} |
|||
</div> |
|||
} |
|||
<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 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> |
|||
} |
|||
@ -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"> |
|||
<i class="bi icon" [ngClass]="iconClass" aria-hidden="true"></i> |
|||
<i class="bi icon" [class]="iconClass" aria-hidden="true"></i> |
|||
</div> |
|||
<div class="abp-toast-content"> |
|||
@if (toast.options?.closable) { |
|||
<button class="abp-toast-close-button" (click)="close()"> |
|||
<i class="bi bi-x fs-4" aria-hidden="true"></i> |
|||
</button> |
|||
<button class="abp-toast-close-button" (click)="close()"> |
|||
<i class="bi bi-x fs-4" aria-hidden="true"></i> |
|||
</button> |
|||
} |
|||
<div class="abp-toast-title"> |
|||
{{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }} |
|||
</div> |
|||
<p |
|||
class="abp-toast-message" |
|||
[innerHTML]="toast.message | abpLocalization: toast.options?.messageLocalizationParams" |
|||
></p> |
|||
<p class="abp-toast-message" |
|||
[innerHTML]="toast.message | abpLocalization: toast.options?.messageLocalizationParams"></p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
Loading…
Reference in new issue