@wizishop/angular-components 0.0.146 → 0.0.147

package/angular-components.scss

@@ -1545,6 +1545,89 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
+.wac-card-price {
+  width: 100%;
+  padding: 50px;
+  border-radius: 3px;
+  background-color: $wac-white;
+  display: flex;
+  flex-direction: column;
+
+  box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
+
+  &:hover {
+    box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.2);
+  }
+
+  @include media('<desktop') {
+    padding: 30px;
+  }
+
+  @include media('<tablet') {
+    padding: 20px;
+  }
+
+  > strong {
+    font-size: rem(30);
+    text-align: center;
+    display: block;
+    width: 100%;
+    font-weight: 600;
+    margin: 0 0 -5px;
+  }
+
+  > p {
+    font-size: rem(20);
+    text-transform: uppercase;
+    margin: 0 0 30px;
+    text-align: center;
+    display: block;
+    width: 100%;
+    font-weight: 600;
+  }
+
+  .price {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    justify-content: center;
+    position: relative;
+    color: $wac-tag-success;
+    margin: 0 0 5px;
+
+    .amount {
+      font-size: rem(50);
+      font-weight: 600;
+      margin: 0 5px 0 0;
+      position: relative;
+      line-height: 1;
+      span {
+        position: absolute;
+        top: 5px;
+        left: 100%;
+        margin: 0 0 0 3px;
+        display: block;
+        font-size: rem(20);
+      }
+    }
+
+    .month {
+      font-size: rem(20);
+      margin: 0;
+      font-weight: 500;
+      line-height: 1;
+      transform: translateY(-5px);
+    }
+  }
+
+  .subtitle {
+    font-size: rem(12);
+    color: $wac-subtitle-color;
+    margin: 0 0 30px;
+    text-align: center;
+    font-style: italic;
+  }
+}
 .wac-calendar {
   position: relative;
   margin: 0 0 20px;
@@ -2090,89 +2173,6 @@ $wac-subtitle-color: #7A87A1!default;
 .datetimepicker .datetimepicker-footer {
   display: none;
 }
-.wac-card-price {
-  width: 100%;
-  padding: 50px;
-  border-radius: 3px;
-  background-color: $wac-white;
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
-
-  &:hover {
-    box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.2);
-  }
-
-  @include media('<desktop') {
-    padding: 30px;
-  }
-
-  @include media('<tablet') {
-    padding: 20px;
-  }
-
-  > strong {
-    font-size: rem(30);
-    text-align: center;
-    display: block;
-    width: 100%;
-    font-weight: 600;
-    margin: 0 0 -5px;
-  }
-
-  > p {
-    font-size: rem(20);
-    text-transform: uppercase;
-    margin: 0 0 30px;
-    text-align: center;
-    display: block;
-    width: 100%;
-    font-weight: 600;
-  }
-
-  .price {
-    display: flex;
-    align-items: flex-end;
-    width: 100%;
-    justify-content: center;
-    position: relative;
-    color: $wac-tag-success;
-    margin: 0 0 5px;
-
-    .amount {
-      font-size: rem(50);
-      font-weight: 600;
-      margin: 0 5px 0 0;
-      position: relative;
-      line-height: 1;
-      span {
-        position: absolute;
-        top: 5px;
-        left: 100%;
-        margin: 0 0 0 3px;
-        display: block;
-        font-size: rem(20);
-      }
-    }
-
-    .month {
-      font-size: rem(20);
-      margin: 0;
-      font-weight: 500;
-      line-height: 1;
-      transform: translateY(-5px);
-    }
-  }
-
-  .subtitle {
-    font-size: rem(12);
-    color: $wac-subtitle-color;
-    margin: 0 0 30px;
-    text-align: center;
-    font-style: italic;
-  }
-}
 .wac-field-checkbox {
   &.disable-wt {
     .wac-field-checkbox__row {

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

@@ -4239,6 +4239,7 @@
         function CardPriceComponent() {
             this.disabled = false;
             this.btnTextcolor = '#ffffff';
+            this.extraClasses = 'is-success';
             this.click = new i0.EventEmitter();
         }
         CardPriceComponent.prototype.ngOnInit = function () {
@@ -4251,7 +4252,7 @@
     CardPriceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-card-price',
-                    template: "<div class=\"wac-card-price\">\n  <strong>{{amount}}</strong>\n  <p>{{title}}</p>\n  <div class=\"price\">\n    <span class=\"amount\">{{price}} <span>{{currency}}</span></span><span class=\"month\">{{priceWording}}</span>\n  </div>\n  <div class=\"subtitle\">{{subtitle}}</div>\n  <div class=\"cta\">\n    <wac-button [label]=\"btnLabel\" extraClasses=\"is-success\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [textcolor]=\"btnTextcolor\"></wac-button>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-card-price\">\n  <strong>{{amount}}</strong>\n  <p>{{title}}</p>\n  <div class=\"price\">\n    <span class=\"amount\">{{price}} <span>{{currency}}</span></span><span class=\"month\">{{priceWording}}</span>\n  </div>\n  <div class=\"subtitle\">{{subtitle}}</div>\n  <div class=\"cta\">\n    <wac-button [label]=\"btnLabel\" [extraClasses]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [textcolor]=\"btnTextcolor\"></wac-button>\n  </div>\n</div>\n"
                 },] }
     ];
     CardPriceComponent.ctorParameters = function () { return []; };
@@ -4265,6 +4266,7 @@
         btnLabel: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         btnTextcolor: [{ type: i0.Input }],
+        extraClasses: [{ type: i0.Input }],
         click: [{ type: i0.Output }]
     };