@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/html-editor/commands/CommandButton.js

@@ -1,39 +1,58 @@
 import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 export function notSet(text) {
-    return () => {
-        alert(`Command ${text} not set`);
-    };
+  return () => {
+    alert(`Command ${text} not set`);
+  };
 }
 function insert(callback, command) {
-    return async (s, e) => {
-        let r = callback(s, e);
-        if (typeof r !== "string") {
-            if (r?.then) {
-                r = await r;
-            }
-        }
-        if (r) {
-            if (command) {
-                command.execute(s, false, r);
-            }
-            else {
-                s.executeCommand("insertHTML", false, r);
-            }
-        }
-    };
-}
-export default function CommandButton({ icon, label, eventInsertHtml, insertCommand, title, disabled }) {
-    disabled ??= Bind.oneWay((x) => x.version
-        ? !insertCommand.canExecute(x)
-        : false);
-    if (label) {
-        return XNode.create("button", { class: "command", "data-layout": "toolbar-button", disabled: disabled, eventClick: Bind.event(insert(eventInsertHtml, insertCommand)), title: title },
-            XNode.create("label", { class: "label" },
-                XNode.create("i", { class: icon }),
-                XNode.create("span", { text: label })));
+  return async (s, e) => {
+    let r = callback(s, e);
+    if (typeof r !== "string") {
+      if (r?.then) {
+        r = await r;
+      }
+    }
+    if (r) {
+      if (command) {
+        command.execute(s, false, r);
+      } else {
+        s.executeCommand("insertHTML", false, r);
+      }
     }
-    return XNode.create("button", { "data-layout": "toolbar-button", title: title, class: "command", disabled: disabled, eventClick: Bind.event(insert(eventInsertHtml, insertCommand)) },
-        XNode.create("i", { class: icon }));
+  };
 }
-//# sourceMappingURL=CommandButton.js.map
+export default function CommandButton({
+  icon,
+  label,
+  eventInsertHtml,
+  insertCommand,
+  title,
+  disabled
+}) {
+  disabled ??= Bind.oneWay(x => x.version ? !insertCommand.canExecute(x) : false);
+  if (label) {
+    return XNode.create("button", {
+      class: "command",
+      "data-layout": "toolbar-button",
+      disabled: disabled,
+      eventClick: Bind.event(insert(eventInsertHtml, insertCommand)),
+      title: title
+    }, XNode.create("label", {
+      class: "label"
+    }, XNode.create("i", {
+      class: icon
+    }), XNode.create("span", {
+      text: label
+    })));
+  }
+  return XNode.create("button", {
+    "data-layout": "toolbar-button",
+    title: title,
+    class: "command",
+    disabled: disabled,
+    eventClick: Bind.event(insert(eventInsertHtml, insertCommand))
+  }, XNode.create("i", {
+    class: icon
+  }));
+}

package/dist-esm/html-editor/commands/Headings.js

@@ -2,12 +2,28 @@ import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import PopupButton, { MenuItem } from "../../basic/PopupButton.js";
 export default function Headings() {
-    return XNode.create(PopupButton, { "data-layout": "toolbar-button", class: "command", icon: "ri-heading", title: "Apply Heading" },
-        XNode.create(MenuItem, { icon: "ri-h-1", eventClick: Bind.event((e) => e.executeCommand("formatBlock", false, "H1")) }),
-        XNode.create(MenuItem, { icon: "ri-h-2", eventClick: Bind.event((e) => e.executeCommand("formatBlock", false, "H2")) }),
-        XNode.create(MenuItem, { icon: "ri-h-3", eventClick: Bind.event((e) => e.executeCommand("formatBlock", false, "H3")) }),
-        XNode.create(MenuItem, { icon: "ri-h-4", eventClick: Bind.event((e) => e.executeCommand("formatBlock", false, "H4")) }),
-        XNode.create(MenuItem, { icon: "ri-h-5", eventClick: Bind.event((e) => e.executeCommand("formatBlock", false, "H5")) }),
-        XNode.create(MenuItem, { icon: "ri-h-6", eventClick: Bind.event((e) => e.executeCommand("formatBlock", false, "H6")) }));
-}
-//# sourceMappingURL=Headings.js.map
+  return XNode.create(PopupButton, {
+    "data-layout": "toolbar-button",
+    class: "command",
+    icon: "ri-heading",
+    title: "Apply Heading"
+  }, XNode.create(MenuItem, {
+    icon: "ri-h-1",
+    eventClick: Bind.event(e => e.executeCommand("formatBlock", false, "H1"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-h-2",
+    eventClick: Bind.event(e => e.executeCommand("formatBlock", false, "H2"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-h-3",
+    eventClick: Bind.event(e => e.executeCommand("formatBlock", false, "H3"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-h-4",
+    eventClick: Bind.event(e => e.executeCommand("formatBlock", false, "H4"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-h-5",
+    eventClick: Bind.event(e => e.executeCommand("formatBlock", false, "H5"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-h-6",
+    eventClick: Bind.event(e => e.executeCommand("formatBlock", false, "H6"))
+  }));
+}

package/dist-esm/html-editor/commands/HorizontalRule.js

@@ -1,12 +1,11 @@
 import Command from "./Command.js";
 export default function HorizontalRule(cmd) {
-    return Command({
-        icon: "ri-separator",
-        title: "Insert Horizontal Line",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("insertHorizontalRule");
-        }
-    });
-}
-//# sourceMappingURL=HorizontalRule.js.map
+  return Command({
+    icon: "ri-separator",
+    title: "Insert Horizontal Line",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("insertHorizontalRule");
+    }
+  });
+}

package/dist-esm/html-editor/commands/HtmlCommands.js

@@ -1,68 +1,163 @@
 function query(name) {
-    return {
-        canExecute(e) {
-            return e.queryCommandState(name);
-        },
-        execute(e, showUI, value) {
-            return e.executeCommand(name, showUI, value);
-        }
-    };
+  return {
+    canExecute(e) {
+      return e.queryCommandState(name);
+    },
+    execute(e, showUI, value) {
+      return e.executeCommand(name, showUI, value);
+    }
+  };
 }
 export default class HtmlCommands {
-    static { this.backColor = query("backColor"); }
-    static { this.bold = query("bold"); }
-    static { this.contentReadOnly = query("contentReadOnly"); }
-    static { this.copy = query("copy"); }
-    static { this.createLink = query("createLink"); }
-    static { this.cut = query("cut"); }
-    static { this.decreaseFontSize = query("decreaseFontSize"); }
-    static { this.defaultParagraphSeparator = query("defaultParagraphSeparator"); }
-    static { this.enableAbsolutePositionEditor = query("enableAbsolutePositionEditor"); }
-    static { this.enableInlineTableEditing = query("enableInlineTableEditing"); }
-    static { this.enableObjectResizing = query("enableObjectResizing"); }
-    static { this.fontName = query("fontName"); }
-    static { this.fontSize = query("fontSize"); }
-    static { this.foreColor = query("foreColor"); }
-    static { this.formatBlock = query("formatBlock"); }
-    static { this.forwardDelete = query("forwardDelete"); }
-    static { this.heading = query("heading"); }
-    static { this.hiliteColor = query("hiliteColor"); }
-    static { this.increaseFontSize = query("increaseFontSize"); }
-    static { this.indent = query("indent"); }
-    static { this.insertBrOnReturn = query("insertBrOnReturn"); }
-    static { this.insertHorizontalRule = query("insertHorizontalRule"); }
-    static { this.insertHTML = query("insertHTML"); }
-    static { this.insertImage = query("insertImage"); }
-    static { this.insertOrderedList = query("insertOrderedList"); }
-    static { this.insertUnorderedList = query("insertUnorderedList"); }
-    static { this.insertParagraph = query("insertParagraph"); }
-    static { this.insertText = query("insertText"); }
-    static { this.italic = query("italic"); }
-    static { this.justifyCenter = query("justifyCenter"); }
-    static { this.justifyFull = query("justifyFull"); }
-    static { this.justifyLeft = query("justifyLeft"); }
-    static { this.justifyRight = query("justifyRight"); }
-    static { this.outdent = query("outdent"); }
-    static { this.paste = query("paste"); }
-    static { this.redo = query("redo"); }
-    static { this.removeFormat = query("removeFormat"); }
-    static { this.selectAll = query("selectAll"); }
-    static { this.strikeThrough = query("strikeThrough"); }
-    static { this.subscript = query("subscript"); }
-    static { this.superscript = query("superscript"); }
-    static { this.underline = query("underline"); }
-    static { this.undo = query("undo"); }
-    static { this.unlink = query("unlink"); }
-    static { this.useCSS = query("useCSS"); }
-    static { this.styleWithCSS = query("styleWithCSS"); }
-    static { this.AutoUrlDetect = query("AutoUrlDetect"); }
-    static { this.enabled = {
-        canExecute(e) {
-            return true;
-        },
-        execute() {
-            throw new Error("not supported");
-        }
-    }; }
-}
-//# sourceMappingURL=HtmlCommands.js.map
+  static {
+    this.backColor = query("backColor");
+  }
+  static {
+    this.bold = query("bold");
+  }
+  static {
+    this.contentReadOnly = query("contentReadOnly");
+  }
+  static {
+    this.copy = query("copy");
+  }
+  static {
+    this.createLink = query("createLink");
+  }
+  static {
+    this.cut = query("cut");
+  }
+  static {
+    this.decreaseFontSize = query("decreaseFontSize");
+  }
+  static {
+    this.defaultParagraphSeparator = query("defaultParagraphSeparator");
+  }
+  static {
+    this.enableAbsolutePositionEditor = query("enableAbsolutePositionEditor");
+  }
+  static {
+    this.enableInlineTableEditing = query("enableInlineTableEditing");
+  }
+  static {
+    this.enableObjectResizing = query("enableObjectResizing");
+  }
+  static {
+    this.fontName = query("fontName");
+  }
+  static {
+    this.fontSize = query("fontSize");
+  }
+  static {
+    this.foreColor = query("foreColor");
+  }
+  static {
+    this.formatBlock = query("formatBlock");
+  }
+  static {
+    this.forwardDelete = query("forwardDelete");
+  }
+  static {
+    this.heading = query("heading");
+  }
+  static {
+    this.hiliteColor = query("hiliteColor");
+  }
+  static {
+    this.increaseFontSize = query("increaseFontSize");
+  }
+  static {
+    this.indent = query("indent");
+  }
+  static {
+    this.insertBrOnReturn = query("insertBrOnReturn");
+  }
+  static {
+    this.insertHorizontalRule = query("insertHorizontalRule");
+  }
+  static {
+    this.insertHTML = query("insertHTML");
+  }
+  static {
+    this.insertImage = query("insertImage");
+  }
+  static {
+    this.insertOrderedList = query("insertOrderedList");
+  }
+  static {
+    this.insertUnorderedList = query("insertUnorderedList");
+  }
+  static {
+    this.insertParagraph = query("insertParagraph");
+  }
+  static {
+    this.insertText = query("insertText");
+  }
+  static {
+    this.italic = query("italic");
+  }
+  static {
+    this.justifyCenter = query("justifyCenter");
+  }
+  static {
+    this.justifyFull = query("justifyFull");
+  }
+  static {
+    this.justifyLeft = query("justifyLeft");
+  }
+  static {
+    this.justifyRight = query("justifyRight");
+  }
+  static {
+    this.outdent = query("outdent");
+  }
+  static {
+    this.paste = query("paste");
+  }
+  static {
+    this.redo = query("redo");
+  }
+  static {
+    this.removeFormat = query("removeFormat");
+  }
+  static {
+    this.selectAll = query("selectAll");
+  }
+  static {
+    this.strikeThrough = query("strikeThrough");
+  }
+  static {
+    this.subscript = query("subscript");
+  }
+  static {
+    this.superscript = query("superscript");
+  }
+  static {
+    this.underline = query("underline");
+  }
+  static {
+    this.undo = query("undo");
+  }
+  static {
+    this.unlink = query("unlink");
+  }
+  static {
+    this.useCSS = query("useCSS");
+  }
+  static {
+    this.styleWithCSS = query("styleWithCSS");
+  }
+  static {
+    this.AutoUrlDetect = query("AutoUrlDetect");
+  }
+  static {
+    this.enabled = {
+      canExecute(e) {
+        return true;
+      },
+      execute() {
+        throw new Error("not supported");
+      }
+    };
+  }
+}

package/dist-esm/html-editor/commands/IndentLess.js

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function IndentLess(cmd) {
-    return Command({
-        icon: "ri-indent-decrease",
-        queryState: "outdent",
-        title: "Indent Less",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("outdent");
-        }
-    });
-}
-//# sourceMappingURL=IndentLess.js.map
+  return Command({
+    icon: "ri-indent-decrease",
+    queryState: "outdent",
+    title: "Indent Less",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("outdent");
+    }
+  });
+}

package/dist-esm/html-editor/commands/IndentMore.js

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function IndentMore(cmd) {
-    return Command({
-        icon: "ri-indent-increase",
-        queryState: "indent",
-        title: "Indent More",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("indent");
-        }
-    });
-}
-//# sourceMappingURL=IndentMore.js.map
+  return Command({
+    icon: "ri-indent-increase",
+    queryState: "indent",
+    title: "Indent More",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("indent");
+    }
+  });
+}

package/dist-esm/html-editor/commands/Italic.js

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function Italic(cmd) {
-    return Command({
-        icon: "ri-italic",
-        queryState: "italic",
-        title: "Italic",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("italic");
-        }
-    });
-}
-//# sourceMappingURL=Italic.js.map
+  return Command({
+    icon: "ri-italic",
+    queryState: "italic",
+    title: "Italic",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("italic");
+    }
+  });
+}

package/dist-esm/html-editor/commands/NumberedList.js

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function NumberedList(cmd) {
-    return Command({
-        icon: "ri-list-ordered",
-        queryState: "insertOrderedList",
-        title: "Create Numbered List",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("insertOrderedList");
-        }
-    });
-}
-//# sourceMappingURL=NumberedList.js.map
+  return Command({
+    icon: "ri-list-ordered",
+    queryState: "insertOrderedList",
+    title: "Create Numbered List",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("insertOrderedList");
+    }
+  });
+}

package/dist-esm/html-editor/commands/Quote.js

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function IndentMore(cmd) {
-    return Command({
-        icon: "ri-double-quotes",
-        queryState: "formatBlock",
-        title: "Insert Quote",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("formatBlock");
-        }
-    });
-}
-//# sourceMappingURL=Quote.js.map
+  return Command({
+    icon: "ri-double-quotes",
+    queryState: "formatBlock",
+    title: "Insert Quote",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("formatBlock");
+    }
+  });
+}

package/dist-esm/html-editor/commands/RemoveFormat.js

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function RemoveFormat(cmd) {
-    return Command({
-        icon: "ri-format-clear",
-        queryState: "removeFormat",
-        title: "Clear Formatting",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("removeFormat");
-        }
-    });
-}
-//# sourceMappingURL=RemoveFormat.js.map
+  return Command({
+    icon: "ri-format-clear",
+    queryState: "removeFormat",
+    title: "Clear Formatting",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("removeFormat");
+    }
+  });
+}

package/dist-esm/html-editor/commands/Separator.global.css

@@ -0,0 +1,2 @@
+[data-toolbar-item=separator]{background-color:#a9a9a9;display:inline-block;height:1rem;margin-left:4px;margin-right:4px;margin-top:4px;padding:0;width:2px}
+/*# sourceMappingURL=Separator.global.css.map */

package/dist-esm/html-editor/commands/Separator.global.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/html-editor/commands/Separator.global.css"],"names":[],"mappings":"AAAA,8BACI,wBAAyB,CAGzB,oBAAqB,CAErB,WAAY,CAJZ,eAAgB,CAChB,gBAAiB,CAEjB,cAAe,CAGf,SAAU,CADV,SAEJ","file":"Separator.global.css"}

package/dist-esm/html-editor/commands/Separator.js

@@ -1,6 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./Separator.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./Separator.global.css"));
 export default function Separator() {
-    return XNode.create("div", { "data-toolbar-item": "separator" });
-}
-//# sourceMappingURL=Separator.js.map
+  return XNode.create("div", {
+    "data-toolbar-item": "separator"
+  });
+}

package/dist-esm/html-editor/commands/Source.js

@@ -5,32 +5,36 @@ import XNode from "@web-atoms/core/dist/core/XNode.js";
 import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService.js";
 import CommandButton from "./CommandButton.js";
 import HtmlCommands from "./HtmlCommands.js";
-import "./Source.local.css";
+ESMPack.installStyleSheet(import.meta.resolve("./Source.local.css"));
 const css = "web-controls-html-editor-source";
 async function showDialog(s, e) {
-    class SourceDialog extends PopupWindow {
-        create() {
-            this.source = s.htmlContent;
-            this.render(XNode.create("div", { class: css },
-                XNode.create("textarea", { value: Bind.twoWaysImmediate(() => this.source) }),
-                XNode.create("div", { class: "command-bar" },
-                    XNode.create("button", { eventClick: Bind.event(() => this.close(this.source)), text: "Save" }))));
-        }
+  class SourceDialog extends PopupWindow {
+    create() {
+      this.source = s.htmlContent;
+      this.render(XNode.create("div", {
+        class: css
+      }, XNode.create("textarea", {
+        value: Bind.twoWaysImmediate(() => this.source)
+      }), XNode.create("div", {
+        class: "command-bar"
+      }, XNode.create("button", {
+        eventClick: Bind.event(() => this.close(this.source)),
+        text: "Save"
+      }))));
     }
-    __decorate([
-        BindableProperty,
-        __metadata("design:type", String)
-    ], SourceDialog.prototype, "source", void 0);
-    const result = await PopupService.showWindow(s.element, SourceDialog);
-    s.htmlContent = result;
-    return null;
+  }
+  __decorate([BindableProperty, __metadata("design:type", String)], SourceDialog.prototype, "source", void 0);
+  const result = await PopupService.showWindow(s.element, SourceDialog);
+  s.htmlContent = result;
+  return null;
 }
-export default function Source({ insertCommand = HtmlCommands.enabled }) {
-    return CommandButton({
-        icon: "ri-edit-box-fill",
-        insertCommand,
-        eventInsertHtml: showDialog,
-        title: "Edit Source Code"
-    });
-}
-//# sourceMappingURL=Source.js.map
+export default function Source({
+  insertCommand = HtmlCommands.enabled
+}) {
+  return CommandButton({
+    icon: "ri-edit-box-fill",
+    insertCommand,
+    eventInsertHtml: showDialog,
+    title: "Edit Source Code"
+  });
+}

package/dist-esm/html-editor/commands/Source.local.css

@@ -0,0 +1,2 @@
+
+/*# sourceMappingURL=Source.local.css.map */

package/dist-esm/html-editor/commands/Source.local.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Source.local.css"}

package/dist-esm/html-editor/commands/StrikeThrough.js

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function StrikeThrough(cmd) {
-    return Command({
-        icon: "ri-strikethrough",
-        queryState: "strikeThrough",
-        title: "Strike Through",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("strikeThrough");
-        }
-    });
-}
-//# sourceMappingURL=StrikeThrough.js.map
+  return Command({
+    icon: "ri-strikethrough",
+    queryState: "strikeThrough",
+    title: "Strike Through",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("strikeThrough");
+    }
+  });
+}