@web-atoms/web-controls 2.5.39 → 2.5.40

package/dist-esm/basic/DropDownInput.d.ts

@@ -0,0 +1,33 @@
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
+import { Match } from "./AtomRepeater.js";
+import "./DropDownInput.global.css";
+export default class DropDownInput<T> extends AtomControl {
+    "event-selection-changed"?: (e: CustomEvent) => void;
+    items: any[];
+    value: any;
+    label: any;
+    "data-alignment"?: "bottom-right" | "bottom-left";
+    disableSearch: boolean;
+    popupSuggestions: boolean;
+    search: string;
+    prompt: string;
+    suggestionPrompt: string;
+    autofocus: boolean;
+    itemRenderer: (item: T) => XNode;
+    labelPath: (item: T) => string;
+    valuePath: (item: T) => string;
+    match: Match<any>;
+    suggestionRenderer: (item: T) => XNode;
+    selectedItem: any;
+    private isPopupOpen;
+    input: HTMLInputElement;
+    labelElement: HTMLLabelElement;
+    anchorItem: any;
+    constructor(app: any, e?: HTMLElement);
+    onPropertyChanged(name: string): void;
+    protected preCreate(): void;
+    onFocus(): any;
+    openPopup(): Promise<void>;
+}
+//# sourceMappingURL=DropDownInput.d.ts.map

package/dist-esm/basic/DropDownInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownInput.d.ts","sourceRoot":"","sources":["../../src/basic/DropDownInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,oCAAoC,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kDAAkD,CAAC;AAC/E,OAAO,EAAsB,KAAK,EAA2B,MAAM,mBAAmB,CAAC;AAIvF,OAAO,4BAA4B,CAAC;AAEpC,MAAM,CAAC,OAAO,OAAO,aAAa,CAAC,CAAC,CAAE,SAAQ,WAAW;IAElD,yBAAyB,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IAEjD,KAAK,EAAE,GAAG,EAAE,CAAC;IAEb,KAAK,EAAE,GAAG,CAAC;IAEX,KAAK,EAAE,GAAG,CAAC;IAEX,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAElD,aAAa,EAAE,OAAO,CAAC;IAGvB,gBAAgB,EAAE,OAAO,CAAC;IAG1B,MAAM,EAAE,MAAM,CAAC;IAGf,MAAM,EAAE,MAAM,CAAC;IAGf,gBAAgB,EAAE,MAAM,CAAC;IAGzB,SAAS,EAAE,OAAO,CAAC;IAGnB,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC;IAGjC,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAG/B,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAG/B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAGlB,kBAAkB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC;IAG9C,YAAY,EAAE,GAAG,CAAC;IAElB,OAAO,CAAC,WAAW,CAAU;IAC7B,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,GAAG,CAAC;gBAEJ,GAAG,KAAA,EAAE,CAAC,cAA4C;IAI9D,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAWrC,SAAS,CAAC,SAAS,IAAI,IAAI;IAwB3B,OAAO,IAAI,GAAG;IAWR,SAAS;CAmClB"}

package/dist-esm/basic/DropDownInput.js

@@ -0,0 +1,139 @@
+import { __decorate, __metadata } from "tslib";
+import Bind from "@web-atoms/core/dist/core/Bind.js";
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
+import { askSuggestionPopup, MatchAnyCaseInsensitive } from "./AtomRepeater.js";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
+import "./DropDownInput.global.css";
+export default class DropDownInput extends AtomControl {
+    "event-selection-changed";
+    items;
+    value;
+    label;
+    "data-alignment";
+    disableSearch;
+    popupSuggestions;
+    search;
+    prompt;
+    suggestionPrompt;
+    autofocus;
+    itemRenderer;
+    labelPath;
+    valuePath;
+    match;
+    suggestionRenderer;
+    selectedItem;
+    isPopupOpen;
+    input;
+    labelElement;
+    anchorItem;
+    constructor(app, e = document.createElement("drop-down-input")) {
+        super(app, e);
+    }
+    onPropertyChanged(name) {
+        super.onPropertyChanged(name);
+        switch (name) {
+            case "search":
+                if (this.search) {
+                    this.openPopup().catch(console.error);
+                }
+                break;
+        }
+    }
+    preCreate() {
+        this.items = null;
+        this.value = null;
+        this.selectedItem = null;
+        this.labelPath = (x) => x?.label ?? x;
+        this.valuePath = (x) => x?.value ?? x;
+        this.itemRenderer = (x) => XNode.create("div", { text: this.labelPath?.(x) ?? x });
+        this.search = "";
+        this.label = "";
+        this.isPopupOpen = false;
+        this.disableSearch = true;
+        this.render(XNode.create("div", { "event-click": () => this.input.focus() },
+            XNode.create("input", { autofocus: Bind.oneTime(() => this.autofocus), "event-focus": () => this.onFocus(), value: Bind.twoWaysImmediate(() => this.search) }),
+            XNode.create("label", { text: Bind.oneWay((x) => this.labelPath(this.items?.find((i) => this.valuePath(i) === this.value))) }),
+            XNode.create("i", null)));
+        this.input = this.element.querySelector("input");
+        this.labelElement = this.element.querySelector("label");
+    }
+    onFocus() {
+        const value = this.value;
+        if (value) {
+            const item = this.items.find((i) => this.valuePath?.(i) == value);
+            this.input.placeholder = item ? this.labelPath(item) : this.label;
+        }
+        this.input.value = "";
+        this.app.runAsync(() => this.openPopup());
+    }
+    async openPopup() {
+        if (this.isPopupOpen) {
+            return;
+        }
+        this.isPopupOpen = true;
+        try {
+            let selectedItem = this.items.find((i) => this.value === (this.valuePath?.(i) ?? i));
+            this.anchorItem = selectedItem;
+            this.selectedItem = selectedItem;
+            const newItem = await askSuggestionPopup(this, this.items, this.itemRenderer, this.match ?? MatchAnyCaseInsensitive(this.labelPath), selectedItem);
+            if (newItem !== selectedItem) {
+                this.selectedItem = selectedItem;
+                this.value = this.valuePath?.(newItem) ?? newItem;
+                this.element.dispatchEvent(new CustomEvent("selectionChanged", {
+                    bubbles: true,
+                    detail: newItem,
+                    cancelable: true
+                }));
+            }
+        }
+        finally {
+            this.isPopupOpen = false;
+        }
+    }
+}
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Boolean)
+], DropDownInput.prototype, "popupSuggestions", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", String)
+], DropDownInput.prototype, "search", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", String)
+], DropDownInput.prototype, "prompt", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", String)
+], DropDownInput.prototype, "suggestionPrompt", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Boolean)
+], DropDownInput.prototype, "autofocus", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], DropDownInput.prototype, "itemRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], DropDownInput.prototype, "labelPath", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], DropDownInput.prototype, "valuePath", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], DropDownInput.prototype, "match", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], DropDownInput.prototype, "suggestionRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Object)
+], DropDownInput.prototype, "selectedItem", void 0);
+//# sourceMappingURL=DropDownInput.js.map

package/dist-esm/basic/DropDownInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownInput.js","sourceRoot":"","sources":["../../src/basic/DropDownInput.tsx"],"names":[],"mappings":"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"}

package/dist-esm/basic/Editable.d.ts

@@ -0,0 +1,12 @@
+import IElement from "./IElement.js";
+export interface IPropertyInfo {
+    key?: string;
+    getter(item: any): any;
+    setter(item: any, value: any): void;
+}
+export declare function getPropertyInfo(propertyPath: string[] | string | IPropertyInfo): IPropertyInfo;
+export interface IEditable extends IElement {
+    propertyPath: string[] | string | IPropertyInfo;
+}
+export declare function EditableInput({ propertyPath, ...a }: IEditable): any;
+//# sourceMappingURL=Editable.d.ts.map

package/dist-esm/basic/Editable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editable.d.ts","sourceRoot":"","sources":["../../src/basic/Editable.tsx"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,eAAe,CAAC;AAIrC,MAAM,WAAW,aAAa;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,IAAI,KAAA,GAAG,GAAG,CAAC;IAClB,MAAM,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,GAAG,MAAM,GAAG,aAAa,GAAG,aAAa,CAuD9F;AA8BD,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACvC,YAAY,EAAE,MAAM,EAAE,GAAG,MAAM,GAAG,aAAa,CAAC;CACnD;AAED,wBAAgB,aAAa,CACzB,EACI,YAAY,EACZ,GAAI,CAAC,EACR,EAAE,SAAS,OASf"}

package/dist-esm/basic/Editable.js

@@ -0,0 +1,91 @@
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import { getParentRepeaterItem } from "./AtomRepeater.js";
+export function getPropertyInfo(propertyPath) {
+    if (typeof propertyPath === "string") {
+        return {
+            key: propertyPath,
+            getter: (item) => item?.[propertyPath],
+            setter: (item, value) => {
+                if (item) {
+                    item[propertyPath] = value;
+                }
+            }
+        };
+    }
+    if (!Array.isArray(propertyPath)) {
+        return propertyPath;
+    }
+    const last = propertyPath.pop();
+    let getterIntermediate;
+    if (propertyPath.length > 0) {
+        getterIntermediate = (item) => {
+            if (!item) {
+                return item;
+            }
+            for (const iterator of propertyPath) {
+                item = item[iterator];
+                if (!item) {
+                    return item;
+                }
+            }
+            return item;
+        };
+    }
+    const setter = (item, value) => {
+        if (item) {
+            if (getterIntermediate) {
+                item = getterIntermediate(item);
+            }
+            if (item) {
+                item[last] = value;
+            }
+        }
+    };
+    const getter = (item) => {
+        if (!item) {
+            return item;
+        }
+        if (getterIntermediate) {
+            item = getterIntermediate(item);
+        }
+        return item?.[last];
+    };
+    return {
+        key: propertyPath.join(","),
+        getter,
+        setter
+    };
+}
+const handlers = {};
+function registerEvent(property, changeEvents, editorValuePath) {
+    property.key ??= property.setter + ":" + property.getter;
+    const name = `${property.key}:${changeEvents.join(",")}`;
+    if (!handlers[name]) {
+        handlers[name] = changeEvents;
+        for (const iterator of changeEvents) {
+            document.body.addEventListener(iterator, (e) => {
+                setTimeout(() => {
+                    const ri = getParentRepeaterItem(e.target);
+                    if (!ri) {
+                        return;
+                    }
+                    const [_, repeater, item] = ri;
+                    const oldValue = property.getter(item);
+                    const value = editorValuePath(e.target);
+                    if (oldValue != value) {
+                        property.setter(item, value);
+                        repeater.refreshItem(item);
+                    }
+                }, 1);
+            }, true);
+        }
+    }
+}
+export function EditableInput({ propertyPath, ...a }) {
+    if (typeof propertyPath === "string" || Array.isArray(propertyPath)) {
+        propertyPath = getPropertyInfo(propertyPath);
+    }
+    registerEvent(propertyPath, ["change", "blur"], (item) => item.value);
+    return XNode.create("input", { type: "text", ...a });
+}
+//# sourceMappingURL=Editable.js.map

package/dist-esm/basic/Editable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editable.js","sourceRoot":"","sources":["../../src/basic/Editable.tsx"],"names":[],"mappings":"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"}

package/dist-esm/basic/Expander.d.ts

@@ -0,0 +1,12 @@
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import "./styles/expander.global.css";
+export interface IExpander {
+    icon?: string | string[];
+    isExpanded: boolean;
+    "event-expanded"?: (e: CustomEvent) => any;
+    "event-collapsed"?: (e: CustomEvent) => any;
+    [key: string]: any;
+}
+export default function Expander({ icon, isExpanded, ...a }: IExpander, header: XNode, detail: XNode): any;
+export declare function ExpanderMenu({ icon, isExpanded, ...a }: IExpander, header: XNode, ...details: XNode[]): any;
+//# sourceMappingURL=Expander.d.ts.map

package/dist-esm/basic/Expander.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../src/basic/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAEvD,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,SAAS;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,GAAG,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,GAAG,CAAC;IAC5C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAoDD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAC5B,EACI,IAAI,EACJ,UAAU,EACV,GAAI,CAAC,EACR,EAAE,SAAS,EACZ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAsB/B;AAED,wBAAgB,YAAY,CAAC,EACrB,IAAI,EACJ,UAAU,EACV,GAAI,CAAC,EACR,EAAE,SAAS,EACZ,MAAM,EAAE,KAAK,EAAE,GAAI,OAAO,EAAE,KAAK,EAAE,OA2BtC"}

package/dist-esm/basic/Expander.js

@@ -0,0 +1,91 @@
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import "./styles/expander.global.css";
+document.body.addEventListener("click", (e) => {
+    if (e.defaultPrevented) {
+        return;
+    }
+    let start = e.target;
+    while (start) {
+        if (/icon|caret|header/.test(start.getAttribute("data-element"))) {
+            break;
+        }
+        start = start.parentElement;
+    }
+    start = start?.parentElement;
+    if (!start) {
+        return;
+    }
+    const isExpander = start?.getAttribute("data-is-expander");
+    if (!/^(menu|expander)$/i.test(isExpander)) {
+        return;
+    }
+    const ds = start.dataset;
+    if (/menu/i.test(isExpander)) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+    }
+    if (ds.isExpanded === "false") {
+        start.dispatchEvent(new CustomEvent("expanded", { bubbles: true, cancelable: true }));
+    }
+    else {
+        start.dispatchEvent(new CustomEvent("collapsed", { bubbles: true, cancelable: true }));
+    }
+}, { capture: true });
+document.body.addEventListener("expanded", (ce) => {
+    if (ce.defaultPrevented) {
+        return;
+    }
+    const target = ce.target;
+    target.dataset.isExpanded = "true";
+});
+document.body.addEventListener("collapsed", (ce) => {
+    if (ce.defaultPrevented) {
+        return;
+    }
+    const target = ce.target;
+    target.dataset.isExpanded = "false";
+});
+export default function Expander({ icon, isExpanded, ...a }, header, detail) {
+    if (!detail) {
+        throw new Error("Expander must contain two children, one header and one detail");
+    }
+    const ha = header.attributes ??= {};
+    const da = detail.attributes ??= {};
+    ha["data-element"] = "header";
+    da["data-element"] = "detail";
+    const iconElement = !icon
+        ? []
+        : (Array.isArray(icon)
+            ? icon
+            : [icon]).map((i) => XNode.create("i", { "data-element": "icon", class: i }));
+    return XNode.create("div", { "data-is-expander": "expander", "data-is-expanded": isExpanded, ...a },
+        ...iconElement,
+        header,
+        XNode.create("i", { "data-element": "caret", class: "fas fa-angle-down" }),
+        detail);
+}
+export function ExpanderMenu({ icon, isExpanded, ...a }, header, ...details) {
+    if (details.length === 0) {
+        throw new Error("Expander must contain two children, one header and one detail");
+    }
+    const ha = header.attributes ??= {};
+    ha["data-element"] = "header";
+    let i = 2;
+    details = details.filter((x) => x !== false);
+    for (const iterator of details) {
+        const ia = (iterator.attributes ??= {});
+        ia["data-element"] = "detail";
+        ia["style-grid-row-start"] = (i++).toString();
+    }
+    const iconElement = !icon
+        ? []
+        : (Array.isArray(icon)
+            ? icon
+            : [icon]).map((i) => XNode.create("i", { "data-element": "icon", class: i }));
+    return XNode.create("div", { "data-is-expander": "menu", "data-is-expanded": isExpanded, ...a },
+        ...iconElement,
+        header,
+        XNode.create("i", { "data-element": "caret", class: "fas fa-angle-down" }),
+        ...details);
+}
+//# sourceMappingURL=Expander.js.map

package/dist-esm/basic/Expander.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.js","sourceRoot":"","sources":["../../src/basic/Expander.tsx"],"names":[],"mappings":"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"}

package/dist-esm/basic/FilesDragDrop.d.ts

@@ -0,0 +1,20 @@
+import "./FilesDragDrop.global.css";
+export declare const FilesDragDrop: ({ uploadEvent, uploadRequested, convert, maxSize, extra, }: {
+    uploadEvent?: string;
+    uploadRequested?: string;
+    convert?: boolean;
+    maxSize?: number;
+    extra?: string;
+}) => {
+    "data-extra": string;
+    "data-drag-drop": string;
+    "data-convert": boolean;
+    "data-upload-event": string;
+    "data-upload-requested": string;
+    "data-max-size": number;
+    "event-dragenter": (e: DragEvent) => void;
+    "event-dragleave": (e: DragEvent) => void;
+    "event-dragover": (e: DragEvent) => void;
+    "event-drop": (e: DragEvent) => void;
+};
+//# sourceMappingURL=FilesDragDrop.d.ts.map

package/dist-esm/basic/FilesDragDrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilesDragDrop.d.ts","sourceRoot":"","sources":["../../src/basic/FilesDragDrop.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAC;AAwFpC,eAAO,MAAM,aAAa,GAAI;;;;;;CAM7B;;;;;;;2BA3FqB,SAAS;2BAcT,SAAS;0BAPV,SAAS;sBAcR,SAAS;CAiF7B,CAAC"}

package/dist-esm/basic/FilesDragDrop.js

@@ -0,0 +1,90 @@
+const supportsFileSystemAccessAPI = "getAsFileSystemHandle" in DataTransferItem.prototype;
+const supportsWebkitGetAsEntry = "webkitGetAsEntry" in DataTransferItem.prototype;
+import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
+import "./FilesDragDrop.global.css";
+const dragEnter = (e) => {
+    if (!e.dataTransfer) {
+        return;
+    }
+    e.currentTarget.setAttribute("data-drop-enabled", "1");
+};
+const dragOver = (e) => {
+    if (!e.dataTransfer) {
+        return;
+    }
+    e.preventDefault();
+};
+const dragLeave = (e) => {
+    if (!e.dataTransfer) {
+        return;
+    }
+    e.currentTarget.removeAttribute("data-drop-enabled");
+};
+const eventDrop = (e) => {
+    if (!e.dataTransfer) {
+        return;
+    }
+    e.preventDefault();
+    const currentTarget = e.currentTarget;
+    currentTarget.removeAttribute("data-drop-enabled");
+    const uploadEvent = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-event"));
+    const uploadRequested = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-requested"));
+    const extra = currentTarget.getAttribute("data-extra");
+    const convert = currentTarget.getAttribute("data-convert") === "true";
+    const maxSize = parseInt(currentTarget.getAttribute("data-max-size") || "0", 10);
+    const fileHandlesPromises = [...e.dataTransfer.items]
+        .filter((item) => item.kind === "file")
+        .map((item) => supportsFileSystemAccessAPI
+        ? item.getAsFileSystemHandle()
+        : supportsWebkitGetAsEntry
+            ? item.webkitGetAsEntry()
+            : item.getAsFile());
+    const files = [];
+    const getFiles = async (dir, parent = dir.name) => {
+        const all = [];
+        for await (const [name, handle] of dir.entries()) {
+            const path = `${parent}/${handle.name}`;
+            if (handle.kind === "directory" || handle.isDirectory) {
+                all.push(...(await getFiles(handle, path)));
+                continue;
+            }
+            const file = await handle.getFile();
+            Object.defineProperty(file, "webkitRelativePath", { value: path });
+            all.push(file);
+        }
+        return all;
+    };
+    const control = AtomControl.from(e.currentTarget);
+    control.app.runAsync(async () => {
+        for await (const handle of fileHandlesPromises) {
+            if (handle.kind === "directory" || handle.isDirectory) {
+                files.push(...await getFiles(handle));
+            }
+            else {
+                files.push(await handle.getFile());
+            }
+        }
+        const detail = {
+            files,
+            extra,
+            convert,
+            maxSize,
+            uploadEvent
+        };
+        currentTarget.dispatchEvent(new CustomEvent(uploadRequested, { detail, bubbles: true, cancelable: true }));
+    });
+};
+export const FilesDragDrop = ({ uploadEvent = "files-available", uploadRequested = "upload-requested", convert = false, maxSize = 50 * 1024 * 1024, extra = "", }) => ({
+    "data-extra": extra,
+    "data-drag-drop": "1",
+    "data-convert": convert,
+    "data-upload-event": uploadEvent,
+    "data-upload-requested": uploadRequested,
+    "data-max-size": maxSize,
+    "event-dragenter": dragEnter,
+    "event-dragleave": dragLeave,
+    "event-dragover": dragOver,
+    "event-drop": eventDrop
+});
+//# sourceMappingURL=FilesDragDrop.js.map

package/dist-esm/basic/FilesDragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilesDragDrop.js","sourceRoot":"","sources":["../../src/basic/FilesDragDrop.ts"],"names":[],"mappings":"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"}

package/dist-esm/basic/Form.d.ts

@@ -0,0 +1,21 @@
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import "../styles/form.global.css";
+export interface IForm {
+    "data-submit-event"?: string;
+    "data-show-validation"?: "true" | "false";
+    "data-error-message"?: string;
+    eventSubmit?: never;
+    submitCommand?: never;
+    [key: string]: any;
+}
+export default function Form({ "data-submit-event": submitEvent, "data-show-validation": showValidation, "data-error-message": errorMessage, ...a }: IForm, ...nodes: XNode[]): any;
+type Func = (...p: any[]) => any;
+export interface IValidator {
+    value: Func;
+    message?: (value: string, label: string) => string;
+    isValid?: (value: string, element: HTMLElement) => boolean;
+}
+export declare const BindError: ({ value, message, isValid, }: IValidator) => any;
+export declare const BindEmailError: ({ value, message, isValid, }: IValidator) => any;
+export {};
+//# sourceMappingURL=Form.d.ts.map

package/dist-esm/basic/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/basic/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAEvD,OAAO,2BAA2B,CAAC;AAoCnC,MAAM,WAAW,KAAK;IAIlB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAK7B,sBAAsB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAIzC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAK9B,WAAW,CAAC,EAAE,KAAK,CAAC;IAIpB,aAAa,CAAC,EAAE,KAAK,CAAC;IAEtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EACzB,mBAAmB,EAAE,WAA0B,EAC/C,sBAAsB,EAAE,cAAwB,EAChD,oBAAoB,EAAE,YAA2C,EACjE,GAAI,CAAC,EACR,EAAE,KAAK,EAAE,GAAI,KAAK,EAAE,KAAK,EAAE,OAY3B;AAED,KAAK,IAAI,GAAG,CAAC,GAAI,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAElC,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC;CAC9D;AAED,eAAO,MAAM,SAAS,GAAI,8BAIvB,UAAU,QAgBZ,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,8BAI5B,UAAU,QAEZ,CAAA"}

package/dist-esm/basic/Form.js

@@ -0,0 +1,61 @@
+import Bind from "@web-atoms/core/dist/core/Bind.js";
+import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import "../styles/form.global.css";
+const checkClick = (e) => {
+    const form = e.currentTarget;
+    const element = e.target;
+    let target = element;
+    while (target.tagName !== "BUTTON") {
+        target = target.parentElement;
+        if (!target || target === form) {
+            return;
+        }
+    }
+    const submitEvent = target.getAttribute("data-submit-event");
+    if (!submitEvent) {
+        if (!/submit/i.test(target.getAttribute("type") ?? target.getAttribute("data-type"))) {
+            return;
+        }
+    }
+    form.setAttribute("data-show-validation", "true");
+    setTimeout(() => {
+        const all = Array.from(form.getElementsByClassName("field-error"));
+        for (const iterator of all) {
+            if (iterator.textContent) {
+                form.setAttribute("data-valid", "false");
+                return;
+            }
+        }
+        form.setAttribute("data-valid", "true");
+        const eventName = StringHelper.fromHyphenToCamel(submitEvent ?? form.getAttribute("data-submit-event"));
+        target.dispatchEvent(new CustomEvent(eventName, { bubbles: true, cancelable: true }));
+    }, 100);
+};
+export default function Form({ "data-submit-event": submitEvent = "submitForm", "data-show-validation": showValidation = "false", "data-error-message": errorMessage = "Please fix all validations", ...a }, ...nodes) {
+    return XNode.create("div", { ...a, "data-submit-event": submitEvent, "data-form": "form", "data-valid": "true", "data-show-validation": showValidation, "data-error-message": errorMessage, "event-click": checkClick },
+        XNode.create("div", { class: "error-message", text: errorMessage }),
+        ...nodes);
+}
+export const BindError = ({ value, message = (v, l) => `${l} is invalid`, isValid = (v, e) => !!v, }) => {
+    function f2(sender, element) {
+        const isRequired = element.parentElement.querySelector(`[data-required]`);
+        const msg = value.call(this, sender);
+        if (!msg) {
+            if (!isRequired) {
+                return "";
+            }
+        }
+        if (isValid(msg, element)) {
+            return "";
+        }
+        return message(msg, element.parentElement.querySelector(`[data-element=label]`)?.textContent || "This field ");
+    }
+    ;
+    f2.toString = () => value.toString();
+    return Bind.oneWay(f2);
+};
+export const BindEmailError = ({ value, message = (v, l) => `${l} is not a valid email address`, isValid = (v, e) => /[^\@]+\@[^\@]+\.[^\@]+/i.test(v), }) => {
+    return BindError({ value, message, isValid });
+};
+//# sourceMappingURL=Form.js.map

package/dist-esm/basic/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/basic/Form.tsx"],"names":[],"mappings":"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"}