@web-atoms/web-controls 2.3.108 → 2.3.110

package/src/animations/Animations.ts

@@ -1,34 +1,38 @@
-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 CSS from "@web-atoms/core/dist/web/styles/CSS";
 
-CSS(StyleRule()
-    .and(StyleRule(":not([data-animation-state])")
-        .display("none")
-    )
-    .and(StyleRule("[data-animation-state=down]")
-        .transform("translate(0,100%)" as any)
-    )
-    .and(StyleRule("[data-animation-state=normal]")
-        .transform("translate(0,0)" as any)
-    )
-    .transition("all 0.5s ease-out")
-,
-"*[data-animate-slide=from-bottom]");
+    styled.css `
+    transition: all 0.5s ease-out;
+
+    &:not([data-animation-state]) {
+        display: none;
+    }
+    
+    &[data-animation-state=down] {
+        transform: translate(0,100%);
+    }
+    
+    &[data-animation-state=normal] {
+        transform: translate(0,0);   
+    }
+    `.installGlobal("[data-animate-slide=from-bottom]");
+
+    styled.css `
+    transition: all 0.5s ease-out;
+
+    &:not([data-animation-state]) {
+        display: none;
+    }
+    
+    &[data-animation-state=up] {
+        transform: translate(0,-100%);
+    }
+        
+    &[data-animation-state=normal] {
+        transform: translate(0,0);
+    }
+    `.installGlobal("[data-animate-slide=from-top]");
 
-CSS(StyleRule()
-    .and(StyleRule(":not([data-animation-state])")
-        .display("none")
-    )
-    .and(StyleRule("[data-animation-state=up]")
-        .transform("translate(0,-100%)" as any)
-    )
-    .and(StyleRule("[data-animation-state=normal]")
-        .transform("translate(0,0)" as any)
-    )
-    .transition("all 0.5s ease-out")
-,
-"*[data-animate-slide=from-top]");
 
 export default class Animations {
 

package/src/basic/CheckBoxList.tsx

@@ -5,27 +5,29 @@ import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater, { SameObjectValue } from "./AtomRepeater";
 
-CSS(StyleRule()
-    .flexLayout({ inline: true, justifyContent: "flex-start"})
-    .flexFlow("wrap"),
-"div[data-checkbox-list=checkbox-list]");
+import "./styles/check-box-list-style";
 
-CSS(StyleRule()
-    .flexLayout({ justifyContent: "flex-start" })
-    .marginRight(5)
-    .child(StyleRule("span")
-        .cursor("pointer")
-    )
-    .and(StyleRule("[data-selected-item=true]")
-        .color(Colors.blue)
-    )
-    .displayNone("[data-selected-item=true][data-deleted=none] > i.far")
-    .displayNone("[data-selected-item=false][data-deleted=none] > i.fas")
-    .displayNone("[data-selected-item=false][data-deleted=false] > i.fas")
-    .displayNone("[data-selected-item=true][data-deleted=true] > i.fas")
-    .displayNone("[data-selected-item=true][data-deleted=false] > i.far")
-    .displayNone("[data-selected-item=false][data-deleted=true] > i.fas")
-, "div[data-item-type=checkbox]");
+// CSS(StyleRule()
+//     .flexLayout({ inline: true, justifyContent: "flex-start"})
+//     .flexFlow("wrap"),
+// "div[data-checkbox-list=checkbox-list]");
+
+// CSS(StyleRule()
+//     .flexLayout({ justifyContent: "flex-start" })
+//     .marginRight(5)
+//     .child(StyleRule("span")
+//         .cursor("pointer")
+//     )
+//     .and(StyleRule("[data-selected-item=true]")
+//         .color(Colors.blue)
+//     )
+//     .displayNone("[data-selected-item=true][data-deleted=none] > i.far")
+//     .displayNone("[data-selected-item=true][data-deleted=true] > i.fas")
+//     .displayNone("[data-selected-item=true][data-deleted=false] > i.far")
+//     .displayNone("[data-selected-item=false][data-deleted=none] > i.fas")
+//     .displayNone("[data-selected-item=false][data-deleted=false] > i.fas")
+//     .displayNone("[data-selected-item=false][data-deleted=true] > i.fas")
+// , "div[data-item-type=checkbox]");
 
 export default class CheckBoxList extends AtomRepeater {
 

package/src/basic/Checkbox.tsx

@@ -3,31 +3,7 @@ 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";
 
-const css = CSS(
-    StyleRule("check-box")
-    .display("inline-block")
-    .child(
-        StyleRule("label")
-        .display("flex")
-        .paddingLeft(5)
-        .paddingRight(5)
-        .child(
-
-            StyleRule("input[type=checkbox]")
-            .borderRadius(3)
-            .margin(0)
-            .padding(0)
-            .alignSelf("center")
-        )
-        .child(
-            StyleRule("span")
-            .alignSelf("center")
-            .whiteSpace("nowrap")
-            .marginLeft(5)
-            .flexStretch()
-
-        ))
-);
+import "./styles/checkbox-style";
 
 export default function Checkbox({
     checked,
@@ -36,7 +12,7 @@ export default function Checkbox({
     checked: any,
     text: string
 }) {
-    return <div class={css}>
+    return <div data-check-box="check-box">
         <label>
             <input
                 type="checkbox"

package/src/basic/Chip.tsx

@@ -4,6 +4,8 @@ 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/chip-style";
+
 export interface IChip extends IElement {
     icon?: string;
     header?: string;
@@ -15,67 +17,6 @@ export interface IChip extends IElement {
     deleted?: boolean;
 }
 
-CSS(StyleRule()
-    .padding(1)
-    .paddingLeft(5)
-    .paddingRight(5)
-    .borderRadius(10)
-    .display("grid")
-    .alignItems("center")
-    .gridTemplateRows("auto 1fr")
-    .gridTemplateColumns("auto 1fr auto")
-    .child(StyleRule("[data-content]")
-        .gridRowStart("2")
-        .gridColumnStart("2")
-    )
-    .child(StyleRule(".icon")
-        .gridColumnStart("1")
-        .gridRowStart("1")
-        .gridRowEnd("span 2")
-        .padding(2)
-        .paddingRight(4)
-        .alignSelf("center")
-    )
-    .child(StyleRule(".delete")
-        .gridColumnStart("3")
-        .gridRowStart("1")
-        .gridRowEnd("span 2")
-        .alignSelf("center")
-        .fontSize("small")
-        .backgroundColor(Colors.transparent)
-        .borderRadius(4)
-        .padding(2)
-        .paddingLeft(4)
-        .color(Colors.gray)
-        .hover(StyleRule()
-            .backgroundColor(Colors.lightGray)
-            .color(Colors.red)
-        )
-    )
-    .child(StyleRule(".header")
-        .fontSize("x-small")
-        .gridRowStart("1")
-        .gridColumnStart("2")
-    )
-    .child(StyleRule(".label")
-        .gridRowStart("2")
-        .gridColumnStart("2")
-    )
-    .child(StyleRule(".delete-strike")
-        .gridRow("1 / span 2")
-        .gridColumn("1 / span 2")
-        .height(2)
-        .backgroundColor(Colors.red)
-        .alignSelf("center")
-    )
-    .and(StyleRule("[data-deleted=false] > .delete-strike")
-        .display("none")
-    ).and(StyleRule("[data-deleted=true]")
-        .border("solid 1px red")
-        .backgroundImage(`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='red' stroke-width='1'/><path d='M0 0 L100 100 ' stroke='red' stroke-width='1'/></svg>")`)
-    )
-, "*[data-item-chip]");
-
 export default function Chip(
     {
         icon,

package/src/basic/DataGrid.tsx

@@ -11,6 +11,8 @@ import AtomRepeater, { getParentRepeaterItem, SelectorCheckBox } from "./AtomRep
 import { EditableInput, getPropertyInfo, IPropertyInfo } from "./Editable";
 import TableRepeater from "./TableRepeater";
 
+import "./styles/data-grid-style";
+
 const cellEventName = Symbol("cell-event-name");
 const headerEventName = Symbol("header-event-name");
 const footerEventName = Symbol("footer-event-name");
@@ -123,36 +125,36 @@ 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]");
+// 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

@@ -15,60 +15,7 @@ import ToggleButtonBar from "./ToggleButtonBar";
 import TimeEditor from "./TimeEditor";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 
-CSS(StyleRule()
-    .display("inline-block")
-    .cursor("pointer")
-    .textAlign("left")
-    .hover(StyleRule()
-        .textDecoration("underline")
-        .color(Colors.blue)
-    )
-    .nested(StyleRule(".calendar-popup")
-        .display("grid")
-        .gridTemplateColumns("1fr auto")
-        .gridTemplateRows("1fr auto auto")
-        .gap(7)
-        .child(StyleRule("[data-calendar]")
-            .gridRow("1")
-            .gridColumn("1 / span 2")
-        )
-        .child(StyleRule(".time-editor")
-            .paddingLeft(5)
-            .gridRow("2")
-            .flexLayout({ direction: "row", alignItems: "center", justifyContent: "start" as any})
-            .nested(StyleRule("[data-item-index]")
-                .paddingTop(0)
-                .paddingBottom(0)
-            )
-            .nested(StyleRule("select")
-                .border("none")
-                .outline("none")
-            )
-        )
-        .child(StyleRule(".clear")
-            .gridColumn("1")
-            .gridRow("3")
-            .justifySelf("start")
-            .border("none")
-            .outline("none")
-            .backgroundColor(Colors.transparent)
-            .color("var(--accent-color, blue)")
-            .paddingLeft(5)
-            .marginLeft(0)
-        )
-        .child(StyleRule(".today")
-            .gridRow("3")
-            .gridColumn("2")
-            .justifySelf("end")
-            .border("none")
-            .outline("none")
-            .backgroundColor(Colors.transparent)
-            .color("var(--accent-color, blue)")
-            .paddingLeft(5)
-            .marginLeft(0)
-        )
-    )
-, "*[data-date-field=date-field]");
+import "./styles/date-field-style";
 
 function hours() {
     return [

package/src/basic/DropDown.tsx

@@ -9,12 +9,7 @@ import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import AtomRepeater, { askSuggestion, askSuggestionPopup,
     disposeChildren, Match, MatchAnyCaseInsensitive } from "./AtomRepeater";
 
-CSS(StyleRule()
-    .flexLayout({ inline: true, justifyContent: "stretch" as any})
-    .nested(StyleRule("[data-white-space=nowrap]")
-        .whiteSpace("nowrap")
-    )
-, "div[data-drop-down=drop-down]");
+import "./styles/drop-down-style";
 
 export default class DropDown<T = any> extends AtomRepeater<T> {
 

package/src/basic/Expander.tsx

@@ -5,6 +5,8 @@ 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";
+
 export interface IExpander {
     icon?: string | string[];
     isExpanded: boolean;
@@ -13,56 +15,6 @@ export interface IExpander {
     [key: string]: any;
 }
 
-CSS(StyleRule()
-    .display("grid")
-    .gridTemplateRows("auto 1fr")
-    .gridTemplateColumns("auto 1fr auto")
-    .alignItems("center")
-    .child(StyleRule("[data-element=icon]")
-        .gridColumnStart("1")
-        .gridRowStart("1")
-        .padding(5)
-        .marginRight(5)
-        .alignSelf("center")
-        .justifySelf("center")
-    )
-    .child(StyleRule("[data-element=header]")
-        .gridRowStart("1")
-        .gridColumnStart("2")
-    )
-    .child(StyleRule("[data-element=caret]")
-        .gridRowStart("1")
-        .gridColumnStart("3")
-        .padding(5)
-        .marginLeft(5)
-    )
-    .child(StyleRule("[data-element=detail]")
-        .gridRowStart("2")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 3")
-        .marginTop(5)
-    )
-    .and(StyleRule("[data-is-expanded=true]")
-        .child(StyleRule("[data-element=caret]")
-            .overflow("hidden")
-            .transform("rotate(-180deg)" as any)
-            .transition("transform 150ms ease")
-            .transformOrigin("center center")
-        )
-    )
-    .and(StyleRule("[data-is-expanded=false]")
-        .child(StyleRule("[data-element=caret]")
-            .overflow("hidden")
-            .transform("rotate(-360deg)" as any)
-            .transformOrigin("center center")
-            .transition("transform 150ms ease")
-        )
-        .child(StyleRule("*[data-element=detail]")
-            .display("none")
-        )
-    )
-, "*[data-is-expander=expander]");
-
 document.body.addEventListener("click", (e: MouseEvent) => {
     if (e.defaultPrevented) {
         return;
@@ -143,71 +95,6 @@ export default function Expander(
     </div>;
 }
 
-CSS(StyleRule()
-    .display("grid")
-    .gridTemplateColumns("auto auto 1fr auto")
-    .alignItems("center")
-    .gap(0)
-    .child(StyleRule("[data-element=icon]")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 2")
-        .gridRowStart("1")
-        .padding(5)
-        .alignSelf("center")
-        .justifySelf("center")
-    )
-    .child(StyleRule("[data-element=header]")
-        .gridRowStart("1")
-        .gridColumnStart("3")
-    )
-    .child(StyleRule("[data-element=caret]")
-        .gridRowStart("1")
-        .gridColumnStart("4")
-        .padding(5)
-        .marginLeft(5)
-    )
-    .child(StyleRule("[data-element=detail]")
-        .gridRowStart("2")
-        .gridColumnStart("2")
-        .gridColumnEnd("span 3")
-        .paddingLeft(20)
-        .paddingTop(5)
-        .borderLeftStyle("solid")
-        .borderLeftWidth(1)
-        .borderLeftColor("var(--border-color, lightgray)")
-        .borderTopLeftRadius(0)
-        .borderBottomLeftRadius(0)
-        .borderBottomWidth(0)
-        .borderTopWidth(0)
-        .marginTop(0)
-        .marginBottom(0)
-        .and(StyleRule("[data-selected=true]")
-            .fontWeight("bold")
-            .borderLeftColor("var(--accent-color, darkgray)")
-            .borderLeftWidth("medium")
-        )
-    )
-    .and(StyleRule("[data-is-expanded=true]")
-        .child(StyleRule("[data-element=caret]")
-            .overflow("hidden")
-            .transform("rotate(-180deg)" as any)
-            .transition("transform 150ms ease")
-            .transformOrigin("center center")
-        )
-    )
-    .and(StyleRule("[data-is-expanded=false]")
-        .child(StyleRule("[data-element=caret]")
-            .overflow("hidden")
-            .transform("rotate(-360deg)" as any)
-            .transformOrigin("center center")
-            .transition("transform 150ms ease")
-        )
-        .child(StyleRule("*[data-element=detail]")
-            .display("none")
-        )
-    )
-, "*[data-is-expander=menu]");
-
 export function ExpanderMenu({
         icon,
         isExpanded,