@web-atoms/web-controls 2.3.107 → 2.3.108

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/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/chips-style.ts

@@ -0,0 +1,39 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+    flex-direction: row;
+    align-items: center;
+    justify-content: stretch;
+    gap: 4px;
+    display: flex;
+    flex-flow: wrap;
+
+    & > .search {
+        border: none;
+        outline: none;
+        flex: 1 1;
+    }
+
+    & > .footer {
+        margin-left: auto;
+    }
+
+    & > .presenter {
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
+        display: inline-flex;
+        flex-flow: wrap;
+        & > * {
+            background-color: rgba(211,211,211,0.3);
+        }
+    }
+
+    &[data-mode=search] {
+        & > .search {
+            padding-left: 20px;
+            background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1px center;
+        }
+    }
+`.installGlobal("div[data-atom-chips]");

package/src/basic/styles/item-suggestion-style.ts

@@ -0,0 +1,40 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        padding: 1px;
+        padding-left: 5px;
+        padding-right: 5px;
+        border-radius: 10px;
+        display: grid;
+        align-items: center;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto 1fr auto;
+        
+        & > [data-content] {
+            grid-row-start: 2;
+            grid-column-start: 2;
+        }
+        & > .icon {
+            grid-column-start: 1;
+            grid-row-start: 1;
+            grid-row-end: span 2;
+            align-self: center;
+            margin-right: 5px;
+        }
+        & > .delete {
+            grid-column-start: 3;
+            grid-row-start: 1;
+            grid-row-end: span 2;
+            align-self: center;
+            color: #ff0000;
+        }
+        & > .header {
+            font-size: x-small;
+            grid-row-start: 1;
+            grid-column-start: 2;
+        }
+        & > .label {
+            grid-row-start: 2;
+            grid-column-start: 2;
+        }
+    `.installGlobal("*[data-item-suggestion]");

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

@@ -0,0 +1,23 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+export const repeaterPopupCss = styled.css `
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    gap: 4px;
+
+    & > .items {
+        flex: 1 1 100%;
+        overflow: auto;
+        & > .presenter {
+            & > * {
+                padding: 5px;
+            }
+            & > [data-selected-item=true] {
+                background-color: lightgreen;
+            }
+        }
+    }
+`.installLocal();

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

@@ -0,0 +1,51 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+*[data-selected-item] {
+    & i[data-click-event] {
+        padding: 5px;
+    }
+    & [data-no-wrap=true] {
+        white-space: nowrap;
+    }
+}
+
+*[data-selected-item=true] {
+    & i[data-click-event=item-select] {
+        padding: 5px;
+    }
+    & i[data-click-event=item-select] {
+        display: none;
+    }
+}
+
+*[data-selected-item=false] {
+    & i[data-click-event=item-deselect] {
+        display: none;
+    }
+}
+
+*[data-select-all=select-all] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0;
+    & i[data-ui-type] {
+        padding: 5px;
+    }
+    & [data-no-wrap=true] {
+        white-space: nowrap;
+    }
+    &[data-is-selected=true] {
+        & i[data-ui-type=item-select] {
+            display: none;
+        }
+    }
+    &[data-is-selected=false] {
+        & i[data-ui-type=item-deselect] {
+            display: none;
+        }
+    }
+}
+`.withId("repeater-styles").installGlobal();

package/src/basic/styles/suggestion-popup.ts

@@ -0,0 +1,28 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+const hasMoreHeight =  (window.screen.availHeight / 2) > 250
+    ? `height: 250px;`
+    : `max-height: 80px;`;
+
+    styled.css `
+    ${hasMoreHeight}
+    min-width: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    gap: 4px;
+
+    & > .items {
+        flex: 1 1 100%;
+        overflow: auto;
+        & > .presenter {
+            & > * {
+                padding: 5px;
+            }
+            & > [data-selected-item=true] {
+                background-color: lightgreen;
+            }
+        }
+    }
+    `.installGlobal("*[data-suggestion-popup=suggestion-popup]");

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

@@ -0,0 +1,39 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+    margin: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    gap: 4px;
+    overflow: hidden;
+    & > .header {
+        color: darkorange;
+        white-space: nowrap;
+    }
+    & > .items {
+        flex: 1 1 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 0;
+        overflow: hidden;
+        & > * {
+            white-space: nowrap;
+            padding: 3px;
+            cursor: pointer;
+            &:hover {
+                color: blue;
+                text-decoration: underline;
+            }
+        }
+    }
+    & > .more {
+        font-size: smaller;
+        color: blue;
+        text-transform: lowercase;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+    `.installGlobal("*[data-suggestions=suggestions]");

package/src/basic/styles/ui-display-none-style.ts

@@ -0,0 +1,5 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        display: none;
+    `.installGlobal("[data-ui-display=none]");