@web-atoms/core 2.4.30 → 2.4.33

package/src/web/services/PopupService.global.less

@@ -0,0 +1,91 @@
+
+[data-force-contain=none] {
+    contain: none !important; 
+}
+
+*[data-inline-popup=left] {
+    position: relative;
+    height: 0px;
+    width: 0px;
+    left: 0px; 
+    
+    & > * {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        padding: 5px;
+        max-height: 300px;
+        overflow: auto;
+        border-radius: 5px;
+        background-color: #ffffff;
+        z-index: 200;
+        box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;;
+        border: solid 1px rgba(0, 0, 0, 0.05); 
+    }
+}
+
+*[data-inline-popup=right] {
+    position: absolute;
+    height: 0px;
+    width: 0px;
+    right: 0px; 
+
+
+    & > * {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        padding: 5px;
+        max-height: 300px;
+        overflow: auto;
+        border-radius: 5px;
+        background-color: #ffffff;
+        z-index: 200;
+        box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;;
+        border: solid 1px rgba(0, 0, 0, 0.05); 
+    }
+}
+
+*[data-inline-popup=inline-left] {
+    position: relative;
+    height: 0px;
+    width: 0px;
+    left: 0px; 
+
+    & > * {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        padding: 5px;
+        max-height: 300px;
+        overflow: auto;
+        border-radius: 5px;
+        background-color: #ffffff;
+        z-index: 200;
+        box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;;
+        border: solid 1px rgba(0, 0, 0, 0.05); 
+    }
+}
+
+*[data-center-popup] {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10000;
+    padding: 5px;
+    background-color: #ffffff;
+    border: solid 1px lightgray;
+    border-radius: 5px;
+    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;;
+    display: inline-block; 
+}    
+
+.web-atoms-popup-local {
+    padding: 5px;
+    background-color: #ffffff;
+    border: solid 1px lightgray;
+    border-radius: 5px;
+    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;;
+    display: inline-block;
+}

package/src/web/services/PopupService.tsx

@@ -1,14 +1,15 @@
 import { App } from "../../App";
 import { AtomDisposableList } from "../../core/AtomDisposableList";
 import { getOwnInheritedProperty } from "../../core/InheritedProperty";
-import { CancelToken, IClassOf, IDisposable, IRect } from "../../core/types";
-import XNode, { constructorNeedsArgumentsSymbol } from "../../core/XNode";
-import styled from "../../style/styled";
+import { CancelToken } from "../../core/types";
+import XNode from "../../core/XNode";
 import { AtomControl } from "../controls/AtomControl";
 
+import "./PopupService.global.less";
 
 import PopupWindowA, { ConfirmPopup } from "./PopupWindow";
 
+
 export const PopupWindow = PopupWindowA;
 
 // let lastTarget = null;
@@ -18,100 +19,7 @@ document.body.addEventListener("click", (e) => {
     }
 });
 
-    styled.css `
-
-    [data-force-contain=none] {
-        contain: none !important; 
-    }
-
-    *[data-inline-popup=left] {
-        position: relative;
-        height: 0px;
-        width: 0px;
-        left: 0px; 
-        
-        & > * {
-            position: absolute;
-            left: 0px;
-            top: 0px;
-            padding: 5px;
-            max-height: 300px;
-            overflow: auto;
-            border-radius: 5px;
-            background-color: #ffffff;
-            z-index: 200;
-            box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;;
-            border: solid 1px rgba(0, 0, 0, 0.05); 
-        }
-    }
-
-    *[data-inline-popup=right] {
-        position: absolute;
-        height: 0px;
-        width: 0px;
-        right: 0px; 
-    
-    
-        & > * {
-            position: absolute;
-            right: 0px;
-            top: 0px;
-            padding: 5px;
-            max-height: 300px;
-            overflow: auto;
-            border-radius: 5px;
-            background-color: #ffffff;
-            z-index: 200;
-            box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;;
-            border: solid 1px rgba(0, 0, 0, 0.05); 
-        }
-    }
-
-    *[data-inline-popup=inline-left] {
-        position: relative;
-        height: 0px;
-        width: 0px;
-        left: 0px; 
-
-        & > * {
-            position: absolute;
-            left: 0px;
-            top: 0px;
-            padding: 5px;
-            max-height: 300px;
-            overflow: auto;
-            border-radius: 5px;
-            background-color: #ffffff;
-            z-index: 200;
-            box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;;
-            border: solid 1px rgba(0, 0, 0, 0.05); 
-        }
-    }
-
-    *[data-center-popup] {
-        position: fixed;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 10000;
-        padding: 5px;
-        background-color: #ffffff;
-        border: solid 1px lightgray;
-        border-radius: 5px;
-        box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;;
-        display: inline-block; 
-    }    
-
-`.withId("popup-service-styles").installGlobal();
-
-const popupCss = styled.css `
-    padding: 5px;
-    background-color: #ffffff;
-    border: solid 1px lightgray;
-    border-radius: 5px;
-    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;;
-    display: inline-block;
-`.installLocal();
+const popupCss = "web-atoms-popup-local";
 
 export interface IPopupOptions {
     /**

package/src/web/services/PopupWindow.global.less

@@ -0,0 +1,157 @@
+[data-popup-window=popup-window] {
+    position: absolute;
+    border: solid 1px lightgray;
+    border-radius: 5px;
+    background-color: canvas;
+    color: canvastext;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 20px 1px rgba(0 0 0 / 75%);
+
+    display: grid;
+    align-items: stretch;
+    justify-items: stretch;
+    grid-template-rows: auto auto 1fr auto;
+    grid-template-columns: auto 1fr auto;
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32) ;
+    overflow: hidden;
+
+    [data-window-modal-background=background] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
+
+    &[data-no-width=true] {
+        max-width: 95%;
+        min-width: 300px;
+    }
+    &[data-no-height=true] {
+        max-height: 95%;
+        min-height: 100px;
+    }
+
+    &[data-maximize=true] {
+        width: 90%;
+        height: 90%;
+    }
+
+    &[data-ready=true] {
+        opacity: 1;
+    }
+    &[data-dragging=true] {
+        opacity: 0.5;
+    }
+    & > [data-window-element=icon] {
+        grid-row: 1;
+        grid-column: 1;
+        z-index: 2;
+    }
+    & > [data-window-element=title] {
+        grid-row: 1;
+        grid-column: 2;
+        font-size: medium;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: move;
+        padding: var(--spacing, 5px);
+        color: var(--accent-text-color, #424242);
+        z-index: 2;
+    }
+    & > [data-window-element=close] {
+        grid-row: 1;
+        grid-column: 3;
+        color: white;
+        background-color: red;
+        border-radius: 9999px;
+        border: none;
+        outline: none;
+        /* padding: 5px; */
+        font-family: monospace;
+        height: 20px;
+        width: 20px;
+        margin: 5px;
+        cursor: pointer;
+        text-transform: capitalize;
+        z-index: 2;
+    }
+    & > [data-window-element=action-bar] {
+        grid-row: 1;
+        grid-column: 1 / span 3;
+        align-self: stretch;
+        justify-self: stretch;
+        background-color: var(--accent-color, rgba(211, 211, 211, 0.2));
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        z-index: 1;
+    }
+    & > [data-window-element=header] {
+        margin-top: 5px;
+        grid-row: 2;
+        grid-column: 1 / span 3;
+    }
+    & > [data-window-element=content] {
+        margin-top: 5px;
+        grid-row: 3;
+        grid-column: 1 / span 3;
+        position: relative;
+        overflow: auto;
+        padding: var(--spacing-medium, 7px);
+        &[data-maximize=true] {
+            width: 90vw;
+            height: 90vh;
+        }
+    }
+    & > [data-window-element=footer] {
+        margin-top: 5px;
+        grid-row: 4;
+        grid-column: 1 / span 3;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        background-color: var(--command-bar-color, #80808025);
+
+        & > button, & > * > button {
+            border-radius: 9999px;
+            padding: 5px;
+            padding-left: 20px;
+            padding-right: 20px;
+            border-width: 1px;
+            border-color: transparent;
+            margin: 5px;
+            margin-left: 10px;
+        }            
+    }    
+}
+
+body > div[data-popup-window=popup-window], body > div[data-window-modal-background] {
+    position: fixed;
+}
+
+[data-confirm-popup=confirm-popup] {
+    & >[data-window-element=content] > [data-element=details] {
+        margin-top: 5px;
+        overflow: auto;
+        max-width: 80vw;
+        max-height: 50vh;
+    }
+    & > [data-window-element=footer] {
+
+        & > .yes {
+            background-color: #01af01;
+            color: white;
+        }
+        & > .no {
+            background-color: red;
+            color: white;
+        }
+        & > .cancel {
+            background-color: gray;
+            color: white;
+        }
+    }
+}

package/src/web/services/PopupWindow.tsx

@@ -3,12 +3,13 @@ import { BindableProperty } from "../../core/BindableProperty";
 import XNode from "../../core/XNode";
 import sleep from "../../core/sleep";
 import { CancelToken, IClassOf, IDisposable, IRect } from "../../core/types";
-import styled from "../../style/styled";
 import { AtomControl } from "../controls/AtomControl";
 import { ChildEnumerator } from "../core/AtomUI";
 import type PopupService from "./PopupService";
 import type { IDialogOptions } from "./PopupService";
 
+import "./PopupWindow.global.less";
+
 let popupService: typeof PopupService;
 
 const loadPopupService = async () => {
@@ -52,141 +53,6 @@ const focus = (popup: PopupWindow) => {
     (anyAutofocus as HTMLElement).focus?.();
 };
 
-    styled.css `
-        position: absolute;
-        border: solid 1px lightgray;
-        border-radius: 5px;
-        background-color: canvas;
-        color: canvastext;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        box-shadow: 0 0 20px 1px rgba(0 0 0 / 75%);
-
-        display: grid;
-        align-items: stretch;
-        justify-items: stretch;
-        grid-template-rows: auto auto 1fr auto;
-        grid-template-columns: auto 1fr auto;
-        opacity: 0;
-        transition: opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32) ;
-        overflow: hidden;
-
-        [data-window-modal-background=background] {
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
-
-        &[data-no-width=true] {
-            max-width: 95%;
-            min-width: 300px;
-        }
-        &[data-no-height=true] {
-            max-height: 95%;
-            min-height: 100px;
-        }
-
-        &[data-maximize=true] {
-            width: 90%;
-            height: 90%;
-        }
-
-        &[data-ready=true] {
-            opacity: 1;
-        }
-        &[data-dragging=true] {
-            opacity: 0.5;
-        }
-        & > [data-window-element=icon] {
-            grid-row: 1;
-            grid-column: 1;
-            z-index: 2;
-        }
-        & > [data-window-element=title] {
-            grid-row: 1;
-            grid-column: 2;
-            font-size: medium;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            cursor: move;
-            padding: var(--spacing, 5px);
-            color: var(--accent-text-color, #424242);
-            z-index: 2;
-        }
-        & > [data-window-element=close] {
-            grid-row: 1;
-            grid-column: 3;
-            color: white;
-            background-color: red;
-            border-radius: 9999px;
-            border: none;
-            outline: none;
-            /* padding: 5px; */
-            font-family: monospace;
-            height: 20px;
-            width: 20px;
-            margin: 5px;
-            cursor: pointer;
-            text-transform: capitalize;
-            z-index: 2;
-        }
-        & > [data-window-element=action-bar] {
-            grid-row: 1;
-            grid-column: 1 / span 3;
-            align-self: stretch;
-            justify-self: stretch;
-            background-color: var(--accent-color, rgba(211, 211, 211, 0.2));
-            border-top-left-radius: 5px;
-            border-top-right-radius: 5px;
-            z-index: 1;
-        }
-        & > [data-window-element=header] {
-            margin-top: 5px;
-            grid-row: 2;
-            grid-column: 1 / span 3;
-        }
-        & > [data-window-element=content] {
-            margin-top: 5px;
-            grid-row: 3;
-            grid-column: 1 / span 3;
-            position: relative;
-            overflow: auto;
-            padding: var(--spacing-medium, 7px);
-            &[data-maximize=true] {
-                width: 90vw;
-                height: 90vh;
-            }
-        }
-        & > [data-window-element=footer] {
-            margin-top: 5px;
-            grid-row: 4;
-            grid-column: 1 / span 3;
-            padding-top: 5px;
-            padding-bottom: 5px;
-            background-color: var(--command-bar-color, #80808025);
-
-            & > button, & > * > button {
-                border-radius: 9999px;
-                padding: 5px;
-                padding-left: 20px;
-                padding-right: 20px;
-                border-width: 1px;
-                border-color: transparent;
-                margin: 5px;
-                margin-left: 10px;
-            }            
-        }
-
-    `.installGlobal("[data-popup-window=popup-window]")
-
-    styled.css `
-        position: fixed;
-    `.installGlobal("body > div[data-popup-window=popup-window], body > div[data-window-modal-background]");
-
 export default class PopupWindow extends AtomControl {
 
     public static async showWindow<T>(options?: IDialogOptions): Promise<T>;
@@ -461,30 +327,6 @@ export default class PopupWindow extends AtomControl {
 // @ts-ignore
 delete PopupWindow.prototype.init;
 
-    styled.css `
-        & >[data-window-element=content] > [data-element=details] {
-            margin-top: 5px;
-            overflow: auto;
-            max-width: 80vw;
-            max-height: 50vh;
-        }
-        & > [data-window-element=footer] {
-
-            & > .yes {
-                background-color: #01af01;
-                color: white;
-            }
-            & > .no {
-                background-color: red;
-                color: white;
-            }
-            & > .cancel {
-                background-color: gray;
-                color: white;
-            }
-        }
-    `.installGlobal("[data-confirm-popup=confirm-popup]")
-
 export class ConfirmPopup extends PopupWindow {
 
     public static async confirm({