@wizishop/angular-components 0.0.175 → 0.0.178

package/angular-components.scss

@@ -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 {
@@ -3860,14 +3852,19 @@ span.wac-tooltip {
 }
 .wac-card-price {
   width: 100%;
-  padding: 50px;
+  padding: 30px;
   border-radius: 3px;
   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 ;
+  }
+
   &:hover {
     box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.2);
   }
@@ -3881,7 +3878,7 @@ span.wac-tooltip {
   }
 
   .cta {
-    height: 40px;
+    min-height: 40px;
   }
 
   > strong {
@@ -3938,13 +3935,24 @@ span.wac-tooltip {
     }
   }
 
-  .subtitle {
+  .subtitle, .package-subtitle {
     font-size: rem(12);
     color: $wac-subtitle-color;
     margin: 0 0 30px;
     text-align: center;
     font-style: italic;
   }
+
+  .package-subtitle {
+   margin: 10px 0 30px;
+  }
+
+  .link-bottom {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
 }
 .wac-wrapper-blocs {
   &.sidebar {
@@ -4838,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 {
@@ -4920,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 {
@@ -5002,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 {
@@ -5136,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 {
@@ -5267,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 {
@@ -5401,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 {
@@ -5449,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 {
@@ -5548,8 +5449,13 @@ h4.wac-h4 {
     opacity: 0;
     transition: opacity .3s ease 0s, visibility 0s linear .35s;
 
-    @include media('>=desktop') {
-      max-width: 600px;
+    @include media('>=tablet') {
+      min-width: 600px;
+    }
+
+    @include media('<tablet') {
+      min-width: 100% !important;
+      max-width: 100% !important;
     }
 
     &:before {
@@ -5611,7 +5517,7 @@ h4.wac-h4 {
       transform: translate(0, -20px);
       bottom: 100%;
       &:before {
-        left: 10px;
+        right: 10px;
         top: 100%;
       }
     }
@@ -5621,7 +5527,7 @@ h4.wac-h4 {
       transform: translate(0, -20px);
       bottom: 100%;
       &:before {
-        right: 10px;
+        left: 10px;
         top: 100%;
       }
     }

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

@@ -1333,7 +1333,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 }}\" *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    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 []; };
@@ -1357,6 +1357,7 @@
         confirmDeleteText: [{ type: i0.Input }],
         coin: [{ type: i0.Input }],
         tooltip: [{ type: i0.Input }],
+        tooltipWidth: [{ type: i0.Input }],
         tooltipPosition: [{ type: i0.Input }],
         confirmDeletePosition: [{ type: i0.Input }],
         click: [{ type: i0.Output }],
@@ -4254,39 +4255,51 @@
 
     var CardPriceComponent = /** @class */ (function () {
         function CardPriceComponent() {
+            this.selected = false;
             this.disabled = false;
             this.btnTextcolor = '#ffffff';
             this.extraClasses = 'is-success';
+            this.extraClassesSelected = 'is-success is-outlined';
             this.hideButton = false;
             this.click = new i0.EventEmitter();
+            this.removePackage = new i0.EventEmitter();
         }
         CardPriceComponent.prototype.ngOnInit = function () {
         };
         CardPriceComponent.prototype.triggerClick = function () {
             this.click.emit(true);
         };
+        CardPriceComponent.prototype.removePackageTrigger = function () {
+            this.removePackage.emit(true);
+        };
         return CardPriceComponent;
     }());
     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]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [textcolor]=\"btnTextcolor\" *ngIf=\"!hideButton\"></wac-button>\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\">\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=\"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 []; };
     CardPriceComponent.propDecorators = {
         amount: [{ type: i0.Input }],
         title: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        btnLabelSelected: [{ type: i0.Input }],
         price: [{ type: i0.Input }],
         currency: [{ type: i0.Input }],
         priceWording: [{ type: i0.Input }],
         subtitle: [{ type: i0.Input }],
         btnLabel: [{ type: i0.Input }],
+        packageSubtitle: [{ type: i0.Input }],
+        linkPackageLabel: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         btnTextcolor: [{ type: i0.Input }],
         extraClasses: [{ type: i0.Input }],
+        extraClassesSelected: [{ type: i0.Input }],
         hideButton: [{ type: i0.Input }],
-        click: [{ type: i0.Output }]
+        click: [{ type: i0.Output }],
+        removePackage: [{ type: i0.Output }]
     };
 
     var TokenCheckComponent = /** @class */ (function () {
@@ -4314,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;
@@ -4333,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');
@@ -4349,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 }],
@@ -4456,7 +4455,7 @@
     MosaicComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-mosaic',
-                    template: "<div class=\"wac-mosaic\">\n  <ng-scrollbar (reachedBottom)=\"onBottomReached()\" reachedOffset=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n    <div class=\"wac-mosaic__wrapper\">\n        <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns\">\n            <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index;\">\n              <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n              <div class=\"hover\">\n                <ng-container\n                  [ngTemplateOutlet]=\"importButtonTemplate || defaultImportButton\"\n                  [ngTemplateOutletContext]=\"{ $implicit: image }\"\n                >\n                </ng-container>\n              </div>\n            </div>\n        </div>\n    </div>\n  </ng-scrollbar>\n</div>\n\n<div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n  <wac-loader></wac-loader>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n",
+                    template: "<div class=\"wac-mosaic\">\n  <ng-scrollbar (reachedBottom)=\"onBottomReached()\" reachedOffset=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n    <div class=\"wac-mosaic__wrapper\">\n        <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns\">\n            <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index;\">\n              <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n              <div class=\"hover\">\n                <ng-container\n                  [ngTemplateOutlet]=\"hoverImageTemplate || defaultImportButton\"\n                  [ngTemplateOutletContext]=\"{ $implicit: image }\"\n                >\n                </ng-container>\n              </div>\n            </div>\n        </div>\n    </div>\n  </ng-scrollbar>\n</div>\n\n<div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n  <wac-loader></wac-loader>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
@@ -4466,7 +4465,7 @@
         imagesList: [{ type: i0.Input }],
         isLoading: [{ type: i0.Input }],
         numberOfColumn: [{ type: i0.Input }],
-        importButtonTemplate: [{ type: i0.Input }],
+        hoverImageTemplate: [{ type: i0.Input }],
         importImageSrc: [{ type: i0.Output }],
         loadMoreImages: [{ type: i0.Output }]
     };