@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';
|
|
@@ -203,6 +203,7 @@ class ButtonComponent {
|
|
|
203
203
|
this.buttonId = '';
|
|
204
204
|
this.buttonClass = 'btn btn-primary';
|
|
205
205
|
this.buttonType = 'button';
|
|
206
|
+
this.formName = undefined;
|
|
206
207
|
this.loading = false;
|
|
207
208
|
this.disabled = false;
|
|
208
209
|
this.click = new EventEmitter();
|
|
@@ -227,11 +228,12 @@ class ButtonComponent {
|
|
|
227
228
|
}
|
|
228
229
|
}
|
|
229
230
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
230
|
-
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: `
|
|
231
|
+
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: `
|
|
231
232
|
<button
|
|
232
233
|
#button
|
|
233
234
|
[id]="buttonId"
|
|
234
235
|
[attr.type]="buttonType"
|
|
236
|
+
[attr.form]="formName"
|
|
235
237
|
[ngClass]="buttonClass"
|
|
236
238
|
[disabled]="loading || disabled"
|
|
237
239
|
(click.stop)="click.next($event); abpClick.next($event)"
|
|
@@ -250,6 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
250
252
|
#button
|
|
251
253
|
[id]="buttonId"
|
|
252
254
|
[attr.type]="buttonType"
|
|
255
|
+
[attr.form]="formName"
|
|
253
256
|
[ngClass]="buttonClass"
|
|
254
257
|
[disabled]="loading || disabled"
|
|
255
258
|
(click.stop)="click.next($event); abpClick.next($event)"
|
|
@@ -266,6 +269,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
266
269
|
type: Input
|
|
267
270
|
}], buttonType: [{
|
|
268
271
|
type: Input
|
|
272
|
+
}], formName: [{
|
|
273
|
+
type: Input
|
|
269
274
|
}], iconClass: [{
|
|
270
275
|
type: Input
|
|
271
276
|
}], loading: [{
|
|
@@ -301,8 +306,18 @@ var Confirmation;
|
|
|
301
306
|
})(Status = Confirmation.Status || (Confirmation.Status = {}));
|
|
302
307
|
})(Confirmation || (Confirmation = {}));
|
|
303
308
|
|
|
309
|
+
const CONFIRMATION_ICONS = new InjectionToken('CONFIRMATION_ICONS');
|
|
310
|
+
const DEFAULT_CONFIRMATION_ICONS = {
|
|
311
|
+
info: 'fa fa-info-circle',
|
|
312
|
+
success: 'fa fa-check-circle',
|
|
313
|
+
warning: 'fa fa-exclamation-triangle',
|
|
314
|
+
error: 'fa fa-times-circle',
|
|
315
|
+
default: 'fa fa-question-circle',
|
|
316
|
+
};
|
|
317
|
+
|
|
304
318
|
class ConfirmationComponent {
|
|
305
|
-
constructor() {
|
|
319
|
+
constructor(icons) {
|
|
320
|
+
this.icons = icons;
|
|
306
321
|
this.confirm = Confirmation.Status.confirm;
|
|
307
322
|
this.reject = Confirmation.Status.reject;
|
|
308
323
|
this.dismiss = Confirmation.Status.dismiss;
|
|
@@ -310,27 +325,33 @@ class ConfirmationComponent {
|
|
|
310
325
|
close(status) {
|
|
311
326
|
this.clear(status);
|
|
312
327
|
}
|
|
313
|
-
getIconClass({ severity }) {
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
return 'fa-info-circle';
|
|
317
|
-
case 'success':
|
|
318
|
-
return 'fa-check-circle';
|
|
319
|
-
case 'warning':
|
|
320
|
-
return 'fa-exclamation-triangle';
|
|
321
|
-
case 'error':
|
|
322
|
-
return 'fa-times-circle';
|
|
323
|
-
default:
|
|
324
|
-
return 'fa-question-circle';
|
|
328
|
+
getIconClass({ severity, options }) {
|
|
329
|
+
if (options && options.icon) {
|
|
330
|
+
return options.icon;
|
|
325
331
|
}
|
|
332
|
+
if (!this.icons) {
|
|
333
|
+
return '';
|
|
334
|
+
}
|
|
335
|
+
return this.icons[severity] || this.icons.default;
|
|
336
|
+
}
|
|
337
|
+
isCustomIconExists({ options }) {
|
|
338
|
+
return !!(options && (options.iconTemplate || options.icon));
|
|
339
|
+
}
|
|
340
|
+
isIconTemplateExits({ options }) {
|
|
341
|
+
return !!(options && options.iconTemplate);
|
|
326
342
|
}
|
|
327
343
|
}
|
|
328
|
-
ConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
329
|
-
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=\"
|
|
344
|
+
ConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmationComponent, deps: [{ token: CONFIRMATION_ICONS }], target: i0.ɵɵFactoryTarget.Component });
|
|
345
|
+
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 } });
|
|
330
346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
331
347
|
type: Component,
|
|
332
|
-
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=\"
|
|
333
|
-
}]
|
|
348
|
+
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"] }]
|
|
349
|
+
}], ctorParameters: function () {
|
|
350
|
+
return [{ type: undefined, decorators: [{
|
|
351
|
+
type: Inject,
|
|
352
|
+
args: [CONFIRMATION_ICONS]
|
|
353
|
+
}] }];
|
|
354
|
+
} });
|
|
334
355
|
|
|
335
356
|
class HttpErrorWrapperComponent {
|
|
336
357
|
constructor(subscription) {
|
|
@@ -592,7 +613,7 @@ class ConfirmationService {
|
|
|
592
613
|
listenToEscape() {
|
|
593
614
|
fromEvent(document, 'keyup')
|
|
594
615
|
.pipe(takeUntil(this.status$), debounceTime(150), filter((key) => key && key.key === 'Escape'))
|
|
595
|
-
.subscribe(
|
|
616
|
+
.subscribe(() => {
|
|
596
617
|
this.clear();
|
|
597
618
|
});
|
|
598
619
|
}
|
|
@@ -1251,9 +1272,7 @@ class DocumentDirHandlerService {
|
|
|
1251
1272
|
listenToLanguageChanges() {
|
|
1252
1273
|
const l10n = this.injector.get(LocalizationService);
|
|
1253
1274
|
// will always listen, no need to unsubscribe
|
|
1254
|
-
l10n.
|
|
1255
|
-
.pipe(startWith(l10n.currentLang), map(locale => getLocaleDirection(locale)))
|
|
1256
|
-
.subscribe(dir => {
|
|
1275
|
+
l10n.currentLang$.pipe(map(locale => getLocaleDirection(locale))).subscribe(dir => {
|
|
1257
1276
|
this.dir.next(dir);
|
|
1258
1277
|
this.setBodyDir(dir);
|
|
1259
1278
|
});
|
|
@@ -2107,11 +2126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2107
2126
|
],
|
|
2108
2127
|
declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
|
|
2109
2128
|
exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
|
|
2110
|
-
providers: [DatePipe]
|
|
2129
|
+
providers: [DatePipe],
|
|
2111
2130
|
}]
|
|
2112
2131
|
}] });
|
|
2113
2132
|
class ThemeSharedModule {
|
|
2114
|
-
static forRoot({ httpErrorConfig, validation = {} } = {}) {
|
|
2133
|
+
static forRoot({ httpErrorConfig, validation = {}, confirmationIcons = {} } = {}) {
|
|
2115
2134
|
return {
|
|
2116
2135
|
ngModule: ThemeSharedModule,
|
|
2117
2136
|
providers: [
|
|
@@ -2155,6 +2174,10 @@ class ThemeSharedModule {
|
|
|
2155
2174
|
multi: true,
|
|
2156
2175
|
deps: [DocumentDirHandlerService],
|
|
2157
2176
|
},
|
|
2177
|
+
{
|
|
2178
|
+
provide: CONFIRMATION_ICONS,
|
|
2179
|
+
useValue: Object.assign(Object.assign({}, DEFAULT_CONFIRMATION_ICONS), (confirmationIcons || {})),
|
|
2180
|
+
},
|
|
2158
2181
|
],
|
|
2159
2182
|
};
|
|
2160
2183
|
}
|