@wizishop/angular-components 19.0.1 → 19.0.3

package/angular-components.scss

@@ -506,32 +506,56 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
 }
 .wac-alert-popup {
   .alert {
+    --wac-alert-accent: #{$wac-primary-button};
     z-index: 999999;
     position: fixed;
-    color: $wac-white;
-    background-color: $wac-primary-button;
+    color: $wac-main-text;
+    background-color: $wac-white;
     border: 1px solid transparent;
-    border-radius: 5px;
-    padding: 40px;
+    border-radius: 8px;
+    padding: 18px 44px 18px 24px;
     transition: all 200ms;
     opacity: 0;
     margin: 10px auto;
-    max-width: 550px;
+    max-width: 480px;
     width: auto;
-    box-shadow: 0 0 20px rgba(50, 50, 50, 0.1);
+    box-shadow: 0 8px 30px rgba(29, 42, 59, 0.12);
     font-size: 14px;
+    overflow: hidden;
 
-    &.with-icon {
-      .alert--message {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-      }
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 5px;
+      background-color: var(--wac-alert-accent);
     }
 
-    .icon + .wac-alert-popup__close + .wac-alert-popup__text {
-      width: auto;
+    .alert--message {
+      display: flex;
+      align-items: flex-start;
+      gap: 14px;
+      width: 100%;
+    }
+
+    .icon {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      margin: 0;
+      border-radius: 50%;
+      background-color: var(--wac-alert-accent);
+
+      i {
+        font-size: 12px;
+        color: $wac-white;
+        margin: 0;
+      }
     }
 
     &.fullsize {
@@ -539,7 +563,7 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
       width: 100%;
       border-radius: 0;
       margin: 0;
-      padding: 20px 40px 20px 20px;
+      padding: 20px 44px 20px 24px;
     }
 
     &.is-left {
@@ -608,50 +632,29 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
     }
 
     p {
-      display: inline-block;
+      margin: 0;
     }
 
-    span {
-      vertical-align: middle;
-      margin: 0 10px 0 0;
-    }
     &.is-primary {
-      background-color: $wac-primary-button;
-
-      &.is-inverted {
-        background-color: $wac-white;
-        border: 1px solid $wac-primary-button;
-        color: $wac-primary-button;
-      }
+      --wac-alert-accent: #{$wac-primary-button};
     }
 
     &.is-success {
-      background-color: $wac-color-success-popup-alert;
-
-      &.is-inverted {
-        background-color: $wac-white;
-        border: 1px solid $wac-color-success-popup-alert;
-        color: $wac-color-success-popup-alert;
-      }
+      --wac-alert-accent: #{$wac-tag-success};
     }
 
     &.is-danger {
-      background-color: $wac-primary-button;
-
-      &.is-inverted {
-        background-color: $wac-white;
-        border: 1px solid $wac-primary-button;
-        color: $wac-primary-button;
-      }
+      --wac-alert-accent: #{$wac-primary-button};
     }
 
     &.is-info {
-      background-color: $wac-white;
-      border: 1px solid $wac-main-text;
-      color: $wac-main-text;
+      --wac-alert-accent: #{$wac-main-text};
     }
 
     &.small {
+      display: flex;
+      align-items: center;
+      color: $wac-white;
       padding: 10px;
       border-radius: 3px;
       right: 30px;
@@ -663,6 +666,11 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
       background-color: $wac-tag-success;
       font-size: 0.875rem;
       overflow: hidden;
+
+      &::before {
+        display: none;
+      }
+
       @include media('<tablet') {
         right: 0;
         max-width: 100%;
@@ -699,9 +707,16 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
         display: flex;
         align-items: center;
         justify-content: flex-start;
+      }
+      .icon {
+        width: auto;
+        height: auto;
+        border-radius: 0;
+        background-color: transparent;
         i {
           font-size: 24px;
           font-weight: normal;
+          color: $wac-white;
         }
       }
       .wac-alert-popup {
@@ -709,6 +724,7 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
           font-size: 0.875rem;
           white-space: nowrap;
           font-weight: normal;
+          color: $wac-white;
         }
         &__close {
           display: none;
@@ -731,20 +747,28 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
     }
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+  }
+
   &__title {
-    font-size: 1.5rem;
-    line-height: 1.4;
+    font-size: 0.9375rem;
+    line-height: 1.35;
     margin: 0;
     font-weight: 700;
-    text-align: center;
-    width: 100%;
+    color: $wac-main-text;
+    text-align: left;
   }
 
   &__text {
-    font-size: 1rem;
-    font-weight: 500;
-    text-align: center;
-    width: 100%;
+    font-size: 0.875rem;
+    line-height: 1.45;
+    font-weight: 400;
+    color: $wac-color-text-grey;
+    text-align: left;
     margin: 0;
   }
 
@@ -752,34 +776,24 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
     cursor: pointer;
     display: flex;
     position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
+    top: 14px;
+    right: 14px;
+    width: 1.25rem;
+    height: 1.25rem;
     justify-content: center;
     align-items: center;
-    background-color: darken($wac-primary-button, 10%);
-    transition: .3s ease;
+    background-color: transparent;
+    color: $wac-color-text-grey;
+    transition: color .2s ease;
+
     &:hover, &:focus {
-      background-color: darken($wac-primary-button, 15%);
+      color: $wac-main-text;
     }
+
     i {
-      font-size: 1.25rem;
-      color: $white;
-    }
-    .is-success & {
-      background-color: darken($wac-color-success-popup-alert, 20%);
-      &:hover, &:focus {
-        background-color: darken($wac-color-success-popup-alert, 30%);
-      }
-    }
-    .is-danger & {
-      background-color: darken($wac-primary-button, 10%);
-      &:hover, &:focus {
-        background-color: darken($wac-primary-button, 15%);
-      }
+      font-size: 1rem;
     }
+
     .fullsize & {
       top: 50%;
       transform: translateY(-50%);
@@ -10671,6 +10685,34 @@ div.wac-field-input-search {
 
 
 
+.wac-option-group {
+    width: 100%;
+
+    &:first-child {
+        padding-top: 0.625rem;
+    }
+
+    &:last-child {
+        padding-bottom: 0.625rem;
+    }
+
+    &:not(:last-child) {
+        &::after {
+            content: '';
+            display: block;
+            width: 100%;
+            height: 1px;
+            border-bottom: 1px dashed #dee2de;
+        }
+    }
+    
+    &__title {
+        padding: 0 20px 10px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #526384;
+    }
+}
 .wac-option-call-to-action {
   background-color: $wac-color-CTA-select;
   border: 1px solid $wac-border-CTA-select;
@@ -10714,34 +10756,6 @@ div.wac-field-input-search {
     background-color: darken($wac-color-CTA-select, 10%);
   }
 }
-.wac-option-group {
-    width: 100%;
-
-    &:first-child {
-        padding-top: 0.625rem;
-    }
-
-    &:last-child {
-        padding-bottom: 0.625rem;
-    }
-
-    &:not(:last-child) {
-        &::after {
-            content: '';
-            display: block;
-            width: 100%;
-            height: 1px;
-            border-bottom: 1px dashed #dee2de;
-        }
-    }
-    
-    &__title {
-        padding: 0 20px 10px;
-        font-size: 12px;
-        font-weight: 500;
-        color: #526384;
-    }
-}
 
 .wac-select {
   width: 100%;

package/fesm2022/wizishop-angular-components.mjs

@@ -4695,13 +4695,13 @@ class AlertPopupComponent {
         return this.afterClosedPopup.asObservable();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AlertPopupComponent, isStandalone: false, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AlertPopupComponent, isStandalone: false, 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    <div class=\"wac-alert-popup__content\">\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    <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\" *ngIf=\"!config.small || (config.small && config.closeButton)\"><i class=\"far fa-times\"></i></span>\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: "19.2.20", ngImport: i0, type: AlertPopupComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, 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" }]
+                    }, 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    <div class=\"wac-alert-popup__content\">\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    <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\" *ngIf=\"!config.small || (config.small && config.closeButton)\"><i class=\"far fa-times\"></i></span>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class AlertPopupService {
@@ -4716,13 +4716,35 @@ class AlertPopupService {
         const componentRef = this.domService.attachComponentPortal(AlertPopupComponent);
         config = Object.assign({
             position: 'is-top'
-        }, config);
+        }, config, 
+        // Force the unified card design on every popup, whatever the caller passes.
+        {
+            small: false,
+            fullsize: false,
+            opacity: false
+        });
+        if (!config.icon) {
+            config.icon = this.getDefaultIcon(config.color);
+        }
         componentRef.instance.config = config;
         componentRef.instance.afterClosed().subscribe(() => {
             componentRef.destroy();
         });
         return componentRef;
     }
+    /** Default icon matching the card design, picked from the alert color. */
+    getDefaultIcon(color) {
+        switch (color) {
+            case 'is-danger':
+            case 'is-primary':
+                return 'fas fa-exclamation';
+            case 'is-info':
+                return 'fas fa-info';
+            case 'is-success':
+            default:
+                return 'fas fa-check';
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertPopupService, deps: [{ token: DomService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertPopupService, providedIn: 'root' }); }
 }