@web-atoms/web-controls 2.1.14 → 2.1.20

package/src/basic/FormField.tsx

@@ -10,6 +10,14 @@ export interface IFormField {
 }
 
 const css = CSS(StyleRule()
+    .child(StyleRule(".error")
+        .padding(5)
+        .backgroundColor(Colors.red)
+        .color(Colors.white)
+        .and(StyleRule(":empty")
+            .display("none")
+        )
+    )
     .child(StyleRule(".label")
         .child(StyleRule(".true")
             .visibility("visible")
@@ -24,7 +32,8 @@ const css = CSS(StyleRule()
 export default function FormField(
     {
         label,
-        required
+        required,
+        error
     }: IFormField,
     node: XNode) {
     return <div class={css}>
@@ -33,5 +42,6 @@ export default function FormField(
             <span class="required" styleClass={required} text="*" />
         </div>
         { node }
+        <div class="error" text={error}/>
     </div>;
 }

package/src/form/AtomField.tsx

@@ -10,7 +10,7 @@ export { default as HP } from "./HelpPopup";
 
 let inputID = 0;
 
-class AtomFieldControl extends AtomControl {
+export default class AtomField extends AtomControl {
 
     @BindableProperty
     public icon: string;
@@ -39,9 +39,6 @@ class AtomFieldControl extends AtomControl {
     @BindableProperty
     public fieldClass: string;
 
-    @BindableProperty
-    public content: any;
-
     public get hasError(): boolean {
         return this.error ? true : false;
     }
@@ -56,44 +53,14 @@ class AtomFieldControl extends AtomControl {
     @BindableProperty
     protected htmlFor: any;
 
-    public onPropertyChanged(name: keyof AtomFieldControl): void {
+    private fieldCreated;
+
+    public onPropertyChanged(name: keyof AtomField): void {
         switch (name) {
-            case "error":
-                AtomBinder.refreshValue(this, "hasError");
-                break;
             case "helpLink":
             case "helpText":
                 AtomBinder.refreshValue(this, "hasHelp");
                 break;
-            case "content":
-                if (!this.contentPresenter) {
-                    setTimeout(() => this.onPropertyChanged(name), 100);
-                    return;
-                }
-                this.removeAllChildren(this.contentPresenter);
-                const content = this.content;
-                if (!content) {
-                    return;
-                }
-                for (const iterator of content) {
-                    const e = iterator?.element ?? iterator as HTMLElement;
-                    if (!e) {
-                        continue;
-                    }
-                    if (typeof e === "string") {
-                        this.contentPresenter.appendChild(document.createTextNode(e));
-                        return;
-                    }
-                    this.contentPresenter.appendChild(e);
-                    const input = e.tagName === "INPUT" ? e : e.getElementsByTagName("input")[0];
-                    if (input) {
-                        if (!input.id) {
-                            input.id = `__ID__formElementInput${inputID++}`;
-                        }
-                        this.htmlFor = input.id;
-                    }
-                }
-                break;
         }
     }
 
@@ -123,8 +90,16 @@ class AtomFieldControl extends AtomControl {
         this.required = false;
         this.visible = true;
         this.fieldClass = "";
-        this.contentPresenter = null;
-        this.render(<div
+        this.fieldCreated = false;
+    }
+
+    protected render(node: XNode, e?: any, creator?: any): void {
+        if (this.fieldCreated) {
+            return super.render(node, e, creator);
+        }
+        this.fieldCreated = true;
+        super.render(<div
+            { ... node.attributes}
 			class={Bind.oneWay(() => ({
 				"form-field": 1,
 				[this.fieldClass]: this.fieldClass,
@@ -138,40 +113,15 @@ class AtomFieldControl extends AtomControl {
 			<span
 				class="required"
 				styleVisibility={Bind.oneTime(() => this.required ? "visible" : "hidden")}>*</span>
-			<div presenter={Bind.presenter("contentPresenter")}
-				class="presenter"></div>
+			<div
+				class="presenter">
+                    {... node.children as any[]}
+                </div>
 			<span
 				class="error"
 				styleDisplay={Bind.oneWay(() => this.error ? "" : "none")}
 				text={Bind.oneWay(() => this.error)}></span>
 		</div>);
-
-        if (this.content) {
-            this.onPropertyChanged("content");
-        }
     }
 
 }
-
-export interface IFieldAttributes {
-    label?;
-    error?;
-    helpText?;
-    helpLink?;
-    helpIcon?;
-    required?;
-    visible?;
-    fieldClass?;
-    baseClass?: IClassOf<AtomFieldControl>;
-    [key: string]: any;
-}
-
-export default function AtomField( attributes: IFieldAttributes, ... children: XNode[]) {
-    const ControlClass = attributes.baseClass ?? AtomFieldControl;
-    attributes.visible ??= true;
-    attributes.fieldClass ??= null;
-    return <ControlClass
-        { ... attributes}
-        content={children}
-        />;
-}

package/src/html-editor/HtmlEditor.tsx

@@ -6,7 +6,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
-import AddImage from "./commands/AddImage";
+import AddImage, { showImageDialog } from "./commands/AddImage";
 import AddLink from "./commands/AddLink";
 import Align from "./commands/Align";
 import Bold from "./commands/Bold";
@@ -67,7 +67,7 @@ export function Toolbar(a: any, ... nodes: XNode[]) {
     </div>;
 }
 
-export class HtmlEditorControl extends AtomControl {
+export default class HtmlEditor extends AtomControl {
 
     @BindableProperty
     public content: string;
@@ -80,10 +80,15 @@ export class HtmlEditorControl extends AtomControl {
 
     public editor: HTMLDivElement;
 
+    public eventDocumentCreated: (e: CustomEvent<Document>) => void;
+
+    public eventDocumentUpdated: (e: CustomEvent<Document>) => void;
+
     public get htmlContent(): string {
         try {
             return this.editor.innerHTML;
         } catch (ex) {
+            // tslint:disable-next-line: no-console
             console.warn(ex);
         }
     }
@@ -97,6 +102,12 @@ export class HtmlEditorControl extends AtomControl {
 
     private editorDocument: Document;
 
+    private editorCreated: boolean;
+
+    public insertImage(s: HtmlEditor, e: Event) {
+        return showImageDialog(s, e);
+    }
+
     public executeCommand(cmd, showUI?: boolean, value?: string): boolean {
         const r = this.editorDocument.execCommand(cmd, showUI, value);
         setTimeout(() => this.version++, 1);
@@ -172,6 +183,9 @@ export class HtmlEditorControl extends AtomControl {
         const updateVersion = () => setTimeout(() => {
             this.version++;
             AtomBinder.refreshValue(this, "htmlContent");
+            this.element.dispatchEvent(new CustomEvent("documentUpdated", {
+                detail: doc
+            }));
         }, 1);
         this.editor.addEventListener("click", updateVersion);
         this.editor.addEventListener("keydown", updateVersion);
@@ -180,6 +194,12 @@ export class HtmlEditorControl extends AtomControl {
         this.editorWindow = frame.contentWindow;
         this.editorDocument = doc;
 
+        updateVersion();
+
+        this.element.dispatchEvent(new CustomEvent("documentCreated", {
+            detail: doc
+        }));
+
         this.registerDisposable({
             dispose: () => {
                 this.editor.removeEventListener("click", updateVersion);
@@ -189,23 +209,15 @@ export class HtmlEditorControl extends AtomControl {
             }
         });
     }
-}
-
-export interface IHtmlEditor {
-    insertImage?: (s: HtmlEditorControl, e: Event) => Promise<string> | string;
-}
 
-export default function HtmlEditor(
-    {
-        insertImage,
-        ... attributes
-    }: any,
-    ... nodes: XNode[]) {
-
-    if (nodes.length === 0) {
-        return <HtmlEditorControl { ... attributes}>
-            <Toolbar>
-                <Bold/>
+    protected render(node: XNode, e?: any, creator?: any): void {
+        if (this.editorCreated) {
+            return super.render(node, e, creator);
+        }
+        this.editorCreated = true;
+        if (!node.children || node.children.length === 0 ) {
+            node.children[0] = <Toolbar>
+            <Bold/>
                 <Italic/>
                 <Underline/>
                 <StrikeThrough/>
@@ -223,20 +235,18 @@ export default function HtmlEditor(
                 <IndentLess/>
                 <IndentMore/>
                 <Separator/>
-                <AddImage eventInsertHtml={insertImage}/>
+                <AddImage/>
                 <Separator/>
                 <AddLink/>
                 <Unlink/>
                 <RemoveFormat/>
                 <Separator/>
                 <Source/>
-            </Toolbar>
+            </Toolbar>;
+        }
+        super.render(<div {... node.attributes}>
+            { ... node.children as any[]}
             <iframe class="editor-frame"/>
-        </HtmlEditorControl>;
+        </div>);
     }
-
-    return <HtmlEditorControl { ... attributes}>
-        { ... nodes}
-        <iframe class="editor-frame"/>
-    </HtmlEditorControl>;
 }

package/src/html-editor/commands/AddImage.tsx

@@ -3,8 +3,9 @@ import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
 import FormField from "../../basic/FormField";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
 
 class ImageDialog extends PopupWindow {
 
@@ -40,17 +41,18 @@ class ImageDialog extends PopupWindow {
     }
 }
 
-function showImageDialog(s: HtmlEditorControl, e: Event) {
-    return PopupService.showWindow(e.currentTarget as HTMLElement, ImageDialog, { title: "Add Image" });
+export function showImageDialog(s: HtmlEditor, e: Event): Promise<string> | string {
+    return PopupService.showWindow<string>(e.currentTarget as HTMLElement, ImageDialog, { title: "Add Image" });
 }
 
 export default function AddImage({
-    eventInsertHtml = showImageDialog,
-    insertCommand = "insertHTML"
+    eventInsertHtml = (s: HtmlEditor, e: Event) => s.insertImage(s, e),
+    insertCommand = HtmlCommands.insertImage
 }) {
     return CommandButton({
         icon: "ri-image-add-fill",
         insertCommand,
+        disabled: false,
         title: "Insert Image",
         eventInsertHtml
     });

package/src/html-editor/commands/AddLink.tsx

@@ -7,8 +7,9 @@ import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggl
 import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import FormField from "../../basic/FormField";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
 
 const linkTypes = [
     {
@@ -73,16 +74,17 @@ class LinkDialog extends PopupWindow {
     }
 }
 
-function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
+function showDialog(s: HtmlEditor, e: Event): Promise<string> {
     return PopupService.showWindow(s.element, LinkDialog);
 }
 
 export default function AddLink({
-    insertCommand = "createLink"
+    insertCommand = HtmlCommands.createLink
 }) {
     return CommandButton({
         icon: "ri-link-m",
         insertCommand,
+        disabled: false,
         eventInsertHtml: showDialog,
         title: "Create Hyper Link"
     });

package/src/html-editor/commands/Align.tsx

@@ -1,7 +1,7 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupButton, { MenuItem } from "../../basic/PopupButton";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 
 export default function Align() {
     return <PopupButton
@@ -11,22 +11,22 @@ export default function Align() {
         <MenuItem
             icon="ri-align-left"
             title="Align Left"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyLeft"))}/>
         <MenuItem
             icon="ri-align-center"
             title="Align Center"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyCenter"))}/>
         <MenuItem
             icon="ri-align-right"
             title="Align Right"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyRight"))}/>
         <MenuItem
             icon="ri-align-justify"
             title="Justify"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyFull"))}/>
     </PopupButton>;
 }

package/src/html-editor/commands/ChangeColor.tsx

@@ -3,7 +3,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import PopupButton from "../../basic/PopupButton";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 
 const gray = [
     "rgb(0,0,0)",
@@ -115,14 +115,14 @@ const colorSelectorCss = CSS(StyleRule("color-selector")
 function TextColor(color: string) {
     return <div
         class="color-button"
-        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("foreColor", false, color))}
+        eventClick={Bind.event((e: HtmlEditor) => e.executeCommand("foreColor", false, color))}
         styleBackgroundColor={color.toLowerCase()} title={color}></div>;
 }
 
 function BackgroundColor(color: string) {
     return <div
         class="color-button"
-        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("hiliteColor", false, color))}
+        eventClick={Bind.event((e: HtmlEditor) => e.executeCommand("hiliteColor", false, color))}
         styleBackgroundColor={color.toLowerCase()} title={color}></div>;
 }
 

package/src/html-editor/commands/ChangeFont.tsx

@@ -4,7 +4,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import PopupButton from "../../basic/PopupButton";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 
 const fontMenuCSS = CSS(StyleRule()
     .padding(5)
@@ -38,8 +38,8 @@ export function FontMenu({ name, value }) {
     const cssName = value.join(" ");
     return <div
         class="menu"
-        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("fontName", false, cssName) )}>
-        <i class={Bind.oneWay((e: HtmlEditorControl) => ({
+        eventClick={Bind.event((e: HtmlEditor) => e.executeCommand("fontName", false, cssName) )}>
+        <i class={Bind.oneWay((e: HtmlEditor) => ({
                 "ri-check-line": 1,
                 "selected": e.getStyle("fontFamily", e.version)
                     .toLowerCase()
@@ -66,7 +66,7 @@ function selectFont(name: string) {
 export default function ChangeFont() {
     return <PopupButton
         class="command"
-        text={Bind.oneWay((e: HtmlEditorControl) => selectFont(e.getStyle("fontFamily", e.version)))}
+        text={Bind.oneWay((e: HtmlEditor) => selectFont(e.getStyle("fontFamily", e.version)))}
         title="Change Font">
         <div class={fontMenuCSS}>
             { ... fonts.map((x) => <FontMenu name={x[0]} value={x[1]}/>)}

package/src/html-editor/commands/ChangeFontSize.tsx

@@ -1,7 +1,7 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupButton, { MenuItem } from "../../basic/PopupButton";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 import Command, { ICommand } from "./Command";
 
 export default function ChangeFontSize(cmd: ICommand) {
@@ -9,9 +9,9 @@ export default function ChangeFontSize(cmd: ICommand) {
         class="command"
         icon="ri-font-size-2"
         title="Change Font Size">
-        <MenuItem icon="ri-add-line" label="Increase" eventClick={Bind.event((e: HtmlEditorControl) =>
+        <MenuItem icon="ri-add-line" label="Increase" eventClick={Bind.event((e: HtmlEditor) =>
             e.executeCommand("increaseFontSize"))}/>
-        <MenuItem icon="ri-subtract-line" label="Decrease" eventClick={Bind.event((e: HtmlEditorControl) =>
+        <MenuItem icon="ri-subtract-line" label="Decrease" eventClick={Bind.event((e: HtmlEditor) =>
             e.executeCommand("decreaseFontSize"))}/>
     </PopupButton>;
 

package/src/html-editor/commands/Command.tsx

@@ -1,6 +1,6 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 
 export interface ICommand {
     label?: string;
@@ -8,8 +8,8 @@ export interface ICommand {
     queryState?: string;
     enabled?: boolean;
     title?: string;
-    command?: (editor: HtmlEditorControl) => void;
-    query?: (editor: HtmlEditorControl) => boolean;
+    command?: (editor: HtmlEditor) => void;
+    query?: (editor: HtmlEditor) => boolean;
 }
 
 export default function Command({
@@ -22,8 +22,8 @@ export default function Command({
 }: ICommand) {
     if (label) {
         return <div
-            eventClick={Bind.event((e) => command(e as HtmlEditorControl))}
-            styleClass={Bind.oneWay((e: HtmlEditorControl) => ({
+            eventClick={Bind.event((e) => command(e as HtmlEditor))}
+            styleClass={Bind.oneWay((e: HtmlEditor) => ({
                 command: e.version,
                 pressed: !e.queryCommandState(queryState)
             }))}
@@ -33,8 +33,8 @@ export default function Command({
         </div>;
     }
     return <div
-        eventClick={Bind.event((e) => command(e as HtmlEditorControl))}
-        styleClass={Bind.oneWay((e: HtmlEditorControl) => ({
+        eventClick={Bind.event((e) => command(e as HtmlEditor))}
+        styleClass={Bind.oneWay((e: HtmlEditor) => ({
             command: e.version,
             pressed: e.queryCommandState(queryState)
         }))}

package/src/html-editor/commands/CommandButton.tsx

@@ -1,6 +1,7 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
+import { IHtmlCommand } from "./HtmlCommands";
 
 export interface ICommandButton {
     icon?: string;
@@ -13,12 +14,17 @@ export interface ICommandButton {
     /**
      * Default is insertHTML but you can change it.
      */
-    insertCommand: any;
+    insertCommand: IHtmlCommand;
 
     /**
      * Tooltip
      */
     title?: string;
+
+    /**
+     * setup if command is disabled or not
+     */
+    disabled?: boolean;
 }
 
 export function notSet(text: string) {
@@ -27,8 +33,8 @@ export function notSet(text: string) {
     };
 }
 
-function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> | string, command: string): any {
-    return async (s: HtmlEditorControl, e: Event) => {
+function insert(callback: (s: HtmlEditor, e: Event) => Promise<string> | string, command: IHtmlCommand): any {
+    return async (s: HtmlEditor, e: Event) => {
         let r = callback(s, e);
         if (typeof r !== "string") {
             if (r.then) {
@@ -36,7 +42,11 @@ function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> |
             }
         }
         if (r) {
-            s.executeCommand(command ?? "insertHTML", false, r as string);
+            if (command) {
+                command.execute(s, false, r as string);
+            } else {
+                s.executeCommand("insertHTML", false, r as string);
+            }
         }
     };
 }
@@ -46,11 +56,18 @@ export default function CommandButton({
     label,
     eventInsertHtml,
     insertCommand,
-    title
+    title,
+    disabled
 }: ICommandButton) {
+
+    disabled ??= Bind.oneWay((x: HtmlEditor) => x.version
+    ? !insertCommand.canExecute(x)
+    : false);
+
     if (label) {
         return <button
             class="command"
+            disabled={disabled}
             eventClick={Bind.event(insert(eventInsertHtml, insertCommand))}
             title={title}>
             <label class="label">
@@ -62,6 +79,7 @@ export default function CommandButton({
     return <button
         title={title}
         class="command"
+        disabled={disabled}
         eventClick={Bind.event(insert(eventInsertHtml, insertCommand))}>
         <i class={icon} />
     </button>;

package/src/html-editor/commands/Headings.tsx

@@ -1,14 +1,14 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupButton, { MenuItem } from "../../basic/PopupButton";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 
 export default function Headings() {
     return <PopupButton
         class="command"
         icon="ri-heading"
         title="Apply Heading">
-        <MenuItem icon="ri-h-1" eventClick={Bind.event((e: HtmlEditorControl) =>
+        <MenuItem icon="ri-h-1" eventClick={Bind.event((e: HtmlEditor) =>
             e.executeCommand("formatBlock", false, "H1"))}/>
         <MenuItem icon="ri-h-2" eventClick={Bind.event((e: any) =>
             e.executeCommand("formatBlock", false, "H2"))}/>