@abp/ng.theme.shared 5.1.2 → 5.2.0-rc.1
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/adapters/date-time.adapter.mjs +5 -5
- package/esm2020/extensions/lib/components/extensible-form/extensible-form-prop.component.mjs +1 -1
- package/esm2020/extensions/lib/components/extensible-table/extensible-table.component.mjs +8 -7
- package/esm2020/extensions/lib/enums/props.enum.mjs +1 -1
- package/esm2020/extensions/lib/tokens/extensions.token.mjs +4 -1
- package/esm2020/extensions/lib/utils/form-props.util.mjs +1 -1
- package/esm2020/lib/components/button/button.component.mjs +7 -2
- package/esm2020/lib/components/confirmation/confirmation.component.mjs +25 -19
- package/esm2020/lib/handlers/document-dir.handler.mjs +3 -5
- 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/enums/props.enum.d.ts +1 -1
- package/extensions/lib/tokens/extensions.token.d.ts +7 -0
- package/fesm2015/abp-ng.theme.shared-extensions.mjs +17 -11
- package/fesm2015/abp-ng.theme.shared-extensions.mjs.map +1 -1
- package/fesm2015/abp-ng.theme.shared.mjs +48 -25
- package/fesm2015/abp-ng.theme.shared.mjs.map +1 -1
- package/fesm2020/abp-ng.theme.shared-extensions.mjs +17 -13
- package/fesm2020/abp-ng.theme.shared-extensions.mjs.map +1 -1
- package/fesm2020/abp-ng.theme.shared.mjs +49 -25
- 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
|
}
|
|
@@ -1241,9 +1260,7 @@ class DocumentDirHandlerService {
|
|
|
1241
1260
|
listenToLanguageChanges() {
|
|
1242
1261
|
const l10n = this.injector.get(LocalizationService);
|
|
1243
1262
|
// will always listen, no need to unsubscribe
|
|
1244
|
-
l10n.
|
|
1245
|
-
.pipe(startWith(l10n.currentLang), map(locale => getLocaleDirection(locale)))
|
|
1246
|
-
.subscribe(dir => {
|
|
1263
|
+
l10n.currentLang$.pipe(map(locale => getLocaleDirection(locale))).subscribe(dir => {
|
|
1247
1264
|
this.dir.next(dir);
|
|
1248
1265
|
this.setBodyDir(dir);
|
|
1249
1266
|
});
|
|
@@ -2094,11 +2111,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2094
2111
|
],
|
|
2095
2112
|
declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
|
|
2096
2113
|
exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
|
|
2097
|
-
providers: [DatePipe]
|
|
2114
|
+
providers: [DatePipe],
|
|
2098
2115
|
}]
|
|
2099
2116
|
}] });
|
|
2100
2117
|
class ThemeSharedModule {
|
|
2101
|
-
static forRoot({ httpErrorConfig, validation = {} } = {}) {
|
|
2118
|
+
static forRoot({ httpErrorConfig, validation = {}, confirmationIcons = {} } = {}) {
|
|
2102
2119
|
return {
|
|
2103
2120
|
ngModule: ThemeSharedModule,
|
|
2104
2121
|
providers: [
|
|
@@ -2145,6 +2162,13 @@ class ThemeSharedModule {
|
|
|
2145
2162
|
multi: true,
|
|
2146
2163
|
deps: [DocumentDirHandlerService],
|
|
2147
2164
|
},
|
|
2165
|
+
{
|
|
2166
|
+
provide: CONFIRMATION_ICONS,
|
|
2167
|
+
useValue: {
|
|
2168
|
+
...DEFAULT_CONFIRMATION_ICONS,
|
|
2169
|
+
...(confirmationIcons || {}),
|
|
2170
|
+
},
|
|
2171
|
+
},
|
|
2148
2172
|
],
|
|
2149
2173
|
};
|
|
2150
2174
|
}
|