@social-mail/social-mail-hosted-web 1.2.18 → 1.2.21

package/node_modules/@web-atoms/web-controls/src/basic/Button.local.less

@@ -0,0 +1,36 @@
+.web-atoms-button {
+    padding: 8px;
+    margin-left: 3px;
+    margin-right: 3px;
+    border-radius: 9999px;
+    display: inline-block;
+    height: 40px;
+    min-width: 40px;
+    box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;
+    border: solid 1px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    background-color: transparent;
+    &.pressed {
+        background-color: lightsteelblue;
+    }
+    &:hover {
+        background-color: lightgreen;
+    }
+    & > label.label {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        & > .fad {
+            font-size: larger;
+            width: 100%;
+            color: purple;
+            cursor: pointer;
+            &.red {
+                color: red;
+            }
+        }
+        & > span {
+            white-space: nowrap;
+        }
+    }
+}

package/node_modules/@web-atoms/web-controls/src/basic/Button.tsx

@@ -1,5 +1,6 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
+
+import "./Button.local.less";
 
 export interface IButton {
     id?: string;
@@ -15,42 +16,7 @@ export interface IButton {
     subClass?: string;
 }
 
-const css = styled.css `
-    padding: 8px;
-    margin-left: 3px;
-    margin-right: 3px;
-    border-radius: 9999px;
-    display: inline-block;
-    height: 40px;
-    min-width: 40px;
-    box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;
-    border: solid 1px rgba(0, 0, 0, 0.05);
-    cursor: pointer;
-    background-color: transparent;
-    &.pressed {
-        background-color: lightsteelblue;
-    }
-    &:hover {
-        background-color: lightgreen;
-    }
-    & > label.label {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        & > .fad {
-            font-size: larger;
-            width: 100%;
-            color: purple;
-            cursor: pointer;
-            &.red {
-                color: red;
-            }
-        }
-        & > span {
-            white-space: nowrap;
-        }
-    }
-`.installLocal();
+const css = "web-atoms-button";
 export default function Button({
     id,
     icon,

package/node_modules/@web-atoms/web-controls/src/basic/Calendar.tsx

@@ -6,7 +6,7 @@ import DateTime from "@web-atoms/date-time/dist/DateTime";
 import AtomRepeater from "./AtomRepeater";
 import Select from "./Select";
 
-import "./styles/calendar-style";
+import "./styles/calendar.global.less";
 
 const start = DateTime.now;
 
@@ -98,8 +98,10 @@ export default class Calendar extends AtomRepeater {
         }
     }
 
+    @BindableProperty
     public enableFunc: (item: ICalendarDate) => boolean;
 
+    @BindableProperty
     public dateRenderer: (item: ICalendarDate) => XNode;
 
     @WatchProperty

package/node_modules/@web-atoms/web-controls/src/basic/CheckBoxList.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, { SameObjectValue } from "./AtomRepeater";
 
-import "./styles/check-box-list-style";
+import "./styles/check-box-list.global.less";
 
 export default class CheckBoxList extends AtomRepeater {
 

package/node_modules/@web-atoms/web-controls/src/basic/Checkbox.tsx

@@ -1,6 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 
-import "./styles/checkbox-style";
+import "./styles/checkbox.global.less";
+
 import IElement from "./IElement";
 
 export interface ICheckbox extends IElement {

package/node_modules/@web-atoms/web-controls/src/basic/Chip.tsx

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

package/node_modules/@web-atoms/web-controls/src/basic/DataGrid.tsx

@@ -6,7 +6,7 @@ import AtomRepeater, { getParentRepeaterItem, SelectorCheckBox } from "./AtomRep
 import { EditableInput, getPropertyInfo, IPropertyInfo } from "./Editable";
 import TableRepeater from "./TableRepeater";
 
-import "./styles/data-grid-style";
+import "./styles/data-grid.global.less";
 
 const cellEventName = Symbol("cell-event-name");
 const headerEventName = Symbol("header-event-name");

package/node_modules/@web-atoms/web-controls/src/basic/DateField.tsx

@@ -8,7 +8,7 @@ import InlinePopup, { InlinePopupButton } from "./InlinePopup";
 import TimeEditor from "./TimeEditor";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 
-import "./styles/date-field-style";
+import "./styles/date-field.global.less";
 
 function hours() {
     return [

package/node_modules/@web-atoms/web-controls/src/basic/DropDown.tsx

@@ -3,7 +3,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomRepeater, { askSuggestion, askSuggestionPopup,
     disposeChildren, Match, MatchAnyCaseInsensitive } from "./AtomRepeater";
 
-import "./styles/drop-down-style";
+import "./styles/drop-down.global.less";
 
 export default class DropDown<T = any> extends AtomRepeater<T> {
 

package/node_modules/@web-atoms/web-controls/src/basic/Expander.tsx

@@ -1,6 +1,6 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 
-import "./styles/expander-style";
+import "./styles/expander.global.less";
 
 export interface IExpander {
     icon?: string | string[];
@@ -102,6 +102,7 @@ export function ExpanderMenu({
     const ha = header.attributes ??= {};
     ha["data-element"] = "header";
     let i = 2;
+    details = details.filter((x: any) => x !== false);
     for (const iterator of details) {
         const ia = (iterator.attributes ??= {});
         ia["data-element"] = "detail";

package/node_modules/@web-atoms/web-controls/src/basic/FilesDragDrop.global.less

@@ -0,0 +1,5 @@
+[data-drag-drop="1"] {
+    &[data-drop-enabled] {
+        outline: solid 5px green;
+    }
+}

package/node_modules/@web-atoms/web-controls/src/basic/FilesDragDrop.ts

@@ -4,16 +4,9 @@ const supportsWebkitGetAsEntry =
   "webkitGetAsEntry" in DataTransferItem.prototype;
 
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
-import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import "./FilesDragDrop.global.less";
 
-    styled.css `
-
-        &[data-drop-enabled] {
-            outline: solid 5px green;
-        }
-
-    `.installGlobal("[data-drag-drop=\"1\"]");
 
 const dragEnter = (e: DragEvent) => {
     if (!e.dataTransfer) {
@@ -47,6 +40,8 @@ const eventDrop = (e: DragEvent) => {
     const uploadEvent = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-event"));
     const uploadRequested = StringHelper.fromHyphenToCamel(currentTarget.getAttribute("data-upload-requested"));
     const extra = currentTarget.getAttribute("data-extra");
+    const convert = currentTarget.getAttribute("data-convert") === "true";
+    const maxSize = parseInt(currentTarget.getAttribute("data-max-size") || "0", 10);
 
     const fileHandlesPromises = [...e.dataTransfer.items as any]
         .filter((item) => item.kind === "file")
@@ -87,6 +82,8 @@ const eventDrop = (e: DragEvent) => {
         const detail = {
             files,
             extra,
+            convert,
+            maxSize,
             uploadEvent
         };
         // console.log(detail);
@@ -99,12 +96,16 @@ const eventDrop = (e: DragEvent) => {
 export const FilesDragDrop = ({
     uploadEvent = "files-available",
     uploadRequested = "upload-requested",
+    convert = false,
+    maxSize = 50*1024*1024,
     extra = "",
 }) => ({
     "data-extra": extra,
     "data-drag-drop": "1",
+    "data-convert": convert,
     "data-upload-event": uploadEvent,
     "data-upload-requested": uploadRequested,
+    "data-max-size": maxSize,
     "event-dragenter": dragEnter,
     "event-dragleave": dragLeave,
     "event-dragover": dragOver,

package/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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(
@@ -270,8 +270,8 @@ document.body.addEventListener("click", (e) => {
     }
 
     const node = popupFactory(data);
-
-    app.runAsync(() => InlinePopup.show(target, node, { alignment }));
+    const defaultOnClick = target.getAttribute("data-default-on-click") as any;
+    app.runAsync(() => InlinePopup.show(target, node, { alignment, defaultOnClick }));
 
 });
 

package/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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;
@@ -23,6 +23,7 @@ export interface IPasswordBox extends IElement {
 export default function PasswordBox({
     placeholder,
     value,
+    autofocus,
     ... a
 }: IPasswordBox) {
     return <div
@@ -30,6 +31,7 @@ export default function PasswordBox({
         { ... a}>
         <input
             placeholder={placeholder}
+            autofocus={autofocus}
             type="password"
             value={value} />
         <i

package/node_modules/@web-atoms/web-controls/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];
@@ -61,10 +61,13 @@ export default class PinchZoomView extends AtomControl {
 
         this.element.dataset.pinchZoom = "true";
 
+        this.element.draggable = false;
+
         this.render(<div>
             <div class="image-container">
                 <img
                     src={Bind.oneWay(() => this.getSource(this.source))}
+                    style-opacity={Bind.oneWay(() => this.loading ? "0.3" : "1")}
                     event-load={() => {
                         this.loading = false;
                         this.updateZoom(this.zoom);
@@ -74,7 +77,7 @@ export default class PinchZoomView extends AtomControl {
             <i class={Bind.oneWay(() => this.loading ? "spinner fa-duotone fa-spinner fa-spin" : "hide")}/>
             <i
                 event-click={() => this.updateZoom()}
-                class={Bind.oneWay(() => this.zoom.scale ? "scale fa-solid fa-arrows-minimize" : "hide")}
+                class={Bind.oneWay(() => this.zoom.scale ? "scale" : "hide")}
                 title="Display entire image"/>
         </div>);
         this.imageContainer = this.element.firstElementChild as HTMLDivElement;
@@ -88,6 +91,7 @@ export default class PinchZoomView extends AtomControl {
         let touchEndDisposable;
 
         this.bindEvent(scrollView, "touchstart", (evs: TouchEvent) => {
+
             previous = center(evs);
             // evs.preventDefault();
             // evs.stopImmediatePropagation?.();
@@ -98,12 +102,15 @@ export default class PinchZoomView extends AtomControl {
             
 
             touchMoveDisposable ??= this.bindEvent(scrollView, "touchmove", (ev: TouchEvent) => {
-                ev.preventDefault();
-                ev.stopImmediatePropagation?.();
+
 
                 let { x, y, anchorX, anchorY, scale } = this.zoom;
 
                 if (ev.touches.length === 2) {
+
+                    ev.preventDefault();
+                    ev.stopImmediatePropagation();
+                    
                     const rect = this.element.getBoundingClientRect();
                     const first = ev.touches[0];
                     const second = ev.touches[1];
@@ -117,6 +124,7 @@ export default class PinchZoomView extends AtomControl {
                     if (previousDistance === newScale) {
                         return;
                     }
+
                     scale += newScale - previousDistance;
                     previousDistance = newScale;
                     this.updateZoom({
@@ -163,6 +171,11 @@ export default class PinchZoomView extends AtomControl {
         let mouseMoveDisposable;
         let mouseUpDisposable;
 
+        this.bindEvent(scrollView, "dragstart", (ev: DragEvent) => {
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+        });
+
         this.bindEvent(scrollView, "mousedown", (ev: MouseEvent) => {
             this.element.dataset.state = "grabbing";
             previous = {

package/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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: 5px;
-    & > * {
-        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/node_modules/@web-atoms/web-controls/src/basic/Select.tsx

@@ -12,31 +12,62 @@ const valuePathSetter = AtomControl.registerProperty("data-items", "value", (ctr
 
 const valueSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
     element["initialValue"] = value;
+    element["value"] = value;
+    const select = element as HTMLSelectElement;
+    let length = select.options.length;
+    if (!length) {
+        setTimeout(refreshItems, 1, element);
+        return;
+    }
+
+    // go through all items...
+    const items = element["items"];
+    if (!items) {
+        setTimeout(refreshItems, 1, element);
+        return;
+    }
+
+    const vp = element["valuePath"] ?? ((item) => item?.value ?? item);
+    let index = 0;
+    for (const item of items) {
+        const v = vp(item);
+        if (v == value) {
+            select.selectedIndex = index;
+            return;
+        }
+        index++;
+    }
     setTimeout(refreshItems, 1, element);
 });
 
 const refreshItems = (element: HTMLSelectElement, items?: any[]) => {
     items ??= element["items"];
     (element as any).update = true;
+    const old = element.selectedIndex;
+    let cv = element["initialValue"];
+    if (old !== -1) {
+        cv = element["value"];
+    }
     element.options.length = 0;
-    const cv = element["initialValue"];
     const lp = element["labelPath"] ?? ((item) => item?.label ?? item);
     const vp = element["valuePath"] ?? ((item) => item?.value ?? item);
     let i = 0;
     let si = -1;
-    for (const iterator of items) {
-        const option = document.createElement("option");
-        const label = lp(iterator);
-        const value = vp(iterator);
-        option.text = label;
-        option.value = value;
-        element.options.add(option);
-        if(cv !== void 0) {
-            if (cv == value) {
-                si = i;
+    if(items?.length) {
+        for (const iterator of items) {
+            const option = document.createElement("option");
+            const label = lp(iterator);
+            const value = vp(iterator);
+            option.text = label;
+            option.value = value;
+            element.options.add(option);
+            if(cv !== void 0) {
+                if (cv == value) {
+                    si = i;
+                }
             }
+            i++;
         }
-        i++;
     }
     if (si != -1) {
         element.selectedIndex = si;

package/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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/node_modules/@web-atoms/web-controls/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 [