@wizishop/wizi-block 4.2.1-beta → 4.2.22-beta

package/lib/shared/components/editorjs/editorjs.component.d.ts

@@ -1,10 +1,8 @@
 import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { EditorJSToolTranslationService } from './tools/utils/editorjs-tool-translation.service';
 import { EditorJSConversionService } from './tools/utils/editorjs-conversion.service';
 export declare class EditorJsComponent implements OnInit, OnDestroy {
     private translateService;
-    private editorJSToolTranslationService;
     private editorJSConversionService;
     contentChange: EventEmitter<any>;
     content: string;
@@ -14,7 +12,7 @@ export declare class EditorJsComponent implements OnInit, OnDestroy {
     timeoutHandle: any;
     timeoutTextEditionHandle: any;
     wrapperTags: string;
-    constructor(translateService: TranslateService, editorJSToolTranslationService: EditorJSToolTranslationService, editorJSConversionService: EditorJSConversionService);
+    constructor(translateService: TranslateService, editorJSConversionService: EditorJSConversionService);
     ngOnInit(): Promise<void>;
     ngOnDestroy(): void;
     handleDefaultContentTranslation(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/wizi-block",
-  "version": "4.2.1-beta",
+  "version": "4.2.22-beta",
   "description": "## To use WiziBlock, you have to :",
   "repository": {
     "type": "git",

package/wizi-block.scss

@@ -48,6 +48,7 @@ $wb-cancel-background: #e43232 !default;
 
 $wb-color-border: #dee2ed !default;
 $wb-second-color: #526384 !default;
+$wb-wizishop-blue-light: #52aecd26 !default;
 $transition-base-time: 200ms !default;
 .wb-structure-config-payment {
   padding: 0;
@@ -1879,8 +1880,8 @@ wb-structure-config-extended-input {
         padding: rem(8) rem(8);
         border: rem(1) solid transparent;
         position: absolute;
-        top: -#{rem(26)};
-        right: -#{rem(55)};
+        top: -#{rem(45)};
+        right: 0;
         @include media('<=#{$block-width-mobile * 1.4}') {
             right: -#{rem(26)};
         }
@@ -3547,7 +3548,7 @@ wb-loader {
     transform: translate(50px, 0px) rotate(-360deg);
   }
 }
-.wb-product-zoom-complete-background {
+.wb-product-zoom-complete {
   //minimum search sized for product - no less needed
   min-height: rem(380);
 
@@ -3574,14 +3575,8 @@ wb-loader {
     padding: rem(5) 0;
   }
 
-  &__upper {
-    z-index: 2;
-    position: relative;
-  }
-
   &__selected {
     padding: rem(30);
-    background-size: cover;
     position: relative;
     z-index: 34;
 
@@ -3592,9 +3587,6 @@ wb-loader {
     }
 
     .columns {
-      width: 70%;
-      margin: 0 auto;
-
       .column:last-child {
         > h3 {
           color: $wb-main-text-color;
@@ -3602,24 +3594,15 @@ wb-loader {
           font-weight: 600;
           line-height: rem(45);
           margin-bottom: 30px;
-          text-align: center;
-          pointer-events: none;
-          z-index: 0;
-          position: relative;
         }
 
         > p {
           margin: rem(30) 0;
           font-weight: 500;
           font-size: rem(35);
-          text-align: center;
-          pointer-events: none;
-          z-index: 0;
-          position: relative;
 
           &.is-variant {
-            width: 40%;
-            margin: 0 auto rem(30);
+            margin: 0 0 rem(30);
             padding: rem(20) rem(20);
             font-weight: 400;
             background-color: lighten($wb-border-color, 10%);
@@ -3652,14 +3635,10 @@ wb-loader {
           background-color: $wb-button-color;
           border-radius: rem(3);
           cursor: pointer;
-          display: block;
-          width: rem(260);
+          display: inline-block;
+          width: 100%;
           text-align: center;
-          margin: auto;
           margin-bottom: rem(20);
-          pointer-events: none;
-          z-index: 0;
-          position: relative;
         }
       }
     }
@@ -3687,135 +3666,6 @@ wb-loader {
       width: 100%;
     }
   }
-
-  &__media {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    left: 0;
-    top: 0;
-
-    &:after {
-      content: '\f03e';
-      font-family: 'Font Awesome 5 Pro';
-      display: block;
-      @include simple_transition();
-      position: absolute;
-      z-index: 38;
-      font-size: rem(70);
-      top: -#{rem(50)};
-      opacity: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      width: rem(70);
-      height: rem(90);
-      color: $wb-white;
-      pointer-events: none;
-    }
-
-    &:hover {
-      &:after {
-        top: -#{rem(25)};
-        opacity: 0.3;
-      }
-    }
-  }
-
-  &__noimages {
-    background-color: lighten($wb-border-color, 12%);
-    cursor: pointer;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    position: absolute;
-    width: 100%;
-    top: 0;
-
-    &:before {
-      content: '';
-      display: block;
-      width: 100%;
-      position: relative;
-      padding-top: 31%;
-      transition: padding 300ms ease;
-    }
-
-    &--small {
-      &:before {
-        padding-top: 27.5%;
-      }
-    }
-
-    &--medium {
-      &:before {
-        padding-top: 33%;
-      }
-    }
-
-    &--large {
-      &:before {
-        padding-top: 38.47%;
-      }
-    }
-
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      font-size: rem(14);
-      color: $wb-secondary-text-color;
-      width: auto;
-      white-space: nowrap;
-
-      &:before {
-        position: absolute;
-        width: 0;
-        bottom: -(#{rem(3)});
-        height: rem(2);
-        transition: 200ms all;
-        background-color: $wb-border-color;
-        content: ' ';
-        left: 0;
-      }
-    }
-
-    i {
-      color: $wb-secondary-text-color;
-      text-align: center;
-      display: block;
-      font-size: rem(45);
-      opacity: 0.4;
-      transition: 200ms all;
-      margin-bottom: rem(10);
-    }
-
-    border: rem(1) solid lighten($wb-border-color, 12%);
-    transition: 200ms all;
-
-    &:hover {
-      border: rem(1) solid $wb-border-color;
-
-      i {
-        color: darken($wb-secondary-text-color, 20%);
-      }
-
-      p {
-        color: darken($wb-secondary-text-color, 20%);
-
-        &:before {
-          width: 100%;
-        }
-      }
-    }
-  }
 }
 .wb-small-loader {
   display: block;
@@ -3873,7 +3723,7 @@ wb-loader {
     transform: translate(19px, 0);
   }
 }
-.wb-product-zoom-complete {
+.wb-product-zoom-complete-background {
   //minimum search sized for product - no less needed
   min-height: rem(380);
 
@@ -3900,8 +3750,14 @@ wb-loader {
     padding: rem(5) 0;
   }
 
+  &__upper {
+    z-index: 2;
+    position: relative;
+  }
+
   &__selected {
     padding: rem(30);
+    background-size: cover;
     position: relative;
     z-index: 34;
 
@@ -3912,6 +3768,9 @@ wb-loader {
     }
 
     .columns {
+      width: 70%;
+      margin: 0 auto;
+
       .column:last-child {
         > h3 {
           color: $wb-main-text-color;
@@ -3919,15 +3778,24 @@ wb-loader {
           font-weight: 600;
           line-height: rem(45);
           margin-bottom: 30px;
+          text-align: center;
+          pointer-events: none;
+          z-index: 0;
+          position: relative;
         }
 
         > p {
           margin: rem(30) 0;
           font-weight: 500;
           font-size: rem(35);
+          text-align: center;
+          pointer-events: none;
+          z-index: 0;
+          position: relative;
 
           &.is-variant {
-            margin: 0 0 rem(30);
+            width: 40%;
+            margin: 0 auto rem(30);
             padding: rem(20) rem(20);
             font-weight: 400;
             background-color: lighten($wb-border-color, 10%);
@@ -3960,10 +3828,14 @@ wb-loader {
           background-color: $wb-button-color;
           border-radius: rem(3);
           cursor: pointer;
-          display: inline-block;
-          width: 100%;
+          display: block;
+          width: rem(260);
           text-align: center;
+          margin: auto;
           margin-bottom: rem(20);
+          pointer-events: none;
+          z-index: 0;
+          position: relative;
         }
       }
     }
@@ -3991,6 +3863,135 @@ wb-loader {
       width: 100%;
     }
   }
+
+  &__media {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    left: 0;
+    top: 0;
+
+    &:after {
+      content: '\f03e';
+      font-family: 'Font Awesome 5 Pro';
+      display: block;
+      @include simple_transition();
+      position: absolute;
+      z-index: 38;
+      font-size: rem(70);
+      top: -#{rem(50)};
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: rem(70);
+      height: rem(90);
+      color: $wb-white;
+      pointer-events: none;
+    }
+
+    &:hover {
+      &:after {
+        top: -#{rem(25)};
+        opacity: 0.3;
+      }
+    }
+  }
+
+  &__noimages {
+    background-color: lighten($wb-border-color, 12%);
+    cursor: pointer;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+    top: 0;
+
+    &:before {
+      content: '';
+      display: block;
+      width: 100%;
+      position: relative;
+      padding-top: 31%;
+      transition: padding 300ms ease;
+    }
+
+    &--small {
+      &:before {
+        padding-top: 27.5%;
+      }
+    }
+
+    &--medium {
+      &:before {
+        padding-top: 33%;
+      }
+    }
+
+    &--large {
+      &:before {
+        padding-top: 38.47%;
+      }
+    }
+
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      font-size: rem(14);
+      color: $wb-secondary-text-color;
+      width: auto;
+      white-space: nowrap;
+
+      &:before {
+        position: absolute;
+        width: 0;
+        bottom: -(#{rem(3)});
+        height: rem(2);
+        transition: 200ms all;
+        background-color: $wb-border-color;
+        content: ' ';
+        left: 0;
+      }
+    }
+
+    i {
+      color: $wb-secondary-text-color;
+      text-align: center;
+      display: block;
+      font-size: rem(45);
+      opacity: 0.4;
+      transition: 200ms all;
+      margin-bottom: rem(10);
+    }
+
+    border: rem(1) solid lighten($wb-border-color, 12%);
+    transition: 200ms all;
+
+    &:hover {
+      border: rem(1) solid $wb-border-color;
+
+      i {
+        color: darken($wb-secondary-text-color, 20%);
+      }
+
+      p {
+        color: darken($wb-secondary-text-color, 20%);
+
+        &:before {
+          width: 100%;
+        }
+      }
+    }
+  }
 }
 .wb-structure-amplify-search-category {
     .columns {
@@ -4528,7 +4529,7 @@ wb-loader {
             .button {
                 padding: rem(8) rem(8);
                 border: rem(1) solid transparent;
-                background-color: $wizishop-blue-light;
+                background-color: $wb-wizishop-blue-light;
                 height: auto;
 
                 &:hover {
@@ -4778,7 +4779,7 @@ wb-loader {
     }
 
     &__content {
-        padding: rem(30) 0 0;
+        padding: rem(60) 0 rem(30);
 
         @include media('<=1510px') {
             padding: rem(30) rem(30) 0;
@@ -5618,7 +5619,7 @@ wb-editorjs {
 .wb-component {
     &__container {
         background-color: $wb-white;
-        border: rem(2) solid $wizishop-blue-light;
+        border: rem(2) solid $wb-wizishop-blue-light;
         @include simple_transition();
         padding: rem(60) rem(12) rem(12);
         border-radius: 3px;
@@ -5635,7 +5636,7 @@ wb-editorjs {
         position: absolute;
         top: 2px;
         left: 2px;
-        background-color: $wizishop-blue-light;
+        background-color: $wb-wizishop-blue-light;
     }
 
     .wb-additionnal-tools {
@@ -18283,14 +18284,18 @@ wb-quill {
         }
 
         .button {
-            background-color: transparent !important;
-            border-color: transparent !important;
-            &:hover,
-            &:focus {
+            &:not(.is-tooltip-danger) {
                 background-color: transparent !important;
-            }
-            > span {
-                display: none !important;
+                border-color: transparent !important;
+                &:hover,
+                &:focus {
+                    background-color: transparent !important;
+                    &.is-tooltip-danger {
+                    }
+                }
+                > span {
+                    display: none !important;
+                }
             }
         }
     }