@web-atoms/web-controls 2.3.107 → 2.3.109

package/src/basic/Calendar.tsx

@@ -10,6 +10,8 @@ import AtomRepeater from "./AtomRepeater";
 import ComboBox from "./ComboBox";
 import Select from "./Select";
 
+import "./styles/calendar-style";
+
 const start = DateTime.now;
 
 const getWeekDays = (locale, type: "short" | "long") => {
@@ -60,70 +62,6 @@ export const months = {
     }
 };
 
-CSS(StyleRule()
-    .display("inline-grid")
-    .gridTemplateRows("auto auto auto")
-    .gridTemplateColumns("auto auto auto auto")
-    .child(StyleRule(".fa-solid")
-        .padding(5)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .cursor("pointer")
-        .hoverColor(Colors.blueViolet)
-    )
-    .child(StyleRule("select")
-        .border("none")
-    )
-    .child(StyleRule(".week")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 4")
-        .gridRowStart("2")
-        .display("inline-grid")
-        .gridTemplateColumns("1fr 1fr 1fr 1fr 1fr 1fr 1fr")
-        .gap(0)
-        .child(StyleRule("*")
-            .fontSize("smaller")
-            .padding("5")
-            .paddingLeft("10")
-            .paddingRight("10")
-            .cursor("default")
-            .alignSelf("center")
-            .justifySelf("center")
-        )
-    )
-    .child(StyleRule(".dates")
-        .gridColumnStart("1")
-        .gridColumnEnd("span 4")
-        .gridRowStart("3")
-        .display("inline-grid")
-        .gap(0)
-        .child(StyleRule("[data-item-index]")
-            .alignSelf("stretch")
-            .justifySelf("stretch")
-            .padding(7)
-            .cursor("pointer")
-            .textAlign("center")
-            .hoverBackgroundColor(Colors.lightGray.withAlphaPercent(0.5))
-            .and(StyleRule("[data-is-today=true]")
-                .backgroundColor(Colors.lightGreen)
-            )
-            .and(StyleRule("[data-is-weekend=true]")
-                .backgroundColor(Colors.lightGray.withAlphaPercent(0.3))
-            )
-            .and(StyleRule("[data-is-other-month=true]")
-                .opacity("0.5")
-            )
-            .and(StyleRule("[data-disabled=true]")
-                .textDecoration("line-through")
-            )
-            .and(StyleRule("[data-selected-item=true]")
-                .backgroundColor(Colors.blueViolet)
-                .color(Colors.white)
-            )
-        )
-    )
-, "*[data-calendar=calendar]");
-
 export interface ICalendarDate {
     label: string;
     type: string;

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,

package/src/basic/styles/calendar-style.ts

@@ -0,0 +1,82 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+    & {
+        display: inline-grid;
+        grid-template-rows: auto auto auto;
+        grid-template-columns: auto auto auto auto;
+    }
+
+    & > .fa-solid {
+        padding: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+        cursor: pointer;
+    }
+
+    & > .fa-solid:hover {
+        color: blueviolet;
+    }
+    & > select {
+        border: none;
+    }
+
+    & > .week {
+        grid-column-start: 1;
+        grid-column-end: span 4;
+        grid-row-start: 2;
+        display: inline-grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+        gap: 0px;
+
+        & > * {
+            font-size: smaller;
+            padding: 5;
+            padding-left: 10;
+            padding-right: 10;
+            cursor: default;
+            align-self: center;
+            justify-self: center;
+        }
+    }
+
+    & > .dates {
+        grid-column-start: 1;
+        grid-column-end: span 4;
+        grid-row-start: 3;
+        display: inline-grid;
+        gap: 0px;
+
+        & > [data-item-index] {
+            align-self: stretch;
+            justify-self: stretch;
+            padding: 7px;
+            cursor: pointer;
+            text-align: center; 
+
+            &:hover {
+                background-color: rgba(211,211,211,0.5);             
+            }
+
+            &[data-is-today=true] {
+                background-color: lightgreen; 
+            }
+
+            &[data-is-weekend=true] {
+                background-color: rgba(211,211,211,0.3);
+            }
+
+            &[data-is-other-month=true] {
+                opacity: 0.5;
+            }
+            &[data-is-disabled] {
+                text-decoration: line-through;            
+            }
+            &[data-selected-item=true] {
+                background-color: blueviolet;
+                color: white;
+            }
+        }
+    }
+    `.installGlobal("*[data-calendar=calendar]");

package/src/basic/styles/check-box-list-style.ts

@@ -0,0 +1,58 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+
+    styled.css `
+
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
+        flex-flow: wrap;
+
+    `.installGlobal("div[data-checkbox-list=checkbox-list]");
+
+    styled.css `
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
+
+        margin-right: 5px;
+
+        & > span {
+            cursor: pointer;
+        }
+
+        &[data-selected-item=true] {
+            color: blue;
+
+            &[data-deleted=none] > i.far {
+                display: none;
+            }
+            &[data-deleted=true] > i.fas {
+                display: none;
+            }
+            &[data-deleted=false] > i.far {
+                display: none;
+            }
+        }
+
+        &[data-selected-item=false] {
+            &[data-deleted=none] > i.fas {
+                display: none;
+            }
+            &[data-deleted=false] > i.fas {
+                display: none;
+            }
+            &[data-deleted=true] > i.fas {
+                display: none;
+            }
+        }
+
+
+
+    `.installGlobal("div[data-item-type=checkbox]");
+