@wizishop/wizi-block 4.2.27-beta → 4.2.30-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/wizi-block",
-  "version": "4.2.27-beta",
+  "version": "4.2.30-beta",
   "description": "## To use WiziBlock, you have to :",
   "repository": {
     "type": "git",
@@ -29,6 +29,7 @@
     "@wizishop/ng-wizi-bulma": "^10.0.0",
     "places.js": "^1.19.0",
     "leaflet": "^1.7.1",
+    "monaco-editor": "^0.30.1",
     "ngx-color-picker": "^10.1.0",
     "ngx-monaco-editor": "^9.0.0",
     "ngx-perfect-scrollbar": "^9.0.0",

package/wizi-block.scss

@@ -1882,204 +1882,33 @@ wb-structure-tools {
     }
   }
 }
-.wb-blocks {
-    position: relative;
-    z-index: 1;
-
-    span[class^='wb-dynamic-size'] {
-        position: absolute;
-        color: $wb-secondary-text-color;
-        top: 1vw !important;
-        font-size: rem(14);
-        text-align: center;
-        width: rem(200);
-        left: 0;
-        right: 0;
-        margin: auto;
-    }
-
-    .button.is-hidden-button.is-rounded {
-        padding: rem(8) rem(8);
-        border: rem(1) solid transparent;
-        position: absolute;
-        top: -#{rem(45)};
-        right: 0;
-        @include media('<=#{$block-width-mobile * 1.4}') {
-            right: -#{rem(26)};
-        }
-        z-index: 11000;
-        width: rem(36);
-        @include simple_transition();
-
-        &:not(.is-danger) {
-            color: lighten($wb-secondary-text-color, 20%);
-            @include media('>=1419px', '<1515px') {
-                right: -20px !important;
-            }
-
-            &:hover {
-                background-color: lighten($wb-secondary-text-color, 20%);
-                color: $wb-white;
-            }
-        }
-    }
-
-    &__container {
-        padding-bottom: rem(30);
-        display: block;
-        height: 100%;
-        width: 100%;
-        box-sizing: border-box;
-        transition: 0s !important;
-        position: relative;
-        z-index: 1;
-
-        &--focused {
-            z-index: 50;
-        }
-
-        .wb-component__container {
-            display: block;
-            height: 100%;
-            width: 100%;
-            position: relative;
-        }
-        &:hover,
-        &:focus,
-        .hover & {
-            .wb-component__container {
-                border-color: $wizishop-blue;
-            }
-            .wb-structure-tools {
-                background-color: $wizishop-blue;
-            }
-        }
-    }
-
-    .border-blue {
-        .wb-component__container {
-            border-color: $wizishop-blue;
-        }
-    }
-
-    &.cdk-drop-list-dragging .wb-blocks__container:not(.cdk-drag-placeholder) {
-        transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
-
-        .wb-videos-simple,
-        .wb-videos-txt,
-        .wb-videos-txt-left,
-        .wb-videos-txt-content {
-            &__fakeframe {
-                display: flex !important;
-            }
-
-            &__frame {
-                display: none !important;
-            }
-        }
-    }
-
-    &.cdk-drop-list-dragging {
-        .wb-videos-simple,
-        .wb-videos-txt,
-        .wb-videos-txt-left,
-        .wb-videos-txt-content {
-            &__fakeframe {
-                display: flex !important;
-            }
-            &__frame {
-                display: none !important;
-            }
-        }
-
-        .wb-component__container {
-            border: rem(2) solid $wizishop-blue !important;
-        }
-    }
-
-    &-empty {
-        text-align: center;
-        background-color: lighten($wb-border-color, 13%);
-        padding: rem(80);
-        margin-bottom: rem(30);
-
-        img {
-            width: rem(75);
-            margin: 0 auto;
-            display: block;
-        }
-
-        p {
-            &:first-of-type {
-                font-size: rem(16);
-                font-weight: 500;
-                color: $wb-main-text-color;
-                margin: rem(20);
-            }
-
-            &:last-of-type {
-                font-size: rem(14);
-                font-weight: 400;
-                color: $wb-secondary-text-color;
-            }
-        }
-    }
-}
-
-.wb-blocks__container.cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
-    }
-}
-
-.wb-blocks__container.cdk-drag-placeholder {
-    opacity: 0.2;
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
+.wb-previews {
+  &__iframe {
+    opacity: 0;
+    width: 100%;
+    height: calc(100vh - #{rem(280)});
+    min-height: calc(100vh - #{rem(280)});
+    overflow-y: scroll;
+    &.is-active {
+      opacity: 1;
     }
-}
+    border: rem(1) dashed $wb-border-color;
+  }
 
-.wb-blocks__container.cdk-drag-preview {
-    box-shadow: 0 rem(30) rem(30) rgba(0, 0, 0, 0.2);
-    cursor: move;
+  &__loader {
+    display: none;
+    height: calc(100vh - #{rem(280)});
+    min-height: calc(100vh - #{rem(280)});
 
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
+    &.is-active {
+      display: block;
     }
-}
+  }
 
-.wb-component {
-    &.border-grey {
-        .wb-component__container {
-            border-color: darken(#95a5a6, 15%);
-        }
-    }
+  .wb-loader {
+    margin: 0 auto 1.875rem auto;
+    padding-top: rem(85);
+  }
 }
 .wb-forms-onboarding {
     width: 100%;
@@ -3447,11 +3276,6 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
                 border: 1px solid #eaeaea;
                 border-radius: 3px;
                 height: calc(100% - 56px);
-
-                .monaco-editor {
-                    width: 100% !important;
-                    height: 100% !important;
-                }
             }
 
             &__buttons {
@@ -14351,33 +14175,204 @@ $color-size-choose: #6c6c6c;
         }
     }
 }
-.wb-previews {
-  &__iframe {
-    opacity: 0;
-    width: 100%;
-    height: calc(100vh - #{rem(280)});
-    min-height: calc(100vh - #{rem(280)});
-    overflow-y: scroll;
-    &.is-active {
-      opacity: 1;
+.wb-blocks {
+    position: relative;
+    z-index: 1;
+
+    span[class^='wb-dynamic-size'] {
+        position: absolute;
+        color: $wb-secondary-text-color;
+        top: 1vw !important;
+        font-size: rem(14);
+        text-align: center;
+        width: rem(200);
+        left: 0;
+        right: 0;
+        margin: auto;
     }
-    border: rem(1) dashed $wb-border-color;
-  }
 
-  &__loader {
-    display: none;
-    height: calc(100vh - #{rem(280)});
-    min-height: calc(100vh - #{rem(280)});
+    .button.is-hidden-button.is-rounded {
+        padding: rem(8) rem(8);
+        border: rem(1) solid transparent;
+        position: absolute;
+        top: -#{rem(45)};
+        right: 0;
+        @include media('<=#{$block-width-mobile * 1.4}') {
+            right: -#{rem(26)};
+        }
+        z-index: 11000;
+        width: rem(36);
+        @include simple_transition();
 
-    &.is-active {
-      display: block;
+        &:not(.is-danger) {
+            color: lighten($wb-secondary-text-color, 20%);
+            @include media('>=1419px', '<1515px') {
+                right: -20px !important;
+            }
+
+            &:hover {
+                background-color: lighten($wb-secondary-text-color, 20%);
+                color: $wb-white;
+            }
+        }
     }
-  }
 
-  .wb-loader {
-    margin: 0 auto 1.875rem auto;
-    padding-top: rem(85);
-  }
+    &__container {
+        padding-bottom: rem(30);
+        display: block;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        transition: 0s !important;
+        position: relative;
+        z-index: 1;
+
+        &--focused {
+            z-index: 50;
+        }
+
+        .wb-component__container {
+            display: block;
+            height: 100%;
+            width: 100%;
+            position: relative;
+        }
+        &:hover,
+        &:focus,
+        .hover & {
+            .wb-component__container {
+                border-color: $wizishop-blue;
+            }
+            .wb-structure-tools {
+                background-color: $wizishop-blue;
+            }
+        }
+    }
+
+    .border-blue {
+        .wb-component__container {
+            border-color: $wizishop-blue;
+        }
+    }
+
+    &.cdk-drop-list-dragging .wb-blocks__container:not(.cdk-drag-placeholder) {
+        transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
+
+        .wb-videos-simple,
+        .wb-videos-txt,
+        .wb-videos-txt-left,
+        .wb-videos-txt-content {
+            &__fakeframe {
+                display: flex !important;
+            }
+
+            &__frame {
+                display: none !important;
+            }
+        }
+    }
+
+    &.cdk-drop-list-dragging {
+        .wb-videos-simple,
+        .wb-videos-txt,
+        .wb-videos-txt-left,
+        .wb-videos-txt-content {
+            &__fakeframe {
+                display: flex !important;
+            }
+            &__frame {
+                display: none !important;
+            }
+        }
+
+        .wb-component__container {
+            border: rem(2) solid $wizishop-blue !important;
+        }
+    }
+
+    &-empty {
+        text-align: center;
+        background-color: lighten($wb-border-color, 13%);
+        padding: rem(80);
+        margin-bottom: rem(30);
+
+        img {
+            width: rem(75);
+            margin: 0 auto;
+            display: block;
+        }
+
+        p {
+            &:first-of-type {
+                font-size: rem(16);
+                font-weight: 500;
+                color: $wb-main-text-color;
+                margin: rem(20);
+            }
+
+            &:last-of-type {
+                font-size: rem(14);
+                font-weight: 400;
+                color: $wb-secondary-text-color;
+            }
+        }
+    }
+}
+
+.wb-blocks__container.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
+
+.wb-blocks__container.cdk-drag-placeholder {
+    opacity: 0.2;
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
+
+.wb-blocks__container.cdk-drag-preview {
+    box-shadow: 0 rem(30) rem(30) rgba(0, 0, 0, 0.2);
+    cursor: move;
+
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
+
+.wb-component {
+    &.border-grey {
+        .wb-component__container {
+            border-color: darken(#95a5a6, 15%);
+        }
+    }
 }
 .wb-text-backgrounds-link {
     position: relative;