@abp/ng.theme.shared 5.1.4 → 5.2.0
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-table/extensible-table.component.mjs +7 -6
- package/esm2020/extensions/lib/tokens/extensions.token.mjs +4 -1
- package/esm2020/lib/components/button/button.component.mjs +7 -2
- package/esm2020/lib/components/confirmation/confirmation.component.mjs +25 -19
- package/esm2020/lib/models/common.mjs +1 -1
- package/esm2020/lib/models/confirmation.mjs +1 -1
- package/esm2020/lib/services/confirmation.service.mjs +2 -2
- package/esm2020/lib/theme-shared.module.mjs +11 -3
- package/esm2020/lib/tokens/confirmation-icons.token.mjs +10 -0
- package/extensions/lib/components/extensible-table/extensible-table.component.d.ts +2 -0
- package/extensions/lib/tokens/extensions.token.d.ts +7 -0
- package/fesm2015/abp-ng.theme.shared-extensions.mjs +10 -6
- package/fesm2015/abp-ng.theme.shared-extensions.mjs.map +1 -1
- package/fesm2015/abp-ng.theme.shared.mjs +47 -22
- package/fesm2015/abp-ng.theme.shared.mjs.map +1 -1
- package/fesm2020/abp-ng.theme.shared-extensions.mjs +10 -6
- package/fesm2020/abp-ng.theme.shared-extensions.mjs.map +1 -1
- package/fesm2020/abp-ng.theme.shared.mjs +48 -22
- package/fesm2020/abp-ng.theme.shared.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +2 -1
- package/lib/components/confirmation/confirmation.component.d.ts +6 -1
- package/lib/models/common.d.ts +3 -1
- package/lib/models/confirmation.d.ts +2 -0
- package/lib/theme-shared.module.d.ts +1 -1
- package/lib/tokens/confirmation-icons.token.d.ts +10 -0
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { animation, style, animate, keyframes, trigger, state, transition, useAnimation, query } from '@angular/animations';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild,
|
|
3
|
+
import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, Inject, ViewEncapsulation, Injectable, Optional, ContentChild, Directive, HostListener, HostBinding, NgModule, ComponentFactoryResolver, RendererFactory2, ApplicationRef, APP_INITIALIZER, inject, LOCALE_ID } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { DOCUMENT, formatDate, DatePipe } from '@angular/common';
|
|
6
6
|
import * as i1$1 from '@angular/router';
|
|
@@ -202,6 +202,7 @@ class ButtonComponent {
|
|
|
202
202
|
this.buttonId = '';
|
|
203
203
|
this.buttonClass = 'btn btn-primary';
|
|
204
204
|
this.buttonType = 'button';
|
|
205
|
+
this.formName = undefined;
|
|
205
206
|
this.loading = false;
|
|
206
207
|
this.disabled = false;
|
|
207
208
|
this.click = new EventEmitter();
|
|
@@ -225,11 +226,12 @@ class ButtonComponent {
|
|
|
225
226
|
}
|
|
226
227
|
}
|
|
227
228
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
228
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ButtonComponent, selector: "abp-button", inputs: { buttonId: "buttonId", buttonClass: "buttonClass", buttonType: "buttonType", iconClass: "iconClass", loading: "loading", disabled: "disabled", attributes: "attributes" }, outputs: { click: "click", focus: "focus", blur: "blur", abpClick: "abpClick", abpFocus: "abpFocus", abpBlur: "abpBlur" }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, static: true }], ngImport: i0, template: `
|
|
229
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ButtonComponent, selector: "abp-button", inputs: { buttonId: "buttonId", buttonClass: "buttonClass", buttonType: "buttonType", formName: "formName", iconClass: "iconClass", loading: "loading", disabled: "disabled", attributes: "attributes" }, outputs: { click: "click", focus: "focus", blur: "blur", abpClick: "abpClick", abpFocus: "abpFocus", abpBlur: "abpBlur" }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, static: true }], ngImport: i0, template: `
|
|
229
230
|
<button
|
|
230
231
|
#button
|
|
231
232
|
[id]="buttonId"
|
|
232
233
|
[attr.type]="buttonType"
|
|
234
|
+
[attr.form]="formName"
|
|
233
235
|
[ngClass]="buttonClass"
|
|
234
236
|
[disabled]="loading || disabled"
|
|
235
237
|
(click.stop)="click.next($event); abpClick.next($event)"
|
|
@@ -248,6 +250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
248
250
|
#button
|
|
249
251
|
[id]="buttonId"
|
|
250
252
|
[attr.type]="buttonType"
|
|
253
|
+
[attr.form]="formName"
|
|
251
254
|
[ngClass]="buttonClass"
|
|
252
255
|
[disabled]="loading || disabled"
|
|
253
256
|
(click.stop)="click.next($event); abpClick.next($event)"
|
|
@@ -264,6 +267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
264
267
|
type: Input
|
|
265
268
|
}], buttonType: [{
|
|
266
269
|
type: Input
|
|
270
|
+
}], formName: [{
|
|
271
|
+
type: Input
|
|
267
272
|
}], iconClass: [{
|
|
268
273
|
type: Input
|
|
269
274
|
}], loading: [{
|
|
@@ -299,8 +304,18 @@ var Confirmation;
|
|
|
299
304
|
})(Status = Confirmation.Status || (Confirmation.Status = {}));
|
|
300
305
|
})(Confirmation || (Confirmation = {}));
|
|
301
306
|
|
|
307
|
+
const CONFIRMATION_ICONS = new InjectionToken('CONFIRMATION_ICONS');
|
|
308
|
+
const DEFAULT_CONFIRMATION_ICONS = {
|
|
309
|
+
info: 'fa fa-info-circle',
|
|
310
|
+
success: 'fa fa-check-circle',
|
|
311
|
+
warning: 'fa fa-exclamation-triangle',
|
|
312
|
+
error: 'fa fa-times-circle',
|
|
313
|
+
default: 'fa fa-question-circle',
|
|
314
|
+
};
|
|
315
|
+
|
|
302
316
|
class ConfirmationComponent {
|
|
303
|
-
constructor() {
|
|
317
|
+
constructor(icons) {
|
|
318
|
+
this.icons = icons;
|
|
304
319
|
this.confirm = Confirmation.Status.confirm;
|
|
305
320
|
this.reject = Confirmation.Status.reject;
|
|
306
321
|
this.dismiss = Confirmation.Status.dismiss;
|
|
@@ -308,27 +323,31 @@ class ConfirmationComponent {
|
|
|
308
323
|
close(status) {
|
|
309
324
|
this.clear(status);
|
|
310
325
|
}
|
|
311
|
-
getIconClass({ severity }) {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
return 'fa-info-circle';
|
|
315
|
-
case 'success':
|
|
316
|
-
return 'fa-check-circle';
|
|
317
|
-
case 'warning':
|
|
318
|
-
return 'fa-exclamation-triangle';
|
|
319
|
-
case 'error':
|
|
320
|
-
return 'fa-times-circle';
|
|
321
|
-
default:
|
|
322
|
-
return 'fa-question-circle';
|
|
326
|
+
getIconClass({ severity, options }) {
|
|
327
|
+
if (options && options.icon) {
|
|
328
|
+
return options.icon;
|
|
323
329
|
}
|
|
330
|
+
if (!this.icons) {
|
|
331
|
+
return '';
|
|
332
|
+
}
|
|
333
|
+
return this.icons[severity] || this.icons.default;
|
|
334
|
+
}
|
|
335
|
+
isCustomIconExists({ options }) {
|
|
336
|
+
return !!(options && (options.iconTemplate || options.icon));
|
|
337
|
+
}
|
|
338
|
+
isIconTemplateExits({ options }) {
|
|
339
|
+
return !!(options && options.iconTemplate);
|
|
324
340
|
}
|
|
325
341
|
}
|
|
326
|
-
ConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
327
|
-
ConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ConfirmationComponent, selector: "abp-confirmation", ngImport: i0, template: "<div class=\"confirmation\" *ngIf=\"confirmation$ | async as data\">\r\n <div\r\n class=\"confirmation-backdrop\"\r\n (click)=\"data.options?.dismissible ? close(dismiss) : null\"\r\n ></div>\r\n <div class=\"confirmation-dialog\">\r\n <div class=\"icon-container\" [ngClass]=\"data.severity\" *ngIf=\"data.severity\">\r\n <i class=\"
|
|
342
|
+
ConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmationComponent, deps: [{ token: CONFIRMATION_ICONS }], target: i0.ɵɵFactoryTarget.Component });
|
|
343
|
+
ConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ConfirmationComponent, selector: "abp-confirmation", ngImport: i0, template: "<div class=\"confirmation\" *ngIf=\"confirmation$ | async as data\">\r\n <div\r\n class=\"confirmation-backdrop\"\r\n (click)=\"data.options?.dismissible ? close(dismiss) : null\"\r\n ></div>\r\n <div class=\"confirmation-dialog\">\r\n <div class=\"icon-container\" [ngClass]=\"data.severity\" *ngIf=\"data.severity || isCustomIconExists(data)\">\r\n <div [outerHTML]=\"data.options.iconTemplate\" *ngIf=\"isIconTemplateExits(data); else iconHolder\" ></div>\r\n <ng-template #iconHolder>\r\n <i class=\"icon\" [ngClass]=\"getIconClass(data)\"></i>\r\n </ng-template>\r\n </div>\r\n <div class=\"content\">\r\n <h1\r\n class=\"title\"\r\n *ngIf=\"data.title\"\r\n [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"\r\n ></h1>\r\n <p\r\n class=\"message\"\r\n *ngIf=\"data.message\"\r\n [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"\r\n ></p>\r\n </div>\r\n <div class=\"footer\">\r\n <button\r\n id=\"cancel\"\r\n class=\"confirmation-button confirmation-button--reject\"\r\n [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\"\r\n *ngIf=\"!data?.options?.hideCancelBtn\"\r\n (click)=\"close(reject)\"\r\n ></button>\r\n <button\r\n id=\"confirm\"\r\n class=\"confirmation-button confirmation-button--approve\"\r\n [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\r\n *ngIf=\"!data?.options?.hideYesBtn\"\r\n (click)=\"close(confirm)\"\r\n ></button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".confirmation{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1060}.confirmation .confirmation-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1061!important}.confirmation .confirmation-dialog{display:flex;flex-direction:column;margin:20px auto;padding:0;width:450px;min-height:300px;z-index:1062!important}@media screen and (max-width: 500px){.confirmation .confirmation-dialog{width:90vw}}.confirmation .confirmation-dialog .icon-container{display:flex;align-items:center;justify-content:center;margin:0 0 10px;padding:20px}.confirmation .confirmation-dialog .icon-container .icon{width:100px;height:100px;stroke-width:1;font-size:80px;text-align:center}.confirmation .confirmation-dialog .content{flex-grow:1;display:block}.confirmation .confirmation-dialog .content .title{display:block;margin:0;padding:0;font-size:27px;font-weight:600;text-align:center}.confirmation .confirmation-dialog .content .message{display:block;margin:10px auto;padding:20px;font-size:16px;font-weight:400;text-align:center}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;margin:10px 0 0;padding:20px;width:100%}.confirmation .confirmation-dialog .footer .confirmation-button{display:inline-block;margin:0 5px;padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "abpLocalization": i2.LocalizationPipe } });
|
|
328
344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
329
345
|
type: Component,
|
|
330
|
-
args: [{ selector: 'abp-confirmation', template: "<div class=\"confirmation\" *ngIf=\"confirmation$ | async as data\">\r\n <div\r\n class=\"confirmation-backdrop\"\r\n (click)=\"data.options?.dismissible ? close(dismiss) : null\"\r\n ></div>\r\n <div class=\"confirmation-dialog\">\r\n <div class=\"icon-container\" [ngClass]=\"data.severity\" *ngIf=\"data.severity\">\r\n <i class=\"
|
|
331
|
-
}]
|
|
346
|
+
args: [{ selector: 'abp-confirmation', template: "<div class=\"confirmation\" *ngIf=\"confirmation$ | async as data\">\r\n <div\r\n class=\"confirmation-backdrop\"\r\n (click)=\"data.options?.dismissible ? close(dismiss) : null\"\r\n ></div>\r\n <div class=\"confirmation-dialog\">\r\n <div class=\"icon-container\" [ngClass]=\"data.severity\" *ngIf=\"data.severity || isCustomIconExists(data)\">\r\n <div [outerHTML]=\"data.options.iconTemplate\" *ngIf=\"isIconTemplateExits(data); else iconHolder\" ></div>\r\n <ng-template #iconHolder>\r\n <i class=\"icon\" [ngClass]=\"getIconClass(data)\"></i>\r\n </ng-template>\r\n </div>\r\n <div class=\"content\">\r\n <h1\r\n class=\"title\"\r\n *ngIf=\"data.title\"\r\n [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"\r\n ></h1>\r\n <p\r\n class=\"message\"\r\n *ngIf=\"data.message\"\r\n [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"\r\n ></p>\r\n </div>\r\n <div class=\"footer\">\r\n <button\r\n id=\"cancel\"\r\n class=\"confirmation-button confirmation-button--reject\"\r\n [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\"\r\n *ngIf=\"!data?.options?.hideCancelBtn\"\r\n (click)=\"close(reject)\"\r\n ></button>\r\n <button\r\n id=\"confirm\"\r\n class=\"confirmation-button confirmation-button--approve\"\r\n [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\r\n *ngIf=\"!data?.options?.hideYesBtn\"\r\n (click)=\"close(confirm)\"\r\n ></button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".confirmation{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1060}.confirmation .confirmation-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1061!important}.confirmation .confirmation-dialog{display:flex;flex-direction:column;margin:20px auto;padding:0;width:450px;min-height:300px;z-index:1062!important}@media screen and (max-width: 500px){.confirmation .confirmation-dialog{width:90vw}}.confirmation .confirmation-dialog .icon-container{display:flex;align-items:center;justify-content:center;margin:0 0 10px;padding:20px}.confirmation .confirmation-dialog .icon-container .icon{width:100px;height:100px;stroke-width:1;font-size:80px;text-align:center}.confirmation .confirmation-dialog .content{flex-grow:1;display:block}.confirmation .confirmation-dialog .content .title{display:block;margin:0;padding:0;font-size:27px;font-weight:600;text-align:center}.confirmation .confirmation-dialog .content .message{display:block;margin:10px auto;padding:20px;font-size:16px;font-weight:400;text-align:center}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;margin:10px 0 0;padding:20px;width:100%}.confirmation .confirmation-dialog .footer .confirmation-button{display:inline-block;margin:0 5px;padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600}\n"] }]
|
|
347
|
+
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
348
|
+
type: Inject,
|
|
349
|
+
args: [CONFIRMATION_ICONS]
|
|
350
|
+
}] }]; } });
|
|
332
351
|
|
|
333
352
|
class HttpErrorWrapperComponent {
|
|
334
353
|
constructor(subscription) {
|
|
@@ -587,7 +606,7 @@ class ConfirmationService {
|
|
|
587
606
|
listenToEscape() {
|
|
588
607
|
fromEvent(document, 'keyup')
|
|
589
608
|
.pipe(takeUntil(this.status$), debounceTime(150), filter((key) => key && key.key === 'Escape'))
|
|
590
|
-
.subscribe(
|
|
609
|
+
.subscribe(() => {
|
|
591
610
|
this.clear();
|
|
592
611
|
});
|
|
593
612
|
}
|
|
@@ -2092,11 +2111,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2092
2111
|
],
|
|
2093
2112
|
declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
|
|
2094
2113
|
exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
|
|
2095
|
-
providers: [DatePipe]
|
|
2114
|
+
providers: [DatePipe],
|
|
2096
2115
|
}]
|
|
2097
2116
|
}] });
|
|
2098
2117
|
class ThemeSharedModule {
|
|
2099
|
-
static forRoot({ httpErrorConfig, validation = {} } = {}) {
|
|
2118
|
+
static forRoot({ httpErrorConfig, validation = {}, confirmationIcons = {} } = {}) {
|
|
2100
2119
|
return {
|
|
2101
2120
|
ngModule: ThemeSharedModule,
|
|
2102
2121
|
providers: [
|
|
@@ -2143,6 +2162,13 @@ class ThemeSharedModule {
|
|
|
2143
2162
|
multi: true,
|
|
2144
2163
|
deps: [DocumentDirHandlerService],
|
|
2145
2164
|
},
|
|
2165
|
+
{
|
|
2166
|
+
provide: CONFIRMATION_ICONS,
|
|
2167
|
+
useValue: {
|
|
2168
|
+
...DEFAULT_CONFIRMATION_ICONS,
|
|
2169
|
+
...(confirmationIcons || {}),
|
|
2170
|
+
},
|
|
2171
|
+
},
|
|
2146
2172
|
],
|
|
2147
2173
|
};
|
|
2148
2174
|
}
|