@social-mail/social-mail-hosted-web 1.0.2

package/node_modules/@web-atoms/web-controls/src/basic/Switch.tsx

@@ -0,0 +1,29 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import IElement from "./IElement";
+
+import "./styles/switch-style";
+
+/**
+ * Original source = https://www.htmllion.com/css3-toggle-switch-button.html
+ */
+
+
+export interface ISwitch extends IElement {
+	checked;
+	onLabel?: string;
+	offLabel?: string;
+}
+
+export default function Switch({
+	checked,
+	onLabel,
+	offLabel,
+	... a
+}: ISwitch) {
+
+    return <label data-ui-switch="ui-switch" { ... a} >
+	    <input class="switch-input" type="checkbox" checked={checked} />
+	    <span class="switch-label" data-on={onLabel ?? "On"} data-off={offLabel ?? "Off"}></span>
+	    <span class="switch-handle"></span>
+    </label>;
+}

package/node_modules/@web-atoms/web-controls/src/basic/TableRepeater.tsx

@@ -0,0 +1,42 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater from "./AtomRepeater";
+
+export default class TableRepeater extends AtomRepeater {
+
+    constructor(app, e = document.createElement("table")) {
+        super(app, e);
+    }
+
+    public onPropertyChanged(name: keyof TableRepeater): void {
+        super.onPropertyChanged(name);
+        switch (name) {
+            case "header":
+            case "headerRenderer":
+                this.updateHeaderFooter("header", this.headerPresenter, this.header, this.headerRenderer);
+                break;
+            case "footer":
+            case "footerRenderer":
+                this.updateHeaderFooter("footer", this.footerPresenter, this.footer, this.footerRenderer);
+                break;
+        }
+    }
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.preRender();
+        this.onPropertyChanged("header");
+        this.onPropertyChanged("footer");
+    }
+
+    protected preRender() {
+        this.element.dataset.tableRepeater = "table-repeater";
+        this.render(<table>
+            <thead></thead>
+            <tbody></tbody>
+            <tfoot></tfoot>
+        </table>);
+        this.itemsPresenter = this.element.querySelector("tbody");
+        this.headerPresenter = this.element.firstElementChild as HTMLElement;
+        this.footerPresenter = this.element.lastElementChild as HTMLElement;
+    }
+}

package/node_modules/@web-atoms/web-controls/src/basic/TimeEditor.tsx

@@ -0,0 +1,97 @@
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
+import Select from "./Select";
+import Bind from "@web-atoms/core/dist/core/Bind";
+
+import "./styles/time-editor-style";
+
+function hours() {
+    return [
+        { label: "01", value: 1 },
+        { label: "02", value: 2 },
+        { label: "03", value: 3 },
+        { label: "04", value: 4 },
+        { label: "05", value: 5 },
+        { label: "06", value: 6 },
+        { label: "07", value: 7 },
+        { label: "08", value: 8 },
+        { label: "09", value: 9 },
+        { label: "10", value: 10 },
+        { label: "11", value: 11 },
+        { label: "12", value: 12 },
+    ];
+}
+
+function minutes() {
+    const items = [];
+    for (let index = 0; index < 10; index++) {
+        items.push({ label: "0" + index, value: index });
+    }
+    for (let index = 10; index < 60; index++) {
+        items.push({ label: index.toString(), value: index });
+    }
+    return items;
+}
+
+export default class TimeEditor extends AtomControl {
+
+    // private time: TimeSpan;
+
+    public get time(): TimeSpan {
+        let t = new TimeSpan(0, this.hour, this.minute);
+        if (this.isPM) {
+            t = t.add(TimeSpan.fromHours(12));
+        }
+        return t;
+    }
+
+    public set time(v: TimeSpan) {
+        if(!v) {
+            v = TimeSpan.fromSeconds(0);
+        }
+        let h = v.hours;
+        if (h > 12) {
+            h -= 12;
+            this.isPM = true;
+        }
+        this.hour = h;
+        this.minute = v.minutes;
+        AtomBinder.refreshValue(this, "time");
+    }
+
+    public hour: number;
+
+    public minute: number;
+
+    public isPM: boolean;
+    
+    protected create(): void {
+        this.isPM = false;
+        this.hour = 12;
+        this.minute = 0;
+        this.render(<div
+            data-time-editor="time-editor"
+            event-change={() => setTimeout(() => AtomBinder.refreshValue(this, "time"), 1)}>
+            <Select
+                data-element="hour"
+                items={hours()}
+                value={Bind.twoWays(() => this.hour)}/>
+            <Select
+                data-element="minute" items={minutes()}
+                value={Bind.twoWays(() => this.minute)}/>
+            <button
+                event-click={() => (this.isPM = false, AtomBinder.refreshValue(this, "time"))}
+                data-selected={Bind.oneWay(() => !this.isPM)}
+                data-element="am"
+                text="AM"/>
+            <button
+                event-click={() => (this.isPM = true, AtomBinder.refreshValue(this, "time"))}
+                data-selected={Bind.oneWay(() => this.isPM)}
+                data-element="pm"
+                text="PM"/>
+        </div>);
+    }
+
+}

package/node_modules/@web-atoms/web-controls/src/basic/TitleEditor.tsx

@@ -0,0 +1,152 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import IElement from "./IElement";
+
+import "./styles/title-editor-style";
+
+export type Capitalize = "none" | "off" | "on" | "sentences" | "words" | "characters";
+
+export interface ITitleEditor extends IElement {
+    value?: any;
+    type?: any;
+    placeholder?: any;
+    /**
+     * Off - turn off,
+     * On - Sentence capitalization
+     * Word - Capitalize first character of every word
+     * Characters - Capitalize everything
+     */
+    capitalize?: Capitalize;
+
+    /**
+     * Hint displayed on icon
+     */
+    capitalizationTitle?: string;
+}
+
+const paste = (e: ClipboardEvent) => {
+    const input = e.target as HTMLInputElement;
+    const capitalize = input.autocapitalize as Capitalize;
+    if (!capitalize || capitalize === "off" || capitalize === "none") {
+        return;
+    }
+    setTimeout(() => {
+        const start = input.selectionStart;
+        const end = input.selectionEnd;
+        formatText(input, capitalize);
+        input.setSelectionRange(start, end);
+    }, 1);
+};
+
+const formatText = (input: HTMLInputElement, capitalize: Capitalize, all = true) => {
+    let value = input.value;
+    if (!value) {
+        return;
+    }
+    switch (capitalize) {
+        case "on":
+        case "sentences":
+            if (value.length === 1) {
+                value = value.toLocaleUpperCase();
+            }
+            break;
+        case "words":
+            if (all) {
+                value = value.replace(/(\S+)/g, (s) => s.substring(0, 1).toLocaleUpperCase() + s.substring(1));
+            } else {
+                value = value.replace(/(\S+)$/g, (s) => s.substring(0, 1).toLocaleUpperCase() + s.substring(1));
+            }
+            break;
+        case "characters":
+            value = value.toLocaleUpperCase();
+            break;
+    }
+    input.value = value;
+};
+
+const capitalizeText = /android|iPhone|iOS/i.test(navigator.userAgent)
+    ? () => undefined
+    : (e: InputEvent) => {
+    const input = e.target as HTMLInputElement;
+    const capitalize = input.autocapitalize as Capitalize;
+    if (!capitalize || capitalize === "off" || capitalize === "none") {
+        return;
+    }
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    formatText(input, capitalize, false);
+    input.setSelectionRange(start, end);
+};
+
+const toText = (capitalize: Capitalize) => {
+    switch (capitalize) {
+        case "off":
+        case "none":
+            return "Caps Off";
+        case "characters":
+            return "All Caps";
+        case "on":
+        case "sentences":
+            return "Sentence";
+        case "words":
+            return "Title Case";
+    }
+    return "";
+};
+
+const  changeCase = (e: MouseEvent) => {
+    let element = e.target as HTMLElement;
+    if (element.tagName === "SPAN") {
+        element = element.previousElementSibling as HTMLElement;
+    }
+    const input = element.previousElementSibling as HTMLInputElement;
+    const span = element.nextElementSibling;
+    let capitalize = input.autocapitalize as Capitalize;
+    switch (capitalize) {
+        case "sentences":
+            capitalize = "words";
+            break;
+        case "words":
+            capitalize = "characters";
+            break;
+        case "characters":
+            capitalize = "off";
+            break;
+        default:
+            capitalize = "sentences";
+            break;
+    }
+    span.textContent = toText(capitalize);
+    input.autocapitalize = capitalize;
+    // formatText(input, capitalize);
+};
+
+export default function TitleEditor({
+    value,
+    type,
+    placeholder,
+    capitalize = "on",
+    capitalizationTitle = "Capitalization",
+    ... a
+}: ITitleEditor) {
+    return <div
+        data-title-editor="title-editor" { ... a}>
+        <input
+            autocapitalize={capitalize}
+            type={type}
+            placeholder={placeholder}
+            value={value}
+            event-input={capitalizeText}
+            event-paste={paste}
+            />
+        <i
+            data-element="icon"
+            class="fas fa-font-case"
+            event-click={changeCase}
+            title={capitalizationTitle}/>
+        <span
+            data-element="text"
+            text={toText(capitalize)}
+            event-click={changeCase}
+            title={capitalizationTitle}/>
+    </div>;
+}

package/node_modules/@web-atoms/web-controls/src/basic/ToggleButtonBar.tsx

@@ -0,0 +1,30 @@
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater from "./AtomRepeater";
+
+import "./styles/toggle-button-bar-style";
+
+export default class ToggleButtonBar extends AtomRepeater {
+
+    @BindableProperty
+    public labelPath;
+
+    public onPropertyChanged(name: string): void {
+        super.onPropertyChanged(name);
+        if (name === "labelPath") {
+            this.updateItems();
+            return;
+        }
+    }
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.element.dataset.buttonBar = "button-bar";
+        this.bindEvent(this.element, "itemClick", (e: CustomEvent) => {
+            this.selectedItem = e.detail;
+        });
+        this.valuePath = (item) => item?.value ?? item;
+        this.labelPath = (item) => item?.label ?? item;
+        this.itemRenderer = (item) => <div data-item-type="toggle-button" text={this.labelPath(item)}/>;
+    }
+}

package/node_modules/@web-atoms/web-controls/src/basic/Tooltip.tsx

@@ -0,0 +1,147 @@
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { getParentRepeaterItem } from "./AtomRepeater";
+import InlinePopup from "./InlinePopup";
+
+import "./styles/tooltip-style";
+
+const tooltips = new Map<HTMLElement, [{control: any, tooltip: CancelToken}, typeof InlinePopup]>();
+
+ElementValueSetters.tooltip = (control: AtomControl, e: HTMLElement, value: any) => {
+    tooltips.set(e, [{ control, tooltip: undefined }, value]);
+    control.registerDisposable({
+        dispose: () => {
+            tooltips.delete(e);
+        }
+    });
+};
+
+document.body.addEventListener("pointerenter", (ev) => Tooltip.showTooltip(ev.target as HTMLElement), true);
+
+document.body.addEventListener("pointerleave", (ev) => {
+    const start = ev.target as HTMLElement;
+    setTimeout(() => {
+        const item = tooltips.get(start);
+        if (!item) {
+            return;
+        }
+        const [host] = item;
+        if (host.tooltip) {
+            host.tooltip.cancel();
+            host.tooltip = undefined;
+        }
+    }, 250);
+}, true);
+
+export default class Tooltip extends InlinePopup {
+
+    public static showTooltip(start: HTMLElement) {
+        while (start) {
+            const item = tooltips.get(start);
+            if (!item) {
+                start = start.parentElement;
+                continue;
+            }
+            const [host, node] = item;
+            if (!host.tooltip) {
+                host.tooltip = new CancelToken();
+                const reset = () => delete host.tooltip;
+
+                // find associated data/item
+                let data = getParentRepeaterItem(start);
+                if (data) {
+                    data = data[2];
+                }
+
+                class TooltipControl extends node {
+
+                    private enterEventDisposable;
+
+                    protected preCreate(): void {
+                        this.element._logicalParent = start;
+                        if (data) {
+                            this.data = data;
+                        }
+                        const { element } = this;
+                        // tooltips.set(element, [{ tooltip: this, control: null }, node]);
+                        this.enterEventDisposable = this.bindEvent(element, "mouseenter", () => {
+                            setTimeout(() => {
+                                tooltips.set(element, [{ tooltip: host.tooltip, control: null}, null]);
+                                delete host.tooltip;
+                                this.enterEventDisposable.dispose();
+                            }, 10);
+                        });
+                        this.registerDisposable({
+                            dispose: () => {
+                                tooltips.delete(element);
+                            }
+                        });
+                    }
+                }
+
+                TooltipControl.show(
+                    start,
+                    XNode.create(TooltipControl as any, {}),
+                    {
+                        cancelToken: host.tooltip,
+                        alignment: "topRight"
+                    }
+                    ).then(reset, reset) ;
+            }
+            break;
+        }
+
+    }
+
+    // public static show(start: HTMLElement) {
+    //     while (start) {
+    //         const item = tooltips.get(start);
+    //         if (!item) {
+    //             start = start.parentElement;
+    //             continue;
+    //         }
+    //         const [host, node] = item;
+    //         if (!host.tooltip) {
+
+    //             // find associated data/item
+    //             let data = getParentRepeaterItem(start);
+    //             if (data) {
+    //                 data = data[2];
+    //             }
+
+    //             class TooltipControl extends node {
+
+    //                 private enterEventDisposable;
+
+    //                 protected preCreate(): void {
+    //                     this.element._logicalParent = start;
+    //                     if (data) {
+    //                         this.data = data;
+    //                     }
+    //                     const { element } = this;
+    //                     // tooltips.set(element, [{ tooltip: this, control: null }, node]);
+    //                     this.enterEventDisposable = this.bindEvent(element, "mouseenter", () => {
+    //                         setTimeout(() => {
+    //                             tooltips.set(element, [{ tooltip: host.tooltip, control: null}, null]);
+    //                             delete host.tooltip;
+    //                             this.enterEventDisposable.dispose();
+    //                         }, 10);
+    //                     });
+    //                     this.registerDisposable({
+    //                         dispose: () => {
+    //                             tooltips.delete(element);
+    //                         }
+    //                     });
+    //                 }
+    //             }
+    //             const t = new TooltipControl(host.control.app);
+    //             const  alignment: any = start.dataset.tooltipAlignment ?? "right";
+    //             host.tooltip = PopupService.show(start, t.element, {
+    //                 alignment
+    //             });
+    //         }
+    //         break;
+    //     }
+    // }
+}