@progress/kendo-vue-editor 2.7.3 → 3.0.0-dev.202201141128

package/dist/npm/dialogs/FindReplace.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FindAndReplaceDialogVue3 = exports.FindAndReplaceDialog = void 0; // @ts-ignore
+exports.FindAndReplaceDialogVue2 = exports.FindAndReplaceDialog = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
 
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+
 var kendo_vue_dialogs_1 = require("@progress/kendo-vue-dialogs");
 
 var kendo_vue_layout_1 = require("@progress/kendo-vue-layout");
@@ -28,7 +30,7 @@ var enter = 13,
     esc = 27;
 var settings = toolsSettings_1.EditorToolsSettings.findAndReplace; // tslint:enable:max-line-length
 
-var FindAndReplaceDialog = {
+var FindAndReplaceDialogVue2 = {
   name: 'KendoFindAndReplaceDialog',
   props: {
     view: Object,
@@ -45,6 +47,10 @@ var FindAndReplaceDialog = {
       default: null
     }
   },
+  created: function created() {
+    this._prevMatch = undefined;
+    this.nextMatch = undefined;
+  },
   data: function data() {
     return {
       selectedTab: 0,
@@ -54,24 +60,26 @@ var FindAndReplaceDialog = {
       matchWord: false,
       matchCyclic: false,
       useRegExp: false,
-      nextMatch: undefined
+      matches: [],
+      hasMounted: false
     };
   },
   mounted: function mounted() {
     if (this.$el) {
       document.body.append(this.$el);
     }
+
+    this.setNextState();
+    this.hasMounted = true;
   },
 
   /**
    * @hidden
    */
   updated: function updated() {
+    var matches = this.matches || [];
+    var nextMatch = this.nextMatch;
     var view = this.$props.view;
-    var _a = this.$data,
-        _b = _a.matches,
-        matches = _b === void 0 ? [] : _b,
-        nextMatch = _a.nextMatch;
 
     if (this._prevMatch !== nextMatch) {
       var state = view.state; // highlight selection
@@ -103,11 +111,6 @@ var FindAndReplaceDialog = {
       this.$el.remove();
     }
   },
-  watch: {
-    nextMatch: function nextMatch(_newNextMatch, oldMatch) {
-      this._prevMatch = oldMatch;
-    }
-  },
   // @ts-ignore
   setup: !gh ? undefined : function () {
     var v3 = !!gh;
@@ -149,7 +152,7 @@ var FindAndReplaceDialog = {
     var checkboxes = h("div", {
       "class": "k-search-options"
     }, [h("span", [h("input", {
-      "class": "k-checkbox",
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       attrs: this.v3 ? undefined : {
         type: "checkbox",
@@ -171,7 +174,7 @@ var FindAndReplaceDialog = {
       },
       "class": "k-checkbox-label"
     }, [localization.toLanguageString(findReplaceMatchCase, messages_1.messages[findReplaceMatchCase])])]), h("span", [h("input", {
-      "class": "k-checkbox",
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       attrs: this.v3 ? undefined : {
         type: "checkbox",
@@ -193,7 +196,7 @@ var FindAndReplaceDialog = {
       },
       "class": "k-checkbox-label"
     }, [localization.toLanguageString(findReplaceMatchWord, messages_1.messages[findReplaceMatchWord])])]), h("span", [h("input", {
-      "class": "k-checkbox",
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       attrs: this.v3 ? undefined : {
         type: "checkbox",
@@ -215,7 +218,7 @@ var FindAndReplaceDialog = {
       },
       "class": "k-checkbox-label"
     }, [localization.toLanguageString(findReplaceMatchCyclic, messages_1.messages[findReplaceMatchCyclic])])]), h("span", [h("input", {
-      "class": "k-checkbox",
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
       type: "checkbox",
       attrs: this.v3 ? undefined : {
         type: "checkbox",
@@ -237,58 +240,95 @@ var FindAndReplaceDialog = {
       },
       "class": "k-checkbox-label"
     }, [localization.toLanguageString(findReplaceUseRegExp, messages_1.messages[findReplaceUseRegExp])])])]);
-    var navigation = h("div", {
-      "class": "k-matches-container"
-    }, [h("button", {
-      "class": "k-button k-flat k-primary",
-      onClick: this.onFindPrev,
-      on: this.v3 ? undefined : {
-        "click": this.onFindPrev
-      }
-    }, [h("span", {
-      "class": "k-icon k-i-arrow-chevron-left"
-    }), localization.toLanguageString(findReplacePrevMatch, messages_1.messages[findReplacePrevMatch])]), h("span", [this.matchesMessage(localization.toLanguageString(findReplaceMatches, messages_1.messages[findReplaceMatches]))]), h("button", {
-      "class": "k-button k-flat k-primary",
-      onClick: this.onFindNext,
-      on: this.v3 ? undefined : {
-        "click": this.onFindNext
-      }
-    }, [localization.toLanguageString(findReplaceNextMatch, messages_1.messages[findReplaceNextMatch]), h("span", {
-      "class": "k-icon k-i-arrow-chevron-right"
-    })])]);
-    var findWhatLabel = h("div", {
-      "class": "k-edit-label"
-    }, [h("label", {
-      "for": "findWhat",
-      attrs: this.v3 ? undefined : {
-        "for": "findWhat"
-      }
-    }, [localization.toLanguageString(findReplaceFindWhat, messages_1.messages[findReplaceFindWhat])])]);
-    var findWhat = h("div", {
-      "class": "k-edit-field"
-    }, [h("input", {
-      id: "findWhat",
-      attrs: this.v3 ? undefined : {
-        id: "findWhat",
+
+    var navigation = function navigation(findWhatRef) {
+      var isRtl = this.$props.dir === 'rtl';
+      var prevButton = // @ts-ignore function children
+      h(kendo_vue_buttons_1.Button, {
+        fillMode: 'flat',
+        attrs: this.v3 ? undefined : {
+          fillMode: 'flat',
+          themeColor: 'primary'
+        },
+        themeColor: 'primary',
+        onClick: this.onFindPrev,
+        on: this.v3 ? undefined : {
+          "click": this.onFindPrev
+        }
+      }, this.v3 ? function () {
+        return [h("span", {
+          "class": "k-icon k-i-arrow-chevron-" + (isRtl ? 'right' : 'left')
+        }), localization.toLanguageString(findReplacePrevMatch, messages_1.messages[findReplacePrevMatch])];
+      } : [h("span", {
+        "class": "k-icon k-i-arrow-chevron-" + (isRtl ? 'right' : 'left')
+      }), localization.toLanguageString(findReplacePrevMatch, messages_1.messages[findReplacePrevMatch])]);
+      var nextButton = // @ts-ignore function children
+      h(kendo_vue_buttons_1.Button, {
+        fillMode: 'flat',
+        attrs: this.v3 ? undefined : {
+          fillMode: 'flat',
+          themeColor: 'primary'
+        },
+        themeColor: 'primary',
+        onClick: this.onFindNext,
+        on: this.v3 ? undefined : {
+          "click": this.onFindNext
+        }
+      }, this.v3 ? function () {
+        return [localization.toLanguageString(findReplaceNextMatch, messages_1.messages[findReplaceNextMatch]), h("span", {
+          "class": "k-icon k-i-arrow-chevron-" + (isRtl ? 'left' : 'right')
+        })];
+      } : [localization.toLanguageString(findReplaceNextMatch, messages_1.messages[findReplaceNextMatch]), h("span", {
+        "class": "k-icon k-i-arrow-chevron-" + (isRtl ? 'left' : 'right')
+      })]);
+      return h("div", {
+        "class": "k-matches-container"
+      }, [prevButton, this.hasMounted && h("span", {
+        ref: findWhatRef
+      }, [this.matchesMessage(localization.toLanguageString(findReplaceMatches, messages_1.messages[findReplaceMatches]))]), nextButton]);
+    };
+
+    var findWhatLabel = function findWhatLabel(findWhatId) {
+      return h("div", {
+        "class": "k-edit-label"
+      }, [h("label", {
+        ref: findWhatId,
+        "for": findWhatId,
+        attrs: this.v3 ? undefined : {
+          "for": findWhatId
+        }
+      }, [localization.toLanguageString(findReplaceFindWhat, messages_1.messages[findReplaceFindWhat])])]);
+    };
+
+    var findWhat = function findWhat(findWhatId) {
+      return h("div", {
+        "class": "k-edit-field"
+      }, [h("span", {
+        "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+      }, [h("input", {
+        id: findWhatId,
+        attrs: this.v3 ? undefined : {
+          id: findWhatId,
+          type: "text"
+        },
+        ref: findWhatId,
         type: "text",
-        autoFocus: true
-      },
-      type: "text",
-      "class": "k-textbox",
-      value: this.v3 ? searchText : null,
-      domProps: this.v3 ? undefined : {
-        "value": searchText
-      },
-      onInput: this.onSearchChange,
-      on: this.v3 ? undefined : {
-        "input": this.onSearchChange,
-        "focus": this.onSearchChange,
-        "keydown": this.onKeyDown
-      },
-      onFocus: this.onSearchChange,
-      onKeydown: this.onKeyDown,
-      autoFocus: true
-    })]);
+        "class": "k-input-inner",
+        value: this.v3 ? searchText : null,
+        domProps: this.v3 ? undefined : {
+          "value": searchText
+        },
+        onInput: this.onSearchChange,
+        on: this.v3 ? undefined : {
+          "input": this.onSearchChange,
+          "focus": this.onSearchChange,
+          "keydown": this.onKeyDown
+        },
+        onFocus: this.onSearchChange,
+        onKeydown: this.onKeyDown
+      })])]);
+    };
+
     var replaceWithLabel = h("div", {
       "class": "k-edit-label"
     }, [h("label", {
@@ -299,13 +339,15 @@ var FindAndReplaceDialog = {
     }, [localization.toLanguageString(findReplaceReplaceWith, messages_1.messages[findReplaceReplaceWith])])]);
     var replaceWith = h("div", {
       "class": "k-edit-field"
+    }, [h("span", {
+      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
     }, [h("input", {
       id: "replaceWith",
       attrs: this.v3 ? undefined : {
         id: "replaceWith",
         type: "text"
       },
-      "class": "k-textbox",
+      "class": "k-input-inner",
       type: "text",
       value: this.v3 ? replaceText : null,
       domProps: this.v3 ? undefined : {
@@ -315,7 +357,7 @@ var FindAndReplaceDialog = {
       on: this.v3 ? undefined : {
         "input": this.onReplaceChange
       }
-    })]);
+    })])]);
     return (// @ts-ignore function children
       h(kendo_vue_dialogs_1.Window, {
         title: localization.toLanguageString(findReplaceDialogTitle, messages_1.messages[findReplaceDialogTitle]),
@@ -332,7 +374,8 @@ var FindAndReplaceDialog = {
           },
           maximizeButton: function maximizeButton() {
             return null;
-          }
+          },
+          dir: this.$props.dir
         },
         onClose: this.onClose,
         on: this.v3 ? undefined : {
@@ -349,15 +392,18 @@ var FindAndReplaceDialog = {
         },
         maximizeButton: function maximizeButton() {
           return null;
-        }
+        },
+        dir: this.$props.dir
       }, this.v3 ? function () {
         return [// @ts-ignore function children
         h(kendo_vue_layout_1.TabStrip, {
-          selected: _this.selectedTab,
+          dir: _this.$props.dir,
           attrs: _this.v3 ? undefined : {
+            dir: _this.$props.dir,
             selected: _this.selectedTab,
             animation: false
           },
+          selected: _this.selectedTab,
           "class": "k-editor-find-replace",
           onSelect: _this.onTabSelect,
           on: _this.v3 ? undefined : {
@@ -374,10 +420,10 @@ var FindAndReplaceDialog = {
           }, _this.v3 ? function () {
             return [h("div", {
               "class": "k-edit-form-container"
-            }, [findWhatLabel, findWhat]), checkboxes, navigation];
+            }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
           } : [h("div", {
             "class": "k-edit-form-container"
-          }, [findWhatLabel, findWhat]), checkboxes, navigation]), // @ts-ignore function children
+          }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), // @ts-ignore function children
           h(kendo_vue_layout_1.TabStripTab, {
             title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace]),
             attrs: _this.v3 ? undefined : {
@@ -386,10 +432,10 @@ var FindAndReplaceDialog = {
           }, _this.v3 ? function () {
             return [h("div", {
               "class": "k-edit-form-container"
-            }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+            }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
               "class": "k-actions k-hstack k-justify-content-end"
-            }, [h("button", {
-              "class": "k-button",
+            }, [// @ts-ignore function children
+            h(kendo_vue_buttons_1.Button, {
               disabled: !Boolean(nextMatch),
               attrs: _this.v3 ? undefined : {
                 disabled: !Boolean(nextMatch)
@@ -398,8 +444,10 @@ var FindAndReplaceDialog = {
               on: _this.v3 ? undefined : {
                 "click": _this.onReplace
               }
-            }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-              "class": "k-button",
+            }, _this.v3 ? function () {
+              return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+            } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), // @ts-ignore function children
+            h(kendo_vue_buttons_1.Button, {
               disabled: !Boolean(nextMatch),
               attrs: _this.v3 ? undefined : {
                 disabled: !Boolean(nextMatch)
@@ -408,13 +456,14 @@ var FindAndReplaceDialog = {
               on: _this.v3 ? undefined : {
                 "click": _this.onReplaceAll
               }
-            }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation];
+            }, _this.v3 ? function () {
+              return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+            } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
           } : [h("div", {
             "class": "k-edit-form-container"
-          }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+          }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
             "class": "k-actions k-hstack k-justify-content-end"
-          }, [h("button", {
-            "class": "k-button",
+          }, [h(kendo_vue_buttons_1.Button, {
             disabled: !Boolean(nextMatch),
             attrs: _this.v3 ? undefined : {
               disabled: !Boolean(nextMatch)
@@ -423,8 +472,9 @@ var FindAndReplaceDialog = {
             on: _this.v3 ? undefined : {
               "click": _this.onReplace
             }
-          }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-            "class": "k-button",
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+          } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h(kendo_vue_buttons_1.Button, {
             disabled: !Boolean(nextMatch),
             attrs: _this.v3 ? undefined : {
               disabled: !Boolean(nextMatch)
@@ -433,7 +483,9 @@ var FindAndReplaceDialog = {
             on: _this.v3 ? undefined : {
               "click": _this.onReplaceAll
             }
-          }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation])];
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+          } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])];
         } : [h(kendo_vue_layout_1.TabStripTab, {
           title: localization.toLanguageString(findReplaceTabFind, messages_1.messages[findReplaceTabFind]),
           attrs: _this.v3 ? undefined : {
@@ -442,10 +494,10 @@ var FindAndReplaceDialog = {
         }, _this.v3 ? function () {
           return [h("div", {
             "class": "k-edit-form-container"
-          }, [findWhatLabel, findWhat]), checkboxes, navigation];
+          }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
         } : [h("div", {
           "class": "k-edit-form-container"
-        }, [findWhatLabel, findWhat]), checkboxes, navigation]), h(kendo_vue_layout_1.TabStripTab, {
+        }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), h(kendo_vue_layout_1.TabStripTab, {
           title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace]),
           attrs: _this.v3 ? undefined : {
             title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace])
@@ -453,10 +505,9 @@ var FindAndReplaceDialog = {
         }, _this.v3 ? function () {
           return [h("div", {
             "class": "k-edit-form-container"
-          }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+          }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
             "class": "k-actions k-hstack k-justify-content-end"
-          }, [h("button", {
-            "class": "k-button",
+          }, [h(kendo_vue_buttons_1.Button, {
             disabled: !Boolean(nextMatch),
             attrs: _this.v3 ? undefined : {
               disabled: !Boolean(nextMatch)
@@ -465,8 +516,9 @@ var FindAndReplaceDialog = {
             on: _this.v3 ? undefined : {
               "click": _this.onReplace
             }
-          }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-            "class": "k-button",
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+          } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h(kendo_vue_buttons_1.Button, {
             disabled: !Boolean(nextMatch),
             attrs: _this.v3 ? undefined : {
               disabled: !Boolean(nextMatch)
@@ -475,13 +527,14 @@ var FindAndReplaceDialog = {
             on: _this.v3 ? undefined : {
               "click": _this.onReplaceAll
             }
-          }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation];
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+          } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
         } : [h("div", {
           "class": "k-edit-form-container"
-        }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+        }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
           "class": "k-actions k-hstack k-justify-content-end"
-        }, [h("button", {
-          "class": "k-button",
+        }, [h(kendo_vue_buttons_1.Button, {
           disabled: !Boolean(nextMatch),
           attrs: _this.v3 ? undefined : {
             disabled: !Boolean(nextMatch)
@@ -490,8 +543,9 @@ var FindAndReplaceDialog = {
           on: _this.v3 ? undefined : {
             "click": _this.onReplace
           }
-        }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-          "class": "k-button",
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+        } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h(kendo_vue_buttons_1.Button, {
           disabled: !Boolean(nextMatch),
           attrs: _this.v3 ? undefined : {
             disabled: !Boolean(nextMatch)
@@ -500,13 +554,17 @@ var FindAndReplaceDialog = {
           on: _this.v3 ? undefined : {
             "click": _this.onReplaceAll
           }
-        }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation])])];
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+        } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])])];
       } : [h(kendo_vue_layout_1.TabStrip, {
-        selected: _this.selectedTab,
+        dir: _this.$props.dir,
         attrs: _this.v3 ? undefined : {
+          dir: _this.$props.dir,
           selected: _this.selectedTab,
           animation: false
         },
+        selected: _this.selectedTab,
         "class": "k-editor-find-replace",
         onSelect: _this.onTabSelect,
         on: _this.v3 ? undefined : {
@@ -522,10 +580,10 @@ var FindAndReplaceDialog = {
         }, _this.v3 ? function () {
           return [h("div", {
             "class": "k-edit-form-container"
-          }, [findWhatLabel, findWhat]), checkboxes, navigation];
+          }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
         } : [h("div", {
           "class": "k-edit-form-container"
-        }, [findWhatLabel, findWhat]), checkboxes, navigation]), h(kendo_vue_layout_1.TabStripTab, {
+        }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), h(kendo_vue_layout_1.TabStripTab, {
           title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace]),
           attrs: _this.v3 ? undefined : {
             title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace])
@@ -533,10 +591,9 @@ var FindAndReplaceDialog = {
         }, _this.v3 ? function () {
           return [h("div", {
             "class": "k-edit-form-container"
-          }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+          }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
             "class": "k-actions k-hstack k-justify-content-end"
-          }, [h("button", {
-            "class": "k-button",
+          }, [h(kendo_vue_buttons_1.Button, {
             disabled: !Boolean(nextMatch),
             attrs: _this.v3 ? undefined : {
               disabled: !Boolean(nextMatch)
@@ -545,8 +602,9 @@ var FindAndReplaceDialog = {
             on: _this.v3 ? undefined : {
               "click": _this.onReplace
             }
-          }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-            "class": "k-button",
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+          } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h(kendo_vue_buttons_1.Button, {
             disabled: !Boolean(nextMatch),
             attrs: _this.v3 ? undefined : {
               disabled: !Boolean(nextMatch)
@@ -555,13 +613,14 @@ var FindAndReplaceDialog = {
             on: _this.v3 ? undefined : {
               "click": _this.onReplaceAll
             }
-          }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation];
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+          } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
         } : [h("div", {
           "class": "k-edit-form-container"
-        }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+        }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
           "class": "k-actions k-hstack k-justify-content-end"
-        }, [h("button", {
-          "class": "k-button",
+        }, [h(kendo_vue_buttons_1.Button, {
           disabled: !Boolean(nextMatch),
           attrs: _this.v3 ? undefined : {
             disabled: !Boolean(nextMatch)
@@ -570,8 +629,9 @@ var FindAndReplaceDialog = {
           on: _this.v3 ? undefined : {
             "click": _this.onReplace
           }
-        }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-          "class": "k-button",
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+        } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h(kendo_vue_buttons_1.Button, {
           disabled: !Boolean(nextMatch),
           attrs: _this.v3 ? undefined : {
             disabled: !Boolean(nextMatch)
@@ -580,7 +640,9 @@ var FindAndReplaceDialog = {
           on: _this.v3 ? undefined : {
             "click": _this.onReplaceAll
           }
-        }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation])];
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+        } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])];
       } : [h(kendo_vue_layout_1.TabStripTab, {
         title: localization.toLanguageString(findReplaceTabFind, messages_1.messages[findReplaceTabFind]),
         attrs: _this.v3 ? undefined : {
@@ -589,10 +651,10 @@ var FindAndReplaceDialog = {
       }, _this.v3 ? function () {
         return [h("div", {
           "class": "k-edit-form-container"
-        }, [findWhatLabel, findWhat]), checkboxes, navigation];
+        }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')];
       } : [h("div", {
         "class": "k-edit-form-container"
-      }, [findWhatLabel, findWhat]), checkboxes, navigation]), h(kendo_vue_layout_1.TabStripTab, {
+      }, [findWhatLabel.call(_this, 'findWhatFind'), findWhat.call(_this, 'findWhatFind')]), checkboxes, navigation.call(_this, 'findWhatFind')]), h(kendo_vue_layout_1.TabStripTab, {
         title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace]),
         attrs: _this.v3 ? undefined : {
           title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace])
@@ -600,10 +662,9 @@ var FindAndReplaceDialog = {
       }, _this.v3 ? function () {
         return [h("div", {
           "class": "k-edit-form-container"
-        }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+        }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
           "class": "k-actions k-hstack k-justify-content-end"
-        }, [h("button", {
-          "class": "k-button",
+        }, [h(kendo_vue_buttons_1.Button, {
           disabled: !Boolean(nextMatch),
           attrs: _this.v3 ? undefined : {
             disabled: !Boolean(nextMatch)
@@ -612,8 +673,9 @@ var FindAndReplaceDialog = {
           on: _this.v3 ? undefined : {
             "click": _this.onReplace
           }
-        }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-          "class": "k-button",
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+        } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h(kendo_vue_buttons_1.Button, {
           disabled: !Boolean(nextMatch),
           attrs: _this.v3 ? undefined : {
             disabled: !Boolean(nextMatch)
@@ -622,13 +684,14 @@ var FindAndReplaceDialog = {
           on: _this.v3 ? undefined : {
             "click": _this.onReplaceAll
           }
-        }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation];
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+        } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')];
       } : [h("div", {
         "class": "k-edit-form-container"
-      }, [findWhatLabel, findWhat, replaceWithLabel, replaceWith]), h("div", {
+      }, [findWhatLabel.call(_this, 'findWhatReplace'), findWhat.call(_this, 'findWhatReplace'), replaceWithLabel, replaceWith]), h("div", {
         "class": "k-actions k-hstack k-justify-content-end"
-      }, [h("button", {
-        "class": "k-button",
+      }, [h(kendo_vue_buttons_1.Button, {
         disabled: !Boolean(nextMatch),
         attrs: _this.v3 ? undefined : {
           disabled: !Boolean(nextMatch)
@@ -637,8 +700,9 @@ var FindAndReplaceDialog = {
         on: _this.v3 ? undefined : {
           "click": _this.onReplace
         }
-      }, [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h("button", {
-        "class": "k-button",
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])];
+      } : [localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])]), h(kendo_vue_buttons_1.Button, {
         disabled: !Boolean(nextMatch),
         attrs: _this.v3 ? undefined : {
           disabled: !Boolean(nextMatch)
@@ -647,7 +711,9 @@ var FindAndReplaceDialog = {
         on: _this.v3 ? undefined : {
           "click": _this.onReplaceAll
         }
-      }, [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation])])])
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])];
+      } : [localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll])])]), checkboxes, navigation.call(_this, 'findWhatReplace')])])])
     ); //    document.body);
   },
   methods: {
@@ -710,7 +776,12 @@ var FindAndReplaceDialog = {
         var transaction = view.state.tr.setSelection(selectionResult);
         transaction.scrollIntoView();
         view.updateState(view.state.apply(transaction));
+        this._prevMatch = this.nextMatch;
         this.nextMatch = selectionResult;
+
+        if (this._prevMatch !== this.nextMatch) {
+          this.$forceUpdate();
+        }
       }
     },
     onReplace: function onReplace() {
@@ -791,15 +862,17 @@ var FindAndReplaceDialog = {
         var nextMatch = !this.searchText && matches[0] || matches.find(function (match) {
           return match.from >= selection_1.from;
         }) || this.matchCyclic && matches[0] || undefined;
+        this._prevMatch = this.nextMatch;
         this.matches = matches;
         this.nextMatch = nextMatch;
       } else {
-        this.matches = undefined;
+        this._prevMatch = this.nextMatch;
+        this.matches = [];
         this.nextMatch = undefined;
       }
     }
   }
 };
-exports.FindAndReplaceDialog = FindAndReplaceDialog;
-var FindAndReplaceDialogVue3 = FindAndReplaceDialog;
-exports.FindAndReplaceDialogVue3 = FindAndReplaceDialogVue3;
+exports.FindAndReplaceDialogVue2 = FindAndReplaceDialogVue2;
+var FindAndReplaceDialog = FindAndReplaceDialogVue2;
+exports.FindAndReplaceDialog = FindAndReplaceDialog;