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

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

@@ -0,0 +1,69 @@
+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 = document.createElement("select")) {
+        super(app, e);
+        this.selectedItems = [];
+    }
+
+    public updateItems(container?: HTMLElement): void {
+        if (this.isChanging) {
+            return;
+        }
+        super.updateItems(container);
+        const selectedItems = this.selectedItems;
+        if (!selectedItems) {
+            return;
+        }
+        if (selectedItems.length === 0) {
+            return;
+        }
+        this.isChanging = true;
+        // we need to find item by value path
+        const value = this.value;
+        const valuePath = this.valuePath ?? ((item) => item);
+        (this.element as HTMLSelectElement).selectedIndex = this.items?.findIndex((v) => valuePath(v) == value);
+        this.isChanging = false;
+    }
+
+    protected updateClasses(): void {
+        if (this.isChanging) {
+            return;
+        }
+        super.updateClasses();
+        this.updateItems();
+    }
+
+    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;
+        const index = (this.element as HTMLSelectElement).selectedIndex;
+        if (index !== -1) {
+            const si = this.selectedItems;
+            if (si) {
+                si.set(0, this.items[index]);
+            }
+        }
+        this.isChanging = false;
+    }
+
+}

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

@@ -0,0 +1,400 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater, { getParentRepeaterItem, SelectorCheckBox } from "./AtomRepeater";
+import { EditableInput, getPropertyInfo, IPropertyInfo } from "./Editable";
+import TableRepeater from "./TableRepeater";
+
+import "./styles/data-grid-style";
+
+const cellEventName = Symbol("cell-event-name");
+const headerEventName = Symbol("header-event-name");
+const footerEventName = Symbol("footer-event-name");
+
+const fromHyphenToCamel = (input: string) => input.replace(/-([a-z])/ig, (g) => g[1].toUpperCase());
+
+const toEventName = (name: string) => {
+    const r = fromHyphenToCamel(name.replace(/\s+/, "-"));
+    return r[0].toLowerCase() + r.substring(1);
+};
+
+const getCellEventName = (d: IDataGridColumn) => {
+    let name = d[cellEventName];
+    if (name !== void 0) {
+        return name;
+    }
+    name = toEventName(d.cellClickEvent ?? `cell-${d.header}-click`);
+    d[cellEventName] = name;
+    return name;
+};
+
+const getHeaderEventName = (d: IDataGridColumn) => {
+    let name = d[headerEventName];
+    if (name !== void 0) {
+        return name;
+    }
+    name = toEventName(d.headerClickEvent ?? `header-${d.header}-click`);
+    d[headerEventName] = name;
+    return name;
+};
+
+const getFooterEventName = (d: IDataGridColumn) => {
+    let name = d[footerEventName];
+    if (name !== void 0) {
+        return name;
+    }
+    name = toEventName(d.footerClickEvent ?? `footer-${d.header}-click`);
+    d[footerEventName] = name;
+    return name;
+};
+
+export interface IDataGridColumnBase {
+    header: string;
+    headerSort?: any;
+    headerSortDescending?: any;
+    headerSortDefault?: any;
+    headerClickEvent?: string;
+
+    cellClickEvent?: string;
+
+    footerClickEvent?: string;
+
+    headerRenderer?: (item) => XNode;
+
+    footerRenderer?: (item) => XNode;
+
+    headerClickHandler?: (e: CustomEvent) => void;
+    cellClickHandler?: (e: CustomEvent) => void;
+    footerClickHandler?: (e: CustomEvent) => void;
+
+    /**
+     * Default is true
+     */
+    ellipsis?: boolean;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+
+}
+
+export interface IDataGridColumnWithLabel extends IDataGridColumnBase {
+    label: string;
+    labelPath?: never;
+    cellRenderer?: never;
+}
+
+export interface IDataGridColumnWithLabelPath extends IDataGridColumnBase {
+    labelPath: (item) => string;
+    label?: never;
+    cellRenderer?: never;
+}
+
+export interface IDataGridColumnWithCellRenderer extends IDataGridColumnBase {
+    cellRenderer: (item) => XNode;
+    label?: never;
+    labelPath?: never;
+}
+
+export type IDataGridColumn = IDataGridColumnWithLabel | IDataGridColumnWithLabelPath | IDataGridColumnWithCellRenderer;
+
+// export interface IDataGridColumn {
+
+//     header: string;
+
+//     headerClickEvent?: string;
+
+//     cellClickEvent?: string;
+
+//     footerClickEvent?: string;
+
+//     cellRenderer: (item) => XNode;
+
+//     headerRenderer?: (item) => XNode;
+
+//     footerRenderer?: (item) => XNode;
+
+//     headerClickHandler?: (e: CustomEvent) => void;
+//     cellClickHandler?: (e: CustomEvent) => void;
+//     footerClickHandler?: (e: CustomEvent) => void;
+
+// }
+
+
+export const SelectAllColumn: IDataGridColumn = {
+    header: "Select All",
+    headerRenderer: () => <th>
+        <input
+            type="checkbox"
+            checked={Bind.oneTime((x: any) => x.allSelected)}/>
+    </th>,
+    headerClickHandler: (e) => {
+        const s = e.detail.repeater as AtomRepeater;
+        const items = s.items;
+        if (!(items)) {
+            return;
+        }
+        const selectedItems = s.selectedItems ??= [];
+        if (s.allSelected) {
+            selectedItems.clear();
+            return;
+        }
+        selectedItems.length = 0;
+        selectedItems.push(... items);
+        selectedItems.refresh();
+    },
+    cellRenderer: () => <SelectorCheckBox/>
+};
+
+export interface IEditorColumn {
+    header: string;
+    changeEvents?: string[];
+    editorValuePath?: (editor) => any;
+    propertyPath: string[] | string | IPropertyInfo ;
+}
+
+export function InputColumn({
+    type = "text",
+    header,
+    propertyPath
+}: IEditorColumn & { type?: string}): IDataGridColumn {
+    const property = getPropertyInfo(propertyPath);
+    return ({
+        header,
+        cellRenderer: (item) => <EditableInput
+            propertyPath={propertyPath}
+            value={property.getter(item)}
+            type={type}/>,
+    });
+}
+
+export default class DataGrid extends TableRepeater {
+
+    @BindableProperty
+    public columns: IDataGridColumn[];
+
+    @BindableProperty
+    public orderBy: any;
+
+    private orderBySet: boolean;
+
+    constructor(app, e = document.createElement("table")) {
+        super(app, e);
+    }
+
+    public onPropertyChanged(name: keyof DataGrid): void {
+        super.onPropertyChanged(name as any);
+        if (name === "columns") {
+            super.onPropertyChanged("header");
+            super.onPropertyChanged("footer");
+            super.onPropertyChanged("items");
+        }
+        if (name === "orderBy") {
+            if (!this.orderBySet) {
+                this.onPropertyChanged("header");
+            }
+            this.orderBySet = true;
+        }
+    }
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.header = true;
+        this.footer = null;
+        this.element.dataset.dataGrid = "data-grid";
+        this.headerRenderer = (item) => <tr>
+            { ... this.columns?.map?.((x) => {
+                if (x.headerRenderer === void 0) {
+                    x.headerRenderer = (_) => {
+                        let order = this.orderBy;
+                        if (order !== void 0) {
+                            if (order === x.headerSort) {
+                                order = true;
+                            } else if (order === x.headerSortDescending) {
+                                order = false;
+                            }
+                        }
+                        return <th>
+                        <span data-recreate="true" text={x.header} title={x.header}/>
+                            { typeof order === "boolean" &&
+                                (order
+                                    ? <i data-sort="up" class="fa-solid fa-arrow-up-short-wide"/>
+                                    : <i data-sort="down" class="fa-solid fa-arrow-down-wide-short"/>) }
+                        </th>;
+                    };
+                }
+                const node = x.headerRenderer(item);
+                const na = node.attributes ??= {};
+                na["data-click-event"] ??= getHeaderEventName(x);
+                if (x.width !== void 0) {
+                    na["style-width"] ??= x.width;
+                } else {
+                    if (x.maxWidth !== void 0) {
+                        na["style-max-width"] ??= x.maxWidth;
+                    }
+                    if (x.minWidth !== void 0) {
+                        na["style-min-width"] ??= x.minWidth;
+                    }
+                }
+                return node;
+            }) ?? []}
+        </tr>;
+        this.itemRenderer = (item) => <tr>
+            { ... this.columns?.map?.((x) => {
+                x.ellipsis ??= true;
+                if (x.cellRenderer === void 0) {
+                    x.labelPath ??= (i) => i[x.label];
+                    if (x.ellipsis) {
+                        x.cellRenderer = (i) => <td text={x.labelPath(i)}/>;
+                    } else {
+                        x.cellRenderer = (i) => <td text={x.labelPath(i)} title={x.labelPath(i)}/>;
+                    }
+                }
+                const node = x.cellRenderer?.(item);
+                const na = node.attributes ??= {};
+                if (x.ellipsis) {
+                    na["data-ellipsis"] = "true";
+                }
+                na["data-click-event"] ??= getCellEventName(x);
+                if (x.width !== void 0) {
+                    na["style-width"] ??= x.width;
+                } else {
+                    if (x.maxWidth !== void 0) {
+                        na["style-max-width"] ??= x.maxWidth;
+                    }
+                    if (x.minWidth !== void 0) {
+                        na["style-min-width"] ??= x.minWidth;
+                    }
+                }
+                return node;
+            }) ?? []}
+        </tr>;
+        this.footerRenderer = (item) => <tr>
+            { ... this.columns?.map?.((x) => {
+                const node = x.footerRenderer?.(item);
+                if (node === void 0) {
+                    return node;
+                }
+                const na = node.attributes ??= {};
+                if (na["data-click-event"] === void 0) {
+                    na["data-click-event"] = getFooterEventName(x);
+                }
+                return node;
+            }) ?? [] }
+        </tr>;
+    }
+
+    protected dispatchHeaderFooterEvent(eventName: any, type: any, recreate: boolean, originalTarget: any): void {
+        let detail = this[type];
+
+        const column = this.columns.find((x) => getHeaderEventName(x) === eventName
+            || getFooterEventName(x) === eventName);
+
+        let order = this.orderBy;
+        const originalOrder = this.orderBy;
+
+        const isHeader = type === "header";
+        const setOrderBy = isHeader && column.headerSort !== void 0;
+
+        if (isHeader) {
+            if (setOrderBy) {
+                if (order === column.headerSortDescending) {
+                    order = column.headerSort;
+                } else if (order === column.headerSort) {
+                    order = column.headerSortDescending;
+                } else {
+                    order = column.headerSortDefault ?? column.headerSort;
+                }
+            }
+            detail = {
+                repeater: this,
+                detail,
+                type,
+                order
+            };
+        }
+        const ce = new CustomEvent(eventName ?? `${type}Click`, {
+            detail,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+        });
+        originalTarget.dispatchEvent(ce);
+        if (ce.defaultPrevented) {
+            return;
+        }
+
+        this.invokeHandler(isHeader ? column.headerClickHandler : column.footerClickHandler, ce);
+
+        if (ce.defaultPrevented) {
+            return;
+        }
+        if (setOrderBy && this.orderBy === originalOrder) {
+            this.orderBy = order;
+            (ce as any).executed = true;
+        }
+        if ((ce as any).executed) {
+            this.onPropertyChanged(type);
+        }
+    }
+
+    protected dispatchItemEvent(eventName: any, item: any, recreate: any, originalTarget: any): void {
+        const ce = new CustomEvent(eventName ?? "itemClick", {
+            detail: item,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+        });
+        originalTarget.dispatchEvent(ce);
+        if (ce.defaultPrevented) {
+            return;
+        }
+        for (const iterator of this.columns) {
+            if (getCellEventName(iterator) === eventName) {
+                this.invokeHandler(iterator.cellClickHandler, ce);
+                break;
+            }
+        }
+        if (ce.defaultPrevented) {
+            return;
+        }
+        if (eventName === "itemSelect" || eventName === "itemDeselect") {
+            const si = this.selectedItems ??= [];
+            if (si) {
+                const index = si.indexOf(item);
+                if (index === -1) {
+                    if (this.allowMultipleSelection) {
+                        si.add(item);
+                    } else {
+                        si.set(0, item);
+                    }
+                } else {
+                    si.removeAt(index);
+                }
+            }
+        }
+        if (recreate && (ce as any).executed) {
+            this.refreshItem(item, (ce as any).promise);
+        }
+    }
+
+    private invokeHandler(h, e) {
+        if (!h) {
+            return;
+        }
+        const p = h(e);
+        e.executed = true;
+        if (p && p.then) {
+            if (e.promise) {
+                e.promise = Promise.all([e.promise, p]);
+            } else {
+                e.promise = p;
+            }
+            p?.catch((error) => {
+                if (CancelToken.isCancelled(error)) {
+                    return;
+                }
+                // tslint:disable-next-line: no-console
+                console.error(error);
+            });
+        }
+    }
+}

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

@@ -0,0 +1,190 @@
+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 { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
+import Calendar, { ICalendarDate } from "./Calendar";
+import InlinePopup, { InlinePopupButton } from "./InlinePopup";
+import TimeEditor from "./TimeEditor";
+import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
+
+import "./styles/date-field-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 DateField extends AtomControl {
+
+    public enableTime: boolean;
+
+    @BindableProperty
+    public value: Date;
+
+    @BindableProperty
+    public enableFunc: (d: ICalendarDate) => boolean;
+
+    @BindableProperty
+    public format: (d: Date, displayTime?: boolean) => string;
+
+    @BindableProperty
+    public yearStart: any;
+
+    @BindableProperty
+    public yearEnd: any;
+
+    @BindableProperty
+    public year: number;
+
+    /**
+     * Default hour in selecting time
+     */
+    @BindableProperty
+    public hour: number;
+
+    /**
+     * Default minute in selecting time
+     */
+    @BindableProperty
+    public minute: number;
+
+    @BindableProperty
+    public prompt: string;
+
+    constructor(app, e = document.createElement("button")) {
+        super(app, e);
+    }
+
+    protected preCreate(): void {
+        this.prompt = "Select";
+        this.enableTime = false;
+        this.value = null;
+        this.format = (d, showTime) => showTime
+            ? d?.toLocaleString(
+                navigator.language, {
+                    month: "short",
+                    year: "numeric",
+                    day: "numeric",
+                    weekday: "short",
+                    hour12: true,
+                    hour: "numeric",
+                    minute: "2-digit"
+                })
+            : d?.toLocaleDateString(
+                navigator.language, {
+                    month: "short",
+                    year: "numeric",
+                    day: "numeric",
+                    weekday: "short"
+                });
+
+        const owner = this;
+        class CalendarPopup extends InlinePopup {
+
+            public owner: DateField;
+
+            public type;
+
+            public time: TimeSpan;
+
+            protected create(): void {
+                this.owner = owner;
+                this.type = "AM";
+                const now = DateTime.from(owner.value ?? DateTime.today.addHours(owner.hour || 0).addMinutes(owner.minute || 0));
+                this.time = new TimeSpan(0, now.hour, now.minute);
+                super.create();
+                const yearStart = typeof this.owner.yearStart === "number" ? this.owner.yearStart : -10;
+                const yearEnd = typeof this.owner.yearEnd === "number" ? this.owner.yearEnd : 10;
+                const year = typeof this.owner.year === "number" ? this.owner.year : now.year;
+                this.render(<div class="calendar-popup">
+                    <Calendar
+                        yearStart={yearStart}
+                        yearEnd={yearEnd}
+                        year={year}
+                        event-item-select={Bind.event((s, e) => {
+                            if (e.detail.disabled) {
+                                return;
+                            }
+                            this.save(e.detail.value);
+                        })}
+                        enableFunc={Bind.oneTime(() => this.owner.enableFunc)}
+                        value={Bind.oneWay(() => this.owner.value)}
+                    />
+                    { this.owner.enableTime && <TimeEditor
+                        time={Bind.twoWays(() => this.time)}
+                    /> }
+                    <button
+                        class="clear"
+                        text="Clear"
+                        event-click={(e: Event) => {
+                            e.preventDefault();
+                            e.stopImmediatePropagation();
+                            e.stopPropagation();
+                            this.save();
+                        }}/>
+                    <button
+                        class="today"
+                        text="Today"
+                        event-click={(e: Event) => {
+                            e.preventDefault();
+                            e.stopImmediatePropagation();
+                            e.stopPropagation();
+                            this.save(DateTime.today.asJSDate);
+                        }}/>
+                </div>);
+
+                this.runAfterInit(() => {
+                    if (this.element) {
+                        (this.element as HTMLElement).scrollIntoView();
+                    }
+                });
+            }
+
+            private save(d?: Date) {
+                if (!d) {
+                    this.owner.value = d;
+                    this.close(d);
+                    return;
+                }
+                let date = DateTime.from((d));
+                if (this.owner.enableTime) {
+                    date = date.add(this.time);
+                }
+                this.owner.value = date.asJSDate;
+                this.close(date);
+            }
+        }
+
+        this.render(<InlinePopupButton
+            data-layout="flex"
+            data-date-field="date-field"
+            text={Bind.oneWay(() => this.format?.(this.value, this.enableTime) || this.prompt)}>
+            <CalendarPopup/>
+        </InlinePopupButton>);
+    }
+
+}