@web-atoms/core 2.2.50 → 2.2.52

package/src/web/services/PopupService.tsx

@@ -13,6 +13,10 @@ import { AtomWindowViewModel } from "../../view-model/AtomWindowViewModel";
 import { AtomControl } from "../controls/AtomControl";
 import CSS from "../styles/CSS";
 
+import PopupWindowA, { ConfirmPopup } from "./PopupWindow";
+
+export const PopupWindow = PopupWindowA;
+
 // let lastTarget = null;
 document.body.addEventListener("click", (e) => {
     if ((e.target as HTMLElement).offsetParent) {
@@ -149,91 +153,91 @@ export interface IDialogOptions {
     maximize?: boolean;
 }
 
-CSS(StyleRule()
-    .position("absolute")
-    .border("solid 1px lightgray")
-    .borderRadius(5)
-    .backgroundColor(Colors.white)
-    .top("50%")
-    .left("50%")
-    .transform("translate(-50%,-50%)" as any)
-    .boxShadow("0 0 20px 1px rgb(0 0 0 / 75%)")
-    .display("grid")
-    .alignItems("center")
-    .justifyItems("center")
-    .gridTemplateRows("auto 1fr")
-    .gridTemplateColumns("1fr")
-    .opacity("0")
-    .transition("opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32)")
-    .and(StyleRule("[data-ready=true]")
-        .opacity("1")
-    )
-    .and(StyleRule("[data-dragging=true]")
-        .opacity("0.5")
-    )
-    .child(StyleRule(".title")
-        .justifySelf("stretch")
-        .display("flex")
-        .minWidth(0)
-        .backgroundColor(Colors.lightGray.withAlphaPercent(0.2))
-        .padding(5)
-        .alignItems("center")
-        .justifyItems("center")
-        .child(
-            StyleRule(".title-text")
-            .cursor("move")
-            .flexStretch()
-            .textEllipsis()
-        )
-        .child(StyleRule("*")
-            .flex("1 1 100%")
-        )
-        .child(StyleRule(".popup-close-button")
-            .fontFamily("arial")
-            .fontSize(15)
-            .flex("1 0 auto")
-            .cursor("pointer")
-            .width(30)
-            .height(30)
-            .backgroundColor(Colors.red.withAlphaPercent(0.1))
-            .border("none")
-            .borderRadius(9999)
-            .textTransform("capitalize")
-            .hoverBackgroundColor(Colors.red)
-        )
-    )
-    .child(StyleRule("*[data-window-content=window-content]")
-        .margin(5)
-        .alignSelf("stretch")
-        .justifySelf("stretch")
-        .flexStretch()
-        .overflow("auto")
-        // This is done to avoid absolute position
-        // to run out of content area
-        .position("relative")
-        // .display("flex")
-        // .child(StyleRule("*")
-        //     .flex("1 1 100%")
-        // )
-        // .and(StyleRule("[data-window-content-fill] > *")
-        //     .maximizeAbsolute()
-        // )
-    )
-    .child(StyleRule(" * > .command-bar")
-        .backgroundColor(Colors.lightGray.withAlphaPercent(0.6))
-        .display("flex")
-        .margin(0)
-        .padding(5)
-        .gap(5)
-        .nested(StyleRule("button")
-            .borderWidth(1)
-            .borderRadius(9999)
-            .padding(5)
-            .paddingLeft(10)
-            .paddingRight(10)
-        )
-    )
-, "*[data-popup-window=popup-window]");
+// CSS(StyleRule()
+//     .position("absolute")
+//     .border("solid 1px lightgray")
+//     .borderRadius(5)
+//     .backgroundColor(Colors.white)
+//     .top("50%")
+//     .left("50%")
+//     .transform("translate(-50%,-50%)" as any)
+//     .boxShadow("0 0 20px 1px rgb(0 0 0 / 75%)")
+//     .display("grid")
+//     .alignItems("center")
+//     .justifyItems("center")
+//     .gridTemplateRows("auto 1fr")
+//     .gridTemplateColumns("1fr")
+//     .opacity("0")
+//     .transition("opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32)")
+//     .and(StyleRule("[data-ready=true]")
+//         .opacity("1")
+//     )
+//     .and(StyleRule("[data-dragging=true]")
+//         .opacity("0.5")
+//     )
+//     .child(StyleRule(".title")
+//         .justifySelf("stretch")
+//         .display("flex")
+//         .minWidth(0)
+//         .backgroundColor(Colors.lightGray.withAlphaPercent(0.2))
+//         .padding(5)
+//         .alignItems("center")
+//         .justifyItems("center")
+//         .child(
+//             StyleRule(".title-text")
+//             .cursor("move")
+//             .flexStretch()
+//             .textEllipsis()
+//         )
+//         .child(StyleRule("*")
+//             .flex("1 1 100%")
+//         )
+//         .child(StyleRule(".popup-close-button")
+//             .fontFamily("arial")
+//             .fontSize(15)
+//             .flex("1 0 auto")
+//             .cursor("pointer")
+//             .width(30)
+//             .height(30)
+//             .backgroundColor(Colors.red.withAlphaPercent(0.1))
+//             .border("none")
+//             .borderRadius(9999)
+//             .textTransform("capitalize")
+//             .hoverBackgroundColor(Colors.red)
+//         )
+//     )
+//     .child(StyleRule("*[data-window-content=window-content]")
+//         .margin(5)
+//         .alignSelf("stretch")
+//         .justifySelf("stretch")
+//         .flexStretch()
+//         .overflow("auto")
+//         // This is done to avoid absolute position
+//         // to run out of content area
+//         .position("relative")
+//         // .display("flex")
+//         // .child(StyleRule("*")
+//         //     .flex("1 1 100%")
+//         // )
+//         // .and(StyleRule("[data-window-content-fill] > *")
+//         //     .maximizeAbsolute()
+//         // )
+//     )
+//     .child(StyleRule(" * > .command-bar")
+//         .backgroundColor(Colors.lightGray.withAlphaPercent(0.6))
+//         .display("flex")
+//         .margin(0)
+//         .padding(5)
+//         .gap(5)
+//         .nested(StyleRule("button")
+//             .borderWidth(1)
+//             .borderRadius(9999)
+//             .padding(5)
+//             .paddingLeft(10)
+//             .paddingRight(10)
+//         )
+//     )
+// , "*[data-popup-window=popup-window]");
 
 export class PopupControl extends AtomControl {
 
@@ -300,198 +304,198 @@ export class PopupControl extends AtomControl {
 
 }
 
-export class PopupWindow extends AtomControl {
-
-    public static async showWindow<T>(options?: IDialogOptions): Promise<T>;
-    public static async showWindow<T>(window: IClassOf<PopupWindow>, options?: IDialogOptions): Promise<T>;
-    public static async showWindow<T>(
-        window: IClassOf<PopupWindow> | IDialogOptions,
-        options?: IDialogOptions): Promise<T> {
-        if (arguments.length <= 1) {
-            options = arguments[0];
-            window = this;
-        }
-        // this will force lastTarget to be set
-        await sleep(1);
-        return PopupService.showWindow<T>(PopupService.lastTarget, window as any, options);
-    }
-
-    public static async showModal<T>(options?: IDialogOptions): Promise<T>;
-    public static async showModal<T>(window: IClassOf<PopupWindow>, options?: IDialogOptions): Promise<T>;
-    public static async showModal<T>(
-        window: IClassOf<PopupWindow> | IDialogOptions,
-        options?: IDialogOptions): Promise<T> {
-        if (arguments.length <= 1) {
-            options = arguments[0];
-            window = this;
-        }
-        options ??= {};
-        options.modal ??= true;
-        // this will force lastTarget to be set
-        await sleep(1);
-        return PopupService.showWindow<T>(PopupService.lastTarget, window as any, options);
-    }
-
-    @BindableProperty
-    public title?: string;
-
-    public viewModelTitle?: string;
-
-    public close: (r?) => void;
-
-    public cancel: (r?) => void;
-
-    public titleRenderer: () => XNode;
-
-    public closeButtonRenderer: () => XNode;
-
-    @BindableProperty
-    public closeWarning: string;
-
-    protected init() {
-        // do nothing...
-    }
-
-    protected async requestCancel() {
-        if (this.closeWarning) {
-            if (!await ConfirmPopup.confirm({
-                message : this.closeWarning
-            })) {
-                return;
-            }
-        }
-        this.cancel();
-    }
-
-    protected preCreate(): void {
-        this.title = null;
-        this.viewModelTitle = null;
-        const handler = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                this.app.runAsync(() => this.requestCancel());
-                e.preventDefault();
-                return;
-            }
-        };
-        this.bindEvent(this.element, "keydown", handler);
-        // document.body.addEventListener("keydown", handler);
-        // this.registerDisposable({
-        //     dispose() {
-        //         document.body.removeEventListener("keydown", handler);
-        //     }
-        // });
-        this.element.dataset.popupWindow = "popup-window";
-
-        setTimeout((p) => {
-            p.dataset.ready = "true";
-        }, 10, this.element);
-    }
-
-    protected render(node: XNode, e?: any, creator?: any): void {
-        this.render = super.render;
-        const titleContent = this.titleRenderer?.() ?? <span
-            class="title-text" text={Bind.oneWay(() => this.title || this.viewModelTitle)}/>;
-        const closeButton = this.closeButtonRenderer?.() ?? <button
-            class="popup-close-button"
-            text="x"
-            eventClick={Bind.event(() => this.requestCancel())}/>;
-        const a = node.attributes ??= {};
-        a["data-window-content"] = "window-content";
-        const extracted = this.extractControlProperties(node);
-        super.render(<div
-            viewModelTitle={Bind.oneWay(() => this.viewModel.title)}
-            { ... extracted }>
-            <div class="title title-host">
-                { titleContent }
-                { closeButton }
-            </div>
-            { node }
-        </div>);
-
-        this.runAfterInit(() => {
-            if (!this.element) {
-                return;
-            }
-            const host = this.element.getElementsByClassName("title-host")[0];
-            this.setupDragging(host as HTMLElement);
-            // this.element may become null if it was immediately
-            // closed, very rare case, but possible if
-            // supplied cancelToken was cancelled
-            const anyAutofocus = this.element.querySelector(`*[autofocus]`);
-            if (!anyAutofocus) {
-                const windowContent = this.element.querySelector("[data-window-content]");
-                if (windowContent) {
-                    const firstInput = windowContent.querySelector("input,button,a") as HTMLInputElement;
-                    if (firstInput) {
-                        firstInput.focus();
-                        return;
-                    }
-                }
-
-                const cb = this.element.querySelector(".popup-close-button") as HTMLButtonElement;
-                if (cb) {
-                    cb.focus();
-                }
-                return;
-            }
-        });
-    }
-
-    protected setupDragging(tp: HTMLElement): void {
-        this.bindEvent(tp, "mousedown", (startEvent: MouseEvent) => {
-            if ((startEvent.target as HTMLElement).tagName === "BUTTON") {
-                return;
-            }
-            startEvent.preventDefault();
-            const disposables: IDisposable[] = [];
-            // const offset = AtomUI.screenOffset(tp);
-            const element = this.element;
-            const offset = { x: element.offsetLeft, y: element.offsetTop };
-            if (element.style.transform !== "none") {
-                offset.x -= element.offsetWidth / 2;
-                offset.y -= element.offsetHeight / 2;
-                element.style.left = offset.x + "px";
-                element.style.top = offset.y + "px";
-                element.style.transform = "none";
-            }
-            this.element.dataset.dragging = "true";
-            const rect: IRect = { x: startEvent.clientX, y: startEvent.clientY };
-            const cursor = tp.style.cursor;
-            tp.style.cursor = "move";
-            disposables.push(this.bindEvent(document.body, "mousemove", (moveEvent: MouseEvent) => {
-                const { clientX, clientY } = moveEvent;
-                const dx = clientX - rect.x;
-                const dy = clientY - rect.y;
-
-                const finalX = offset.x + dx;
-                const finalY = offset.y + dy;
-                if (finalX < 5 || finalY < 5) {
-                    return;
-                }
-
-                offset.x = finalX;
-                offset.y = finalY;
-
-                this.element.style.left = offset.x + "px";
-                this.element.style.top = offset.y + "px";
-
-                rect.x = clientX;
-                rect.y = clientY;
-            }));
-            disposables.push(this.bindEvent(document.body, "mouseup", (endEvent: MouseEvent) => {
-                tp.style.cursor = cursor;
-                this.element.removeAttribute("data-dragging");
-                for (const iterator of disposables) {
-                    iterator.dispose();
-                }
-            }));
-        });
-    }
-
-}
-
-// @ts-ignore
-delete PopupWindow.prototype.init;
+// export class PopupWindow extends AtomControl {
+
+//     public static async showWindow<T>(options?: IDialogOptions): Promise<T>;
+//     public static async showWindow<T>(window: IClassOf<PopupWindow>, options?: IDialogOptions): Promise<T>;
+//     public static async showWindow<T>(
+//         window: IClassOf<PopupWindow> | IDialogOptions,
+//         options?: IDialogOptions): Promise<T> {
+//         if (arguments.length <= 1) {
+//             options = arguments[0];
+//             window = this;
+//         }
+//         // this will force lastTarget to be set
+//         await sleep(1);
+//         return PopupService.showWindow<T>(PopupService.lastTarget, window as any, options);
+//     }
+
+//     public static async showModal<T>(options?: IDialogOptions): Promise<T>;
+//     public static async showModal<T>(window: IClassOf<PopupWindow>, options?: IDialogOptions): Promise<T>;
+//     public static async showModal<T>(
+//         window: IClassOf<PopupWindow> | IDialogOptions,
+//         options?: IDialogOptions): Promise<T> {
+//         if (arguments.length <= 1) {
+//             options = arguments[0];
+//             window = this;
+//         }
+//         options ??= {};
+//         options.modal ??= true;
+//         // this will force lastTarget to be set
+//         await sleep(1);
+//         return PopupService.showWindow<T>(PopupService.lastTarget, window as any, options);
+//     }
+
+//     @BindableProperty
+//     public title?: string;
+
+//     public viewModelTitle?: string;
+
+//     public close: (r?) => void;
+
+//     public cancel: (r?) => void;
+
+//     public titleRenderer: () => XNode;
+
+//     public closeButtonRenderer: () => XNode;
+
+//     @BindableProperty
+//     public closeWarning: string;
+
+//     protected init() {
+//         // do nothing...
+//     }
+
+//     protected async requestCancel() {
+//         if (this.closeWarning) {
+//             if (!await ConfirmPopup.confirm({
+//                 message : this.closeWarning
+//             })) {
+//                 return;
+//             }
+//         }
+//         this.cancel();
+//     }
+
+//     protected preCreate(): void {
+//         this.title = null;
+//         this.viewModelTitle = null;
+//         const handler = (e: KeyboardEvent) => {
+//             if (e.key === "Escape") {
+//                 this.app.runAsync(() => this.requestCancel());
+//                 e.preventDefault();
+//                 return;
+//             }
+//         };
+//         this.bindEvent(this.element, "keydown", handler);
+//         // document.body.addEventListener("keydown", handler);
+//         // this.registerDisposable({
+//         //     dispose() {
+//         //         document.body.removeEventListener("keydown", handler);
+//         //     }
+//         // });
+//         this.element.dataset.popupWindow = "popup-window";
+
+//         setTimeout((p) => {
+//             p.dataset.ready = "true";
+//         }, 10, this.element);
+//     }
+
+//     protected render(node: XNode, e?: any, creator?: any): void {
+//         this.render = super.render;
+//         const titleContent = this.titleRenderer?.() ?? <span
+//             class="title-text" text={Bind.oneWay(() => this.title || this.viewModelTitle)}/>;
+//         const closeButton = this.closeButtonRenderer?.() ?? <button
+//             class="popup-close-button"
+//             text="x"
+//             eventClick={Bind.event(() => this.requestCancel())}/>;
+//         const a = node.attributes ??= {};
+//         a["data-window-content"] = "window-content";
+//         const extracted = this.extractControlProperties(node);
+//         super.render(<div
+//             viewModelTitle={Bind.oneWay(() => this.viewModel.title)}
+//             { ... extracted }>
+//             <div class="title title-host">
+//                 { titleContent }
+//                 { closeButton }
+//             </div>
+//             { node }
+//         </div>);
+
+//         this.runAfterInit(() => {
+//             if (!this.element) {
+//                 return;
+//             }
+//             const host = this.element.getElementsByClassName("title-host")[0];
+//             this.setupDragging(host as HTMLElement);
+//             // this.element may become null if it was immediately
+//             // closed, very rare case, but possible if
+//             // supplied cancelToken was cancelled
+//             const anyAutofocus = this.element.querySelector(`*[autofocus]`);
+//             if (!anyAutofocus) {
+//                 const windowContent = this.element.querySelector("[data-window-content]");
+//                 if (windowContent) {
+//                     const firstInput = windowContent.querySelector("input,button,a") as HTMLInputElement;
+//                     if (firstInput) {
+//                         firstInput.focus();
+//                         return;
+//                     }
+//                 }
+
+//                 const cb = this.element.querySelector(".popup-close-button") as HTMLButtonElement;
+//                 if (cb) {
+//                     cb.focus();
+//                 }
+//                 return;
+//             }
+//         });
+//     }
+
+//     protected setupDragging(tp: HTMLElement): void {
+//         this.bindEvent(tp, "mousedown", (startEvent: MouseEvent) => {
+//             if ((startEvent.target as HTMLElement).tagName === "BUTTON") {
+//                 return;
+//             }
+//             startEvent.preventDefault();
+//             const disposables: IDisposable[] = [];
+//             // const offset = AtomUI.screenOffset(tp);
+//             const element = this.element;
+//             const offset = { x: element.offsetLeft, y: element.offsetTop };
+//             if (element.style.transform !== "none") {
+//                 offset.x -= element.offsetWidth / 2;
+//                 offset.y -= element.offsetHeight / 2;
+//                 element.style.left = offset.x + "px";
+//                 element.style.top = offset.y + "px";
+//                 element.style.transform = "none";
+//             }
+//             this.element.dataset.dragging = "true";
+//             const rect: IRect = { x: startEvent.clientX, y: startEvent.clientY };
+//             const cursor = tp.style.cursor;
+//             tp.style.cursor = "move";
+//             disposables.push(this.bindEvent(document.body, "mousemove", (moveEvent: MouseEvent) => {
+//                 const { clientX, clientY } = moveEvent;
+//                 const dx = clientX - rect.x;
+//                 const dy = clientY - rect.y;
+
+//                 const finalX = offset.x + dx;
+//                 const finalY = offset.y + dy;
+//                 if (finalX < 5 || finalY < 5) {
+//                     return;
+//                 }
+
+//                 offset.x = finalX;
+//                 offset.y = finalY;
+
+//                 this.element.style.left = offset.x + "px";
+//                 this.element.style.top = offset.y + "px";
+
+//                 rect.x = clientX;
+//                 rect.y = clientY;
+//             }));
+//             disposables.push(this.bindEvent(document.body, "mouseup", (endEvent: MouseEvent) => {
+//                 tp.style.cursor = cursor;
+//                 this.element.removeAttribute("data-dragging");
+//                 for (const iterator of disposables) {
+//                     iterator.dispose();
+//                 }
+//             }));
+//         });
+//     }
+
+// }
+
+// // @ts-ignore
+// delete PopupWindow.prototype.init;
 
 CSS(StyleRule()
     .display("grid")
@@ -531,74 +535,74 @@ CSS(StyleRule()
     )
 , "div[data-confirm-popup=confirm-popup]");
 
-class ConfirmPopup extends PopupWindow {
-
-    public static async confirm({
-        message,
-        title = "Confirm",
-        yesLabel = "Yes",
-        noLabel = "No",
-        cancelLabel = null
-    }): Promise<boolean> {
-        return PopupService.confirm({ title, message, yesLabel, noLabel,  cancelLabel});
-    }
-
-    public message: string;
-
-    public messageRenderer: () => XNode;
-
-    public yesLabel: string;
-
-    public noLabel: string;
-
-    public cancelLabel: string;
-
-    protected preCreate(): void {
-        super.preCreate();
-        this.yesLabel = "Yes";
-        this.noLabel = "No";
-        this.cancelLabel = null;
-    }
-
-    protected requestCancel(): Promise<void> {
-        this.cancel();
-        return Promise.resolve();
-    }
-
-    protected render(node: XNode, e?: any, creator?: any) {
-        this.render = super.render;
-        this.element.dataset.confirmPopup = "confirm-popup";
-        this.closeButtonRenderer = () => <div/>;
-        const extracted = this.extractControlProperties(node);
-        const na = node.attributes ??= {};
-        na["data-element"] = "message";
-        super.render(<div { ... extracted }>
-            { node }
-            <div data-element="buttons">
-                <button
-                    class="yes"
-                    autofocus={true}
-                    text={Bind.oneWay(() => this.yesLabel)}
-                    eventClick={() => this.close(true)}
-                    style-display={Bind.oneWay(() => !!this.yesLabel)}
-                    />
-                <button
-                    class="no"
-                    text={Bind.oneWay(() => this.noLabel)}
-                    eventClick={() => this.close(false)}
-                    style-display={Bind.oneWay(() => !!this.noLabel)}
-                    />
-                <button
-                    class="cancel"
-                    text={Bind.oneWay(() => this.cancelLabel)}
-                    eventClick={() => this.requestCancel()}
-                    style-display={Bind.oneWay(() => !!this.cancelLabel)}
-                    />
-            </div>
-        </div>);
-    }
-
-}
+// class ConfirmPopup extends PopupWindow {
+
+//     public static async confirm({
+//         message,
+//         title = "Confirm",
+//         yesLabel = "Yes",
+//         noLabel = "No",
+//         cancelLabel = null
+//     }): Promise<boolean> {
+//         return PopupService.confirm({ title, message, yesLabel, noLabel,  cancelLabel});
+//     }
+
+//     public message: string;
+
+//     public messageRenderer: () => XNode;
+
+//     public yesLabel: string;
+
+//     public noLabel: string;
+
+//     public cancelLabel: string;
+
+//     protected preCreate(): void {
+//         super.preCreate();
+//         this.yesLabel = "Yes";
+//         this.noLabel = "No";
+//         this.cancelLabel = null;
+//     }
+
+//     protected requestCancel(): Promise<void> {
+//         this.cancel();
+//         return Promise.resolve();
+//     }
+
+//     protected render(node: XNode, e?: any, creator?: any) {
+//         this.render = super.render;
+//         this.element.dataset.confirmPopup = "confirm-popup";
+//         this.closeButtonRenderer = () => <div/>;
+//         const extracted = this.extractControlProperties(node);
+//         const na = node.attributes ??= {};
+//         na["data-element"] = "message";
+//         super.render(<div { ... extracted }>
+//             { node }
+//             <div data-element="buttons">
+//                 <button
+//                     class="yes"
+//                     autofocus={true}
+//                     text={Bind.oneWay(() => this.yesLabel)}
+//                     eventClick={() => this.close(true)}
+//                     style-display={Bind.oneWay(() => !!this.yesLabel)}
+//                     />
+//                 <button
+//                     class="no"
+//                     text={Bind.oneWay(() => this.noLabel)}
+//                     eventClick={() => this.close(false)}
+//                     style-display={Bind.oneWay(() => !!this.noLabel)}
+//                     />
+//                 <button
+//                     class="cancel"
+//                     text={Bind.oneWay(() => this.cancelLabel)}
+//                     eventClick={() => this.requestCancel()}
+//                     style-display={Bind.oneWay(() => !!this.cancelLabel)}
+//                     />
+//             </div>
+//         </div>);
+//     }
+
+// }
 
 function findHostAndPosition(opener: HTMLElement) {
     let root = opener;
@@ -833,7 +837,7 @@ export default class PopupService {
 
     public static showWindow<T>(
         opener: HTMLElement,
-        popupClass: IClassOf<PopupWindow>,
+        popupClass: typeof PopupWindow,
         popupOptions?: IDialogOptions
     ): Promise<T> {
         return new Promise<T>((resolve, reject) => {