@web-atoms/web-controls 2.3.109 → 2.3.110

package/src/basic/ListRepeater.tsx

@@ -1,32 +1,7 @@
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater from "./AtomRepeater";
 
-CSS(StyleRule()
-    .child(StyleRule("*[data-item-index]")
-        .padding(5)
-        .borderRadius(5)
-        .backgroundColor("var(--list-bg-color)")
-        .color("var(--list-color)")
-        .hover(StyleRule()
-            .backgroundColor("var(--list-selected-bg-color-hover, lightgreen)")
-            .color("var(--list-selected-color-hover, inherit)")
-        )
-        .child(StyleRule("td")
-            .padding(5)
-        )
-    )
-    .child(StyleRule("*[data-item-index][data-selected-item=true]")
-        .backgroundColor("var(--list-selected-bg-color, lightgray)")
-        .color("var(--list-selected-color, inherit)")
-        .hover(StyleRule()
-            .backgroundColor("var(--list-selected-bg-color-hover, lightgreen)")
-            .color("var(--list-selected-color-hover, inherit)")
-        )
-    )
-, "*[data-list-repeater=list-repeater]");
-
+import "./styles/list-repeater-style";
 export default class ListRepeater<T = any> extends AtomRepeater<T> {
 
     @BindableProperty

package/src/basic/MaskedInput.tsx

@@ -3,27 +3,12 @@ import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import IElement from "./IElement";
 
+import "./styles/masked-input-style";
+
 export interface IMaskedInput extends IElement {
     mask?: string;
 }
 
-CSS(StyleRule()
-    .position("relative")
-    .paddingLeft(2)
-    .paddingTop(1)
-    .fontFamily("monospace")
-    // .and(StyleRule("::after")
-    //     .absolutePosition({
-    //         left: 2,
-    //         top: 1
-    //     })
-    //     .content("attr(data-mask)" as any)
-    //     .fontFamily("inherit")
-    //     .fontWeight("inherit")
-    //     .fontSize("inherit")
-    // )
-, "input[data-mask]");
-
 const updateMask = (e: Event) => {
     const target = e.target as HTMLInputElement;
     const mask = target.dataset.mask;

package/src/basic/MaskedInputDiv.tsx

@@ -1,52 +1,13 @@
-import Colors from "@web-atoms/core/dist/core/Colors";
 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 IElement from "./IElement";
 
+import "./styles/masked-input-div";
+
 export interface IMaskedInput extends IElement {
     mask?: string;
 }
 
-CSS(StyleRule()
-    .display("inline")
-    .position("relative")
-    .paddingLeft(2)
-    .paddingTop(2)
-    .fontFamily("monospace")
-    .and(StyleRule("::before")
-        .absolutePosition({
-            left: 2,
-            top: 2
-        })
-        .content("attr(data-label)" as any)
-        .fontFamily("inherit")
-        .fontWeight("inherit")
-        .fontSize("inherit")
-        .pointerEvents("none")
-    )
-    .and(StyleRule("::after")
-        .absolutePosition({
-            left: 2,
-            top: 2
-        })
-        .content("attr(data-mask)" as any)
-        .fontFamily("inherit")
-        .fontWeight("inherit")
-        .fontSize("inherit")
-        .pointerEvents("none")
-        .opacity("0.2")
-    )
-    .child(StyleRule("input")
-        .color(Colors.transparent)
-        .caretColor(Colors.gray)
-        .fontFamily("inherit")
-        .fontWeight("inherit")
-        .fontSize("inherit")
-    )
-, "div[data-mask]");
-
 const updateMask = (e: Event) => {
     const target = e.target as HTMLInputElement;
     const mask = target.dataset.mask;

package/src/basic/OldForm.tsx

@@ -0,0 +1,424 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import Command from "@web-atoms/core/dist/core/Command";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import FormField from "./FormField";
+import IElement from "./IElement";
+import ToggleButtonBar from "./ToggleButtonBar";
+export const FormButtonBar = ToggleButtonBar;
+
+const css = CSS(StyleRule()
+    .verticalFlexLayout({ alignItems: "stretch" })
+    .displayNone(" .field-error:empty")
+    .displayNone(":not([data-wa-show-errors=yes]) .field-error:not(:empty)")
+    .child(StyleRule("button")
+        .alignSelf("flex-start")
+    )
+    .and(StyleRule("[data-scrollable=true]")
+        .justifyContent("flex-start")
+        .overflow("auto")
+    )
+, "*[data-wa-form=wa-form]");
+
+export interface ISubmitButton {
+    eventClick: any;
+    class?: string;
+    [key: string]: any;
+}
+
+export interface ISubmitAction extends IElement {
+    action: "submit";
+    eventClick?: any;
+    "event-click"?: any;
+}
+
+export interface ICancelAction extends IElement {
+    action: "cancel";
+    eventClick?: any;
+    "event-click"?: any;
+}
+
+export type IFormAction = ISubmitAction | ICancelAction;
+
+/**
+ * This is just a decorator, you must have a child button for this to work
+ * @param action submit | cancel
+ * @param node child node where action will be applied
+ * @returns XNode
+ */
+export function FormAction(
+    {
+        action = "submit",
+        eventClick,
+        "event-click": eventClick2,
+        ... a
+    }: IFormAction,
+    node: XNode) {
+    const attributes = node.attributes ??= {};
+    attributes["data-wa-form-action"] = action;
+    const e = attributes["event-click"] || attributes.eventClick;
+    if (e) {
+        attributes["event-submit"] = e;
+        delete attributes["event-click"];
+        delete attributes.eventClick;
+    }
+    eventClick ??= eventClick2;
+    if (action === "submit" && eventClick) {
+        attributes.eventSubmit = eventClick;
+    }
+    node.attributes = { ... a, ... attributes};
+    return node;
+}
+
+/**
+ * @deprecated Use Form with eventSubmit and button with data-event="submit"
+ */
+export function SubmitAction(a: IElement, node: XNode) {
+    (a as any).action = "submit";
+    return FormAction(a as any, node);
+}
+
+/**
+ * @deprecated Use Form with eventSubmit and button with data-event="submit"
+ */
+export function CancelAction(a: IElement, node: XNode) {
+    (a as any).action = "cancel";
+    return FormAction(a as any, node);
+}
+
+/**
+ * @deprecated Use Form with eventSubmit and button with data-event="submit"
+ */
+export function SubmitButton(
+    { eventClick,
+        ... others}: ISubmitButton,
+    ... nodes: XNode[]) {
+    return <button
+        data-wa-form-action="submit"
+        eventSubmit={eventClick} { ... others }>{ ... nodes}</button>;
+}
+
+function findSubmitAction(e: Event) {
+    let button = e.target as HTMLElement;
+    if (e.type === "submit") {
+        e.preventDefault();
+        button = (e as SubmitEvent).submitter;
+    }
+    while (button) {
+        const action = button.dataset.waFormAction ?? button.dataset.event;
+        if (/submit|cancel/i.test(action)) {
+            return { button, action };
+        }
+        button = button.parentElement;
+    }
+    return { button };
+}
+
+const submitFormHandler = (form: HTMLElement) => {
+    if (!form.dataset.waShowErrors) {
+        form.dataset.waShowErrors = "yes";
+    }
+    setTimeout(() => {
+        const all = Array.from(form.getElementsByClassName("field-error"));
+        for (const iterator of all) {
+            if (iterator.textContent) {
+                alert(form.dataset?.errorMessage ?? "Please fix all validations");
+                return;
+            }
+        }
+        form.dispatchEvent(new CustomEvent("submitForm"));
+    }, 100);
+};
+
+const checkValidity = (handler) => (e: MouseEvent) => {
+
+    const form = e.currentTarget as HTMLFormElement;
+
+    const { button, action } = findSubmitAction(e);
+    if (!button) {
+        return;
+    }
+
+    if (handler) {
+        submitFormHandler(form);
+        return;
+    }
+
+    // if (button.tagName === "BUTTON" && e.type !== "submit") {
+    //     // as submit will be followed, we would ignore this only if the tag is button
+    //     return;
+    // }
+    if (action === "cancel") {
+        form.dataset.waShowErrors = "";
+        return;
+    }
+    if (!form.dataset.waShowErrors) {
+        form.dataset.waShowErrors = "yes";
+    }
+
+    setTimeout(() => {
+        const all = Array.from(form.getElementsByClassName("field-error"));
+        for (const iterator of all) {
+            if (iterator.textContent) {
+                alert(form.dataset?.errorMessage ?? "Please fix all validations");
+                return;
+            }
+        }
+        button.dispatchEvent(new CustomEvent("submit"));
+    }, 100);
+};
+
+const moveNext = (handler) => (e: KeyboardEvent) => {
+    if (!/enter|submit|return/i.test(e.key)) {
+        return;
+    }
+    const element = e.target as HTMLElement;
+    if (!element.tagName) {
+        return;
+    }
+    if  (handler) {
+        if (/^INPUT$/.test(element.tagName)) {
+            submitFormHandler(e.currentTarget as HTMLElement);
+        }
+        return;
+    }
+    if (element.dataset.waFormAction === "submit") {
+        element.dispatchEvent(new MouseEvent("click"));
+        return;
+    }
+    if (/input/i.test(element.tagName)) {
+        e.preventDefault();
+        element.dispatchEvent(new KeyboardEvent("keypress", {
+            key: "tab"
+        }));
+    }
+};
+
+document.body.addEventListener("click", (e: MouseEvent) => {
+    let start = e.target as HTMLElement;
+    let id;
+    while (start) {
+        id = start.dataset.submitFormId;
+        if (id) {
+            break;
+        }
+        start = start.parentElement;
+    }
+    if (!start) {
+        return;
+    }
+    const form = document.body.querySelector(`[data-form-id="${id}"]`);
+    submitFormHandler(form as HTMLElement);
+});
+
+export interface IForm {
+    id?: number;
+    class?: any;
+    scrollable?: boolean ;
+    /**
+     * If set, when an enter key is pressed on
+     * non textarea element, form will be submitted automatically
+     */
+    eventSubmit?: any;
+    /**
+     * By default it is true, when user presses enter button on an input
+     * the focus will move on to the next input element
+     */
+    focusNextOnEnter?: boolean;
+    [key: string]: any;
+
+    submitCommand?: Command;
+}
+
+let formId = 0;
+
+const formGroupSymbol = Symbol("formGroup");
+
+export interface IFormGroup {
+    group: string;
+    // header?: string;
+    // icon?: string;
+}
+
+export function FormGroup(
+    fg: IFormGroup,
+    ... nodes: XNode[]
+    ) {
+    fg[formGroupSymbol] = true;
+    return <div
+        { ... fg}>
+        { ... nodes}
+    </div>;
+}
+
+export default function OldForm(
+    {
+        id = formId++,
+        focusNextOnEnter = true,
+        scrollable,
+        eventSubmit,
+        submitCommand,
+        ... a
+    }: IForm,
+    ... nodes: XNode[]) {
+    if (focusNextOnEnter) {
+        a.eventKeypress = moveNext(eventSubmit);
+    }
+    a["data-form-id"] = id;
+    a["data-scrollable"] = !!scrollable;
+    if (!eventSubmit) {
+        a["data-wa-show-errors"] = "yes";
+    }
+    if (submitCommand) {
+        a["event-" + submitCommand.name] = checkValidity(eventSubmit);
+    }
+    const fields = [];
+    for (const iterator of nodes) {
+        if (!iterator) {
+            continue;
+        }
+        const ca = iterator.attributes as any;
+        if (ca?.[formGroupSymbol]) {
+            for (const child of iterator.children) {
+                const cha = child.attributes ??= {};
+                cha["data-group"] = ca.group;
+                fields.push(child);
+            }
+            continue;
+        }
+        fields.push(iterator);
+    }
+
+    return <div
+        data-wa-form="wa-form"
+        { ... a}
+        eventSubmitForm={eventSubmit}
+        eventClick={checkValidity(eventSubmit)}>
+        { ... fields}
+    </div>;
+}
+
+export interface IFormLayout extends IForm {
+    header?: XNode;
+    footer?: XNode;
+}
+
+CSS(StyleRule()
+    .display("grid")
+    .alignSelf("stretch")
+    .justifyContent("stretch" as any)
+    .flex("1 1 100%")
+    .gridTemplateRows("auto 1fr auto")
+    .gridTemplateColumns("1fr")
+    .child(StyleRule("[data-element=header]")
+        .gridRowStart("1")
+    )
+    .child(StyleRule("[data-element=content]")
+        .gridRowStart("2")
+        .overflow("auto")
+        .child(StyleRule("div")
+            .verticalFlexLayout({ alignItems: "stretch", gap: 10 })
+        )
+    )
+    .child(StyleRule("[data-element=footer]")
+        .gridRowStart("3")
+    )
+, "*[data-form-layout=form-layout]");
+
+const elementType = Symbol.for("elementType");
+
+export function FormLayout(
+    {
+        id = formId++,
+        focusNextOnEnter = true,
+        scrollable,
+        eventSubmit,
+        header,
+        footer,
+        ... a
+    }: IFormLayout,
+    ... nodes: XNode[]) {
+    if (focusNextOnEnter) {
+        a.eventKeypress = moveNext(eventSubmit);
+    }
+    a["data-form-id"] = id;
+    a["data-scrollable"] = !!scrollable;
+    if (!eventSubmit) {
+        a["data-wa-show-errors"] = "yes";
+    }
+
+    const fields = [];
+    for (const iterator of nodes) {
+        if (!iterator) {
+            continue;
+        }
+
+        const et = iterator[elementType];
+        if (et !== void 0) {
+            if (et === "header") {
+                header = iterator;
+                delete iterator[elementType];
+                continue;
+            }
+            if (et === "footer") {
+                footer = iterator;
+                delete iterator[elementType];
+                continue;
+            }
+        }
+
+        const ca = iterator.attributes as any;
+        if (ca?.[formGroupSymbol]) {
+            for (const child of iterator.children) {
+                const cha = child.attributes ??= {};
+                cha["data-group"] = ca.group;
+                fields.push(child);
+            }
+            continue;
+        }
+        fields.push(iterator);
+    }
+
+    if (header) {
+        const ha = header.attributes ??= {};
+        ha["data-element"] = "header";
+    }
+
+    if (footer) {
+        const ha = footer.attributes ??= {};
+        ha["data-element"] = "footer";
+    }
+
+    return <div
+        data-wa-form="wa-form"
+        data-form-layout="form-layout"
+        { ... a}
+        eventSubmitForm={eventSubmit}
+        eventClick={checkValidity(eventSubmit)}>
+        { header }
+        <div data-element="content">
+            <div>
+            { ... fields}
+            </div>
+        </div>
+        { footer }
+    </div>;
+}
+
+FormLayout.Footer = ({}, child: XNode) => {
+    child[elementType] = "footer";
+    return child;
+};
+
+FormLayout.Header = ({}, child: XNode) => {
+    child[elementType] = "header";
+    return child;
+};
+
+OldForm.newId = () => formId++;
+
+OldForm.submitId = (id: number) => ({
+    "data-submit-form-id": id.toString()
+});

package/src/basic/PasswordBox.tsx

@@ -1,28 +1,7 @@
-import Bind from "@web-atoms/core/dist/core/Bind";
 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 IElement from "./IElement";
 
-CSS(StyleRule()
-    .display("inline-grid")
-    .gridTemplateColumns("1fr 20px")
-    .child(StyleRule("input")
-        .gridRowStart("1")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 2")
-        .and(StyleRule("::-ms-reveal")
-            .display("none")
-        )
-    )
-    .child(StyleRule("i")
-        .gridRowStart("1")
-        .gridColumnStart("2")
-        .alignSelf("center")
-        .justifySelf("center")
-        .zIndex("2")
-    )
-, "div[data-password-box=password-box]");
+import "./styles/password-box-style";
 
 document.body.addEventListener("togglePassword", (e) => {
     const current = e.target as HTMLElement;

package/src/basic/PinchZoomView.tsx

@@ -1,48 +1,9 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode, { isTemplateSymbol } 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";
-
-CSS(StyleRule()
-    .position("relative")
-    .overflow("hidden")
-    .cursor("grab")
-    .and(StyleRule("[data-state=grabbing]")
-        .cursor("grabbing")
-    )
-    .child(StyleRule(".scale")
-        .absolutePosition({
-            right: 10,
-            top: 10
-        })
-        .border("solid 2px darkgray")
-        .borderRadius(4)
-        .backgroundColor(Colors.white)
-        .padding(4)
-        .color(Colors.black)
-    )
-    .child(StyleRule(".image-container")
-        .maximizeAbsolute()
-        .overflow("hidden")
-        .display("grid")
-        .alignItems("center")
-        .justifyItems("center")
-        .justifyContent("center" as any)
-    )
-    .child(StyleRule(".spinner")
-        .maximizeAbsolute()
-        .display("inline-grid")
-        .alignItems("center")
-        .justifyItems("center")
-    )
-    .child(StyleRule(".hide")
-        .display("none")
-    )
-    , "div[data-pinch-zoom]"
-);
+
+import "./styles/pinch-zoom-view-style";
 
 const center = (ev: TouchEvent) => {
     const touch = ev.touches[0];

package/src/basic/PopupButton.tsx

@@ -1,27 +1,9 @@
-import Bind from "@web-atoms/core/dist/core/Bind";
-import Colors from "@web-atoms/core/dist/core/Colors";
 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 PopupService, { IPopup, IPopupOptions } from "@web-atoms/core/dist/web/services/PopupService";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import InlinePopup, { IInlinePopupButtonOptions, InlinePopupButton } from "./InlinePopup";
 
-CSS(StyleRule()
-    .padding(5)
-    .borderRadius(5)
-    .cursor("pointer")
-    .hoverBackgroundColor(Colors.lightGreen)
-    .flexLayout({ alignItems: "center", justifyContent: "flex-start"})
-    .flexWrap("wrap")
-    .child(StyleRule("*")
-        .flexShrink("0")
-    )
-, "*[data-menu-item=menu-item]");
-
-CSS(StyleRule()
-    .verticalFlexLayout({ justifyContent: "stretch" as any, alignItems: "stretch"})
-, "*[data-menu-items=menu-items]");
+import "./styles/popup-button-style";
 
 export interface IMenuItem {
     label?: string;

package/src/basic/RadioButtonList.tsx

@@ -7,23 +7,7 @@ import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater from "./AtomRepeater";
 
-CSS(StyleRule()
-    .flexLayout({ inline: true, justifyContent: "flex-start"})
-    .flexFlow("wrap"),
-"*[data-radio-button-list=radio-button-list]");
-
-CSS(StyleRule()
-    .flexLayout({ justifyContent: "flex-start" })
-    .marginRight(5)
-    .child(StyleRule("span")
-        .cursor("pointer")
-    )
-    .and(StyleRule("[data-selected-item=true]")
-        .color(Colors.blue)
-    )
-    .displayNone("[data-selected-item=true] > i.fa-circle")
-    .displayNone("[data-selected-item=false] > i.fa-dot-circle")
-, "div[data-item-type=radio]");
+import "./styles/radio-button-list-style";
 
 export default class RadioButtonList extends AtomRepeater {