@abp/ng.theme.shared 5.1.3 → 5.2.0-rc.2
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/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 +47 -22
- 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 +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';
|
|
@@ -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
|
}
|
|
@@ -2105,11 +2126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2105
2126
|
],
|
|
2106
2127
|
declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
|
|
2107
2128
|
exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
|
|
2108
|
-
providers: [DatePipe]
|
|
2129
|
+
providers: [DatePipe],
|
|
2109
2130
|
}]
|
|
2110
2131
|
}] });
|
|
2111
2132
|
class ThemeSharedModule {
|
|
2112
|
-
static forRoot({ httpErrorConfig, validation = {} } = {}) {
|
|
2133
|
+
static forRoot({ httpErrorConfig, validation = {}, confirmationIcons = {} } = {}) {
|
|
2113
2134
|
return {
|
|
2114
2135
|
ngModule: ThemeSharedModule,
|
|
2115
2136
|
providers: [
|
|
@@ -2153,6 +2174,10 @@ class ThemeSharedModule {
|
|
|
2153
2174
|
multi: true,
|
|
2154
2175
|
deps: [DocumentDirHandlerService],
|
|
2155
2176
|
},
|
|
2177
|
+
{
|
|
2178
|
+
provide: CONFIRMATION_ICONS,
|
|
2179
|
+
useValue: Object.assign(Object.assign({}, DEFAULT_CONFIRMATION_ICONS), (confirmationIcons || {})),
|
|
2180
|
+
},
|
|
2156
2181
|
],
|
|
2157
2182
|
};
|
|
2158
2183
|
}
|