@wizishop/angular-components 15.1.135 → 15.1.137

package/fesm2020/wizishop-angular-components.mjs

@@ -4594,7 +4594,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
             }] } });
 
 class AlertPopupComponent {
-    constructor() {
+    constructor(elRef, renderer) {
+        this.elRef = elRef;
+        this.renderer = renderer;
         /** Subject for notifying the user that the dialog has finished closing. */
         this.afterClosedPopup = new Subject();
         this.open = false;
@@ -4602,7 +4604,22 @@ class AlertPopupComponent {
     ngOnInit() {
         setTimeout(() => {
             this.open = true;
-        }, 50);
+        }, 100);
+        this.observer = new MutationObserver(() => {
+            const alert = document.querySelector('.wac-alert-popup:last-child .alert');
+            if (alert) {
+                const bgColor = getComputedStyle(alert).backgroundColor;
+                const hexColor = this.rgbToHex(bgColor);
+                if ((hexColor === '#2ecc71' || hexColor === '#e95656') && !alert.classList.contains('is-loaded')) {
+                    alert.classList.add('is-loaded');
+                    this.observer.disconnect();
+                }
+            }
+        });
+        this.observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
         if (this.config.duration > 0) {
             this.timer = setTimeout(() => this.dismiss(), this.config.duration);
         }
@@ -4620,15 +4637,29 @@ class AlertPopupComponent {
     afterClosed() {
         return this.afterClosedPopup.asObservable();
     }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    rgbToHex(rgb) {
+        const result = rgb.match(/\d+/g);
+        if (!result)
+            return '';
+        const [r, g, b] = result.map(Number);
+        return ('#' +
+            [r, g, b]
+                .map((x) => x.toString(16).padStart(2, '0'))
+                .join('')
+                .toLowerCase());
+    }
 }
-AlertPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AlertPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AlertPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AlertPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 AlertPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: AlertPopupComponent, selector: "wac-alert-popup", host: { classAttribute: "wac-alert-popup" }, ngImport: i0, template: "<div\r\n  [class]=\"'alert ' + ((config.color) ? config.color : ' is-primary') + ((config.extraClasses) ? ' ' + config.extraClasses : '') + ((config.position) ? ' ' + config.position : '') + ((config.fullsize) ? ' fullsize' : '') + ((config.opacity) ? ' opacity-active' : '') + ((config.small) ? ' small' : '') + ((config.icon) ? ' with-icon' : '') + ((config.duration) ? '' : ' no-duration')\"\r\n  [ngClass]=\"{'is-active': open, 'has-close': config.closeButton}\"\r\n>\r\n  <div class=\"alert--message\">\r\n    <span class=\"icon\" *ngIf=\"config.icon\">\r\n        <i [class]=\"config.icon\"></i>\r\n    </span>\r\n    <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\" *ngIf=\"!config.small || (config.small && config.closeButton)\"><i class=\"far fa-times\"></i></span>\r\n    <p *ngIf=\"config.title\" class=\"wac-alert-popup__title\" [innerHTML]=\"config.title\"></p>\r\n    <p *ngIf=\"config.message\" class=\"wac-alert-popup__text\" [innerHTML]=\"config.message\"></p>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AlertPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-alert-popup', host: {
                         class: 'wac-alert-popup'
                     }, encapsulation: ViewEncapsulation.None, template: "<div\r\n  [class]=\"'alert ' + ((config.color) ? config.color : ' is-primary') + ((config.extraClasses) ? ' ' + config.extraClasses : '') + ((config.position) ? ' ' + config.position : '') + ((config.fullsize) ? ' fullsize' : '') + ((config.opacity) ? ' opacity-active' : '') + ((config.small) ? ' small' : '') + ((config.icon) ? ' with-icon' : '') + ((config.duration) ? '' : ' no-duration')\"\r\n  [ngClass]=\"{'is-active': open, 'has-close': config.closeButton}\"\r\n>\r\n  <div class=\"alert--message\">\r\n    <span class=\"icon\" *ngIf=\"config.icon\">\r\n        <i [class]=\"config.icon\"></i>\r\n    </span>\r\n    <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\" *ngIf=\"!config.small || (config.small && config.closeButton)\"><i class=\"far fa-times\"></i></span>\r\n    <p *ngIf=\"config.title\" class=\"wac-alert-popup__title\" [innerHTML]=\"config.title\"></p>\r\n    <p *ngIf=\"config.message\" class=\"wac-alert-popup__text\" [innerHTML]=\"config.message\"></p>\r\n  </div>\r\n</div>\r\n" }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
 class AlertPopupService {
     constructor(domService) {