@progress/kendo-react-editor 7.2.4-develop.3 → 7.3.0-develop.1

package/config/toolsSettings.mjs

@@ -0,0 +1,549 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { keys as e, messages as i } from "../messages/index.mjs";
+import { boldIcon as c, italicIcon as r, underlineIcon as m, strikethroughIcon as p, subscriptIcon as d, supscriptIcon as g, linkIcon as f, fileAddIcon as u, tableAddIcon as I, tableRowInsertAboveIcon as v, tableRowInsertBelowIcon as y, tableColumnInsertLeftIcon as R, tableColumnInsertRightIcon as b, tableRowDeleteIcon as h, tableColumnDeleteIcon as C, tableDeleteIcon as k, cellsMergeIcon as N, cellSplitHorizontallyIcon as H, printIcon as w, selectAllIcon as x, filePdfIcon as A, clearCssIcon as L, imageIcon as F, codeIcon as M, binocularsIcon as z, unlinkIcon as W, undoIcon as D, redoIcon as B, foregroundColorIcon as P, dropletIcon as T, alignLeftIcon as U, alignRightIcon as G, alignCenterIcon as J, alignJustifyIcon as O, alignRemoveIcon as K, indentIcon as V, outdentIcon as j, listOrderedIcon as q, listUnorderedIcon as Q } from "@progress/kendo-svg-icons";
+import { indentRules as o, bold as X, italic as Y, underline as Z, strikethrough as _, subscript as $, superscript as S, link as t, alignLeftRules as E, alignRightRules as ee, alignCenterRules as ne, alignJustifyRules as ae, alignRemoveRules as le, outdentRules as ie } from "@progress/kendo-editor-common";
+const l = { ...o.listsTypes };
+var s;
+((n) => {
+  const a = {
+    type: "button"
+  };
+  n.bold = {
+    ...X,
+    props: {
+      icon: "bold",
+      svgIcon: c,
+      ...a
+    },
+    messages: {
+      title: e.bold
+    },
+    commandName: "Bold"
+  }, n.italic = {
+    ...Y,
+    props: {
+      icon: "italic",
+      svgIcon: r,
+      ...a
+    },
+    messages: {
+      title: e.italic
+    },
+    commandName: "Italic"
+  }, n.underline = {
+    ...Z,
+    props: {
+      icon: "underline",
+      svgIcon: m,
+      ...a
+    },
+    messages: {
+      title: e.underline
+    },
+    commandName: "Underline"
+  }, n.strikethrough = {
+    ..._,
+    props: {
+      icon: "strikethrough",
+      svgIcon: p,
+      ...a
+    },
+    messages: {
+      title: e.strikethrough
+    },
+    commandName: "Strikethrough"
+  }, n.subscript = {
+    ...$,
+    props: {
+      icon: "subscript",
+      svgIcon: d,
+      ...a
+    },
+    messages: {
+      title: e.subscript
+    },
+    commandName: "Subscript"
+  }, n.superscript = {
+    ...S,
+    props: {
+      icon: "supscript",
+      svgIcon: g,
+      ...a
+    },
+    messages: {
+      title: e.superscript
+    },
+    commandName: "Superscript"
+  }, n.link = {
+    ...t,
+    props: {
+      icon: "link",
+      svgIcon: f,
+      ...a
+    },
+    messages: {
+      insertHyperlink: e.insertHyperlink,
+      insertHyperlinkDialogTitle: e.insertHyperlinkDialogTitle,
+      insertHyperlinkAddress: e.insertHyperlinkAddress,
+      insertHyperlinkTitle: e.insertHyperlinkTitle,
+      insertHyperlinkNewWindow: e.insertHyperlinkNewWindow,
+      insertHyperlinkCancel: e.insertHyperlinkCancel,
+      insertHyperlinkInsert: e.insertHyperlinkInsert
+    },
+    commandName: "Link"
+  }, n.insertFile = {
+    ...t,
+    props: {
+      icon: "file-add",
+      svgIcon: u,
+      ...a
+    },
+    messages: {
+      insertHyperlink: e.insertFile,
+      insertHyperlinkDialogTitle: e.insertFileDialogTitle,
+      insertHyperlinkAddress: e.insertFileAddress,
+      insertHyperlinkTitle: e.insertFileTitle,
+      insertHyperlinkNewWindow: "",
+      insertHyperlinkCancel: e.insertFileCancel,
+      insertHyperlinkInsert: e.insertFileInsert
+    },
+    commandName: "InsertFile",
+    linkTarget: !1
+  }, n.insertTable = {
+    props: {
+      icon: "table-add",
+      svgIcon: I,
+      ...a
+    },
+    messages: {
+      createTable: e.createTable,
+      createTableHint: e.createTableHint
+    },
+    commandName: "InsertTable"
+  }, n.addRowBefore = {
+    props: {
+      icon: "table-row-insert-above",
+      svgIcon: v,
+      ...a
+    },
+    messages: {
+      title: e.addRowBefore
+    },
+    commandName: "AddRowBefore"
+  }, n.addRowAfter = {
+    props: {
+      icon: "table-row-insert-below",
+      svgIcon: y,
+      ...a
+    },
+    messages: {
+      title: e.addRowAfter
+    },
+    commandName: "AddRowAfter"
+  }, n.addColumnBefore = {
+    props: {
+      icon: "table-column-insert-left",
+      svgIcon: R,
+      ...a
+    },
+    messages: {
+      title: e.addColumnBefore
+    },
+    commandName: "AddColumnBefore"
+  }, n.addColumnAfter = {
+    props: {
+      icon: "table-column-insert-right",
+      svgIcon: b,
+      ...a
+    },
+    messages: {
+      title: e.addColumnAfter
+    },
+    commandName: "AddColumnAfter"
+  }, n.deleteRow = {
+    props: {
+      icon: "table-row-delete",
+      svgIcon: h,
+      ...a
+    },
+    messages: {
+      title: e.deleteRow
+    },
+    commandName: "DeleteRow"
+  }, n.deleteColumn = {
+    props: {
+      icon: "table-column-delete",
+      svgIcon: C,
+      ...a
+    },
+    messages: {
+      title: e.deleteColumn
+    },
+    commandName: "DeleteColumn"
+  }, n.deleteTable = {
+    props: {
+      icon: "table-delete",
+      svgIcon: k,
+      ...a
+    },
+    messages: {
+      title: e.deleteTable
+    },
+    commandName: "DeleteTable"
+  }, n.mergeCells = {
+    props: {
+      icon: "cells-merge",
+      svgIcon: N,
+      ...a
+    },
+    messages: {
+      title: e.mergeCells
+    },
+    commandName: "MergeCells"
+  }, n.splitCell = {
+    props: {
+      icon: "cell-split-horizontally",
+      svgIcon: H,
+      ...a
+    },
+    messages: {
+      title: e.splitCell
+    },
+    commandName: "SplitCell"
+  }, n.print = {
+    props: {
+      icon: "print",
+      svgIcon: w,
+      ...a
+    },
+    messages: {
+      title: e.print
+    }
+  }, n.selectAll = {
+    props: {
+      icon: "select-all",
+      svgIcon: x,
+      ...a
+    },
+    messages: {
+      title: e.selectAll
+    }
+  }, n.pdf = {
+    props: {
+      icon: "file-pdf",
+      svgIcon: A,
+      ...a
+    },
+    messages: {
+      title: e.pdf
+    }
+  }, n.savePdfOptions = {
+    fileName: "editor.pdf",
+    paperSize: "A4",
+    margin: "1cm"
+  }, n.cleanFormatting = {
+    props: {
+      icon: "clear-css",
+      svgIcon: L,
+      ...a
+    },
+    messages: {
+      title: e.cleanFormatting
+    },
+    commandName: "CleanFormatting"
+  }, n.image = {
+    node: "image",
+    props: {
+      icon: "image",
+      svgIcon: F,
+      ...a
+    },
+    messages: {
+      insertImage: e.insertImage,
+      insertImageDialogTitle: e.insertImageDialogTitle,
+      insertImageAddress: e.insertImageAddress,
+      insertImageTitle: e.insertImageTitle,
+      insertImageAltText: e.insertImageAltText,
+      insertImageWidth: e.insertImageWidth,
+      insertImageHeight: e.insertImageHeight,
+      insertImageCancel: e.insertImageCancel,
+      insertImageInsert: e.insertImageInsert
+    },
+    commandName: "InsertImage"
+  }, n.viewHtml = {
+    props: {
+      icon: "code",
+      svgIcon: M,
+      ...a
+    },
+    messages: {
+      viewHtml: e.viewHtml,
+      viewHtmlDialogTitle: e.viewHtmlDialogTitle,
+      viewHtmlCancel: e.viewHtmlCancel,
+      viewHtmlUpdate: e.viewHtmlUpdate
+    },
+    commandName: "SetContent"
+  }, n.findAndReplace = {
+    props: {
+      icon: "find",
+      svgIcon: z,
+      ...a
+    },
+    messages: {
+      findReplaceToolTitle: e.findReplaceToolTitle,
+      findReplaceDialogTitle: e.findReplaceDialogTitle,
+      findReplaceTabFind: e.findReplaceTabFind,
+      findReplaceTabReplace: e.findReplaceTabReplace,
+      findReplaceFindWhat: e.findReplaceFindWhat,
+      findReplaceReplaceWith: e.findReplaceReplaceWith,
+      findReplaceReplace: e.findReplaceReplace,
+      findReplaceReplaceAll: e.findReplaceReplaceAll,
+      findReplaceMatchCase: e.findReplaceMatchCase,
+      findReplaceMatchWord: e.findReplaceMatchWord,
+      findReplaceMatchCyclic: e.findReplaceMatchCyclic,
+      findReplaceUseRegExp: e.findReplaceUseRegExp,
+      findReplacePrevMatch: e.findReplacePrevMatch,
+      findReplaceNextMatch: e.findReplaceNextMatch,
+      findReplaceMatches: e.findReplaceMatches
+    }
+  }, n.unlink = {
+    ...t,
+    props: {
+      icon: "unlink",
+      svgIcon: W,
+      ...a
+    },
+    messages: {
+      title: e.unlink
+    },
+    commandName: "Unlink"
+  }, n.undo = {
+    props: {
+      icon: "undo",
+      svgIcon: D,
+      ...a
+    },
+    messages: {
+      title: e.undo
+    },
+    commandName: "Undo"
+  }, n.redo = {
+    props: {
+      icon: "redo",
+      svgIcon: B,
+      ...a
+    },
+    messages: {
+      title: e.redo
+    },
+    commandName: "Redo"
+  }, n.fontSize = {
+    style: "font-size",
+    defaultItem: { text: i[e.fontSize], value: "", localizationKey: e.fontSize },
+    items: [
+      { text: "1 (8pt)", value: "xx-small" },
+      { text: "2 (10pt)", value: "x-small" },
+      { text: "3 (12pt)", value: "small" },
+      { text: "4 (14pt)", value: "medium" },
+      { text: "5 (18pt)", value: "large" },
+      { text: "6 (24pt)", value: "x-large" },
+      { text: "7 (36pt)", value: "xx-large" }
+    ],
+    commandName: "FontSize"
+  }, n.fontName = {
+    style: "font-family",
+    defaultItem: { text: i[e.fontName], value: "", localizationKey: e.fontName },
+    items: [
+      {
+        text: "Arial",
+        value: "Arial, Helvetica, sans-serif",
+        style: { fontFamily: "Arial, Helvetica, sans-serif" }
+      },
+      {
+        text: "Courier New",
+        value: "'Courier New', Courier, monospace",
+        style: { fontFamily: "'Courier New', Courier, monospace" }
+      },
+      {
+        text: "Georgia",
+        value: "Georgia, serif",
+        style: { fontFamily: "Georgia, serif" }
+      },
+      {
+        text: "Impact",
+        value: "Impact, Charcoal, sans-serif",
+        style: { fontFamily: "Impact, Charcoal, sans-serif" }
+      },
+      {
+        text: "Lucida Console",
+        value: "'Lucida Console', Monaco, monospace",
+        style: { fontFamily: "'Lucida Console', Monaco, monospace" }
+      },
+      {
+        text: "Tahoma",
+        value: "Tahoma, Geneva, sans-serif",
+        style: { fontFamily: "Tahoma, Geneva, sans-serif" }
+      },
+      {
+        text: "Times New Roman",
+        value: "'Times New Roman', Times,serif",
+        style: { fontFamily: "'Times New Roman', Times,serif" }
+      },
+      {
+        text: "Trebuchet MS",
+        value: "'Trebuchet MS', Helvetica, sans-serif",
+        style: { fontFamily: "'Trebuchet MS', Helvetica, sans-serif" }
+      },
+      {
+        text: "Verdana",
+        value: "Verdana, Geneva, sans-serif",
+        style: { fontFamily: "Verdana, Geneva, sans-serif" }
+      }
+    ],
+    commandName: "FontName"
+  }, n.formatBlock = {
+    defaultItem: { text: i[e.format], value: "", localizationKey: e.format },
+    items: [
+      { text: "Paragraph", value: "p", style: { display: "block", marginLeft: 0 } },
+      { text: "Heading 1", value: "h1", style: { display: "block", fontSize: "2em", marginLeft: 0, fontWeight: "bold" } },
+      { text: "Heading 2", value: "h2", style: { display: "block", fontSize: "1.5em", marginLeft: 0, fontWeight: "bold" } },
+      { text: "Heading 3", value: "h3", style: { display: "block", fontSize: "1.17em", marginLeft: 0, fontWeight: "bold" } },
+      { text: "Heading 4", value: "h4", style: { display: "block", fontSize: "1em", marginLeft: 0, fontWeight: "bold" } },
+      { text: "Heading 5", value: "h5", style: { display: "block", fontSize: "0.83em", marginLeft: 0, fontWeight: "bold" } },
+      { text: "Heading 6", value: "h6", style: { display: "block", fontSize: "0.67em", marginLeft: 0, fontWeight: "bold" } }
+    ],
+    commandName: "FormatBlock"
+  }, n.foreColor = {
+    style: "color",
+    colorPickerProps: {
+      icon: "foreground-color",
+      svgIcon: P,
+      view: "palette",
+      title: e.foregroundColor,
+      ariaLabel: e.foreColorLabel
+    },
+    commandName: "ForeColor"
+  }, n.backColor = {
+    style: "background-color",
+    colorPickerProps: {
+      icon: "droplet",
+      svgIcon: T,
+      view: "palette",
+      title: e.backgroundColor,
+      ariaLabel: e.backColorLabel
+    },
+    commandName: "BackColor"
+  }, n.alignLeft = {
+    actions: [...E],
+    props: {
+      icon: "align-left",
+      svgIcon: U,
+      ...a
+    },
+    messages: {
+      title: e.alignLeft
+    },
+    commandName: "AlignLeft"
+  }, n.alignRight = {
+    actions: [...ee],
+    props: {
+      icon: "align-right",
+      svgIcon: G,
+      ...a
+    },
+    messages: {
+      title: e.alignRight
+    },
+    commandName: "AlignRight"
+  }, n.alignCenter = {
+    actions: [...ne],
+    props: {
+      icon: "align-center",
+      svgIcon: J,
+      ...a
+    },
+    messages: {
+      title: e.alignCenter
+    },
+    commandName: "AlignCenter"
+  }, n.alignJustify = {
+    actions: [...ae],
+    props: {
+      icon: "align-justify",
+      svgIcon: O,
+      ...a
+    },
+    messages: {
+      title: e.alignJustify
+    },
+    commandName: "AlignJustify"
+  }, n.alignRemove = {
+    actions: [...le],
+    props: {
+      icon: "align-remove",
+      svgIcon: K,
+      ...a
+    },
+    messages: {},
+    commandName: "AlignRemove"
+  }, n.indent = {
+    actions: o.nodes,
+    listsTypes: l,
+    props: {
+      icon: "indent",
+      svgIcon: V,
+      ...a
+    },
+    messages: {
+      title: e.indent
+    },
+    commandName: "Indent"
+  }, n.outdent = {
+    actions: ie.nodes,
+    listsTypes: l,
+    props: {
+      icon: "outdent",
+      svgIcon: j,
+      ...a
+    },
+    messages: {
+      title: e.outdent
+    },
+    commandName: "Outdent"
+  }, n.orderedList = {
+    listType: l.orderedList,
+    props: {
+      icon: "list-ordered",
+      svgIcon: q,
+      ...a
+    },
+    messages: {
+      title: e.orderedList
+    },
+    commandName: "OrderedList",
+    types: { ...l }
+  }, n.bulletList = {
+    listType: l.bulletList,
+    props: {
+      icon: "list-unordered",
+      svgIcon: Q,
+      ...a
+    },
+    messages: {
+      title: e.bulletList
+    },
+    commandName: "UnorderedList",
+    types: { ...l }
+  };
+})(s || (s = {}));
+export {
+  s as EditorToolsSettings,
+  l as listsTypes
+};

package/dialogs/FindReplace.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),k=require("@progress/kendo-react-buttons"),B=require("@progress/kendo-react-dialogs"),E=require("@progress/kendo-react-layout"),N=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),j=require("../config/toolsSettings.js"),P=require("../tools/utils.js"),m=require("@progress/kendo-editor-common"),F=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-inputs"),x=require("@progress/kendo-react-form"),M=require("@progress/kendo-svg-icons");function K(u){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(s,e,a.get?a:{enumerable:!0,get:()=>u[e]})}}return s.default=u,Object.freeze(s)}const t=K(A),U=13,_=27,V=j.EditorToolsSettings.findAndReplace;let w=class extends t.Component{constructor(s){super(s),this.onTabSelect=e=>{this.setState({selectedTab:e.selected})},this.onClose=()=>{const e=this.props.view,a=e.state,c=a.tr.setSelection(m.TextSelection.create(a.doc,a.selection.from,a.selection.to));e.updateState(a.apply(c)),e.focus(),this.props.onClose.call(void 0)},this.matchesMessage=e=>{const a=this.state.matches,c=this.state.nextMatch;let o=0,i=0;if(a&&c){const n=a.findIndex(r=>r.eq(c));o=n===-1?a.length:n+1,i=a.length}return P.formatString(e,o,i)},this.onFindNext=()=>{this.onFind()},this.onFindPrev=()=>{this.onFind(!0)},this.onFind=(e=!1)=>{const a=this.props.view,{searchText:c,matchCase:o,matchCyclic:i,matchWord:n,useRegExp:r}=this.state,h={text:c,matchWord:n,matchCase:o,useRegExp:r,backward:e,matchCyclic:i},d=m.find(a.state,h);if(d){const g=a.state.tr.setSelection(d);g.scrollIntoView(),a.updateState(a.state.apply(g)),this.setState({nextMatch:d})}},this.onReplace=()=>{const e=this.props.view,a=e.state.selection,{replaceText:c}=this.state;if(!a.empty){const o=a.from,i=o+c.length,n=m.replace(a,c,e.state.tr);n.setSelection(m.TextSelection.create(n.doc,o,i)),n.scrollIntoView(),e.dispatch(n),this.setNextState({})}},this.onReplaceAll=()=>{const e=this.props.view,{searchText:a,replaceText:c,matchCase:o,matchWord:i,useRegExp:n}=this.state,r={text:a,matchWord:i,matchCase:o,useRegExp:n},h=m.replaceAll(e.state,c,r);h&&e.dispatch(h),this.setNextState({})},this.onKeyDown=e=>{e.keyCode===U?this.onFindNext():e.keyCode===_&&this.onClose()},this.onMatchCaseChecked=e=>this.setNextState({matchCase:e.value}),this.onMatchWordChecked=e=>this.setNextState({matchWord:e.value}),this.onMatchCyclicChecked=e=>this.setNextState({matchCyclic:e.value}),this.onUseRegExpChecked=e=>this.setNextState({useRegExp:e.value}),this.onSearchChange=e=>this.setNextState({searchText:e.target.value}),this.onReplaceChange=e=>this.setNextState({replaceText:e.target.value}),this.setNextState=e=>{const a={...this.state,...e,matches:void 0,nextMatch:void 0},c=this.props.view;if(a.searchText){const{searchText:o,matchWord:i,matchCase:n,useRegExp:r,matchCyclic:h}=a,d={text:o,matchWord:i,matchCase:n,useRegExp:r},g=c.state.selection,p=m.findAll(c.state.doc,d);let C=!this.state.searchText&&p[0]||p.find(S=>S.from>=g.from)||h&&p[0]||void 0;this.setState({...a,matches:p,nextMatch:C})}else this.setState(a)},this.state={selectedTab:0,searchText:m.selectedLineTextOnly(s.view.state),replaceText:"",matchCase:!1,matchWord:!1,matchCyclic:!1,useRegExp:!1}}get settings(){return this.props.settings||V}componentDidUpdate(s,e){const a=this.props.view,{matches:c=[],nextMatch:o}=this.state;if(e.nextMatch!==o){const i=a.state,n=i.tr,r=[];c.forEach(h=>{r.push({from:h.from,to:h.to,attrs:{class:o&&h.eq(o)?"k-text-selected":"k-text-highlighted"}})}),n.setMeta(m.textHighlightKey,r),n.setSelection(o||m.TextSelection.create(i.doc,i.selection.from)),a.dispatch(n)}}render(){const s=N.provideLocalizationService(this),{findReplaceDialogTitle:e,findReplaceTabFind:a,findReplaceTabReplace:c,findReplaceFindWhat:o,findReplaceReplaceWith:i,findReplaceReplace:n,findReplaceReplaceAll:r,findReplaceMatchCase:h,findReplaceMatchWord:d,findReplaceMatchCyclic:g,findReplaceUseRegExp:p,findReplacePrevMatch:C,findReplaceNextMatch:S,findReplaceMatches:R}=this.settings.messages,{matchCase:W,matchWord:L,matchCyclic:q,useRegExp:I,searchText:D,replaceText:O,nextMatch:b}=this.state,v=t.createElement("div",{className:"k-search-options"},t.createElement("span",null,t.createElement(f.Checkbox,{id:"match-case",checked:W,onChange:this.onMatchCaseChecked}),t.createElement("label",{htmlFor:"match-case",className:"k-checkbox-label"},s.toLanguageString(h,l.messages[h]))),t.createElement("span",null,t.createElement(f.Checkbox,{id:"match-whole",checked:L,onChange:this.onMatchWordChecked}),t.createElement("label",{htmlFor:"match-whole",className:"k-checkbox-label"},s.toLanguageString(d,l.messages[d]))),t.createElement("span",null,t.createElement(f.Checkbox,{id:"match-cyclic",checked:q,onChange:this.onMatchCyclicChecked}),t.createElement("label",{htmlFor:"match-cyclic",className:"k-checkbox-label"},s.toLanguageString(g,l.messages[g]))),t.createElement("span",null,t.createElement(f.Checkbox,{id:"regular-expression",checked:I,onChange:this.onUseRegExpChecked}),t.createElement("label",{htmlFor:"regular-expression",className:"k-checkbox-label"},s.toLanguageString(p,l.messages[p])))),T=t.createElement("div",{className:"k-matches-container"},t.createElement(k.Button,{fillMode:"flat",themeColor:"primary",onClick:this.onFindPrev},t.createElement(F.IconWrap,{name:"chevron-left",icon:M.chevronLeftIcon}),s.toLanguageString(C,l.messages[C])),t.createElement("span",null,this.matchesMessage(s.toLanguageString(R,l.messages[R]))),t.createElement(k.Button,{fillMode:"flat",themeColor:"primary",onClick:this.onFindNext},s.toLanguageString(S,l.messages[S]),t.createElement(F.IconWrap,{name:"chevron-right",icon:M.chevronRightIcon}))),y=t.createElement(x.Form,{render:()=>t.createElement(x.FormElement,{horizontal:!0},t.createElement(x.FieldWrapper,null,t.createElement("label",{htmlFor:"findWhat",className:"k-form-label"},s.toLanguageString(o,l.messages[o])),t.createElement("div",{className:"k-form-field-wrap"},t.createElement(f.Input,{id:"findWhat",type:"text",value:D,onChange:this.onSearchChange,onFocus:this.onSearchChange,onKeyDown:this.onKeyDown,autoFocus:!0}))))}),z=t.createElement(x.Form,{render:()=>t.createElement(x.FormElement,{horizontal:!0},t.createElement(x.FieldWrapper,null,t.createElement("label",{htmlFor:"replaceWith",className:"k-form-label"},s.toLanguageString(i,l.messages[i])),t.createElement("div",{className:"k-form-field-wrap"},t.createElement(f.Input,{id:"replaceWith",type:"text",value:O,onChange:this.onReplaceChange}))))});return t.createElement(B.Window,{title:s.toLanguageString(e,l.messages[e]),onClose:this.onClose,style:{width:"auto",height:"auto",userSelect:"none"},resizable:!1,minimizeButton:()=>null,maximizeButton:()=>null},t.createElement(E.TabStrip,{selected:this.state.selectedTab,className:"k-editor-find-replace",onSelect:this.onTabSelect,animation:!1},t.createElement(E.TabStripTab,{title:s.toLanguageString(a,l.messages[a])},y,v,T),t.createElement(E.TabStripTab,{title:s.toLanguageString(c,l.messages[c])},y,z,t.createElement("div",{className:"k-actions k-hstack k-justify-content-end"},t.createElement(k.Button,{disabled:!b,onClick:this.onReplace},s.toLanguageString(n,l.messages[n])),t.createElement(k.Button,{disabled:!b,onClick:this.onReplaceAll},s.toLanguageString(r,l.messages[r]))),v,T)))}};N.registerForLocalization(w);exports.FindAndReplaceDialog=w;