@softheon/armature 10.22.0 → 10.23.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/bundles/softheon-armature.umd.js +11 -4
- package/bundles/softheon-armature.umd.js.map +1 -1
- package/bundles/softheon-armature.umd.min.js +1 -1
- package/bundles/softheon-armature.umd.min.js.map +1 -1
- package/esm2015/lib/alert-banner/components/alert-banner/alert-banner.component.js +8 -4
- package/esm2015/lib/alert-banner/models/alert-banner-context.js +1 -1
- package/esm2015/lib/alert-banner/services/alert-banner.service.js +4 -2
- package/fesm2015/softheon-armature.js +10 -4
- package/fesm2015/softheon-armature.js.map +1 -1
- package/lib/alert-banner/components/alert-banner/alert-banner.component.d.ts +2 -0
- package/lib/alert-banner/models/alert-banner-context.d.ts +4 -0
- package/lib/alert-banner/services/alert-banner.service.d.ts +2 -1
- package/package.json +1 -1
- package/softheon-armature.metadata.json +1 -1
|
@@ -342,17 +342,20 @@
|
|
|
342
342
|
* @param bannerTitle Title
|
|
343
343
|
* @param bannerText Text
|
|
344
344
|
* @param translateParam Translate param
|
|
345
|
+
* @param showClose Show close or not
|
|
345
346
|
*/
|
|
346
|
-
AlertBannerService.prototype.showMessage = function (bannerType, isFilledBanner, bannerTitle, bannerText, translateParam) {
|
|
347
|
+
AlertBannerService.prototype.showMessage = function (bannerType, isFilledBanner, bannerTitle, bannerText, translateParam, showClose) {
|
|
347
348
|
if (bannerTitle === void 0) { bannerTitle = undefined; }
|
|
348
349
|
if (bannerText === void 0) { bannerText = undefined; }
|
|
349
350
|
if (translateParam === void 0) { translateParam = {}; }
|
|
351
|
+
if (showClose === void 0) { showClose = false; }
|
|
350
352
|
this.showBanner = true;
|
|
351
353
|
this.bannerContext.bannerType = bannerType;
|
|
352
354
|
this.bannerContext.isFilledBanner = isFilledBanner;
|
|
353
355
|
this.bannerContext.bannerTitle = bannerTitle;
|
|
354
356
|
this.bannerContext.bannerText = bannerText;
|
|
355
357
|
this.bannerContext.translateParam = translateParam;
|
|
358
|
+
this.bannerContext.showClose = showClose;
|
|
356
359
|
};
|
|
357
360
|
/** Close Message */
|
|
358
361
|
AlertBannerService.prototype.closeMessage = function () {
|
|
@@ -394,7 +397,7 @@
|
|
|
394
397
|
Object.defineProperty(AlertBannerComponent.prototype, "showBanner", {
|
|
395
398
|
/** Should show banner */
|
|
396
399
|
get: function () {
|
|
397
|
-
return !!this.context
|
|
400
|
+
return !!this.context ? !this.context.hideBanner : this.alertBannerService.showBanner;
|
|
398
401
|
},
|
|
399
402
|
enumerable: false,
|
|
400
403
|
configurable: true
|
|
@@ -415,6 +418,10 @@
|
|
|
415
418
|
this.updateStyle('--content-filled-success-color', theme.filledBackground.success);
|
|
416
419
|
this.updateStyle('--content-filled-warn-color', theme.filledBackground.warn);
|
|
417
420
|
};
|
|
421
|
+
/** Hides the banner */
|
|
422
|
+
AlertBannerComponent.prototype.hideBanner = function () {
|
|
423
|
+
!!this.context ? this.context.hideBanner = true : this.alertBannerService.closeMessage();
|
|
424
|
+
};
|
|
418
425
|
/**
|
|
419
426
|
* Update Style
|
|
420
427
|
* @param propertyName The property name
|
|
@@ -432,8 +439,8 @@
|
|
|
432
439
|
AlertBannerComponent.decorators = [
|
|
433
440
|
{ type: i0.Component, args: [{
|
|
434
441
|
selector: 'sof-ar-alert-banner',
|
|
435
|
-
template: "<div #alertBannerContainer [ngClass]=\"{ 'sof-ar-alert-banner-container': showBanner }\">\r\n <div fxLayout=\"row\" *ngIf=\"showBanner\"\r\n class=\"sof-ar-alert-banner-{{displayContext.bannerType}} sof-ar-alert-banner-content {{(displayContext.isFilledBanner) ? 'filled' : 'outlined'}}-{{displayContext.bannerType}}\">\r\n <div class=\"sof-ar-alert-banner-sidebar\"></div>\r\n <div class=\"sof-ar-alert-banner-content-container\" fxLayout=\"row\">\r\n <div class=\"sof-ar-alert-banner-icon-container\">\r\n <ng-container [ngSwitch]=\"displayContext.bannerType\">\r\n <mat-icon *ngSwitchCase=\"'error'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-exclamation-circle'\"></mat-icon>\r\n <mat-icon *ngSwitchCase=\"'warn'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-exclamation-circle'\"></mat-icon>\r\n <mat-icon *ngSwitchCase=\"'information'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-info-circle'\"></mat-icon>\r\n <mat-icon *ngSwitchCase=\"'success'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-check-circle'\"></mat-icon>\r\n </ng-container>\r\n </div>\r\n <div fxLayout=\"column\" fxLayoutGap=\"10px\" fxLayoutAlign=\"center\">\r\n <
|
|
436
|
-
styles: [".sof-ar-alert-banner-container{--content-filled-error-color:var(--error-color-50-parts);--content-filled-info-color:var(--info-color-50-parts);--content-filled-success-color:var(--success-color-50-parts);--content-filled-warn-color:var(--warn-color-50-parts);--error-color:var(--error-color-500-parts);--error-color-white-bg:var(--error-color-200-parts);--info-color:var(--info-color-500-parts);--info-color-white-bg:var(--info-color-200-parts);--outline-side-error-color:var(--error-color-500-parts);--outline-side-info-color:var(--info-color-500-parts);--outline-side-success-color:var(--success-color-500-parts);--outline-side-warn-color:var(--warn-color-500-parts);--success-color:var(--success-color-500-parts);--success-color-white-bg:var(--success-color-200-parts);--warn-color:var(--warn-color-500-parts);--warn-color-white-bg:var(--warn-color-200-parts);padding:20px 20px 0}.sof-ar-alert-banner-icon-container{margin-right:16px}.sof-ar-alert-banner-title{font-family:Poppins;font-size:1.14em!important;font-style:normal;line-height:20px;margin:0}.sof-ar-alert-banner-text{font-family:Poppins;font-size:1em!important;font-style:normal;font-weight:400;line-height:150%!important;margin:0}.sof-ar-alert-banner-content{border:1px solid;border-radius:4px}.sof-ar-alert-banner-sidebar{border-radius:4px 0 0 4px;width:8px}.sof-ar-alert-banner-content.filled-error{border-color:var(--error-color)}.sof-ar-alert-banner-content.filled-error .sof-ar-alert-banner-sidebar{background-color:var(--error-color)}.sof-ar-alert-banner-content.filled-error .sof-ar-alert-banner-icon{color:var(--error-color)}.sof-ar-alert-banner-content.filled-information{border-color:var(--info-color)}.sof-ar-alert-banner-content.filled-information .sof-ar-alert-banner-sidebar{background-color:var(--info-color)}.sof-ar-alert-banner-content.filled-information .sof-ar-alert-banner-icon{color:var(--info-color)}.sof-ar-alert-banner-content.filled-success{border-color:var(--success-color)}.sof-ar-alert-banner-content.filled-success .sof-ar-alert-banner-sidebar{background-color:var(--success-color)}.sof-ar-alert-banner-content.filled-success .sof-ar-alert-banner-icon{color:var(--success-color)}.sof-ar-alert-banner-content.filled-warn{border-color:var(--warn-color)}.sof-ar-alert-banner-content.filled-warn .sof-ar-alert-banner-sidebar{background-color:var(--warn-color)}.sof-ar-alert-banner-content.filled-warn .sof-ar-alert-banner-icon{color:var(--warn-color)}.sof-ar-alert-banner-content.outlined-error{background-color:#fff;border-color:var(--error-color-white-bg)}.sof-ar-alert-banner-content.outlined-error .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-error-color)}.sof-ar-alert-banner-content.outlined-error .sof-ar-alert-banner-icon{color:var(--error-color)}.sof-ar-alert-banner-content.outlined-information{background-color:#fff;border-color:var(--info-color-white-bg)}.sof-ar-alert-banner-content.outlined-information .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-info-color)}.sof-ar-alert-banner-content.outlined-information .sof-ar-alert-banner-icon{color:var(--info-color)}.sof-ar-alert-banner-content.outlined-success{background-color:#fff;border-color:var(--success-color-white-bg)}.sof-ar-alert-banner-content.outlined-success .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-success-color)}.sof-ar-alert-banner-content.outlined-success .sof-ar-alert-banner-icon{color:var(--success-color)}.sof-ar-alert-banner-content.outlined-warn{background-color:#fff;border-color:var(--warn-color-white-bg)}.sof-ar-alert-banner-content.outlined-warn .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-warn-color)}.sof-ar-alert-banner-content.outlined-warn .sof-ar-alert-banner-icon{color:var(--warn-color)}.sof-ar-alert-banner-content-container{border-radius:0 4px 4px 0;padding:16px;width:100%}.filled-error>.sof-ar-alert-banner-content-container{background:var(--content-filled-error-color)}.filled-information>.sof-ar-alert-banner-content-container{background:var(--content-filled-info-color)}.filled-success>.sof-ar-alert-banner-content-container{background:var(--content-filled-success-color)}.filled-warn>.sof-ar-alert-banner-content-container{background:var(--content-filled-warn-color)}.sof-ar-alert-banner-icon{font-size:1.71em}"]
|
|
442
|
+
template: "<div #alertBannerContainer [ngClass]=\"{ 'sof-ar-alert-banner-container': showBanner }\">\r\n <div fxLayout=\"row\" *ngIf=\"showBanner\"\r\n class=\"sof-ar-alert-banner-{{displayContext.bannerType}} sof-ar-alert-banner-content {{(displayContext.isFilledBanner) ? 'filled' : 'outlined'}}-{{displayContext.bannerType}}\">\r\n <div class=\"sof-ar-alert-banner-sidebar\"></div>\r\n <div class=\"sof-ar-alert-banner-content-container\" fxLayout=\"row\">\r\n <div class=\"sof-ar-alert-banner-icon-container\">\r\n <ng-container [ngSwitch]=\"displayContext.bannerType\">\r\n <mat-icon *ngSwitchCase=\"'error'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-exclamation-circle'\"></mat-icon>\r\n <mat-icon *ngSwitchCase=\"'warn'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-exclamation-circle'\"></mat-icon>\r\n <mat-icon *ngSwitchCase=\"'information'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-info-circle'\"></mat-icon>\r\n <mat-icon *ngSwitchCase=\"'success'\" class=\"sof-ar-alert-banner-icon\" [fontSet]=\"'fal'\"\r\n [fontIcon]=\"'fa-check-circle'\"></mat-icon>\r\n </ng-container>\r\n </div>\r\n <div style=\"width: 100%\" fxLayout=\"column\" fxLayoutGap=\"10px\" fxLayoutAlign=\"center\">\r\n <div *ngIf=\"displayContext.bannerTitle\" fxLayout=\"row\" fxLayoutAlign=\"space-between\">\r\n <h4 class=\"sof-ar-alert-banner-title\" [innerHtml]=\"displayContext.bannerTitle | translate: displayContext.translateParam\"></h4>\r\n <i *ngIf=\"displayContext.showClose\" (click)=\"hideBanner()\" class=\"fal fa-2x fa-times\"></i>\r\n </div>\r\n <div *ngIf=\"displayContext.bannerText\" fxLayout=\"row\" fxLayoutAlign=\"space-between\">\r\n <p class=\"sof-ar-alert-banner-text\" [innerHtml]=\"displayContext.bannerText | translate: displayContext.translateParam\"></p>\r\n <i (click)=\"hideBanner()\" *ngIf=\"!displayContext.bannerTitle && displayContext.showClose\" class=\"fal fa-2x fa-times\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>",
|
|
443
|
+
styles: [".sof-ar-alert-banner-container{--content-filled-error-color:var(--error-color-50-parts);--content-filled-info-color:var(--info-color-50-parts);--content-filled-success-color:var(--success-color-50-parts);--content-filled-warn-color:var(--warn-color-50-parts);--error-color:var(--error-color-500-parts);--error-color-white-bg:var(--error-color-200-parts);--info-color:var(--info-color-500-parts);--info-color-white-bg:var(--info-color-200-parts);--outline-side-error-color:var(--error-color-500-parts);--outline-side-info-color:var(--info-color-500-parts);--outline-side-success-color:var(--success-color-500-parts);--outline-side-warn-color:var(--warn-color-500-parts);--success-color:var(--success-color-500-parts);--success-color-white-bg:var(--success-color-200-parts);--warn-color:var(--warn-color-500-parts);--warn-color-white-bg:var(--warn-color-200-parts);padding:20px 20px 0}.sof-ar-alert-banner-icon-container{margin-right:16px}.sof-ar-alert-banner-title{font-family:Poppins;font-size:1.14em!important;font-style:normal;line-height:20px;margin:0}.sof-ar-alert-banner-text{font-family:Poppins;font-size:1em!important;font-style:normal;font-weight:400;line-height:150%!important;margin:0}.sof-ar-alert-banner-content{border:1px solid;border-radius:4px}.sof-ar-alert-banner-sidebar{border-radius:4px 0 0 4px;width:8px}.sof-ar-alert-banner-content.filled-error{border-color:var(--error-color)}.sof-ar-alert-banner-content.filled-error .sof-ar-alert-banner-sidebar{background-color:var(--error-color)}.sof-ar-alert-banner-content.filled-error .sof-ar-alert-banner-icon{color:var(--error-color)}.sof-ar-alert-banner-content.filled-information{border-color:var(--info-color)}.sof-ar-alert-banner-content.filled-information .sof-ar-alert-banner-sidebar{background-color:var(--info-color)}.sof-ar-alert-banner-content.filled-information .sof-ar-alert-banner-icon{color:var(--info-color)}.sof-ar-alert-banner-content.filled-success{border-color:var(--success-color)}.sof-ar-alert-banner-content.filled-success .sof-ar-alert-banner-sidebar{background-color:var(--success-color)}.sof-ar-alert-banner-content.filled-success .sof-ar-alert-banner-icon{color:var(--success-color)}.sof-ar-alert-banner-content.filled-warn{border-color:var(--warn-color)}.sof-ar-alert-banner-content.filled-warn .sof-ar-alert-banner-sidebar{background-color:var(--warn-color)}.sof-ar-alert-banner-content.filled-warn .sof-ar-alert-banner-icon{color:var(--warn-color)}.sof-ar-alert-banner-content.outlined-error{background-color:#fff;border-color:var(--error-color-white-bg)}.sof-ar-alert-banner-content.outlined-error .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-error-color)}.sof-ar-alert-banner-content.outlined-error .sof-ar-alert-banner-icon{color:var(--error-color)}.sof-ar-alert-banner-content.outlined-information{background-color:#fff;border-color:var(--info-color-white-bg)}.sof-ar-alert-banner-content.outlined-information .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-info-color)}.sof-ar-alert-banner-content.outlined-information .sof-ar-alert-banner-icon{color:var(--info-color)}.sof-ar-alert-banner-content.outlined-success{background-color:#fff;border-color:var(--success-color-white-bg)}.sof-ar-alert-banner-content.outlined-success .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-success-color)}.sof-ar-alert-banner-content.outlined-success .sof-ar-alert-banner-icon{color:var(--success-color)}.sof-ar-alert-banner-content.outlined-warn{background-color:#fff;border-color:var(--warn-color-white-bg)}.sof-ar-alert-banner-content.outlined-warn .sof-ar-alert-banner-sidebar{background-color:var(--outline-side-warn-color)}.sof-ar-alert-banner-content.outlined-warn .sof-ar-alert-banner-icon{color:var(--warn-color)}.sof-ar-alert-banner-content-container{border-radius:0 4px 4px 0;padding:16px;width:100%}.filled-error>.sof-ar-alert-banner-content-container{background:var(--content-filled-error-color)}.filled-information>.sof-ar-alert-banner-content-container{background:var(--content-filled-info-color)}.filled-success>.sof-ar-alert-banner-content-container{background:var(--content-filled-success-color)}.filled-warn>.sof-ar-alert-banner-content-container{background:var(--content-filled-warn-color)}.sof-ar-alert-banner-icon{font-size:1.71em}.fa-times{cursor:pointer}"]
|
|
437
444
|
},] }
|
|
438
445
|
];
|
|
439
446
|
AlertBannerComponent.ctorParameters = function () { return [
|