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

package/bundles/wizishop-wizi-block.umd.js

@@ -20252,7 +20252,7 @@
     FaqComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wb-faq',
-                    template: "<div class=\"wb-faq\" [style.background-color]=\"backgroundColor\" [ngClass]=\"{ 'is-active': hasTooltipFocused }\">\n    <div\n        *ngFor=\"let row of faqRows; let i = index; first as isFirst\"\n        [className]=\"type\"\n        [class.isFirst]=\"isFirst\"\n        [style.border-color]=\"borderColor\"\n    >\n        <div\n            [className]=\"type + '__row wb-faq__row'\"\n            [ngClass]=\"{ open: row['open'], 'is-activeRow': row['hasTooltipFocused'] }\"\n            [style.background-color]=\"backgroundRowColor\"\n            [style.border-color]=\"borderColor\"\n            [ngStyle]=\"\n                shadowRowColor && row['open']\n                    ? {\n                          'box-shadow':\n                              '0 0 0 0 ' + shadowRowColor + ', 0 0 0 0 ' + shadowRowColor + ', 0 2px 14px 0 ' + shadowRowColor + ''\n                      }\n                    : {}\n            \"\n        >\n            <div\n                [className]=\"type + '__row__question wb-faq__row__question open'\"\n                [ngClass]=\"{ open: row['open'] }\"\n                [style.background-color]=\"row['open'] ? backgroundAnswerColor : backgroundQuestionColor\"\n                [style.border-color]=\"borderColor\"\n            >\n                <wb-editorjs [(content)]=\"row['title']\" (contentChange)=\"persist()\" [placeholder]=\"'wb.dto.TITLE.2' | translate\">\n                </wb-editorjs>\n                <span (click)=\"deleteRow(i)\" *ngIf=\"i > 0\" [className]=\"type + '__row__question__delete wb-faq__row__question__delete'\">\n                    <i class=\"fal fa-trash-alt\"></i>\n                </span>\n                <span (click)=\"showHide(i)\" *ngIf=\"!row['open']\" [style.color]=\"color\">\n                    <i class=\"fal fa-chevron-down\"></i>\n                </span>\n                <span (click)=\"showHide(i)\" *ngIf=\"row['open']\" [style.color]=\"color\">\n                    <i class=\"fal fa-chevron-up\"></i>\n                </span>\n            </div>\n            <div\n                [className]=\"type + '__row__answer wb-faq__row__answer open'\"\n                [ngClass]=\"{ open: row['open'] }\"\n                [style.border-color]=\"borderColor\"\n                [style.background-color]=\"backgroundAnswerColor\"\n            >\n                <wb-editorjs\n                    [(content)]=\"row[FORM_NAME_CONTENT]\"\n                    (contentChange)=\"persist()\"\n                    [placeholder]=\"'wb.dto.CONTENT.6' | translate\"\n                >\n                </wb-editorjs>\n            </div>\n        </div>\n    </div>\n    <div class=\"wb-faq__menu\">\n        <a class=\"wb-faq__menu__add\" (click)=\"addFaqRow()\"><i class=\"fal fa-plus\"></i> {{ 'wb.faq.1' | translate }}</a>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-faq\" [style.background-color]=\"backgroundColor\" [ngClass]=\"{ 'is-active': hasTooltipFocused }\">\n    <div\n        *ngFor=\"let row of faqRows; let i = index; first as isFirst\"\n        [className]=\"type\"\n        [class.isFirst]=\"isFirst\"\n        [style.border-color]=\"borderColor\"\n    >\n        <div\n            [className]=\"type + '__row wb-faq__row'\"\n            [ngClass]=\"{ open: row['open'], 'is-activeRow': row['hasTooltipFocused'] }\"\n            [style.background-color]=\"backgroundRowColor\"\n            [style.border-color]=\"borderColor\"\n            [ngStyle]=\"\n                shadowRowColor && row['open']\n                    ? {\n                          'box-shadow':\n                              '0 0 0 0 ' + shadowRowColor + ', 0 0 0 0 ' + shadowRowColor + ', 0 2px 14px 0 ' + shadowRowColor + ''\n                      }\n                    : {}\n            \"\n        >\n            <div\n                [className]=\"type + '__row__question wb-faq__row__question open'\"\n                [ngClass]=\"{ open: row['open'] }\"\n                [style.background-color]=\"row['open'] ? backgroundAnswerColor : backgroundQuestionColor\"\n                [style.border-color]=\"borderColor\"\n            >\n                <wb-editorjs [(content)]=\"row[FORM_NAME_TITLE]\" (contentChange)=\"persist()\" [placeholder]=\"'wb.dto.TITLE.2' | translate\">\n                </wb-editorjs>\n                <span (click)=\"deleteRow(i)\" *ngIf=\"i > 0\" [className]=\"type + '__row__question__delete wb-faq__row__question__delete'\">\n                    <i class=\"fal fa-trash-alt\"></i>\n                </span>\n                <span (click)=\"showHide(i)\" *ngIf=\"!row['open']\" [style.color]=\"color\">\n                    <i class=\"fal fa-chevron-down\"></i>\n                </span>\n                <span (click)=\"showHide(i)\" *ngIf=\"row['open']\" [style.color]=\"color\">\n                    <i class=\"fal fa-chevron-up\"></i>\n                </span>\n            </div>\n            <div\n                [className]=\"type + '__row__answer wb-faq__row__answer open'\"\n                [ngClass]=\"{ open: row['open'] }\"\n                [style.border-color]=\"borderColor\"\n                [style.background-color]=\"backgroundAnswerColor\"\n            >\n                <wb-editorjs\n                    [(content)]=\"row[FORM_NAME_CONTENT]\"\n                    (contentChange)=\"persist()\"\n                    [placeholder]=\"'wb.dto.CONTENT.6' | translate\"\n                >\n                </wb-editorjs>\n            </div>\n        </div>\n    </div>\n    <div class=\"wb-faq__menu\">\n        <a class=\"wb-faq__menu__add\" (click)=\"addFaqRow()\"><i class=\"fal fa-plus\"></i> {{ 'wb.faq.1' | translate }}</a>\n    </div>\n</div>\n"
                 },] }
     ];
     FaqComponent.propDecorators = {
@@ -20345,12 +20345,20 @@
         if (!block.classList.contains('wb-blocks__container--focused')) {
             block.classList.add('wb-blocks__container--focused');
         }
+        var containerToFocus = parentEditor.closest('.column');
+        if (!containerToFocus.classList.contains('editorjs-focused')) {
+            containerToFocus.classList.add('editorjs-focused');
+        }
     }
     function resetBlockFocus(parentEditor) {
         var block = parentEditor.closest('.wb-blocks__container');
         if (block.classList.contains('wb-blocks__container--focused')) {
             block.classList.remove('wb-blocks__container--focused');
         }
+        var containerToFocus = parentEditor.closest('.column');
+        if (containerToFocus.classList.contains('editorjs-focused')) {
+            containerToFocus.classList.remove('editorjs-focused');
+        }
     }
 
     var InlineStyleTool = /** @class */ (function (_super) {
@@ -21966,6 +21974,11 @@
                     colorSelection.style.left =
                         (this.nodes.button.offsetLeft +
                             (this.nodes.button.offsetWidth / 2 - colorSelection.offsetWidth / 2)).toString() + 'px';
+                    colorSelection.style.top =
+                        '-' +
+                            (this.parentEditor.querySelector('.ce-inline-toolbar__buttons').offsetHeight -
+                                (this.nodes.button.offsetTop + this.nodes.button.offsetHeight)).toString() +
+                            'px';
                     var viewportOffset = colorSelection.getBoundingClientRect();
                     var totalWidth = colorSelection.offsetWidth +
                         colorSelection.querySelector('.' + this.colorSelectionCss['colorPickerContainer']).offsetWidth;
@@ -22889,6 +22902,11 @@
                 this.parentEditor = this.findParentEditor();
             }
             var dropdown = this.parentEditor.querySelectorAll('.' + this.CSS.textSelectionModifier)[0];
+            dropdown.style.top =
+                '-' +
+                    (this.parentEditor.querySelector('.ce-inline-toolbar__buttons').offsetHeight -
+                        (this.nodes.button.offsetTop + this.nodes.button.offsetHeight)).toString() +
+                    'px';
             this.saveUserSelection();
             if (dropdown) {
                 if (dropdown.classList.contains('hidden')) {
@@ -22996,7 +23014,7 @@
     }());
     var TEXT_SIZES = [
         {
-            class: 'size-small',
+            class: 'we-size-small',
             name: 'Small',
         },
         {
@@ -23004,11 +23022,11 @@
             name: 'Normal',
         },
         {
-            class: 'size-large',
+            class: 'we-size-large',
             name: 'Large',
         },
         {
-            class: 'size-huge',
+            class: 'we-size-huge',
             name: 'Huge',
         },
     ];
@@ -23019,19 +23037,19 @@
     }());
     var TEXT_ALIGN = [
         {
-            class: 'align-left',
+            class: 'we-align-left',
             name: 'Left',
         },
         {
-            class: 'align-center',
+            class: 'we-align-center',
             name: 'Center',
         },
         {
-            class: 'align-right',
+            class: 'we-align-right',
             name: 'Right',
         },
         {
-            class: 'align-justify',
+            class: 'we-align-justify',
             name: 'Justify',
         },
     ];
@@ -23812,6 +23830,11 @@
                             (viewportOffset.left + linkDropdown.offsetWidth - document.body.offsetWidth);
                         linkDropdown.style.left = left.toString() + 'px';
                     }
+                    linkDropdown.style.top =
+                        '-' +
+                            (this.parentEditor.querySelector('.ce-inline-toolbar__buttons').offsetHeight -
+                                (this.nodes.button.offsetTop + this.nodes.button.offsetHeight)).toString() +
+                            'px';
                     linkDropdown.classList.remove('hidden');
                     this.currentSelection = this.getSelection();
                     document.addEventListener('click', function ($event) { return _this.isLinkDropdownFocusedOut($event); });
@@ -23863,7 +23886,7 @@
                 button: undefined,
             };
             _this.tag = 'SPAN';
-            _this.classes = 'indent-{{input}}';
+            _this.classes = 'we-indent-{{input}}';
             _this.input = 1;
             _this.api = api;
             _this._state = false;
@@ -23947,7 +23970,7 @@
                 button: undefined,
             };
             _this.tag = 'SPAN';
-            _this.classes = 'indent-{{input}}';
+            _this.classes = 'we-indent-{{input}}';
             _this.input = -1;
             _this.api = api;
             _this._state = false;
@@ -24040,6 +24063,11 @@
             if (dropdown) {
                 if (dropdown.classList.contains('hidden')) {
                     dropdown.style.left = this.nodes.button.offsetLeft.toString() + 'px';
+                    dropdown.style.top =
+                        '-' +
+                            (this.parentEditor.querySelector('.ce-inline-toolbar__buttons').offsetHeight -
+                                (this.nodes.button.offsetTop + this.nodes.button.offsetHeight)).toString() +
+                            'px';
                     dropdown.classList.remove('hidden');
                     this.currentSelection = this.getSelection();
                     document.addEventListener('click', function ($event) { return _this.isDropdownFocusedOut($event); });
@@ -24790,13 +24818,14 @@
         function EditorJSConversionService() {
             this.container = null;
             this.classesToReplace = {
-                'ql-size-small': 'size-small',
-                'ql-size-large': 'size-large',
-                'ql-size-huge': 'size-huge',
-                'ql-align-center': 'align-center',
-                'ql-align-right': 'align-right',
-                'ql-align-justify': 'align-justify',
-                'ql-indent-{input}': 'indent-{input}',
+                'ql-size-small': 'we-size-small',
+                'ql-size-large': 'we-size-large',
+                'ql-size-huge': 'we-size-huge',
+                'ql-align-left': 'we-align-left',
+                'ql-align-center': 'we-align-center',
+                'ql-align-right': 'we-align-right',
+                'ql-align-justify': 'we-align-justify',
+                'ql-indent-{input}': 'we-indent-{input}',
             };
         }
         EditorJSConversionService.prototype.convert = function (content) {
@@ -25073,6 +25102,9 @@
             var _this = this;
             var currentEditor = document.querySelectorAll('#editorJs-' + this.uuid)[0];
             var editorBlocks = currentEditor.querySelectorAll('.codex-editor__redactor .ce-paragraph');
+            if (editorBlocks.length === 1 && editorBlocks[0].innerText.length === 0) {
+                return;
+            }
             editorBlocks.forEach(function (block) {
                 if (block.childElementCount !== 1 || !_this.hasWrapper(block)) {
                     var selection = _this.getSelection();