@web-atoms/core 2.2.97 → 2.2.102

package/src/web/core/AtomUI.ts

@@ -6,18 +6,25 @@ export class AncestorEnumerator {
         let start = e?.parentElement;
         while (start) {
             if(filter(start)) {
-                return start;
+                return start as HTMLElement;
             }
             start = start.parentElement;
         }
     }
 
+    /**
+     * Finds the parent element that matches given selector. It does not
+     * return element that contains the selector.
+     * @param e target Element
+     * @param selector selector to match
+     * @returns 
+     */
     public static findSelector(e: HTMLElement, selector: string) {
         let start = e?.parentElement;
         while (start) {
-            const found = start.querySelector(selector);
+            const found = start.matches(selector);
             if(found) {
-                return found;
+                return start as HTMLElement;
             }
             start = start.parentElement;
         }

package/src/web/services/NotificationPopup.tsx

@@ -1,21 +1,18 @@
-import Bind from "../../core/Bind";
-import Colors from "../../core/Colors";
 import XNode from "../../core/XNode";
-import StyleRule from "../../style/StyleRule";
-import CSS from "../styles/CSS";
+import styled from "../../style/styled";
 import { PopupWindow } from "./PopupService";
 
-const css = CSS(StyleRule("notification-popup")
-    .padding(5)
-    .fontSize("larger")
-    .nested(StyleRule(".error")
-        .color(Colors.red)
-        .borderColor(Colors.red)
-    )
-    .nested(StyleRule(".warning")
-        .backgroundColor(Colors.lightYellow)
-    )
-);
+const css = styled.css `
+    padding: 5px;
+    font-size: larger;
+    & .error {
+        color: red;
+        border-color: red;
+    }
+    & .warning {
+        background-color: lightyellow;
+    }
+`.installLocal();
 
 export default function NotificationPopup({
     message,

package/src/web/services/PopupService.tsx

@@ -1,17 +1,11 @@
 import { App } from "../../App";
 import { AtomDisposableList } from "../../core/AtomDisposableList";
-import Bind from "../../core/Bind";
-import { BindableProperty } from "../../core/BindableProperty";
-import Colors from "../../core/Colors";
 import { getOwnInheritedProperty } from "../../core/InheritedProperty";
-import sleep from "../../core/sleep";
 import { CancelToken, IClassOf, IDisposable, IRect } from "../../core/types";
 import XNode, { constructorNeedsArgumentsSymbol } from "../../core/XNode";
-import DISingleton from "../../di/DISingleton";
-import StyleRule from "../../style/StyleRule";
-import { AtomWindowViewModel } from "../../view-model/AtomWindowViewModel";
+import styled from "../../style/styled";
 import { AtomControl } from "../controls/AtomControl";
-import CSS from "../styles/CSS";
+
 
 import PopupWindowA, { ConfirmPopup } from "./PopupWindow";
 
@@ -24,90 +18,143 @@ document.body.addEventListener("click", (e) => {
     }
 });
 
-CSS(StyleRule()
-    .custom("contain", "none !important")
-, "[data-force-contain=none]");
-
-CSS(StyleRule()
-    .position("relative")
-    .height(0)
-    .width(0)
-    .left(0)
-    .child(StyleRule("*")
-        .position("absolute")
-        .left(0)
-        .top(0)
-        .padding(5)
-        .maxHeight(300)
-        .overflow("auto")
-        .borderRadius(5)
-        .backgroundColor(Colors.white)
-        .zIndex(200)
-        .defaultBoxShadow()
-    )
-, "*[data-inline-popup=left]");
-
-CSS(StyleRule()
-    .position("absolute")
-    .height(0)
-    .width(0)
-    .right(0)
-    .child(StyleRule("*")
-        .position("absolute")
-        .right(0)
-        .top(0)
-        .padding(5)
-        .maxHeight(300)
-        .overflow("auto")
-        .borderRadius(5)
-        .backgroundColor(Colors.white)
-        .zIndex(200)
-        .defaultBoxShadow()
-    )
-, "*[data-inline-popup=right]");
-
-CSS(StyleRule()
-    .position("relative")
-    .height(0)
-    .width(0)
-    .left(0)
-    .child(StyleRule("*")
-        .position("absolute")
-        .left(0)
-        .top(0)
-        .padding(5)
-        .maxHeight(300)
-        .overflow("auto")
-        .borderRadius(5)
-        .backgroundColor(Colors.white)
-        .zIndex(200)
-        .defaultBoxShadow()
-    )
-, "*[data-inline-popup=inline-left]");
-
-CSS(StyleRule("popup")
-    .position("fixed")
-    .left("50%")
-    .top("50%")
-    .transform("translate(-50%, -50%)" as any)
-    .zIndex(10000)
-    .padding(5)
-    .backgroundColor(Colors.white)
-    .border("solid 1px lightgray")
-    .borderRadius(5)
-    .boxShadow("rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;")
-    .display("inline-block")
-, "*[data-center-popup]");
-
-
-const popupCss = CSS(StyleRule("popup")
-    .padding(5)
-    .backgroundColor(Colors.white)
-    .border("solid 1px lightgray")
-    .borderRadius(5)
-    .boxShadow("rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;")
-    .display("inline-block")
-);
+    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; 
+    }    
+
+    div[data-confirm-popup=confirm-popup] {
+
+        display: grid; 
+    
+        & .yes {
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border-width: 1px;
+            border-color: #00000000;
+            margin: 5px;
+            margin-right: 10px;
+            background-color: #90ee90; 
+        }
+        
+        & .no {
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border-width: 1px;
+            border-color: #00000000;
+            margin: 5px;
+            margin-right: 10px;
+            background-color: #ff0000;
+            color: #ffffff; 
+        }
+            
+        & .cancel {
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border-width: 1px;
+            border-color: #00000000;
+            margin: 5px;
+            margin-right: 10px;
+            background-color: #808080;
+        }
+        
+        & > [data-element=message] {
+            overflow: auto; 
+        }    
+    }
+
+`.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();
 
 export interface IPopupOptions {
     /**
@@ -153,92 +200,6 @@ 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]");
-
 export class PopupControl extends AtomControl {
 
     public static showControl<T>(
@@ -497,44 +458,6 @@ export class PopupControl extends AtomControl {
 // // @ts-ignore
 // delete PopupWindow.prototype.init;
 
-CSS(StyleRule()
-    .display("grid")
-    .nested(StyleRule(".yes")
-        .borderRadius(9999)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .borderWidth(1)
-        .borderColor(Colors.transparent)
-        .margin(5)
-        .marginRight(10)
-        .backgroundColor(Colors.lightGreen)
-    )
-    .nested(StyleRule(".no")
-        .borderRadius(9999)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .borderWidth(1)
-        .borderColor(Colors.transparent)
-        .margin(5)
-        .marginRight(10)
-        .backgroundColor(Colors.red)
-        .color(Colors.white)
-    )
-    .nested(StyleRule(".cancel")
-        .borderRadius(9999)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .borderWidth(1)
-        .borderColor(Colors.transparent)
-        .margin(5)
-        .marginRight(10)
-        .backgroundColor(Colors.gray)
-    )
-    .child(StyleRule("[data-element=message]")
-        .overflow("auto")
-    )
-, "div[data-confirm-popup=confirm-popup]");
-
 // class ConfirmPopup extends PopupWindow {
 
 //     public static async confirm({

package/dist/web/styles/CommonStyles.d.ts

@@ -1,35 +0,0 @@
-export declare function combine(...names: any[]): string;
-declare const CommonStyles: {
-    combine: typeof combine;
-    color: {
-        yellow: string;
-        green: string;
-        red: string;
-    };
-    backgroundColor: {
-        yellow: string;
-        green: string;
-        red: string;
-    };
-    bold: string;
-    margin5: string;
-    padding5: string;
-    borderRadius9999: string;
-    borderRadius5: string;
-    italic: string;
-    overflow: {
-        auto: string;
-        hidden: string;
-    };
-    flex: {
-        inline: string;
-        stretch: string;
-        alignItemsCenter: string;
-        horizontal: string;
-        vertical: string;
-        justifyContentSpaceAround: string;
-        toString: () => string;
-    };
-};
-export default CommonStyles;
-//# sourceMappingURL=CommonStyles.d.ts.map

package/dist/web/styles/CommonStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CommonStyles.d.ts","sourceRoot":"","sources":["../../../src/web/styles/CommonStyles.ts"],"names":[],"mappings":"AAIA,wBAAgB,OAAO,CAAC,GAAI,KAAK,EAAE,GAAG,EAAE,UAavC;AAOD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/web/styles/CommonStyles.js

@@ -1,69 +0,0 @@
-System.register(["../../core/Colors", "../../style/StyleRule", "./CSS"], function (_export, _context) {
-  "use strict";
-
-  var Colors, StyleRule, CSS, CommonStyles;
-  function combine(...names) {
-    const r = [];
-    for (const iterator of names) {
-      if (!iterator) {
-        continue;
-      }
-      const v = iterator.toString();
-      if (!v) {
-        continue;
-      }
-      r.push(v);
-    }
-    return r.join(" ");
-  }
-  function CSSToString(s) {
-    const name = CSS(s);
-    return () => name;
-  }
-  _export("combine", combine);
-  return {
-    setters: [function (_coreColors) {
-      Colors = _coreColors.default;
-    }, function (_styleStyleRule) {
-      StyleRule = _styleStyleRule.default;
-    }, function (_CSS) {
-      CSS = _CSS.default;
-    }],
-    execute: function () {
-      CommonStyles = {
-        combine,
-        color: {
-          yellow: CSS(StyleRule().color(Colors.yellow)),
-          green: CSS(StyleRule().color(Colors.green)),
-          red: CSS(StyleRule().color(Colors.red))
-        },
-        backgroundColor: {
-          yellow: CSS(StyleRule().backgroundColor(Colors.yellow)),
-          green: CSS(StyleRule().backgroundColor(Colors.green)),
-          red: CSS(StyleRule().backgroundColor(Colors.red))
-        },
-        bold: CSS(StyleRule().fontWeight("bold")),
-        margin5: CSS(StyleRule().margin(5)),
-        padding5: CSS(StyleRule().padding(5)),
-        borderRadius9999: CSS(StyleRule().borderRadius(9999)),
-        borderRadius5: CSS(StyleRule().borderRadius(5)),
-        italic: CSS(StyleRule().fontStyle("italic")),
-        overflow: {
-          auto: CSS(StyleRule().overflow("auto")),
-          hidden: CSS(StyleRule().overflow("hidden"))
-        },
-        flex: {
-          inline: CSS(StyleRule().display("inline-flex")),
-          stretch: CSS(StyleRule().flexStretch()),
-          alignItemsCenter: CSS(StyleRule().alignItems("center")),
-          horizontal: CSS(StyleRule().flexDirection("row")),
-          vertical: CSS(StyleRule().flexDirection("column")),
-          justifyContentSpaceAround: CSS(StyleRule().justifyContent("space-around")),
-          toString: CSSToString(StyleRule().display("flex"))
-        }
-      };
-      _export("default", CommonStyles);
-    }
-  };
-});
-//# sourceMappingURL=CommonStyles.js.map

package/dist/web/styles/CommonStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["combine","names","r","iterator","v","toString","push","join","CSSToString","s","name","CSS","_export","setters","_coreColors","Colors","default","_styleStyleRule","StyleRule","_CSS","execute","CommonStyles","color","yellow","green","red","backgroundColor","bold","fontWeight","margin5","margin","padding5","padding","borderRadius9999","borderRadius","borderRadius5","italic","fontStyle","overflow","auto","hidden","flex","inline","display","stretch","flexStretch","alignItemsCenter","alignItems","horizontal","flexDirection","vertical","justifyContentSpaceAround","justifyContent"],"sources":["../../../src/web/styles/CommonStyles.ts"],"sourcesContent":[null],"mappings":"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"}

package/src/web/styles/CommonStyles.ts

@@ -1,64 +0,0 @@
-import Colors from "../../core/Colors";
-import StyleRule, { AtomStyleRules } from "../../style/StyleRule";
-import CSS from "./CSS";
-
-export function combine(... names: any[]) {
-    const r = [];
-    for (const iterator of names) {
-        if (!iterator) {
-            continue;
-        }
-        const v = iterator.toString();
-        if (!v) {
-            continue;
-        }
-        r.push(v);
-    }
-    return r.join(" ");
-}
-
-function CSSToString(s) {
-    const name = CSS(s);
-    return () => name;
-}
-
-const CommonStyles = {
-    combine,
-    color: {
-        yellow: CSS(StyleRule()
-            .color(Colors.yellow)),
-        green: CSS(StyleRule()
-            .color(Colors.green)),
-        red: CSS(StyleRule()
-            .color(Colors.red)),
-    },
-    backgroundColor: {
-        yellow: CSS(StyleRule()
-            .backgroundColor(Colors.yellow)),
-        green: CSS(StyleRule()
-            .backgroundColor(Colors.green)),
-        red: CSS(StyleRule()
-            .backgroundColor(Colors.red)),
-    },
-    bold: CSS(StyleRule().fontWeight("bold")),
-    margin5: CSS(StyleRule().margin(5)),
-    padding5: CSS(StyleRule().padding(5)),
-    borderRadius9999: CSS(StyleRule().borderRadius(9999)),
-    borderRadius5: CSS(StyleRule().borderRadius(5)),
-    italic: CSS(StyleRule().fontStyle("italic")),
-    overflow: {
-        auto: CSS(StyleRule().overflow("auto")),
-        hidden: CSS(StyleRule().overflow("hidden"))
-    },
-    flex: {
-        inline: CSS(StyleRule().display("inline-flex")),
-        stretch: CSS(StyleRule().flexStretch()),
-        alignItemsCenter: CSS(StyleRule().alignItems("center")),
-        horizontal: CSS(StyleRule().flexDirection("row")),
-        vertical: CSS(StyleRule().flexDirection("column")),
-        justifyContentSpaceAround: CSS(StyleRule().justifyContent("space-around")),
-        toString: CSSToString(StyleRule().display("flex"))
-    },
-};
-
-export default CommonStyles;