@web-atoms/core 2.6.13 → 2.6.17

package/src/web/controls/AtomListBox.ts

@@ -1,69 +0,0 @@
-import { BindableProperty } from "../../core/BindableProperty.js";
-import { AtomUI, ChildEnumerator } from "../../web/core/AtomUI.js";
-import { AtomListBoxStyle } from "../styles/AtomListBoxStyle.js";
-import { AtomControl } from "./AtomControl.js";
-import { AtomItemsControl } from "./AtomItemsControl.js";
-
-export class AtomListBox extends AtomItemsControl {
-
-    public selectItemOnClick: boolean;
-
-    protected preCreate(): void {
-        this.selectItemOnClick = true;
-        super.preCreate();
-        this.defaultControlStyle = AtomListBoxStyle;
-        this.registerItemClick();
-        this.runAfterInit(() => this.setElementClass(this.element, {
-            [this.controlStyle.name]: 1,
-            "atom-list-box": 1
-        }));
-    }
-
-    protected registerItemClick(): void {
-        this.bindEvent(this.element, "click", (e) => {
-            const p = this.atomParent(e.target as HTMLElement);
-            if (p === this) {
-                return;
-            }
-            if (p.element._logicalParent === this.element) {
-                // this is child..
-                const data = p.data;
-                if (!data) {
-                    return;
-                }
-                if (this.selectItemOnClick) {
-                    this.toggleSelection(data);
-                    const ce = new CustomEvent("selectionChanged", {
-                        bubbles: false,
-                        cancelable: false,
-                        detail: data });
-                    this.element.dispatchEvent(ce);
-                }
-            }
-        });
-    }
-
-    protected createChild(df: DocumentFragment, data: any): AtomControl {
-        const child = super.createChild(df, data);
-        child.bind(child.element, "styleClass",
-            [
-                ["this", "version"],
-                ["data"],
-                ["this", "selectedItems"]
-            ],
-            false,
-            (version, itemData, selectedItems: any[]) => {
-                return {
-                    "list-item": true,
-                    "item": true,
-                    "selected-item": selectedItems
-                    && selectedItems.find((x) => x === itemData),
-                    "selected-list-item": selectedItems
-                        && selectedItems.find((x) => x === itemData)
-                };
-            },
-            this);
-        return child;
-    }
-
-}

package/src/web/controls/AtomNotification.tsx

@@ -1,45 +0,0 @@
-import Bind from "../../core/Bind.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import XNode from "../../core/XNode.js";
-import AtomNotificationStyle from "../styles/AtomNotificationStyle.js";
-import { AtomControl } from "./AtomControl.js";
-
-export default class AtomNotification extends AtomControl {
-
-    @BindableProperty
-    public timeout: number = 5000;
-
-    private timeoutKey: any = null;
-
-    public onPropertyChanged(name: keyof AtomNotification): void {
-        switch (name) {
-            case "timeout":
-                this.setupTimeout();
-                break;
-        }
-    }
-
-    public create(): void {
-        this.defaultControlStyle = AtomNotificationStyle;
-        this.render(<div
-            formattedText={Bind.oneWay(() => this.viewModel.message )}
-            timeout={Bind.oneWay(() => this.viewModel.timeout || 5000)}
-            styleClass={Bind.oneWay(() => ({
-                [this.controlStyle.name]: 1,
-                error: this.viewModel.type && /error/i.test(this.viewModel.type),
-                warning: this.viewModel.type && /warn/i.test(this.viewModel.type),
-            }))}
-            />);
-    }
-
-    protected setupTimeout(): void {
-        if (this.timeoutKey) {
-            clearTimeout(this.timeoutKey);
-        }
-        this.timeoutKey = setTimeout(() => {
-            if (this.element) {
-                this.app.broadcast(`atom-window-close:${(this as any).id}`, "");
-            }
-        }, this.timeout);
-    }
-}

package/src/web/controls/AtomPageLink.ts

@@ -1,164 +0,0 @@
-import { App } from "../../App.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import { CancelToken, IClassOf } from "../../core/types.js";
-import XNode from "../../core/XNode.js";
-import { IPageOptions, NavigationService } from "../../services/NavigationService.js";
-import AtomPageLinkStyle from "../styles/AtomPageLinkStyle.js";
-import { AtomStyle } from "../styles/AtomStyle.js";
-import { IStyleDeclaration } from "../styles/IStyleDeclaration.js";
-import { AtomControl } from "./AtomControl.js";
-
-export class AtomPageLink extends AtomControl {
-
-    public static page = XNode.prepare("page", true, true);
-
-    public page: string | IClassOf<AtomControl>;
-
-    public parameters: any;
-
-    public isOpen: boolean;
-
-    public cancelToken: CancelToken;
-
-    public options: IPageOptions;
-
-    /**
-     * Fired after the result was received from popup/window successfully
-     */
-    public eventResult: any;
-
-    /**
-     * Fired after popup/window was cancelled
-     */
-    public eventError: any;
-
-    /**
-     * Fired before opening popup/window.
-     * In the event's detail object, you must set parameters property as shown below...
-     * eventGetParameters={Bind.event((e) => e.detail.parameters = ({}))}
-     */
-    public eventGetParameters: any;
-
-    /**
-     * Block opening Popup/Page again till the opened page is closed or cancelled.
-     * If set true, toggle will not work. Default is false.
-     */
-    public modal: boolean;
-
-    /**
-     * Setting Toggle (default true) true will close the already opened Popup/window, otherwise it will
-     * open a new window if Modal is false.
-     */
-    public toggle: boolean;
-
-    constructor(app: App, e?: HTMLElement) {
-        super(app, e || document.createElement("span"));
-    }
-
-    public preCreate(): void {
-
-        this.page = null;
-
-        this.parameters = null;
-
-        this.isOpen = false;
-
-        this.options = null;
-
-        this.modal = false;
-
-        this.toggle = true;
-
-        this.defaultControlStyle = AtomPageLinkStyle;
-
-        super.preCreate();
-
-        this.bindEvent(
-            this.element,
-            "click",
-            () => {
-                if (this.modal) {
-                    return this.openPopup();
-                }
-                return this.app.runAsync(() => this.openPopup());
-            });
-
-        this.bind(
-            this.element,
-            "styleClass",
-            [["this", "isOpen"]],
-            false ,
-            (v) => ({
-                [this.controlStyle.name]: 1,
-                "is-open": v,
-                "atom-page-link": 1
-            }),
-            this);
-
-        this.registerDisposable({
-            dispose: () => {
-                const ct = this.cancelToken;
-                if (ct) {
-                    ct.cancel();
-                }
-            }
-        });
-    }
-
-    protected async openPopup(): Promise<void> {
-
-        if (this.cancelToken) {
-            if (this.toggle) {
-                this.cancelToken.cancel();
-                this.cancelToken = null;
-                this.isOpen = false;
-                return;
-            } else {
-                this.cancelToken.dispose();
-            }
-        }
-
-        this.cancelToken = new CancelToken();
-
-        let o: IPageOptions = null;
-
-        try {
-            const navigationService = this.app.resolve(NavigationService) as NavigationService;
-            const pt = this.page;
-            if (!pt) {
-                // tslint:disable-next-line:no-console
-                console.error("No popup template specified in PopupButton");
-                return;
-            }
-            this.isOpen = true;
-            o = this.options ?
-                { ... this.options, cancelToken: this.cancelToken } :
-                { cancelToken: this.cancelToken };
-
-            o.onInit = (view: AtomControl) => {
-                view.setLocalValue(view.element, "styleClass", `${this.controlStyle.name} page` );
-            };
-
-            const getParametersEvent = new CustomEvent("getParameters", { detail: {} as any});
-
-            this.element.dispatchEvent(getParametersEvent);
-
-            const p =  getParametersEvent.detail.parameters || this.parameters;
-
-            const result = await navigationService.openPage(pt, p, o);
-
-            this.element.dispatchEvent(new CustomEvent("result", { detail: result }));
-
-        } catch (e) {
-            // if element is disposed or null, ignore
-            if (this.element) {
-                this.element.dispatchEvent(new CustomEvent("error", { detail: e }));
-            }
-        } finally {
-            this.cancelToken = null;
-            this.isOpen = false;
-            if (o) { o.onInit = null; }
-        }
-    }
-
-}

package/src/web/controls/AtomTabbedPage.tsx

@@ -1,320 +0,0 @@
-import { App } from "../../App.js";
-import { AtomBinder } from "../../core/AtomBinder.js";
-import { AtomDisposableList } from "../../core/AtomDisposableList.js";
-import { AtomList } from "../../core/AtomList.js";
-import { AtomLoader } from "../../core/AtomLoader.js";
-import { AtomOnce } from "../../core/AtomOnce.js";
-import { AtomUri } from "../../core/AtomUri.js";
-import Bind from "../../core/Bind.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import { StringHelper } from "../../core/StringHelper.js";
-import { IClassOf, IDisposable, INotifyPropertyChanged } from "../../core/types.js";
-import XNode from "../../core/XNode.js";
-import { Inject } from "../../di/Inject.js";
-import { NavigationService } from "../../services/NavigationService.js";
-import { AtomViewModel, Watch } from "../../view-model/AtomViewModel.js";
-import { AtomWindowViewModel } from "../../view-model/AtomWindowViewModel.js";
-import bindProperty from "../../view-model/bindProperty.js";
-import bindUrlParameter from "../../view-model/bindUrlParameter.js";
-import { AtomUI } from "../core/AtomUI.js";
-import { WindowService } from "../services/WindowService.js";
-import { AtomTabbedPageStyle } from "../styles/AtomTabbedPageStyle.js";
-import { AtomControl } from "./AtomControl.js";
-import { AtomGridView } from "./AtomGridView.js";
-import { AtomItemsControl } from "./AtomItemsControl.js";
-import { AtomPage } from "./AtomPage.js";
-
-const BindPage = Bind.forData<AtomPage>();
-
-export class AtomTabbedPage extends AtomControl
-    implements INotifyPropertyChanged {
-
-    public static titleTemplate = XNode.prepare("titleTemplate", true, true);
-
-    declare public localViewModel: AtomTabViewModel;
-
-    public tabChannelName: string;
-
-    public titleTemplate: IClassOf<AtomControl>;
-
-    public presenter: HTMLElement;
-
-    private mWindowService: WindowService;
-    protected get windowService(): WindowService {
-        return this.mWindowService || (this.mWindowService = this.resolve(WindowService));
-    }
-
-    private mSelectedPage: AtomPage;
-    public get selectedPage(): AtomPage {
-        return this.mSelectedPage;
-    }
-    public set selectedPage(value: AtomPage) {
-        this.mSelectedPage = value;
-
-        if (value && value.element) {
-            const pe = value.element.parentElement;
-            if (pe !== this.presenter) {
-                // const p = document.createElement("div");
-                // const s = p.style;
-                // p.className = "page-host";
-                // p.appendChild(value.element);
-                this.presenter.appendChild(value.element);
-                const ve = value;
-
-                value.bind(value.element,
-                    "styleDisplay",
-                    [["this", "selectedPage"]], false, (v) => v === ve ? "" : "none", this);
-            }
-        }
-
-        this.invalidate();
-
-        AtomBinder.refreshValue(this, "selectedPage");
-    }
-
-    constructor(app: App, e?: HTMLElement) {
-        super(app, e ?? document.createElement("section"));
-    }
-
-    protected preCreate(): void {
-        super.preCreate();
-        this.defaultControlStyle = AtomTabbedPageStyle;
-        this.tabChannelName = "app";
-        this.titleTemplate = null;
-        this.mSelectedPage = null;
-        this.runAfterInit(() => {
-            this.setPrimitiveValue(this.element, "styleClass", `atom-tabbed-page ${this.controlStyle.name}`);
-        });
-        this.localViewModel = this.resolve(AtomTabViewModel, () => ({ owner: this }));
-
-        this.render(<section
-            selectedPage={Bind.twoWays(() => this.localViewModel.selectedPage)}>
-            <AtomTabbedPage.titleTemplate>
-                <div styleClass={BindPage.oneWay((x) => ({
-                    "tab-item": 1,
-                    "selected-tab-item": x.data === this.localViewModel.selectedPage
-                }))}>
-                    <div
-                        eventClick={BindPage.event((x) => this.localViewModel.selectedPage = x.data)}
-                        text={BindPage.oneWay((x) => (x.data as any).viewModelTitle || x.data.title)}></div>
-                    <img
-                        class="close-button"
-                        eventClick={BindPage.event((x) => this.localViewModel.closePage(x.data))}/>
-                </div>
-            </AtomTabbedPage.titleTemplate>
-            <AtomItemsControl
-                class="tabs"
-                allowMultipleSelection={false}
-                allowSelectFirst={true}
-                items={Bind.oneWay(() => this.localViewModel.pages)}
-                selectedItem={Bind.twoWays(() => this.localViewModel.selectedPage)}
-                itemTemplate={Bind.oneWay(() => this.titleTemplate)}></AtomItemsControl>
-            <div
-                class="presenter page-host atom-tabbed-page-host"
-                presenter={Bind.presenter("presenter")}></div>
-        </section>);
-        this.registerDisposable(this.windowService.registerHostForWindow((e) => this.getParentHost(e)));
-
-        // this.windowService.currentTarget = this.presenter;
-    }
-
-    private getParentHost(e: HTMLElement): HTMLElement {
-        while (e) {
-            const pe = e._logicalParent || e.parentElement;
-            if (pe === this.presenter) {
-                return e.parentElement;
-            }
-            if (!pe) {
-                return null;
-            }
-            e = pe;
-        }
-    }
-}
-
-interface ITabState {
-    urls: string[];
-    selectedUrl: string;
-}
-
-class AtomTabViewModel extends AtomViewModel {
-
-    @BindableProperty
-    public pages: AtomList<AtomPage>;
-
-    @BindableProperty
-    public selectedPage: AtomPage;
-
-    @BindableProperty
-    public selectedUrl: string;
-
-    public channel: string;
-
-    public storageKey: string;
-
-    @BindableProperty
-    public tabState: ITabState;
-
-    private pageUpdater = new AtomOnce();
-
-    @Inject
-    private navigationService: NavigationService;
-
-    constructor(@Inject app: App, private owner: AtomTabbedPage) {
-        super(app);
-
-        this.pages = new AtomList();
-
-        bindProperty(
-            this,
-            this,
-            "selectedUrl",
-            this,
-            [["selectedPage"]], {
-            fromSource: (v: any): any => {
-                return v.tag;
-            },
-            fromTarget: (v: any): any => {
-                if (!this.pages) {
-                    return null;
-                }
-                return this.pages.find((p) => p.tag === v);
-            }
-        });
-
-        bindUrlParameter(this, "selectedUrl", "url");
-
-    }
-
-    public async init(): Promise<any> {
-
-        const ch = this.owner.tabChannelName;
-        this.storageKey = `${this.app.contextId}_${ch}`;
-
-        const d = this.navigationService.registerNavigationHook(
-            (uri, { target }) => {
-                if (
-                    target === this.owner.tabChannelName ||
-                    (uri.protocol === "tab:" && uri.host === this.owner.tabChannelName)) {
-                    return this.loadPageForReturn(uri);
-                }
-            }
-        );
-        this.registerDisposable(d);
-
-        const urls = sessionStorage.getItem(this.storageKey) || "null";
-        const urlState: ITabState = JSON.parse(urls) || {
-            name,
-            urls: [],
-            selectedUrl: null
-        };
-        for (const iterator of urlState.urls) {
-            const page = await this.loadPage(new AtomUri(iterator), true);
-            if (page.tag === urlState.selectedUrl) {
-                this.pageUpdater.run(() => {
-                    this.selectedPage = page;
-                });
-            }
-        }
-
-        if (!this.selectedPage) {
-            this.selectedPage = this.pages[0];
-        }
-    }
-
-    @Watch
-    public watchSelectedPage(): void {
-        this.saveState(this.selectedPage);
-    }
-
-    public closePage(page: AtomPage): void {
-        this.app.runAsync(() => this.navigationService.remove(page));
-    }
-
-    protected saveState(a?: any): void {
-        const state: ITabState = {
-            urls: this.pages.map((p) => p.tag),
-            selectedUrl: this.selectedUrl,
-        };
-        sessionStorage.setItem(this.storageKey, JSON.stringify(state));
-    }
-
-    protected async loadPageForReturn(url: AtomUri): Promise<any> {
-        const p = await this.loadPage(url, false);
-        try {
-            return await (p as any).returnPromise;
-        } catch (ex) {
-            // this will prevent warning in chrome for unhandled exception
-            if ((ex.message ? ex.message : ex) === "cancelled") {
-                // tslint:disable-next-line: no-console
-                console.warn(ex);
-                return;
-            }
-            throw ex;
-        }
-    }
-
-    protected async loadPage(
-        url: AtomUri,
-        doNotSetSelected: boolean): Promise<AtomPage> {
-
-        const uriString = url.toString();
-        const ws = this.navigationService as WindowService;
-
-        const existing = this.pages.find((x) => x.tag === uriString);
-        if (existing) {
-            if (!doNotSetSelected) {
-                if (this.selectedPage !== existing) {
-                    this.selectedPage = existing;
-                    // ws.currentTarget = existing.element;
-                }
-            }
-            return existing;
-        }
-
-        // const popupType = await UMD.resolveViewClassAsync(url.path);
-        // const page: AtomPage = (new (popupType)(this.app)) as AtomPage;
-        const { view: page, disposables } =
-            await AtomLoader.loadView<AtomPage>(url, this.app, true, () => new AtomWindowViewModel(this.app));
-        page.title ||= StringHelper.fromPascalToTitleCase(page.constructor.name);
-        page.tag = uriString;
-        if (url.query && url.query.title) {
-            page.title ||= url.query.title.toString();
-        }
-        (page as any).viewModelTitle = null;
-        page.bind(page.element, "viewModelTitle", [["viewModel", "title"]]);
-
-        page.bind(page.element,
-            "styleDisplay",
-            [["this", "selectedPage"]],
-            false,
-            (v) => v === page ? "" : "none", this);
-
-        this.pages.add(page);
-
-        if (!doNotSetSelected) {
-            this.selectedPage = page;
-        }
-
-        const e = page.element;
-
-        // ws.currentTarget = e;
-
-        disposables.add(() => {
-            const index = this.pages.indexOf(page);
-            if (this.pages.length <= 1 && index <= 0) {
-                return;
-            }
-            this.pages.remove(page);
-            e.remove();
-            // ws.currentTarget = null;
-            if (this.selectedPage === page) {
-                this.selectedPage = this.pages[index - 1];
-            }
-        });
-
-        this.saveState();
-        return page;
-    }
-
-}

package/src/web/controls/AtomToggleButtonBar.ts

@@ -1,41 +0,0 @@
-import { App } from "../../App.js";
-import { AtomToggleButtonBarStyle } from "../styles/AtomToggleButtonBarStyle.js";
-import { AtomControl } from "./AtomControl.js";
-import { AtomItemsControl } from "./AtomItemsControl.js";
-import { AtomListBox } from "./AtomListBox.js";
-
-export class AtomToggleButtonBar extends AtomListBox {
-
-    constructor(app: App, e?: HTMLElement) {
-        super(app, e || document.createElement("ul"));
-    }
-
-    protected preCreate(): void {
-        super.preCreate();
-        this.allowMultipleSelection = false;
-        this.allowSelectFirst = true;
-        this.itemTemplate = AtomToggleButtonBarItemTemplate;
-        this.defaultControlStyle = AtomToggleButtonBarStyle;
-        this.registerItemClick();
-        this.runAfterInit(() => this.setElementClass(this.element, {
-            [this.controlStyle.name]: 1,
-            "atom-toggle-button-bar": 1
-        }, true ));
-    }
-
-}
-
-class AtomToggleButtonBarItemTemplate extends AtomControl {
-
-    constructor(app: App, e?: HTMLElement) {
-        super(app, e || document.createElement("li"));
-    }
-
-    protected create(): void {
-        this.bind(this.element, "text", [["data"]], false, (v) => {
-            const p = this.parent as AtomItemsControl;
-            return v[p.labelPath];
-        });
-    }
-
-}

package/src/web/controls/AtomViewPager.ts

@@ -1,60 +0,0 @@
-import { AtomBinder } from "../../core/AtomBinder.js";
-import { AtomLoader } from "../../core/AtomLoader.js";
-import { AtomUri } from "../../core/AtomUri.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import { IClassOf } from "../../core/types.js";
-import { JsonService } from "../../services/JsonService.js";
-import { AtomContentControl } from "./AtomContentControl.js";
-import { AtomControl } from "./AtomControl.js";
-import { AtomItemsControl } from "./AtomItemsControl.js";
-
-export class AtomViewPager extends AtomItemsControl {
-
-    public dispose(e?: HTMLElement): void {
-        if (!e) {
-            for (const iterator of this.items) {
-                iterator.dispose();
-            }
-        }
-        this.selectedItem = null;
-        super.dispose(e);
-    }
-
-    public onCollectionChanged(): void {
-        // do nothing...
-    }
-
-    protected create(): void {
-        super.create();
-
-        const eStyle = this.element.style;
-        eStyle.position = "absolute";
-        eStyle.left = eStyle.right = eStyle.bottom = eStyle.top = "0";
-
-        const cc = new AtomContentControl(this.app);
-        this.append(cc);
-        const style = cc.element.style;
-        style.position = "absolute";
-        style.top = style.left = style.right = style.bottom = "0";
-
-        cc.bind(cc.element, "content", [["this", "selectedItem"]], false, (si) => {
-            if (!si) {
-                return undefined;
-            }
-            if (si.view) {
-                return si.view;
-            }
-            this.app.runAsync( async () => {
-                const { view: ctrl } = await AtomLoader.loadView<AtomControl>(new AtomUri(si.value), this.app, false);
-                si.view = ctrl;
-                ctrl.element._logicalParent = this.element;
-                AtomBinder.refreshValue(this, "selectedItem");
-                si.dispose = () => {
-                    ctrl.dispose();
-                    ctrl.element._logicalParent = null;
-                };
-            });
-            return undefined;
-        }, this);
-    }
-}