@web-atoms/web-controls 2.1.76 → 2.1.80

package/src/basic/AtomRepeater.tsx

@@ -0,0 +1,402 @@
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import { IDisposable } from "@web-atoms/core/dist/core/types";
+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 { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+
+const popupCSS = CSS(StyleRule()
+    .height(500)
+    .width(300)
+    .verticalFlexLayout({ alignItems: "stretch" })
+    .child(StyleRule(".items")
+        .flexStretch()
+        .overflow("auto")
+        .child(StyleRule(".presenter")
+            .child(StyleRule("*")
+                .padding(5)
+            )
+        )
+    )
+);
+
+export type Match<T> = (text: string) => (item: T) => boolean;
+
+export type IAskSuggestion<T> = (items: T[], itemRenderer: (item: T) => XNode, match: Match<T>) => any;
+
+export const MatchTrue = (... a: any[]) => true;
+
+export const MatchFalse = (... a: any[]) => false;
+
+export const ArrowToString = (item) => item.label?.toString() ?? item.toString();
+
+export const MatchCaseInsensitive = (textField?: (item) => string) => {
+    textField ??= ArrowToString;
+    return (s: string) => {
+        s = s.toLowerCase();
+        return (item) => textField(item)?.toLowerCase()?.includes(s);
+    };
+};
+
+export const SameObjectValue = (item) => item;
+
+/**
+ * Asks user for selecting item from given suggestions
+ * @param items items to display
+ * @param itemRenderer render function
+ * @param match search match
+ * @returns selected item
+ */
+export function askSuggestion<T>(
+    items: T[],
+    itemRenderer: (item: T) => XNode,
+    match: Match<T>): Promise<T> {
+    class Suggestions extends PopupWindow {
+
+        @BindableProperty
+        public search: string;
+
+        protected create(): void {
+            this.render(<div class={popupCSS}>
+                <input
+                    type="search"
+                    value={Bind.twoWaysImmediate(() => this.search)}
+                    autofocus={true}/>
+                <div class="items">
+                    <AtomRepeater
+                        class="presenter"
+                        itemRenderer={itemRenderer}
+                        visibilityFilter={Bind.oneWay(() => match(this.search))}
+                        eventItemClick={(e) => {
+                            this.viewModel.close(e.detail);
+                        }}
+                        items={items}/>
+                </div>
+            </div>);
+        }
+    }
+
+    return Suggestions.showModal();
+}
+
+export interface ISelectorCheckBox {
+    text?: string;
+    iconSelected?: string;
+    icon?: string;
+    [key: string]: any;
+}
+
+CSS(StyleRule()
+    .nested(StyleRule("i[data-click-event]")
+        .padding(5)
+    )
+, "*[data-selected-item]");
+
+CSS(StyleRule()
+    .nested(StyleRule("i[data-click-event=item-select]")
+        .padding(5)
+    )
+    .displayNone(" i[data-click-event=item-select]")
+, "*[data-selected-item=true]");
+
+CSS(StyleRule()
+    .displayNone(" i[data-click-event=item-deselect]")
+, "*[data-selected-item=false]");
+
+export function SelectorCheckBox(
+    {
+        text,
+        icon = "far fa-square",
+        iconSelected = "fas fa-check-square",
+        ... a
+    }: ISelectorCheckBox,
+    ... nodes: XNode[]) {
+    if (text) {
+        return <label>
+        <i class={icon} data-click-event="item-select"/>
+        <i class={iconSelected}  data-click-event="item-deselect"/>
+            <span text={text}/>
+            { ... nodes }
+        </label>;
+    }
+    return <label>
+        <i class={icon} data-click-event="item-select"/>
+        <i class={iconSelected}  data-click-event="item-deselect"/>
+        { ... nodes }
+    </label>;
+}
+
+export default class AtomRepeater extends AtomControl {
+
+    public "event-item-click"?: (e: CustomEvent) => void;
+    public "event-item-select"?: (e: CustomEvent) => void;
+    public "event-item-deselect"?: (e: CustomEvent) => void;
+
+    @BindableProperty
+    public allowMultipleSelection: boolean;
+
+    @BindableProperty
+    public selectedItems: any[];
+
+    @BindableProperty
+    public itemsPresenter: any;
+
+    @BindableProperty
+    public items: any[];
+
+    @BindableProperty
+    public visibilityFilter: (item: any) => boolean;
+
+    @BindableProperty
+    public itemRenderer: (item) => XNode;
+
+    @BindableProperty
+    public valuePath: (a) => any;
+
+    public get value() {
+        if (this.initialValue !== undefined) {
+            return this.initialValue;
+        }
+        const vp = this.valuePath ?? SameObjectValue;
+        return vp(this.selectedItem);
+    }
+
+    public set value(v) {
+        this.initialValue = v;
+        if (!this.items) {
+            return;
+        }
+        const vp = this.valuePath ?? SameObjectValue;
+        const selectedItem = this.items.find((item) => vp(item) === v);
+        this.selectedItem = selectedItem;
+        delete this.initialValue;
+    }
+
+    public get selectedItem() {
+        return this.selectedItems?.[0];
+    }
+
+    public set selectedItem(value) {
+        const si = this.selectedItems ??= [];
+        const first = si[0];
+        if (value === first) {
+            return;
+        }
+        si.length = 0;
+        si[0] = value;
+        this.updateClasses();
+        AtomBinder.refreshValue(this, "selectedItem");
+        AtomBinder.refreshValue(this, "value");
+    }
+
+    private initialValue: any;
+
+    private itemsDisposable: IDisposable;
+
+    private selectedItemsDisposable: IDisposable;
+
+    public onPropertyChanged(name: string): void {
+        switch (name) {
+            case "items":
+                this.itemsDisposable?.dispose();
+                const items = this.items;
+                const d = items?.watch(() => {
+                    this.updateItems();
+                    AtomBinder.refreshValue(this, "selectedItem");
+                    AtomBinder.refreshValue(this, "value");
+                });
+                if (d) {
+                    this.itemsDisposable = this.registerDisposable(d);
+                }
+                const iv = this.initialValue;
+                if (iv) {
+                    this.value = iv;
+                }
+                this.updateItems();
+                break;
+            case "selectedItems":
+                this.selectedItemsDisposable?.dispose();
+                const selectedItems = this.selectedItems;
+                const sd = selectedItems?.watch(() => {
+                    this.updateClasses();
+                    AtomBinder.refreshValue(this, "selectedItem");
+                    AtomBinder.refreshValue(this, "value");
+                });
+                if (sd) {
+                    this.selectedItemsDisposable = this.registerDisposable(sd);
+                }
+                this.updateClasses();
+                break;
+            case "itemRenderer":
+                this.updateItems();
+                break;
+            case "visibilityFilter":
+                this.updateVisibility();
+                break;
+        }
+    }
+
+    public forEach<T>(action: (item: T, element: HTMLElement) => void, container?: HTMLElement) {
+        container ??= this.itemsPresenter ?? this.element;
+        const items = this.items;
+        let start = container.firstElementChild as HTMLElement;
+        while (start) {
+            // tslint:disable-next-line: no-bitwise
+            const index = ~~start.dataset.itemIndex;
+            const item = items[index];
+            action(item, start);
+            start = start.nextElementSibling as HTMLElement;
+        }
+    }
+
+    public *any(fx?: (item) => boolean, itemSelector?: string,  container?: HTMLElement) {
+        container ??= this.itemsPresenter ?? this.element;
+        const items = this.items;
+        let node = container.firstElementChild as HTMLElement;
+        while (node) {
+            // tslint:disable-next-line: no-bitwise
+            const index = ~~node.dataset.itemIndex;
+            const item = items[index];
+            let element = node;
+            if (itemSelector) {
+                element = element.querySelector(itemSelector);
+            }
+            const ie = { item, element };
+            if (fx) {
+                if (fx(item)) {
+                    yield ie;
+                }
+                continue;
+            }
+            yield  ie;
+            node = node.nextElementSibling as HTMLElement;
+        }
+    }
+
+    public *all(container?: HTMLElement) {
+        container ??= this.itemsPresenter ?? this.element;
+        const items = this.items;
+        let element = container.firstElementChild as HTMLElement;
+        while (element) {
+            // tslint:disable-next-line: no-bitwise
+            const index = ~~element.dataset.itemIndex;
+            const item = items[index];
+            yield  { item, element };
+            element = element.nextElementSibling as HTMLElement;
+        }
+    }
+
+    public updateItems(container?: HTMLElement) {
+        container ??= this.itemsPresenter ?? this.element;
+        let start = container.firstElementChild;
+        while (start) {
+            const e = start as any;
+            start = start.nextElementSibling;
+            this.unbindEvent(e);
+            e.atomControl?.dispose();
+            e.remove();
+        }
+        const ir = this.itemRenderer;
+        if (!ir) {
+            return;
+        }
+        const items = this.items;
+        if (!items) {
+            return;
+        }
+
+        const vp = this.valuePath ?? ((it) => it);
+        const si = (this.selectedItems ?? []).map(vp);
+        let i = 0;
+        for (const iterator of items) {
+            const e = ir(iterator);
+            const ea = e.attributes ??= {};
+            const v = vp(iterator);
+            ea["data-item-index"] = (i++).toString();
+            ea["data-selected-item"] = si.indexOf(v) !== -1
+            ? "true"
+            : "false";
+            this.render(<div>
+                { e }
+            </div>, container, this);
+        }
+
+    }
+
+    protected updateClasses() {
+        const container = this.itemsPresenter ?? this.element;
+        const items = this.items;
+        let element = container.firstElementChild as HTMLElement;
+        const vp = this.valuePath ?? ((i) => i);
+        const si = (this.selectedItems ?? []).map(vp);
+        while (element) {
+            // tslint:disable-next-line: no-bitwise
+            const index = ~~element.dataset.itemIndex;
+            const item = items[index];
+            const v = vp(item);
+            element.dataset.selectedItem = si.indexOf(v) !== -1
+                ? "true"
+                : "false";
+            element = element.nextElementSibling as HTMLElement;
+        }
+
+    }
+
+    protected preCreate(): void {
+        this.bindEvent(this.element, "click", (e: MouseEvent) => this.onElementClick(e));
+    }
+
+    protected onElementClick(e: MouseEvent) {
+        const items = this.items;
+        let target = e.target as HTMLElement;
+        let eventName = "itemClick";
+        while (target) {
+            const itemIndex = target.dataset.itemIndex;
+            const itemClickEvent = target.dataset.clickEvent;
+            if (itemClickEvent) {
+                eventName = itemClickEvent.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+            }
+            if (typeof itemIndex !== "undefined") {
+                // tslint:disable-next-line: no-bitwise
+                const item = items[~~itemIndex];
+                if (eventName === "itemSelect" || eventName === "itemDeselect") {
+                    const si = this.selectedItems;
+                    if (si) {
+                        const index = si.indexOf(item);
+                        if (index === -1) {
+                            si.add(item);
+                        } else {
+                            si.removeAt(index);
+                        }
+                    }
+                }
+                if (item) {
+                    this.element.dispatchEvent(new CustomEvent(eventName, {
+                        detail: item,
+                        bubbles: false
+                    }));
+                }
+                return;
+            }
+            target = target.parentElement as HTMLElement;
+        }
+    }
+
+    protected updateVisibility() {
+        const container = this.itemsPresenter ?? this.element;
+        const items = this.items;
+        let element = container.firstElementChild as HTMLElement;
+        const vf = this.visibilityFilter ?? MatchTrue;
+        while (element) {
+            // tslint:disable-next-line: no-bitwise
+            const index = ~~element.dataset.itemIndex;
+            const item = items[index];
+            element.style.display = vf(item) ? "" : "none";
+            element = element.nextElementSibling as HTMLElement;
+        }
+    }
+
+}

package/src/basic/CheckBoxList.tsx

@@ -0,0 +1,56 @@
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+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 CSS from "@web-atoms/core/dist/web/styles/CSS";
+import AtomRepeater from "./AtomRepeater";
+
+CSS(StyleRule()
+    .flexLayout({ inline: true, justifyContent: "flex-start"})
+    .flexFlow("wrap"),
+"div[data-checkbox-list=checkbox-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.far")
+    .displayNone("[data-selected-item=false] > i.fas")
+, "div[data-item-type=checkbox]");
+
+export default class CheckBoxList extends AtomRepeater {
+
+    @BindableProperty
+    public labelPath;
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.element.dataset.checkboxList = "checkbox-list";
+        this.bindEvent(this.element, "itemClick", (e: CustomEvent) => {
+            const s = this.selectedItems;
+            if (!s) {
+                return;
+            }
+            const item = e.detail;
+            if (s.indexOf(item) === -1) {
+                s.add(item);
+                this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
+            } else {
+                this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: item, bubbles: false }));
+                s.remove(item);
+            }
+        });
+
+        this.itemRenderer = (item) => <div data-item-type="checkbox">
+            <i class="far fa-square"/>
+            <i class="fas fa-check-square"/>
+            <span text={item.label}/>
+        </div>;
+    }
+
+}

package/src/basic/ComboBox.tsx

@@ -0,0 +1,56 @@
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater from "./AtomRepeater";
+
+export default class ComboBox extends AtomRepeater {
+
+    @BindableProperty
+    public labelPath: any;
+
+    private isChanging = false;
+
+    constructor(app, e) {
+        super(app, e ?? document.createElement("select"));
+    }
+
+    public updateItems(container?: HTMLElement): void {
+        super.updateItems(container);
+        if (this.isChanging) {
+            return;
+        }
+        const selectedItems = this.selectedItems;
+        if (!selectedItems) {
+            return;
+        }
+        if (selectedItems.length === 0) {
+            return;
+        }
+        this.isChanging = true;
+        const first = selectedItems[0];
+        (this.element as HTMLSelectElement).selectedIndex = this.items.indexOf(first);
+        this.isChanging = false;
+    }
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.labelPath = (item) => item?.label ?? item.toString();
+        this.valuePath = (item) => item?.value ?? item.toString();
+        this.itemRenderer = (item) => <option>{this.labelPath(item)}</option>;
+
+        this.bindEvent(this.element, "change", () => this.changeSelection());
+    }
+
+    protected changeSelection(): void {
+        if (this.isChanging) {
+            return;
+        }
+        this.isChanging = true;
+        this.selectedItems?.clear();
+        const index = (this.element as HTMLSelectElement).selectedIndex;
+        if (index !== -1) {
+            this.selectedItems?.add(this.items[index]);
+        }
+        this.isChanging = false;
+    }
+
+}

package/src/basic/DropDown.tsx

@@ -0,0 +1,81 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+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 { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import AtomRepeater, { askSuggestion, Match, MatchCaseInsensitive } from "./AtomRepeater";
+
+CSS(StyleRule()
+    .flexLayout({ inline: true, justifyContent: "stretch" as any})
+, "div[data-drop-down=drop-down]");
+
+export default class DropDown extends AtomRepeater {
+
+    @BindableProperty
+    public prompt: string;
+
+    @BindableProperty
+    public labelPath: (item) => string;
+
+    @BindableProperty
+    public match: Match<any>;
+
+    @BindableProperty
+    public suggestionRenderer: (item) => XNode;
+
+    public updateItems(container?: HTMLElement): void {
+        // don't do anything...
+    }
+
+    public onPropertyChanged(name: string): void {
+        super.onPropertyChanged(name);
+        switch (name) {
+            case "labelPath":
+                this.itemRenderer = (item) => <div text={this.labelPath(item)}/>;
+                break;
+            case "prompt":
+                this.updateClasses();
+                break;
+        }
+    }
+
+    protected preCreate(): void {
+        // super.preCreate();
+        this.prompt = "Select";
+        this.bindEvent(this.element, "click", () => this.openPopup());
+        this.valuePath = (item) => item?.value ?? item;
+        this.labelPath = (item) => item?.label ?? item;
+        this.itemRenderer = (item) => <div text={this.labelPath(item)}/>;
+        this.element.dataset.dropDown = "drop-down";
+    }
+
+    protected async openPopup() {
+        const selected = await askSuggestion(
+            this.items,
+            this.suggestionRenderer ?? this.itemRenderer,
+            this.match ?? MatchCaseInsensitive(this.labelPath));
+        this.selectedItem = selected;
+    }
+
+    protected updateClasses(): void {
+        this.removeAllChildren(this.element);
+        const ir = this.itemRenderer;
+        if (!ir) {
+            return;
+        }
+        if (!this.selectedItem) {
+            this.render(<div>
+                <div text={this.prompt}/>
+                <i class="fad fa-caret-circle-down"/>
+            </div>);
+            return;
+        }
+        this.render(<div>
+            { ir(this.selectedItem) }
+            <i class="fad fa-caret-circle-down"/>
+        </div>);
+    }
+
+}

package/src/basic/FormField.tsx

@@ -39,6 +39,7 @@ const css = CSS(StyleRule()
         )
     )
     .child(StyleRule(".label")
+        .display("flex")
         .child(StyleRule(".true")
             .visibility("visible")
             .color(Colors.red)
@@ -48,7 +49,8 @@ const css = CSS(StyleRule()
         )
         .child(StyleRule("i")
             .cursor("pointer")
-            .marginLeft(5)
+            .marginLeft("auto")
+            .color(Colors.lightGreen)
         )
     )
 , "div[data-wa-form-field=wa-form-field]");
@@ -58,7 +60,7 @@ export default function FormField(
         label,
         required,
         error,
-        helpIcon = "fad fa-question-circle",
+        helpIcon = "fas fa-question-circle",
         help,
         helpEventClick,
         helpTitle,

package/src/basic/RadioButtonList.tsx

@@ -0,0 +1,56 @@
+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 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 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]");
+
+export default class RadioButtonList extends AtomRepeater {
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.valuePath = (item) => item?.value ?? item;
+        this.bindEvent(this.element, "itemClick", (e: CustomEvent) => {
+            const s = this.selectedItems;
+            if (!s) {
+                return;
+            }
+            const item = e.detail;
+            const old = this.selectedItem;
+            if (old) {
+                this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: old, bubbles: false }));
+            }
+            this.selectedItem = item;
+            this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
+        });
+        this.element.dataset.radioButtonList = "radio-button-list";
+        this.itemRenderer = (item) => <div
+            data-item-type="radio">
+            <i class="far fa-dot-circle"/>
+            <i class="far fa-circle"/>
+            <span text={item.label}/>
+        </div>;
+
+    }
+
+}