@wizishop/angular-components 0.0.177 → 0.0.180

package/angular-components.scss

@@ -3857,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);
   }
@@ -4434,6 +4439,11 @@ h4.wac-h4 {
     white-space: nowrap;
   }
 
+  &.no-padding {
+    padding-left: 0!important;
+    padding-right: 0!important;
+  }
+
   &.is-green.opacity {
     background-color: $wac-tag-success-light;
     border-color: $wac-tag-success-light;
@@ -4841,23 +4851,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 {
@@ -4923,23 +4916,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 {
@@ -5005,23 +4981,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 {
@@ -5139,21 +5098,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 {
@@ -5270,25 +5214,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 {
@@ -5404,23 +5329,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 {
@@ -5452,12 +5360,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

@@ -1243,6 +1243,7 @@
             this.animationText = '';
             this.confirmDelete = false;
             this.confirmDeleteText = '';
+            this.noPadding = false;
             this.tooltipPosition = 'top-center';
             this.confirmDeletePosition = 'right';
             this.click = new i0.EventEmitter();
@@ -1333,7 +1334,7 @@
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-button',
-                    template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin width-auto' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n  </span>\n  <span class=\"wac-button__tooltips {{ tooltipPosition }}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n"
+                    template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin width-auto' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    noPadding ? 'no-padding' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n  </span>\n  <span class=\"wac-button__tooltips {{ tooltipPosition }}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n"
                 },] }
     ];
     ButtonComponent.ctorParameters = function () { return []; };
@@ -1358,6 +1359,7 @@
         coin: [{ type: i0.Input }],
         tooltip: [{ type: i0.Input }],
         tooltipWidth: [{ type: i0.Input }],
+        noPadding: [{ type: i0.Input }],
         tooltipPosition: [{ type: i0.Input }],
         confirmDeletePosition: [{ type: i0.Input }],
         click: [{ type: i0.Output }],
@@ -4277,7 +4279,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 []; };