@wizishop/angular-components 0.0.176 → 0.0.179

package/angular-components.scss

@@ -3541,80 +3541,6 @@ span.wac-tooltip {
     }
   }
 }
-.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-upload {
   width: auto;
   &__wrapper {
@@ -3711,6 +3637,80 @@ span.wac-tooltip {
     }
   }
 }
+.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;
+      }
+    }
+  }
+}
 .block-with-checkbox {
   width: 100%;
   display: flex;
@@ -3747,14 +3747,6 @@ span.wac-tooltip {
     width: 100%;
     cursor: pointer;
   }
-  &__right {
-    display: flex;
-    align-items: center;
-    width: auto;
-    div {
-      margin: 0 0 0 20px;
-    }
-  }
   &:hover:not(.disabled), &:focus:not(.disabled) {
     input + label {
       &:before {
@@ -3865,9 +3857,14 @@ span.wac-tooltip {
   background-color: $wac-white;
   display: flex;
   flex-direction: column;
+  border: 1px solid $wac-white;
 
   box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
 
+  &.selected {
+    border: 1px solid $wac-tag-success;
+  }
+
   &:hover {
     box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.2);
   }
@@ -4849,23 +4846,6 @@ h4.wac-h4 {
         transition: background-color 0.3s ease-in-out;
       }
     }
-
-    &.disabled {
-      background-color: $wac-wizishop-blue-button-disabled;
-      border-color: $wac-wizishop-blue-button-disabled;
-      transition: 0s;
-      cursor: default;
-      .wac-button__wrapper, .wac-button__animation {
-        color: $wac-white;
-      }
-      &:hover,
-      &:focus,
-      &.hover,
-      &.focus {
-        background-color: $wac-wizishop-blue-button-disabled;
-        border-color: $wac-wizishop-blue-button-disabled;
-      }
-    }
   }
 
   &.is-orange {
@@ -4931,23 +4911,6 @@ h4.wac-h4 {
         transition: background-color 0.3s ease-in-out;
       }
     }
-
-    &.disabled {
-      background-color: $wac-orange-color-disabled;
-      border-color: $wac-orange-color-disabled;
-      transition: 0s;
-      cursor: default;
-      .wac-button__wrapper, .wac-button__animation {
-        color: $wac-white;
-      }
-      &:hover,
-      &:focus,
-      &.hover,
-      &.focus {
-        background-color: $wac-orange-color-disabled;
-        border-color: $wac-orange-color-disabled;
-      }
-    }
   }
 
   &.is-pink {
@@ -5013,23 +4976,6 @@ h4.wac-h4 {
         transition: background-color 0.3s ease-in-out;
       }
     }
-
-    &.disabled {
-      background-color: $wac-pink-color-disabled;
-      border-color: $wac-pink-color-disabled;
-      transition: 0s;
-      cursor: default;
-      .wac-button__wrapper, .wac-button__animation {
-        color: $wac-white;
-      }
-      &:hover,
-      &:focus,
-      &.hover,
-      &.focus {
-        background-color: $wac-pink-color-disabled;
-        border-color: $wac-pink-color-disabled;
-      }
-    }
   }
 
   &.is-grey {
@@ -5147,21 +5093,6 @@ h4.wac-h4 {
         transition: background-color 0.3s ease-in-out;
       }
     }
-
-    &.disabled {
-      background-color: $wac-background-color-disabled;
-      border-color: $wac-background-color-disabled;
-      transition: 0s;
-      cursor: default;
-
-      &:hover,
-      &:focus,
-      &.hover,
-      &.focus {
-        background-color: $wac-background-color-disabled;
-        border-color: $wac-background-color-disabled;
-      }
-    }
   }
 
   &.is-danger {
@@ -5278,25 +5209,6 @@ h4.wac-h4 {
         border-color: $wac-primary-button;
       }
     }
-
-    &.disabled {
-      background-color: $wac-primary-button-disabled;
-      border-color: $wac-primary-button-disabled;
-      transition: 0s;
-      cursor: default;
-
-      .wac-button__wrapper, .wac-button__animation {
-        color: $wac-white;
-      }
-
-      &:hover,
-      &:focus,
-      &.hover,
-      &.focus {
-        background-color: $wac-primary-button-disabled;
-        border-color: $wac-primary-button-disabled;
-      }
-    }
   }
 
   &.is-success {
@@ -5412,23 +5324,6 @@ h4.wac-h4 {
         border-color: $wac-green-color;
       }
     }
-    &.disabled {
-      background-color: $wac-green-color-disabled;
-      border-color: $wac-green-color-disabled;
-      transition: 0s;
-      cursor: default;
-
-      .wac-button__wrapper, .wac-button__animation {
-        color: $wac-white;
-      }
-
-      &:hover,
-      &:focus,
-      &.hover,
-      &.focus {
-        background-color: $wac-green-color-disabled;
-      }
-    }
   }
 
   &.is-light {
@@ -5460,12 +5355,7 @@ h4.wac-h4 {
   }
 
   &.disabled {
-    background-color: $wac-disabled-button-background;
-    border-color: $wac-border-form;
-
-    .wac-button__wrapper, .wac-button__animation {
-      color: $wac-disabled-button-text;
-    }
+    opacity: .7!important;
   }
 
   &.is-outlined {

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

@@ -4277,7 +4277,7 @@
     CardPriceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-card-price',
-                    template: "<div class=\"wac-card-price\" [ngClass]=\"{'selected': selected}\">\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\" *ngIf=\"!selected\">\n    <wac-button [label]=\"btnLabel\" [extraClasses]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [whiteSpaceNowrap]=\"true\" [textcolor]=\"btnTextcolor\" *ngIf=\"!hideButton\"></wac-button>\n  </div>\n  <div class=\"cta\" *ngIf=\"selected\">\n    <wac-button [icon]=\"'fa-solid fa-check'\" [label]=\"btnLabelSelected\" [extraClasses]=\"extraClassesSelected\" [whiteSpaceNowrap]=\"true\" *ngIf=\"!hideButton\"></wac-button>\n  </div>\n  <div class=\"package-subtitle\" *ngIf=\"packageSubtitle\">{{packageSubtitle}}</div>\n  <div class=\"link-bottom\">\n    <wac-link (click)=\"removePackageTrigger()\">{{linkPackageLabel}}</wac-link>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-card-price\" [ngClass]=\"{'selected': selected}\">\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\" *ngIf=\"!selected && !hideButton\">\n    <wac-button [label]=\"btnLabel\" [extraClasses]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [whiteSpaceNowrap]=\"true\" [textcolor]=\"btnTextcolor\"></wac-button>\n  </div>\n  <div class=\"cta\" *ngIf=\"selected && !hideButton\">\n    <wac-button [icon]=\"'fa-solid fa-check'\" [label]=\"btnLabelSelected\" [extraClasses]=\"extraClassesSelected\" [whiteSpaceNowrap]=\"true\"></wac-button>\n  </div>\n  <div class=\"package-subtitle\" *ngIf=\"selected\">{{packageSubtitle}}</div>\n  <div class=\"link-bottom\" *ngIf=\"selected\">\n    <wac-link (click)=\"removePackageTrigger()\">{{linkPackageLabel}}</wac-link>\n  </div>\n</div>\n"
                 },] }
     ];
     CardPriceComponent.ctorParameters = function () { return []; };
@@ -4327,10 +4327,6 @@
         function BlockWithCheckboxComponent() {
             this.selected = false;
             this.disabled = false;
-            this.iconCopy = 'fa-solid fa-paste';
-            this.iconWorld = 'fa-light fa-globe';
-            this.copyAction = new i0.EventEmitter();
-            this.worldAction = new i0.EventEmitter();
             this.checkboxAction = new i0.EventEmitter();
             this.nameRadio = 'wacBlockCheckboxRadio';
             this.isFirst = false;
@@ -4346,12 +4342,6 @@
                 this.isFirst = false;
             }
         };
-        BlockWithCheckboxComponent.prototype.eventCopy = function () {
-            this.copyAction.emit(true);
-        };
-        BlockWithCheckboxComponent.prototype.eventWorld = function () {
-            this.worldAction.emit(true);
-        };
         BlockWithCheckboxComponent.prototype.removeFirstClass = function () {
             if (typeof document.querySelectorAll('.firstWacRadioBLock')[0] !== typeof undefined) {
                 document.querySelectorAll('.firstWacRadioBLock')[0].classList.remove('firstWacRadioBLock');
@@ -4362,17 +4352,13 @@
     BlockWithCheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-block-with-checkbox',
-                    template: "<div class=\"block-with-checkbox\" [ngClass]=\"{'selected': inputRadioA.checked || selected, 'firstWacRadioBLock': isFirst, 'disabled': disabled}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [checked]=\"selected\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"block-with-checkbox__right\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconWorld\"  (click)=\"eventWorld()\"></wac-button></div>\n  </div>\n</div>\n"
+                    template: "<div class=\"block-with-checkbox\" [ngClass]=\"{'selected': inputRadioA.checked || selected, 'firstWacRadioBLock': isFirst, 'disabled': disabled}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [checked]=\"selected\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"
                 },] }
     ];
     BlockWithCheckboxComponent.ctorParameters = function () { return []; };
     BlockWithCheckboxComponent.propDecorators = {
         selected: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
-        iconCopy: [{ type: i0.Input }],
-        iconWorld: [{ type: i0.Input }],
-        copyAction: [{ type: i0.Output }],
-        worldAction: [{ type: i0.Output }],
         checkboxAction: [{ type: i0.Output }],
         nameRadio: [{ type: i0.Input }],
         isFirst: [{ type: i0.Input }],