@wizishop/angular-components 0.0.40 → 0.0.41

package/angular-components.scss

@@ -116,80 +116,6 @@ $wac-color-success-popup-alert: #6DCC95!default;
   width: rem(36);
   height: rem(36);
 }
-.wac-progressBarContent {
-  position: relative;
-  width: 100%;
-  display: block;
-  .progressBar {
-    position: relative;
-    width: 88%;
-    margin-bottom: 1rem;
-    progress {
-      &.progress {
-        margin-bottom: 0;
-        height: rem(2);
-        &::-webkit-progress-value {
-          transition: width 0.5s ease;
-        }
-      }
-    }
-    span {
-      position: absolute;
-      top: -4px;
-      height: 11px;
-      width: 11px;
-      background-color: $wac-border-color;
-      border-radius: 50%;
-    }
-    .is-danger {
-      background-color: $wac-primary-button;
-      &::-webkit-progress-value {
-        background-color: $wac-primary-button;
-      }
-    }
-    .is-warning {
-      background-color: $wac-orange-color;
-      &::-webkit-progress-value {
-        background-color: $wac-orange-color;
-      }
-    }
-    .is-success {
-      background-color: $wac-green-color;
-      &::-webkit-progress-value {
-        background-color: $wac-green-color;
-      }
-    }
-  }
-  .size {
-    display: inline;
-    color: $wac-color-text-grey;
-    position: absolute;
-    right: 0;
-    top: -9px;
-    background: $wac-white;
-    padding-left: 0.875rem;
-    .is-success {
-      color: $wac-green-color;
-    }
-    .is-warning {
-      color: $wac-orange-color;
-    }
-    .is-danger {
-      color: $wac-primary-button;
-    }
-    > span {
-      font-size: rem(14) !important;
-      line-height: 1;
-      transform: translateY(-3px);
-      display: inline-block;
-      letter-spacing: 0;
-      strong {
-        letter-spacing: 0;
-        font-weight: 600;
-      }
-    }
-  }
-}
 .wac-radio {
   .is-checkradio[type='radio'] {
     outline: 0 !important;
@@ -318,6 +244,80 @@ $wac-color-success-popup-alert: #6DCC95!default;
     }
   }
 }
+.wac-progressBarContent {
+  position: relative;
+  width: 100%;
+  display: block;
+  .progressBar {
+    position: relative;
+    width: 88%;
+    margin-bottom: 1rem;
+    progress {
+      &.progress {
+        margin-bottom: 0;
+        height: rem(2);
+        &::-webkit-progress-value {
+          transition: width 0.5s ease;
+        }
+      }
+    }
+    span {
+      position: absolute;
+      top: -4px;
+      height: 11px;
+      width: 11px;
+      background-color: $wac-border-color;
+      border-radius: 50%;
+    }
+    .is-danger {
+      background-color: $wac-primary-button;
+      &::-webkit-progress-value {
+        background-color: $wac-primary-button;
+      }
+    }
+    .is-warning {
+      background-color: $wac-orange-color;
+      &::-webkit-progress-value {
+        background-color: $wac-orange-color;
+      }
+    }
+    .is-success {
+      background-color: $wac-green-color;
+      &::-webkit-progress-value {
+        background-color: $wac-green-color;
+      }
+    }
+  }
+  .size {
+    display: inline;
+    color: $wac-color-text-grey;
+    position: absolute;
+    right: 0;
+    top: -9px;
+    background: $wac-white;
+    padding-left: 0.875rem;
+    .is-success {
+      color: $wac-green-color;
+    }
+    .is-warning {
+      color: $wac-orange-color;
+    }
+    .is-danger {
+      color: $wac-primary-button;
+    }
+    > span {
+      font-size: rem(14) !important;
+      line-height: 1;
+      transform: translateY(-3px);
+      display: inline-block;
+      letter-spacing: 0;
+      strong {
+        letter-spacing: 0;
+        font-weight: 600;
+      }
+    }
+  }
+}
 .wac {
   &-select-in-text {
     width: auto;
@@ -582,6 +582,33 @@ $wac-color-success-popup-alert: #6DCC95!default;
       border: 1px solid $wac-main-text;
       color: $wac-main-text;
     }
+
+    &.small {
+      padding: 10px;
+      border-radius: 3px;
+      bottom: -100px;
+      right: 0;
+      top: auto;
+      left: auto;
+      width: auto;
+      min-width: unset;
+      margin: 0 0 100px;
+      background-color: $wac-tag-success;
+      .alert--message {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      .wac-alert-popup {
+        &__text {
+          white-space: nowrap;
+          font-weight: 600;
+        }
+        &__close {
+          display: none;
+        }
+      }
+    }
   }
 
   &__title {

package/bundles/wizishop-angular-components.umd.js

@@ -3494,7 +3494,7 @@
     AlertPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-alert-popup',
-                    template: "<div\n  [class]=\"'alert ' + ((config.color) ? config.color : ' is-primary') + ((config.extraClasses) ? ' ' + config.extraClasses : '') + ((config.position) ? ' ' + config.position : '') + ((config.fullsize) ? ' fullsize' : '') + ((config.opacity) ? ' opacity-active' : '')\"\n  [ngClass]=\"{'is-active': open}\"\n>\n  <div class=\"alert--message\">\n      <span class=\"icon\" *ngIf=\"config.icon\">\n          <i [class]=\"config.icon\"></i>\n      </span>\n    <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\"><i class=\"fas fa-times\"></i></span>\n    <p *ngIf=\"config.title\" class=\"wac-alert-popup__title\" [innerHTML]=\"config.title\"></p>\n    <p class=\"wac-alert-popup__text\" [innerHTML]=\"config.message\"></p>\n  </div>\n</div>\n",
+                    template: "<div\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' : '')\"\n  [ngClass]=\"{'is-active': open}\"\n>\n  <div class=\"alert--message\">\n    <span class=\"icon\" *ngIf=\"config.icon\">\n        <i [class]=\"config.icon\"></i>\n    </span>\n    <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\"><i class=\"fas fa-times\"></i></span>\n    <p *ngIf=\"config.title\" class=\"wac-alert-popup__title\" [innerHTML]=\"config.title\"></p>\n    <p *ngIf=\"config.message\" class=\"wac-alert-popup__text\" [innerHTML]=\"config.message\"></p>\n  </div>\n</div>\n",
                     host: {
                         class: 'wac-alert-popup'
                     },