@web-atoms/web-controls 2.4.59 → 2.4.61

package/src/basic/Form.tsx

@@ -1,34 +1,8 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
-import XNode, { elementFactorySymbol } from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
-import { AncestorEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
+import XNode from "@web-atoms/core/dist/core/XNode";
 
-    styled.css `
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing, 5px);
-
-    &[data-valid=true] {
-        & .field-error:not(:empty) {
-            display: none;
-        }
-        & > .error-message {
-            display: none;
-        }
-    }
-
-    & > .error-message {
-        padding: var(--spacing-small, 2px);
-        padding-left: var(--spacing-large, 10px);
-        padding-right: var(--spacing-large, 10px);
-        background-color: red;
-        border-radius: 9999px;
-        color: white;
-        position: sticky;
-        top: 0;
-    }
-`.installGlobal("[data-form=form]");
+import "../styles/form.global.less";
 
 const checkClick = (e: MouseEvent) => {
     const form = e.currentTarget as HTMLDivElement;

package/src/basic/FormField.tsx

@@ -4,7 +4,7 @@ import FormattedString from "@web-atoms/core/dist/core/FormattedString";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
 import { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import "./styles/form-field-style";
+import "./styles/form-field.global.less";
 
 export interface IFormField {
     label: string | XNode;

package/src/basic/InlinePopup.tsx

@@ -6,7 +6,7 @@ import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/contr
 import { IPopup, IPopupOptions } from "@web-atoms/core/dist/web/services/PopupService";
 import IElement from "./IElement";
 
-import "./styles/inline-popup-style";
+import "./styles/inline-popup.global.less";
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
 
 function closeHandler(

package/src/basic/LimitedText.tsx

@@ -1,42 +1,6 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-        position: relative;
-        overflow: hidden;
-        contain: content;
-
-        &[data-mode=collapsed] {
-            & > [data-element=more] {
-                cursor: pointer;
-                background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 19%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
-                & > button {
-                    transform: rotate(180deg);
-                }
-            }
-        }
-
-        & > [data-element=more] {
-            display: flex;
-            justify-content: flex-end;
-            width: 100%;
-            right: 0;
-            left: 0;
-            position: absolute;
-            transform: translateY(-100%);
-            & > button {
-                padding: 1px;
-                padding-left: 10px;
-                padding-right: 10px;
-                border-radius: 9999px;
-                border: none;
-                outline: none;
-                box-shadow: 0 0 6px 6px white;
-                transition: transform 0.5s ease-out;
-            }
-        }
-
-    `.installGlobal("[data-limited-text]")
+import "../styles/limited-text.global.less";
 
 const toggleDetails = (e: Event) => {
     let start = e.target as HTMLElement;

package/src/basic/ListRepeater.tsx

@@ -1,7 +1,7 @@
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import AtomRepeater from "./AtomRepeater";
 
-import "./styles/list-repeater-style";
+import "./styles/list-repeater.global.less";
 export default class ListRepeater<T = any> extends AtomRepeater<T> {
 
     public get autoSelectOnClick(): boolean {

package/src/basic/MaskedInput.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import IElement from "./IElement";
 
-import "./styles/masked-input-style";
+import "./styles/masked-input.global.less";
 
 export interface IMaskedInput extends IElement {
     mask?: string;

package/src/basic/MaskedInputDiv.tsx

@@ -2,8 +2,6 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import IElement from "./IElement";
 
-import "./styles/masked-input-div";
-
 export interface IMaskedInput extends IElement {
     mask?: string;
 }

package/src/basic/PasswordBox.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import IElement from "./IElement";
 
-import "./styles/password-box-style";
+import "./styles/password-box.global.less";
 
 document.body.addEventListener("togglePassword", (e) => {
     const current = e.target as HTMLElement;

package/src/basic/PinchZoomView.tsx

@@ -3,7 +3,7 @@ import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode, { isTemplateSymbol } from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 
-import "./styles/pinch-zoom-view-style";
+import "./styles/pinch-zoom-view.global.less";
 
 const center = (ev: TouchEvent) => {
     const touch = ev.touches[0];

package/src/basic/PopupButton.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { IInlinePopupButtonOptions, InlinePopupButton } from "./InlinePopup";
 
-import "./styles/popup-button-style";
+import "./styles/popup-button.global.less";
 
 export interface IMenuItem {
     label?: string;

package/src/basic/RadioButtonList.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomRepeater from "./AtomRepeater";
 
-import "./styles/radio-button-list-style";
+import "./styles/radio-button-list.global.less";
 
 export default class RadioButtonList extends AtomRepeater {
 

package/src/basic/Resizable.tsx

@@ -1,38 +1,10 @@
 import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { isMobileView } from "../mobile-app/MobileApp";
 
-    styled.css `
-
-    display: grid;
-    overflow: hidden;
-    grid-template-columns: 1fr 2px;
-    gap: 1px;
-    & > * {
-        grid-row: 1;
-        grid-column: 1;
-    }
-
-    & > [data-element=resizer] {
-        cursor: ew-resize;
-        grid-row: 1;
-        grid-column: 2;
-        &[data-resizing] {
-            cursor: col-resize;
-            background-color: rgba(0,0,0,0.25);
-        }
-    }
-
-    &[data-direction=vertical] {
-        & > [data-element=resizer] {
-            cursor: ns-resize;
-        }
-    }
-
-    `.installGlobal("[data-resizable=resizable]");
-
+import "../styles/resizable.global.less";
+    
 const pointerDown = (e: PointerEvent) => {
 
     const target = e.currentTarget as HTMLDivElement;

package/src/basic/Swipe.tsx

@@ -1,5 +1,5 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import "./styles/swipe-style";
+import "./styles/swipe.global.less";
 
 interface ISwipeStart {
     element: HTMLElement;

package/src/basic/Switch.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import IElement from "./IElement";
 
-import "./styles/switch-style";
+import "./styles/switch.global.less";
 
 /**
  * Original source = https://www.htmllion.com/css3-toggle-switch-button.html

package/src/basic/TimeEditor.tsx

@@ -5,7 +5,7 @@ import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 import Select from "./Select";
 import Bind from "@web-atoms/core/dist/core/Bind";
 
-import "./styles/time-editor-style";
+import "./styles/time-editor.global.less";
 
 function hours() {
     return [

package/src/basic/TitleEditor.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import IElement from "./IElement";
 
-import "./styles/title-editor-style";
+import "./styles/title-editor.global.less";
 
 export type Capitalize = "none" | "off" | "on" | "sentences" | "words" | "characters";
 

package/src/basic/ToggleButtonBar.tsx

@@ -2,7 +2,7 @@ import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomRepeater from "./AtomRepeater";
 
-import "./styles/toggle-button-bar-style";
+import "./styles/toggle-button-bar.global.less";
 
 export default class ToggleButtonBar extends AtomRepeater {
 

package/src/basic/Tooltip.tsx

@@ -4,7 +4,7 @@ import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/contr
 import { getParentRepeaterItem } from "./AtomRepeater";
 import InlinePopup from "./InlinePopup";
 
-import "./styles/tooltip-style";
+import "./styles/tooltip.global.less";
 
 const tooltips = new Map<HTMLElement, [{control: any, tooltip: CancelToken}, typeof InlinePopup]>();
 

package/src/basic/TypeWriter.tsx

@@ -1,19 +1,9 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import sleep from "@web-atoms/core/dist/core/sleep";
 import { CancelToken } from "@web-atoms/core/dist/core/types";
-import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 
-    styled.css `
-    display: inline-flex;
-    align-items: center;
-    justify-content: start;
-    white-space: nowrap;
-    padding-right: 1px;
-    border-right-style: solid;
-    border-right-width: 2px;
-    border-right-color: currentColor;
-`.installGlobal("[data-component=type-writer]");
+import "../styles/type-writer.global.less";
 
 const disposableProperty = Symbol("type-writer-timer");
 

package/src/basic/ZoomView.tsx

@@ -3,7 +3,7 @@ import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode, { isTemplateSymbol } from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 
-import "./styles/zoom-view-style";
+import "./styles/zoom-view.global.less";
 
 const center = (ev: TouchEvent) => {
     const touch = ev.touches[0];

package/src/basic/styles/{calendar-style.ts → calendar.global.less}

@@ -1,98 +1,98 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-
-    display: inline-grid;
-    grid-template-rows: auto auto 1fr;
-    grid-template-columns: auto auto auto auto;
-    justify-items: stretch;
-
-    & > .fa-solid {
-        padding: 5px;
-        padding-left: 10px;
-        padding-right: 10px;
-        cursor: pointer;
-    }
-
-    & > [data-element=year], & > [data-element=month] {
-        justify-self: center;
-    }
-
-    & > [data-element=previous] {
-        justify-self: start;
-    }
-
-    & > [data-element=next] {
-        justify-self: end;
-    }
-
-    & > .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: 2px;
-
-        & > * {
-            font-size: smaller;
-            padding: 5px;
-            padding-left: 10px;
-            padding-right: 10px;
-            background-color: rgba(211,211,211,0.5);
-            cursor: default;
-            text-align: center;
-            align-self: center;
-            justify-self: stretch;
-        }
-    }
-
-    & > .dates {
-        grid-column-start: 1;
-        grid-column-end: span 4;
-        grid-row-start: 3;
-        display: inline-grid;
-        gap: 0px;
-        grid-template-columns: repeat(7, 1fr);
-
-        & > [data-item-index] {
-            align-self: stretch;
-            justify-self: stretch;
-            padding: 7px;
-            cursor: pointer;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            &: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: var( --selection-color, blueviolet);
-                color: var( --selection-color-text, white);
-            }
-        }
-    }
-    `.installGlobal("*[data-calendar=calendar]");
+*[data-calendar=calendar] {
+
+    display: inline-grid;
+    grid-template-rows: auto auto 1fr;
+    grid-template-columns: auto auto auto auto;
+    justify-items: stretch;
+
+    & > .fa-solid {
+        padding: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+        cursor: pointer;
+    }
+
+    & > [data-element=year], & > [data-element=month] {
+        justify-self: center;
+    }
+
+    & > [data-element=previous] {
+        justify-self: start;
+    }
+
+    & > [data-element=next] {
+        justify-self: end;
+    }
+
+    & > .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: 2px;
+
+        & > * {
+            font-size: smaller;
+            padding: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            background-color: rgba(211,211,211,0.5);
+            cursor: default;
+            text-align: center;
+            align-self: center;
+            justify-self: stretch;
+        }
+    }
+
+    & > .dates {
+        grid-column-start: 1;
+        grid-column-end: span 4;
+        grid-row-start: 3;
+        display: inline-grid;
+        gap: 0px;
+        grid-template-columns: repeat(7, 1fr);
+
+        & > [data-item-index] {
+            align-self: stretch;
+            justify-self: stretch;
+            padding: 7px;
+            cursor: pointer;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &: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: var( --selection-color, blueviolet);
+                color: var( --selection-color-text, white);
+            }
+        }
+    }
+}

package/src/basic/styles/check-box-list.global.less

@@ -0,0 +1,52 @@
+div[data-checkbox-list=checkbox-list] {
+
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    flex-flow: wrap;
+
+}
+
+div[data-item-type=checkbox] {
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+
+    margin-right: 5px;
+
+    & > span {
+        cursor: pointer;
+    }
+
+    &:not([data-selected-item]) {
+        &[data-deleted=none] > i.fas {
+            display: none;
+        }
+        &[data-deleted=false] > i.fas {
+            display: none;
+        }
+        &[data-deleted=true] > i.fas {
+            display: none;
+        }
+    }
+
+    &[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;
+        }
+    }
+
+}

package/src/basic/styles/checkbox.global.less

@@ -0,0 +1,22 @@
+[data-check-box=check-box] {
+
+    display: inline-block;
+
+    & > label {
+        display: flex;
+        padding-left: 5px;
+        padding-right: 5px;
+        & > input[type=checkbox] {
+            border-radius: 3px;
+            margin: 0;
+            padding: 0;
+            align-self: center;
+        }
+        & > span {
+            align-self: center;
+            white-space: nowrap;
+            margin-left: 5px;
+            flex: 1 1 100%;
+        }
+    }    
+}

package/src/basic/styles/chip.global.less

@@ -0,0 +1,72 @@
+*[data-item-chip] {
+    padding: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 9999px;
+    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;
+        padding: 2px;
+        padding-right: 4px;
+        align-self: center;
+    }
+
+    & > .delete {
+        grid-column-start: 3;
+        grid-row-start: 1;
+        grid-row-end: span 2;
+        align-self: center;
+        font-size: small;
+        background-color: transparent;
+        border-radius: 4px;
+        padding: 2px;
+        padding-left: 4px;
+        color: gray;
+        &:hover {
+            background-color: lightgray;
+            color: red; 
+        }
+    }
+
+    & > .header {
+        font-size: x-small;
+        grid-row-start: 1;
+        grid-column-start: 2;
+        text-align: center;
+    }
+
+    & > .label {
+        grid-row-start: 2;
+        grid-column-start: 2;
+    }
+
+    & > .delete-strike {
+        grid-row: 1 / span 2;
+        grid-column: 1 / span 2;
+        height: 2px;
+        background-color: red;
+        align-self: center;
+    }
+
+    &[data-deleted=false] {
+        & > .delete-strike {
+            display: none;
+        }
+    }
+
+    &[data-deleted=true] {
+        border: solid 1px red;
+        background-image: 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>"); 
+    }
+}