@web-atoms/web-controls 2.6.2 → 2.6.4

package/src/auto-complete/AutoCompleteBox.tsx

@@ -1,363 +0,0 @@
-import { Atom } from "@web-atoms/core/dist/Atom.js";
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
-import { CancelToken, IClassOf } from "@web-atoms/core/dist/core/types.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import { NavigationService } from "@web-atoms/core/dist/services/NavigationService.js";
-import ReferenceService from "@web-atoms/core/dist/services/ReferenceService.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import { AtomTemplateControl } from "@web-atoms/core/dist/web/controls/AtomTemplateControl.js";
-import PopupService from "@web-atoms/core/dist/web/services/PopupService.js";
-import { WindowService } from "@web-atoms/core/dist/web/services/WindowService.js";
-import AppComboBoxViewModel from "./AppComboBoxViewModel.js";
-import AutoCompleteBoxStyle from "./AutoCompleteBoxStyle.js";
-import ItemHost from "./ItemHost.js";
-
-export interface IFetchEvent {
-    search?: string;
-    value?: any;
-    cancel?: CancelToken;
-}
-
-enum KeyCodes {
-    Enter = "Enter",
-    ArrowDown = "ArrowDown",
-    ArrowUp = "ArrowUp",
-    ArrowLeft = "ArrowLeft",
-    ArrowRight = "ArrowRight",
-    End = "End",
-    Home = "Home",
-    Escape = "Escape"
-}
-
-export default class AutoCompleteBox extends AtomControl {
-
-    public static itemTemplate = XNode.prepare("itemTemplate", true, true);
-
-    public itemTemplate: IClassOf<AtomControl>;
-
-    @BindableProperty
-    public selectedItem: any;
-
-    public previousItem: any;
-
-    @BindableProperty
-    public value: any;
-
-    /**
-     * Label is displayed in place holder
-     * @type {*}
-     * @memberof AutoCompleteBox
-     */
-    public label: any;
-
-    public items: any[];
-
-    public itemsSource: (fetchEvent: IFetchEvent) => Promise<any[]> | any[];
-
-    public valueFunc: ((item: any) => any);
-
-    public itemHostTemplate: IClassOf<AtomControl>;
-
-    public searchText: string;
-
-    public isPopupOpen: boolean;
-
-    private lastSearchText: string;
-
-    private lastValue: any;
-
-    private cancelToken: CancelToken;
-
-    private windowViewModel: AppComboBoxViewModel;
-
-    private created: boolean;
-
-    private isUpdating: boolean;
-
-    public onPropertyChanged(name: string): void {
-        switch (name) {
-            case "searchText":
-            case "value":
-                this.onSearchTextChanged(true);
-                break;
-            case "selectedItem":
-                const si = this.selectedItem;
-                const vf = this.valueFunc;
-                if (vf && si) {
-                    this.value = vf (si);
-                }
-                break;
-        }
-    }
-
-    public onUpdateUI(): void {
-        super.onUpdateUI();
-        if (this.created) {
-            return;
-        }
-
-        const openPopup = () => this.app.runAsync( async () => {
-            await Atom.delay(200);
-            await this.openPopup(true);
-        });
-
-        this.render(<div
-            styleClass={Bind.oneWay(() => ({
-                [this.controlStyle.name]: 1,
-                "popup-open": this.isPopupOpen || !this.value
-            }))}>
-            <input
-                type="search"
-                autocomplete="none"
-                eventFocus={openPopup}
-                eventClick={openPopup}
-                value={Bind.twoWays(() => this.searchText, ["keyup", "keypress", "keydown"])}
-                placeholder={Bind.oneWay(() => this.label)}
-                eventKeydown={(e) => this.onKey(e)}
-                eventBlur={() => setTimeout(() => this.cancelToken?.cancel(), 100)}/>
-            <AtomTemplateControl
-                class="item-template"
-                contentTemplate={Bind.oneWay(() => this.itemTemplate)}
-                data={Bind.oneWay(() => this.selectedItem)}
-                />
-        </div>);
-
-    }
-
-    public hasProperty(name: string): boolean {
-        if (/^(data|selectedItem|itemTemplate|isPopupOpen|value|localViewModel|viewModel)$/.test(name)) {
-            return true;
-        }
-        return super.hasProperty(name);
-    }
-
-    protected onSearchTextChanged(force: boolean = false): void {
-
-        if (this.isUpdating) {
-            return;
-        }
-        if (!force) {
-            if (this.lastSearchText === this.searchText) {
-                return;
-            }
-            this.lastSearchText = this.searchText;
-        }
-
-        setTimeout(() => {
-            this.app.runAsync(() => this.openPopup());
-        }, 10);
-
-        if (!this.itemsSource) {
-            // tslint:disable-next-line:no-console
-            console.warn("No itemsSource defined");
-            return;
-        }
-
-        const s = this.searchText || this.value;
-        if (!s) {
-            return;
-        }
-
-        this.cancelToken?.cancel();
-
-        const c = new CancelToken();
-        this.cancelToken = c;
-
-        this.runAsync(async () => {
-
-            await Atom.delay(250, c);
-
-            if (c.cancelled) {
-                return;
-            }
-
-            const result = this.itemsSource({
-                search: this.searchText,
-                cancel: c,
-                value: this.value
-            });
-            if (!result) {
-                return;
-            }
-            const rp = result as Promise<any[]>;
-            if (rp.then && rp.catch) {
-                try {
-                    const items = await rp;
-                    if (c.cancelled) {
-                        return;
-                    }
-                    this.items.replace(items || []);
-                } catch (ex) {
-                    c.cancel();
-                }
-            } else {
-                const items = result as any[];
-                if (c.cancelled) {
-                    return;
-                }
-                this.items.replace(items || []);
-            }
-
-            if (!this.selectedItem) {
-                // this.selectedItem = this.items[0];
-                const first = this.items[0];
-                if (first) {
-                    const v1 = this.valueFunc ? this.valueFunc(first) : first;
-                    // tslint:disable-next-line: triple-equals
-                    if (v1 == this.value) {
-                        this.selectedItem = first;
-                        this.element.dispatchEvent(new CustomEvent("item-selected", {
-                            cancelable: false,
-                            bubbles: false,
-                            detail: this.selectedItem
-                        }));
-                    }
-                }
-            }
-
-        });
-
-    }
-
-    protected runAsync(fx: () => Promise<void>) {
-        this.app.runAsync(async () => {
-            try {
-                await fx();
-            } catch (e) {
-                const s = e.message || e.toString();
-                if (s === "cancelled") {
-                    return;
-                }
-                // tslint:disable-next-line: no-console
-                console.error(e);
-            }
-        });
-    }
-
-    protected preCreate(): void {
-        this.itemTemplate = null;
-        this.items = [];
-        this.itemsSource = null;
-        this.label = null;
-        this.lastSearchText = null;
-        this.lastValue = null;
-        this.value = null;
-        this.isPopupOpen = false;
-        this.valueFunc = null;
-        this.itemHostTemplate = ItemHost;
-        this.searchText = null;
-        this.lastSearchText = null;
-        this.lastValue = null;
-        this.created = false;
-        this.isUpdating = false;
-        this.defaultControlStyle = AutoCompleteBoxStyle;
-    }
-
-    // tslint:disable-next-line: no-empty
-    protected create(): void { }
-
-    protected onKey(e: KeyboardEvent): void {
-        if (!this.isPopupOpen) {
-            return;
-        }
-        switch (e.key) {
-            case KeyCodes.Enter:
-                if (this.windowViewModel) {
-                    this.element.dispatchEvent(new CustomEvent("item-selected", {
-                        cancelable: false,
-                        bubbles: false,
-                        detail: this.selectedItem
-                    }));
-                    this.windowViewModel.close(this.selectedItem);
-                    this.windowViewModel = null;
-                }
-                break;
-            case KeyCodes.Escape:
-                if (this.windowViewModel) {
-                    this.windowViewModel.cancel();
-                    this.windowViewModel = null;
-                }
-                break;
-            case KeyCodes.ArrowUp:
-                this.moveSelection(-1);
-                break;
-            case KeyCodes.ArrowDown:
-                this.moveSelection(+1);
-                break;
-        }
-    }
-
-    protected moveSelection(n: number): void {
-        try {
-            this.isUpdating = true;
-            if (!this.items) {
-                return;
-            }
-            const index = this.items.indexOf(this.selectedItem);
-            if (index === -1) {
-                if (n > 0 && this.items.length) {
-                    this.selectedItem = this.items[0];
-                }
-                return;
-            }
-            const newIndex = index + n;
-            if (newIndex < 0 || newIndex >= this.items.length) {
-                return;
-            }
-            this.selectedItem = this.items[newIndex];
-        } finally {
-            this.isUpdating = false;
-        }
-    }
-
-    protected async openPopup(force: boolean = false): Promise<void> {
-        if (this.isPopupOpen) {
-            return;
-        }
-        try {
-
-            if (!force) {
-                if (!this.searchText) {
-                    return;
-                }
-            }
-
-            this.isPopupOpen = true;
-
-            this.onSearchTextChanged();
-
-            const rs = this.app.get(ReferenceService);
-
-            const ws = this.app.get(WindowService);
-            
-            const iht = rs.put(this.itemHostTemplate);
-            const parent = rs.put(this);
-
-            const ns = this.app.resolve(NavigationService) as NavigationService;
-
-            this.previousItem = this.selectedItem;
-
-            const value = await ns.openPage(`app://class/${iht.key}`, {
-                "ref:comboBox": parent
-            });
-
-            this.selectedItem = value;
-
-        } catch (e) {
-            this.selectedItem = this.previousItem;
-            // tslint:disable-next-line:triple-equals
-            if (e != "cancelled") {
-                // tslint:disable-next-line:no-console
-                console.warn(e);
-            } else {
-                this.searchText = "";
-            }
-            // throw e;
-        } finally {
-            await Atom.delay(100);
-            this.isPopupOpen = false;
-        }
-    }
-
-}

package/src/auto-complete/AutoCompleteBoxStyle.ts

@@ -1,93 +0,0 @@
-import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle.js";
-import { AtomTheme } from "@web-atoms/core/dist/web/styles/AtomTheme.js";
-import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration.js";
-import StyleBuilder from "@web-atoms/core/dist/web/styles/StyleBuilder.js";
-
-export default class AutoCompleteBoxStyle extends AtomStyle {
-
-    public get theme(): AtomTheme {
-        return this.styleSheet as AtomTheme;
-    }
-
-    public get root(): IStyleDeclaration {
-        return {
-            position: "relative",
-            minWidth: "200px",
-            minHeight: "25px",
-            borderRadius: "3px",
-            webkitBorderRadius: "3px",
-            subclasses: {
-                ".popup": this.popup,
-                " .item": this.item,
-                " .selected-item": this.selectedItem,
-                " .item-template": this.itemTemplate,
-                " > input[type=search]": {
-                    ... StyleBuilder.newStyle.absolute(0, 0).toStyle(),
-                    opacity: "0",
-                    zIndex: "100",
-                    borderRadius: "3px",
-                    webkitBorderRadius: "3px",
-                    subclasses: {
-                        ":focus": {
-                            // opacity: "1"
-                        }
-                    }
-                },
-                " > div": {
-                    zIndex: "1"
-                },
-                ".popup-open": {
-                    borderRadius: "3px",
-                    webkitBorderRadius: "3px",
-                    subclasses: {
-                        " > input[type=search]": {
-                            opacity: "1",
-                            borderRadius: "3px",
-                            webkitBorderRadius: "3px",
-                            webkitAppearance: "none",
-                        },
-                        " > div": {
-                            opacity: "0.3"
-                        }
-                    }
-                }
-            }
-        };
-    }
-
-    public get popup(): IStyleDeclaration {
-        return {
-            overflow: "auto",
-            width: "200px",
-            height: "400px"
-        };
-    }
-
-    public get itemTemplate(): IStyleDeclaration {
-        return {
-            ... StyleBuilder
-                .newStyle
-                .absolute(0, 0)
-                .toStyle(),
-            ... this.item
-        };
-    }
-
-    public get item(): IStyleDeclaration {
-        return {
-            backgroundColor: this.theme.bgColor,
-            color: this.theme.color,
-            padding: "5px",
-            borderRadius: "5px"
-        };
-    }
-
-    public get selectedItem(): IStyleDeclaration {
-        return {
-            ... this.item,
-            backgroundColor: this.theme.selectedBgColor,
-            color: this.theme.selectedColor
-        };
-    }
-
-}

package/src/auto-complete/ItemHost.tsx

@@ -1,37 +0,0 @@
-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 { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl.js";
-import { AtomTemplateControl } from "@web-atoms/core/dist/web/controls/AtomTemplateControl.js";
-import AppComboBoxViewModel from "./AppComboBoxViewModel.js";
-
-export default class ItemHost extends AtomControl {
-
-	declare public viewModel: AppComboBoxViewModel;
-
-	public create(): void {
-
-		this.viewModel =  this.resolve(AppComboBoxViewModel) ;
-
-		this.render(
-		<div
-			styleClass={Bind.oneTime((x) => this.viewModel.comboBox.controlStyle.name)}
-			styleDisplay={Bind.oneWay(() => this.viewModel.comboBox.items.length ? "" : "none")}>
-			<AtomItemsControl
-				items={Bind.oneWay(() => this.viewModel.comboBox.items)}>
-				<AtomItemsControl.itemTemplate>
-					<AtomTemplateControl
-						styleClass={Bind.oneWay((x) => ({
-							"item": x.data !== this.viewModel.comboBox.selectedItem,
-							"selected-item": x.data === this.viewModel.comboBox.selectedItem
-            			}))}
-						eventClick={Bind.event((x) => this.viewModel.close((x.data)))}
-						contentTemplate={Bind.oneTime(() => this.viewModel.comboBox.itemTemplate)}
-						for="div">
-					</AtomTemplateControl>
-				</AtomItemsControl.itemTemplate>
-			</AtomItemsControl>
-		</div>
-		);
-	}
-}

package/src/button-bar/AtomButtonBar.tsx

@@ -1,33 +0,0 @@
-import styled from "@web-atoms/core/dist/style/styled.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl.js";
-
-import "../styles/button-bar.global.css";
-
-export default class AtomButtonBar extends AtomItemsControl {
-
-    protected preCreate(): void {
-        this.allowSelectFirst = true;
-        super.preCreate();
-        this.element.dataset.buttonBar = "button-bar";
-        this.runAfterInit(() => {
-            if (!this.selectedItem) {
-                this.selectedItem = this.items[0] ?? null;
-            }
-        });
-    }
-
-    protected createChild(df: DocumentFragment, data: any): AtomControl {
-        const child = super.createChild(df, data);
-        child.element.dataset.buttonBarItem = "item";
-        child.bindEvent(child.element, "click", () => {
-            this.selectedItem = child.data;
-        });
-        child.bind(child.element,
-            "data-item",
-            [["data"], ["this", "selectedItem"]],
-            false, (v1, v2) => v1 === v2 ? "selected-item" : "item" , this );
-        return child;
-    }
-
-}

package/src/buttons/AtomPopupButton.ts

@@ -1,13 +0,0 @@
-import { AtomPageLink } from "@web-atoms/core/dist/web/controls/AtomPageLink.js";
-import { AtomPopupButtonStyle } from "./AtomPopupButtonStyle.js";
-
-export default class AtomPopupButton extends AtomPageLink {
-
-    public preCreate(): void {
-
-        super.preCreate();
-
-        this.defaultControlStyle = AtomPopupButtonStyle;
-    }
-
-}

package/src/buttons/AtomPopupButtonStyle.ts

@@ -1,22 +0,0 @@
-import Colors from "@web-atoms/core/dist/core/Colors.js";
-import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle.js";
-import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration.js";
-
-export class AtomPopupButtonStyle extends AtomStyle {
-
-    public get root(): IStyleDeclaration {
-        return {
-            padding: "5px",
-            margin: "0 5px",
-            background: "transparent",
-            subclasses: {
-                ".is-open": {
-                    border: "1px solid gray",
-                    padding: "4px",
-                    backgroundColor: Colors.gray.withAlphaPercent(0.6)
-                }
-            }
-        };
-    }
-
-}

package/src/calendar/AtomCalendar.tsx

@@ -1,124 +0,0 @@
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-import {BindableProperty} from "@web-atoms/core/dist/core/BindableProperty.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import {AtomComboBox} from "@web-atoms/core/dist/web/controls/AtomComboBox.js";
-import {AtomControl} from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import {AtomItemsControl} from "@web-atoms/core/dist/web/controls/AtomItemsControl.js";
-import AtomCalendarStyle from "./AtomCalendarStyle.js";
-import CalendarViewModel from "./CalendarViewModel.js";
-import SRCalendar from "./res/SRCalendar.js";
-
-const BindCalendar = Bind
-	.forLocalViewModel<CalendarViewModel>();
-
-export default class AtomCalendar extends AtomControl {
-
-	public static itemTemplate = XNode.prepare("itemTemplate", true, true);
-
-	public selectedDate: Date ;
-
-	public yearStart: any ;
-
-	public yearEnd: any ;
-
-	public enableFunc: any ;
-
-	public currentDate: any ;
-
-	public itemTemplate: any ;
-
-	declare public localViewModel: CalendarViewModel;
-
-	protected srCalendar: SRCalendar;
-
-	public create(): void {
-
-		this.srCalendar = this.app.resolve(SRCalendar);
-		this.localViewModel =  this.resolve(CalendarViewModel, "owner") ;
-		this.defaultControlStyle = AtomCalendarStyle;
-
-		this.selectedDate = null;
-		this.yearStart = -10;
-		this.yearEnd = 10;
-		this.enableFunc = null;
-		this.render(
-		<AtomCalendar
-			styleClass={Bind.oneWay(() => this.controlStyle.name)}>
-			<AtomCalendar.itemTemplate>
-				<div
-					eventClick={BindCalendar.event((x) => x.localViewModel.dateClicked((x.data)))}>
-					<div
-						text={BindCalendar.oneTime((x) => x.data.label)}
-						class={BindCalendar.oneWay((x) => ({
-						"date-css": 1,
-						"is-other-month": x.data.isOtherMonth,
-						"is-today": x.data.isToday,
-						"is-weekend": x.data.isWeekend,
-						// tslint:disable-next-line: triple-equals
-						"is-selected": x.localViewModel.selectedDate == x.data.value,
-						"is-disabled": x.localViewModel.enableFunc ? x.localViewModel.enableFunc(x.data) : 0
-						}))}>
-					</div>
-				</div>
-			</AtomCalendar.itemTemplate>
-			<div
-				class="header">
-				<i
-					eventClick={Bind.event(() => this.localViewModel.changeMonth(-1))}
-					class="fas fa-caret-left"
-					title="Previous Month"
-					style="margin-right: 15px; font-size: 120%; cursor: pointer; padding:0 10px 0 10px;">
-				</i>
-				<AtomComboBox
-					valuePath="value"
-					value={Bind.twoWays(() => this.localViewModel.year)}
-					items={Bind.oneWay(() => this.localViewModel.yearList)}
-					for="select">
-					<AtomComboBox.itemTemplate>
-						<option
-							text={Bind.oneTime((x) => x.data.label)}>
-						</option>
-					</AtomComboBox.itemTemplate>
-				</AtomComboBox>
-				<AtomComboBox
-					valuePath="value"
-					value={Bind.twoWays(() => this.localViewModel.month)}
-					items={Bind.oneTime(() => this.srCalendar.monthList)}
-					for="select">
-					<AtomComboBox.itemTemplate>
-						<option
-							text={Bind.oneTime((x) => x.data.label)}>
-						</option>
-					</AtomComboBox.itemTemplate>
-				</AtomComboBox>
-				<i
-					eventClick={Bind.event(() => this.localViewModel.changeMonth(1))}
-					class="fas fa-caret-right"
-					title="Next Month"
-					style="margin-left: 15px; font-size: 120%; cursor: pointer; padding:0 10px 0 10px;">
-				</i>
-			</div>
-			<AtomItemsControl
-				items={Bind.oneTime(() => this.srCalendar.weekDays)}
-				class="week-days"
-				for="div">
-			</AtomItemsControl>
-			<AtomItemsControl
-				class="month-days"
-				itemTemplate={Bind.oneWay(() => this.itemTemplate)}
-				items={Bind.oneWay(() => this.localViewModel.items)}
-				for="div">
-			</AtomItemsControl>
-		</AtomCalendar>
-		);
-	}
-
-	protected preCreate() {
-		this.selectedDate = null;
-		this.yearStart = null;
-		this.yearStart = null;
-		this.enableFunc = null;
-		this.currentDate = null;
-		this.itemTemplate = null;
-	}
-}