@web-atoms/web-controls 2.3.137 → 2.3.138

package/src/basic/DataGrid.tsx

@@ -1,12 +1,7 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
-import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
 import { CancelToken } from "@web-atoms/core/dist/core/types";
-import WatchProperty from "@web-atoms/core/dist/core/WatchProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater, { getParentRepeaterItem, SelectorCheckBox } from "./AtomRepeater";
 import { EditableInput, getPropertyInfo, IPropertyInfo } from "./Editable";
 import TableRepeater from "./TableRepeater";
@@ -125,36 +120,6 @@ export type IDataGridColumn = IDataGridColumnWithLabel | IDataGridColumnWithLabe
 
 // }
 
-// CSS(StyleRule()
-//     .child(StyleRule("thead")
-//         .child(StyleRule("tr[data-header=header]")
-//             .child(StyleRule("th")
-//                 .child(StyleRule("i[data-sort]")
-//                     .marginRight(5)
-//                     .marginLeft(3)
-//                     .opacity("0.5")
-//                 )
-//                 .child(StyleRule("input[type=checkbox]")
-//                     .margin(5)
-//                 )
-//             )
-//         )
-//     )
-//     .child(StyleRule("tbody")
-//         .child(StyleRule("tr[data-item-index]")
-//             .hoverBackgroundColor(Colors.lightSkyBlue.withAlphaPercent(0.3))
-//             .and(StyleRule("[data-selected-item=true]")
-//                 .backgroundColor(Colors.lightGray.withAlphaPercent(0.4))
-//             )
-//             .child(StyleRule("td[data-ellipsis]")
-//                 .maxWidth("200px")
-//                 .overflow("hidden")
-//                 .textOverflow("ellipsis")
-//                 .whiteSpace("nowrap")
-//             )
-//         )
-//     )
-// , "table[data-data-grid=data-grid]");
 
 export const SelectAllColumn: IDataGridColumn = {
     header: "Select All",

package/src/basic/DateField.tsx

@@ -1,17 +1,10 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import DateTime from "@web-atoms/date-time/dist/DateTime";
 import Calendar, { ICalendarDate } from "./Calendar";
-import ComboBox from "./ComboBox";
 import InlinePopup, { InlinePopupButton } from "./InlinePopup";
-import PopupButton from "./PopupButton";
-import ToggleButtonBar from "./ToggleButtonBar";
 import TimeEditor from "./TimeEditor";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 

package/src/basic/DropDown.tsx

@@ -1,11 +1,5 @@
-import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import { CancelToken, IDisposable } from "@web-atoms/core/dist/core/types";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater, { askSuggestion, askSuggestionPopup,
     disposeChildren, Match, MatchAnyCaseInsensitive } from "./AtomRepeater";
 

package/src/basic/Expander.tsx

@@ -1,9 +1,4 @@
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 
 import "./styles/expander-style";
 

package/src/basic/FormField.tsx

@@ -1,14 +1,9 @@
 import type { App } from "@web-atoms/core/dist/App";
 import Bind from "@web-atoms/core/dist/core/Bind";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import FormattedString from "@web-atoms/core/dist/core/FormattedString";
-import { CancelToken } from "@web-atoms/core/dist/core/types";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
 import "./styles/form-field-style";
 
 export interface IFormField {

package/src/basic/InlinePopup.tsx

@@ -1,13 +1,9 @@
 import { App } from "@web-atoms/core/dist/App";
 import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import sleep from "@web-atoms/core/dist/core/sleep";
-import { CancelToken } from "@web-atoms/core/dist/core/types";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule, { ContentAlignType } from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { IPopupOptions } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import IElement from "./IElement";
 
 import "./styles/inline-popup-style";
@@ -205,18 +201,6 @@ export interface IInlinePopupButtonOptions extends IElement {
     popup?: PopupFactory;
 }
 
-// CSS(StyleRule()
-//     .flexLayout({ alignItems: "center", inline: true, justifyContent: "center"})
-//     .flexWrap("wrap")
-//     .padding(3)
-//     .paddingLeft(5)
-//     .paddingRight(5)
-//     .and(StyleRule("[data-has-border=false]")
-//         .border("none")
-//         .backgroundColor(Colors.transparent)
-//     )
-// , "*[data-inline-popup-button=inline-popup-button]");
-
 export type PopupFactory = (data) => XNode;
 
 document.body.addEventListener("click", (e) => {

package/src/basic/InlinePopupControl.tsx

@@ -1,8 +1,5 @@
-import { App } from "@web-atoms/core/dist/App";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { IPopupOptions, PopupControl } from "@web-atoms/core/dist/web/services/PopupService";
 
 export default class InlinePopupControl extends PopupControl {

package/src/basic/MaskedInput.tsx

@@ -1,6 +1,4 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import IElement from "./IElement";
 
 import "./styles/masked-input-style";

package/src/basic/PopupButton.tsx

@@ -1,7 +1,5 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
-import InlinePopup, { IInlinePopupButtonOptions, InlinePopupButton } from "./InlinePopup";
+import { IInlinePopupButtonOptions, InlinePopupButton } from "./InlinePopup";
 
 import "./styles/popup-button-style";
 

package/src/basic/RadioButtonList.tsx

@@ -1,10 +1,4 @@
-import Bind from "@web-atoms/core/dist/core/Bind";
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater from "./AtomRepeater";
 
 import "./styles/radio-button-list-style";

package/src/basic/Swipe.tsx

@@ -1,6 +1,4 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import "./styles/swipe-style";
 
 interface ISwipeStart {

package/src/basic/Switch.tsx

@@ -1,6 +1,4 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import IElement from "./IElement";
 
 import "./styles/switch-style";

package/src/basic/TableRepeater.tsx

@@ -1,8 +1,5 @@
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
-import AtomRepeater, { disposeChildren } from "./AtomRepeater";
+import AtomRepeater from "./AtomRepeater";
 
 export default class TableRepeater extends AtomRepeater {
 

package/src/basic/TitleEditor.tsx

@@ -1,8 +1,5 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import IElement from "./IElement";
-import { InlinePopupButton } from "./InlinePopup";
 
 import "./styles/title-editor-style";
 

package/src/basic/ToggleButtonBar.tsx

@@ -1,8 +1,5 @@
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater from "./AtomRepeater";
 
 import "./styles/toggle-button-bar-style";

package/src/basic/Tooltip.tsx

@@ -1,11 +1,7 @@
-import Colors from "@web-atoms/core/dist/core/Colors";
 import { CancelToken } from "@web-atoms/core/dist/core/types";
-import XNode, { xnodeSymbol } from "@web-atoms/core/dist/core/XNode";
-import StyleRule, { AnimationType } from "@web-atoms/core/dist/style/StyleRule";
+import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl";
-import PopupService, { IPopup, PopupControl } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
-import AtomRepeater, { getParentRepeaterItem } from "./AtomRepeater";
+import { getParentRepeaterItem } from "./AtomRepeater";
 import InlinePopup from "./InlinePopup";
 
 import "./styles/tooltip-style";

package/src/button-bar/AtomButtonBar.tsx

@@ -1,30 +1,32 @@
-import Colors from "@web-atoms/core/dist/core/Colors";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 
-CSS(StyleRule()
-    .flexLayout({ inline: true, gap: 0 })
-    .border("solid 1px lightblue")
-    .borderRadius(10)
-    .child(StyleRule("*")
-        .borderRadius(10)
-        .padding(5)
-        .cursor("pointer")
-        .and(StyleRule(":first-child")
-            .borderTopRightRadius(0)
-            .borderBottomRightRadius(0)
-        )
-        .and(StyleRule(":last-child")
-            .borderTopLeftRadius(0)
-            .borderBottomLeftRadius(0)
-        )
-    )
-    .child(StyleRule("*[data-item=selected-item]")
-        .backgroundColor(Colors.lightBlue)
-    )
-, "*[data-button-bar=button-bar]");
+    styled.css `
+    display: inline-flex;
+    gap: 0;
+    align-items: center;
+    border: solid 1px lightblue;
+    border-radius: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    & > * {
+        border-radius: 10px;
+        padding: 5px;
+        cursor: pointer;
+        &:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius:0;
+        }
+        &:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        &[data-item=selected-item] {
+            background-color: lightblue;
+        }
+    }
+`.installGlobal("*[data-button-bar=button-bar]");
 
 export default class AtomButtonBar extends AtomItemsControl {
 

package/src/desktop-app/DesktopApp.tsx

@@ -1,58 +1,64 @@
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import MobileApp, { Drawer } from "../mobile-app/MobileApp";
+import styled from "@web-atoms/core/dist/style/styled";
 
-CSS(StyleRule()
-    .position("relative")
-    .overflow("hidden")
-    .display("grid")
-    .minWidth(900)
-    .gridTemplateRows("1fr auto")
-    .gridTemplateColumns("auto 1fr auto")
-    .child(StyleRule("[data-page-element=app]")
-        .gridRow("1")
-        .gridColumn("2")
-        .position("inherit")
-    )
-    .child(StyleRule("[data-page-element=menu-renderer]")
-        .gridRow("1")
-        .gridColumn("1")
-        .overflowX("hidden")
-        .overflowY("auto")
-    )
-    .child(StyleRule("[data-page-element=side-bar]")
-        .gridRow("1")
-        .gridColumn("3")
-        .overflowX("hidden")
-        .overflowY("auto")
-    )
-    .child(StyleRule("[data-page-element=status-bar]")
-        .gridRow("2")
-        .gridColumn("1 / span 3")
-        .padding(5)
-        .marginTop(2)
-        .borderTop("solid 1px lightgray")
-        .overflow("hidden")
-    )
-, "*[data-desktop-app=desktop-app]");
-
-CSS(StyleRule()
-    .width("100%")
-    .height("100%")
-, "html,body");
-
-CSS(StyleRule()
-    .overflow("hidden")
-    .display("flex")
-    .justifyContent("space-around")
-    .alignItems("stretch")
-    .alignContent("stretch")
-    .flexDirection("row")
-, "body");
+    styled.css `
+
+    html, body {
+        width: 100%;
+        height: 100%;
+    }
+
+    body {
+        overflow: hidden;
+        display: flex;
+        justify-content: space-around;
+        align-items: stretch;
+        align-content: stretch;
+        flex-direction: row;
+    }
+
+    *[data-desktop-app=desktop-app] {
+        position: relative;
+        overflow: hidden;
+        display: grid;
+        min-width: 900px;
+        grid-template-rows: 1fr auto;
+        grid-template-columns: auto 1fr auto;
+        
+        & > [data-page-element=app] {
+            grid-row: 1;
+            grid-column: 2;
+            position: inherit; 
+        }
+
+        & > [data-page-element=menu-renderer] {
+            grid-row: 1;
+            grid-column: 1;
+            overflow-x: hidden;
+            overflow-y: auto; 
+        }
+        
+        & > [data-page-element=side-bar] {
+            grid-row: 1;
+            grid-column: 3;
+            overflow-x: hidden;
+            overflow-y: auto; 
+        }
+        
+        & > [data-page-element=status-bar] {
+            grid-row: 2;
+            grid-column: 1 / span 3;
+            padding: 5px;
+            margin-top: 2px;
+            border-top: solid 1px lightgray;
+            overflow: hidden; 
+        }
+    }
+    `.withId("*[data-desktop-app=desktop-app]").installGlobal();
 
 export default class DesktopApp extends AtomControl {
 

package/src/html-editor/AtomHtmlEditor.tsx

@@ -1,11 +1,8 @@
 import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule, { AtomStyleRules } from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater from "../basic/AtomRepeater";
 import AddImage, { showImageDialog } from "./commands/AddImage";
 import AddLink from "./commands/AddLink";
@@ -29,6 +26,7 @@ import Underline from "./commands/Underline";
 import Unlink from "./commands/Unlink";
 import UnorderedList from "./commands/UnorderedList";
 import Toolbar from "./commands/Toolbar";
+import styled from "@web-atoms/core/dist/style/styled";
 export { default as Toolbar} from "./commands/Toolbar";
 
 const link = document.createElement("link");
@@ -41,52 +39,71 @@ link.onload = () => {
 };
 document.head.appendChild(link);
 
-const css = CSS(StyleRule()
-    .display("flex")
-    .flexDirection("column")
-    .minHeight(500)
-    .child(StyleRule("iframe")
-        .flexStretch()
-    )
-    .child(StyleRule(".files")
-        .child(StyleRule(".file")
-            .flexLayout({ inline: true })
-            .borderColor(Colors.lightGray.withAlphaPercent(0.5))
-            .borderWidth(1)
-            .borderStyle("solid")
-            .borderRadius(15)
-            .paddingLeft(10)
-            .paddingRight(10)
-            .child(StyleRule("label")
-                .maxWidth(100)
-                .textEllipsis()
-            )
-        )
-    )
-    .nested(StyleRule(".toolbar")
-        .display("flex")
-        .flexWrap("wrap")
-        .alignItems("center")
-        .child(StyleRule(".command")
-            .display("inline-flex")
-            .alignItems("center")
-            .justifyContent("space-evenly" as any)
-            .border("none")
-            .cursor("pointer")
-            .backgroundColor(Colors.transparent)
-            .hoverBackgroundColor(Colors.lightGreen)
-            .minWidth(28)
-            .height(28)
-            .and(StyleRule(".pressed")
-                .backgroundColor(Colors.lightGray)
-                .hoverBackgroundColor(Colors.lightGreen)
-            )
-            .nested(StyleRule(".ri-bold")
-                .fontWeight("bold")
-            )
-        )
-    )
-);
+const css = styled.css `
+
+    display: flex;
+    flex-direction: column;
+    min-height: 500px;
+    
+    & > iframe {
+        flex: 1 1 100%; 
+    }
+    
+    & > .files > .file {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        gap: 4px;
+        display: inline-flex;
+        border-color: rgba(211,211,211,0.5);
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 15px;
+        padding-left: 10px;
+        padding-right: 10px; 
+
+        & > label {
+            max-width: 100px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis; 
+        }
+    }
+    
+    
+    & .toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        & > .command {
+            display: inline-flex;
+            align-items: center;
+            justify-content: space-evenly;
+            border: none;
+            cursor: pointer;
+            background-color: #00000000;
+            min-width: 28px;
+            height: 28px; 
+        
+            &:hover {
+                background-color: #90ee90; 
+            }
+            
+            &.pressed {
+                background-color: #d3d3d3; 
+
+                &:hover {
+                    background-color: #90ee90; 
+                }
+            }            
+            
+            & .ri-bold {
+                font-weight: bold; 
+            }
+        }
+    }
+    `.installLocal();
 
 function preventLinkClick(e: Event, editor: HTMLElement, doc: Document) {
     let target = e.target as HTMLElement;
@@ -212,7 +229,7 @@ export interface IEditorCommand {
 
 export interface ITagCommand<T = any> {
     name: string;
-    style: AtomStyleRules;
+    style: any;
     handler: (ce: CustomEvent<{ target: HTMLElement, data: T}>) => any
 }
 

package/src/html-editor/commands/AddLink.tsx

@@ -1,15 +1,13 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import { CancelToken } from "@web-atoms/core/dist/core/types";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggleButtonBar";
 import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import FormField from "../../basic/FormField";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
 import HtmlCommands from "./HtmlCommands";
+import styled from "@web-atoms/core/dist/style/styled";
 
 const linkTypes = [
     {
@@ -30,11 +28,11 @@ const linkTypes = [
     }
 ];
 
-const linkDialogCss = CSS(StyleRule()
-    .display("flex")
-    .flexDirection("column")
-    .gap(5)
-);
+const linkDialogCss = styled.css `
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+`.installLocal();
 
 class LinkDialog extends PopupWindow {