@wizishop/angular-components 0.0.43 → 0.0.47

package/angular-components.scss

@@ -20,6 +20,7 @@ $wac-green-color-darken: #25a25a!default;
 $wac-green-color-focus: #208e4f!default;
 $wac-green-color: #2ecc71!default;
 $wac-green-color-disabled: #70df9f!default;
+$wac-green-opacity: #EAFAF1!default;
 $wac-header-color: #1e2e43!default;
 $wac-hover-btn-grey: #5263841a!default;
 $wac-info-box-shadow: #e5e5e5!default;
@@ -43,6 +44,7 @@ $wac-primary-button-darken: #e32929!default;
 $wac-primary-button: #e95656!default;
 $wac-primary-button-disabled: #f3a1a1!default;
 $wac-primary-button-focus: #d02323!default;
+$wac-primary-button-light: #FCEEEE!default;
 $wac-primary: #e95656!default;
 $wac-second-color: #526384!default;
 $wac-secondary-color: #526384!default;
@@ -723,6 +725,14 @@ $wac-color-success-popup-alert: #6DCC95!default;
     height: auto;
   }
 
+  &.stretch {
+    display: flex;
+    flex-wrap: wrap;
+    .wac-block__content {
+      display: flex;
+    }
+  }
+
   /*************************/
   /* Titre INTERNE au bloc */
   /*************************/
@@ -3375,6 +3385,15 @@ span.wac-tooltip {
       }
     }
 
+    &.opacity {
+      background-color: $wac-primary-button-light;
+      border-color: $wac-primary-button-light;
+      &:hover, &:focus {
+        background-color: $wac-primary-button;
+        border-color: $wac-primary-button;
+      }
+    }
+
     &.disabled {
       background-color: $wac-primary-button-disabled;
       border-color: $wac-primary-button-disabled;
@@ -3448,6 +3467,14 @@ span.wac-tooltip {
         transition: background-color 0.3s ease-in-out;
       }
     }
+    &.opacity {
+      background-color: $wac-green-opacity;
+      border-color: $wac-green-opacity;
+      &:hover, &:focus {
+        background-color: $wac-green-color;
+        border-color: $wac-green-color;
+      }
+    }
     &.disabled {
       background-color: $wac-green-color-disabled;
       border-color: $wac-green-color-disabled;
@@ -3588,7 +3615,7 @@ span.wac-tooltip {
     &__icon {
       font-size: 30px;
       line-height: 18px;
-      color: $wac-border-form;
+      color: $wac-second-color;
       transition: color 0.3s ease, transform 0.3s ease;
     }
 
@@ -3641,7 +3668,7 @@ span.wac-tooltip {
 
     &:hover {
       .wac-dropdown__wrapper__icon {
-        color: $wac-second-color;
+        color: $wac-wizishop-blue;
         transform: rotate(90deg);
         transition: color 0.3s ease, transform 0.3s ease;
       }

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

@@ -914,6 +914,7 @@
             this.hasLoader = false;
             this.disabled = false;
             this.whiteSpaceNowrap = false;
+            this.opacity = false;
             this.click = new i0.EventEmitter();
             this.isLoading = false;
             this.interval = null;
@@ -953,7 +954,7 @@
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-button',
-                    template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"onButtonClick($event)\"\n  [ngClass]=\"[label === '' ? 'alone' : '', isLoading ? 'is-loading' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '']\"\n>\n  <span class=\"wac-button__wrapper\">\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    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading || interval !== null\"\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</a>\n"
+                    template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"onButtonClick($event)\"\n  [ngClass]=\"[label === '' ? 'alone' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '']\"\n>\n  <span class=\"wac-button__wrapper\">\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    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading || interval !== null\"\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</a>\n"
                 },] }
     ];
     ButtonComponent.ctorParameters = function () { return []; };
@@ -967,6 +968,7 @@
         hasLoader: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         whiteSpaceNowrap: [{ type: i0.Input }],
+        opacity: [{ type: i0.Input }],
         click: [{ type: i0.Output }]
     };
 
@@ -3302,13 +3304,14 @@
             this.titleUppercase = true;
             this.borderRadius = false;
             this.removePadding = false;
+            this.stretchHeight = false;
         }
         return BlockComponent;
     }());
     BlockComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-block',
-                    template: "<div\n  class=\"wac-block\"\n  [ngClass]=\"{ 'wac-block__external': titleExternalBlock, sticky: sticky, noFullHeight: noFullHeight, 'border-radius': borderRadius, 'no-padding' : removePadding }\"\n>\n  <h2 *ngIf=\"titleBlock.length\" class=\"wac-block__title\" [ngClass]=\"{ 'is-simple': simple, 'no-uppercase': !titleUppercase }\">\n    {{ titleBlock }} <i *ngIf=\"icon\" [ngClass]=\"icon\"></i>\n  </h2>\n  <div class=\"wac-block__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"
+                    template: "<div\n  class=\"wac-block\"\n  [ngClass]=\"{ 'wac-block__external': titleExternalBlock, sticky: sticky, noFullHeight: noFullHeight, 'stretch': stretchHeight, 'border-radius': borderRadius, 'no-padding' : removePadding }\"\n>\n  <h2 *ngIf=\"titleBlock.length\" class=\"wac-block__title\" [ngClass]=\"{ 'is-simple': simple, 'no-uppercase': !titleUppercase }\">\n    {{ titleBlock }} <i *ngIf=\"icon\" [ngClass]=\"icon\"></i>\n  </h2>\n  <div class=\"wac-block__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"
                 },] }
     ];
     BlockComponent.ctorParameters = function () { return []; };
@@ -3321,7 +3324,8 @@
         icon: [{ type: i0.Input }],
         titleUppercase: [{ type: i0.Input }],
         borderRadius: [{ type: i0.Input }],
-        removePadding: [{ type: i0.Input }]
+        removePadding: [{ type: i0.Input }],
+        stretchHeight: [{ type: i0.Input }]
     };
 
     var WrapperComponent = /** @class */ (function () {
@@ -3665,6 +3669,7 @@
     exports.AbstractDebounceDirective = AbstractDebounceDirective;
     exports.AlertComponent = AlertComponent;
     exports.AlertPopupComponent = AlertPopupComponent;
+    exports.AlertPopupModule = AlertPopupModule;
     exports.AlertPopupService = AlertPopupService;
     exports.AutoHideDirective = AutoHideDirective;
     exports.BackComponent = BackComponent;
@@ -3737,8 +3742,7 @@
     exports.ɵk = LoaderModule;
     exports.ɵl = CheckboxModule;
     exports.ɵm = inOutY;
-    exports.ɵn = AlertPopupModule;
-    exports.ɵo = inOutX;
+    exports.ɵn = inOutX;
 
     Object.defineProperty(exports, '__esModule', { value: true });