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

package/node_modules/@web-atoms/web-controls/src/basic/styles/zoom-view.global.less

@@ -0,0 +1,68 @@
+div[data-zoom-view] {
+
+    position: relative;
+    cursor: grab;
+    overflow: hidden;
+
+    &[data-state=grabbing] {
+        cursor: grabbing;
+    }
+
+    & > div {
+
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        scrollbar-width: none;
+        overflow: auto;
+
+        
+        & > .image-container {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            overflow: hidden;
+            object-fit: contain;
+            width: 100%;
+            height: 100%;
+        }
+
+    }
+
+    & > .scale {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        border: solid 2px darkgray;
+        border-radius: 4px;
+        background-color: white;
+        padding: 4px;
+        color: black;
+        width: 30px;
+        height: 30px;
+        background-image: data-uri("./scale.svg");
+        background-position: 2px 2px;
+        background-size: 20px 20px;
+        background-repeat: no-repeat;
+    }
+
+    & > .spinner {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        display: inline-grid;
+        align-items: center;
+        justify-items: center;
+        z-index: 10;
+    }
+
+    & > .hide {
+        display: none;
+    }
+}

package/node_modules/@web-atoms/web-controls/src/button-bar/AtomButtonBar.tsx

@@ -2,31 +2,7 @@ import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
 
-    styled.css `
-    display: inline-flex;
-    gap: 0;
-    align-items: center;
-    border: solid 1px lightblue;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    & > * {
-        border-radius: 10px;
-        padding: 5px;
-        cursor: pointer;
-        &:first-child {
-            border-top-right-radius: 0;
-            border-bottom-right-radius:0;
-        }
-        &:last-child {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-        &[data-item=selected-item] {
-            background-color: lightblue;
-        }
-    }
-`.installGlobal("*[data-button-bar=button-bar]");
+import "../styles/button-bar.global.less";
 
 export default class AtomButtonBar extends AtomItemsControl {
 

package/node_modules/@web-atoms/web-controls/src/desktop-app/DesktopApp.tsx

@@ -3,71 +3,8 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
 import MobileApp from "../mobile-app/MobileApp";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-
-    html, body {
-        width: 100vw;
-        height: 100vh;
-    }
-
-    body {
-        justify-content: space-around;
-        align-items: stretch;
-        align-content: stretch;
-        flex-direction: row;
-    }
-
-    @media screen {
-        body {
-            overflow: hidden;
-            display: grid;
-        }
-
-        *[data-desktop-app=desktop-app] {
-            position: relative;
-            overflow: hidden;
-            display: grid;
-        }
-        
-    }
-
-    *[data-desktop-app=desktop-app] {
-        min-width: 900px;
-        grid-template-rows: 1fr auto;
-        grid-template-columns: auto 1fr auto;
-        
-        & > [data-page-element=app] {
-            grid-row: 1;
-            grid-column: 2;
-            position: inherit; 
-        }
-
-        & > [data-page-element=menu-renderer] {
-            grid-row: 1;
-            grid-column: 1;
-            overflow-x: hidden;
-            overflow-y: auto; 
-        }
-        
-        & > [data-page-element=side-bar] {
-            grid-row: 1;
-            grid-column: 3;
-            overflow-x: hidden;
-            overflow-y: auto; 
-        }
-        
-        & > [data-page-element=status-bar] {
-            grid-row: 2;
-            grid-column: 1 / span 3;
-            padding: 5px;
-            margin-top: 2px;
-            border-top: solid 1px lightgray;
-            overflow: hidden; 
-        }
-    }
-    `.withId("*[data-desktop-app=desktop-app]").installGlobal();
+import "../styles/desktop-app.global.less";
 
 export default class DesktopApp extends AtomControl {
 

package/node_modules/@web-atoms/web-controls/src/dev/DevHost.tsx

@@ -12,42 +12,9 @@ import DISingleton from "@web-atoms/core/dist/di/DISingleton";
 import AtomRepeater from "../basic/AtomRepeater";
 import ToggleButtonBar from "../basic/ToggleButtonBar";
 
-	styled.css `
-		:root {
-			--accent-color: orangered;
-			--accent-text-color: white;
-		}
-		html, body {
-			margin: 0;
-			padding: 0;
-			font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-		}
-	`.installGlobal();
-
-	const css = styled.css `
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		display: grid;
-		grid-template-rows: auto 1fr;
-		gap: 5px;
-
-		& > header {
-			grid-row: 1;
-		}
-		& > div {
-			grid-row: 2;
-			align-items: stretch;
-			justify-self: stretch;
-			overflow: auto;
-
-			& [data-item-index]:hover {
-				background-color: lightgreen;
-			}
-		}
-	`.installLocal();
+import "./Devhost.global.less";
+
+	const css = "dev-host-local";
 
 const fileTypes = () => [
 	{ label: "Packed", value: "packed"},

package/node_modules/@web-atoms/web-controls/src/dev/Devhost.global.less

@@ -0,0 +1,34 @@
+:root {
+    --accent-color: orangered;
+    --accent-text-color: white;
+}
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+.dev-host-local {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: 5px;
+
+    & > header {
+        grid-row: 1;
+    }
+    & > div {
+        grid-row: 2;
+        align-items: stretch;
+        justify-self: stretch;
+        overflow: auto;
+
+        & [data-item-index]:hover {
+            background-color: lightgreen;
+        }
+    }
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/AtomHtmlEditor.tsx

@@ -26,9 +26,10 @@ import Underline from "./commands/Underline";
 import Unlink from "./commands/Unlink";
 import UnorderedList from "./commands/UnorderedList";
 import Toolbar from "./commands/Toolbar";
-import styled from "@web-atoms/core/dist/style/styled";
 export { default as Toolbar} from "./commands/Toolbar";
 
+import "../styles/atom-html-editor.global.less";
+
 const link = document.createElement("link");
 link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
 link.rel = "preload";
@@ -39,71 +40,6 @@ link.onload = () => {
 };
 document.head.appendChild(link);
 
-const css = styled.css `
-
-    display: flex;
-    flex-direction: column;
-    min-height: 500px;
-    
-    & > iframe {
-        flex: 1 1 100%; 
-    }
-    
-    & > .files > .file {
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-around;
-        gap: 4px;
-        display: inline-flex;
-        border-color: rgba(211,211,211,0.5);
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 15px;
-        padding-left: 10px;
-        padding-right: 10px; 
-
-        & > label {
-            max-width: 100px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis; 
-        }
-    }
-    
-    
-    & .toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-
-        & > .command {
-            display: inline-flex;
-            align-items: center;
-            justify-content: space-evenly;
-            border: none;
-            cursor: pointer;
-            background-color: #00000000;
-            min-width: 28px;
-            height: 28px; 
-        
-            &:hover {
-                background-color: #90ee90; 
-            }
-            
-            &.pressed {
-                background-color: #d3d3d3; 
-
-                &:hover {
-                    background-color: #90ee90; 
-                }
-            }            
-            
-            & .ri-bold {
-                font-weight: bold; 
-            }
-        }
-    }
-    `.installLocal();
 
 function preventLinkClick(e: Event, editor: HTMLElement, doc: Document) {
     let target = e.target as HTMLElement;
@@ -337,7 +273,7 @@ export default class AtomHtmlEditor extends AtomControl {
         this.runAfterInit(() => {
             this.setup();
         });
-        this.element.classList.add(css);
+        this.element.classList.add("atom-control-html-editor");
         this.element.classList.add("html-editor");
     }
 

package/node_modules/@web-atoms/web-controls/src/html-editor/InlineHtmlEditor.tsx

@@ -7,50 +7,8 @@ import { ChildEnumerator, descendentElementIterator } from "@web-atoms/core/dist
 import "@web-atoms/data-styles/data-styles";
 import { showImageDialog } from "./commands/AddImage";
 import { FilesAvailableEventArgs } from "../basic/UploadEvent";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-
-    display: grid;
-    grid-template-rows: auto 1fr;
-
-    & > [data-element=editor] {
-
-        padding: var(--spacing, 5px);
-        border: solid 1px lightgray;
-        border-radius: var(--spacing, 5px);
-        margin: var(--spacing, 5px);
-
-        overflow: auto;
-
-        & > * {
-            outline: none;
-        }
-    }
-
-    & > [data-element=toolbar] {
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        gap: 4px;
-        display: flex;
-
-        & > .toolbar {
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-around;
-            gap: 4px;
-            display: flex;
-
-            & .command {
-
-                &.pressed {
-                    font-weight: bold;
-                }
-            }
-        }
-    }
-    `.installGlobal("[data-inline-editor=inline-editor]")
+import "../styles/inline-html-editor.global.less";
 
 export default class InlineHtmlEditor extends AtomControl {
 

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/AddLink.local.less

@@ -0,0 +1,5 @@
+.html-editor-commands-add-link {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/AddLink.tsx

@@ -7,7 +7,7 @@ import FormField from "../../basic/FormField";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
 import HtmlCommands from "./HtmlCommands";
-import styled from "@web-atoms/core/dist/style/styled";
+import "./AddLink.local.less";
 
 const linkTypes = [
     {
@@ -28,11 +28,7 @@ const linkTypes = [
     }
 ];
 
-const linkDialogCss = styled.css `
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-`.installLocal();
+const linkDialogCss = "html-editor-commands-add-link";
 
 class LinkDialog extends PopupWindow {
 

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/ChangeColor.local.less

@@ -0,0 +1,23 @@
+.web-controls-html-editor-change-color {
+    width: 400px;
+    display: flex;
+    justify-content: space-evenly;
+
+    & > table {
+        display: inline-table; 
+    }
+
+    & .color-button {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border-width: 1px;
+        margin: 1px;
+        cursor: pointer;
+        border-style: solid;
+        border-color: transparent; 
+        &:hover {
+            border-color: black; 
+        }
+    }     
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/ChangeColor.tsx

@@ -2,8 +2,7 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupButton from "../../basic/PopupButton";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
-import styled from "@web-atoms/core/dist/style/styled";
-
+import "./ChangeColor.local.less";
 const gray = [
     "rgb(0,0,0)",
     "rgb(68,68,68)",
@@ -89,30 +88,7 @@ const all = [
     ]
 ];
 
-const colorSelectorCss = styled.css `
-
-    width: 400px;
-    display: flex;
-    justify-content: space-evenly;
-
-    & > table {
-        display: inline-table; 
-    }
-    
-    & .color-button {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border-width: 1px;
-        margin: 1px;
-        cursor: pointer;
-        border-style: solid;
-        border-color: transparent; 
-        &:hover {
-            border-color: black; 
-        }
-    }    
-    `.installLocal();
+const colorSelectorCss = "web-controls-html-editor-change-color";
 
 function TextColor(color: string) {
     return <div

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/ChangeFont.local.less

@@ -0,0 +1,4 @@
+.web-controls-html-editor-change-font {
+    padding: 5px;
+    width: 170px;
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/ChangeFont.tsx

@@ -2,12 +2,9 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupButton, { MenuItem } from "../../basic/PopupButton";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
-import styled from "@web-atoms/core/dist/style/styled";
+import "./ChangeFont.local.less";
 
-const fontMenuCSS = styled.css `
-    padding: 5px;
-    width: 170px;
-`.installLocal();
+const fontMenuCSS = "web-controls-html-editor-change-font";
 
 const fonts: Array<[string, string[]]> = [
     ["Sans Serif", ["arial", "sans-serif"]],

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/Separator.global.less

@@ -0,0 +1,10 @@
+[data-toolbar-item=separator] {
+    background-color: #a9a9a9;
+    margin-left: 4px;
+    margin-right: 4px;
+    display: inline-block;
+    margin-top: 4px;
+    height: 1rem;
+    width: 2px;
+    padding: 0;
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/Separator.tsx

@@ -1,17 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 
-const separatorCss = styled.css `
-    background-color: #a9a9a9;
-    margin-left: 4px;
-    margin-right: 4px;
-    display: inline-block;
-    margin-top: 4px;
-    height: 20px;
-    width: 2px;
-    padding: 0;
-    `.installLocal();
+import "./Separator.global.less";
 
 export default function Separator() {
-    return <div class={separatorCss}></div>;
+    return <div data-toolbar-item="separator"/>;
 }

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/Source.local.less

@@ -0,0 +1,3 @@
+.web-controls-html-editor-source {
+
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/Source.tsx

@@ -5,14 +5,9 @@ import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/Pop
 import type AtomHtmlEditor from "../AtomHtmlEditor";
 import CommandButton from "./CommandButton";
 import HtmlCommands from "./HtmlCommands";
-import styled from "@web-atoms/core/dist/style/styled";
+import "./Source.local.less";
 
-const css = styled.css `
-    & > textarea {
-        min-height: 500px;
-        min-width: 700px;
-    }
-`.installLocal();
+const css = "web-controls-html-editor-source";
 
 async function showDialog(s: AtomHtmlEditor, e: Event): Promise<string> {
 
@@ -24,7 +19,8 @@ async function showDialog(s: AtomHtmlEditor, e: Event): Promise<string> {
         protected create(): void {
             this.source = s.htmlContent;
             this.render(<div class={css}>
-                <textarea value={Bind.twoWaysImmediate(() => this.source)}/>
+                <textarea
+                    value={Bind.twoWaysImmediate(() => this.source)}/>
                 <div class="command-bar">
                     <button
                         eventClick={Bind.event(() => this.close(this.source))}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/Toolbar.tsx

@@ -1,12 +1,6 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--spacing, 5px);
-    `.installGlobal("[data-html-editor-element=toolbar]")
+import "../../styles/html-editor-toolbar.global.less";
 
 export default function Toolbar(a: any, ... nodes: XNode[]) {
     return <div data-html-editor-element="toolbar" { ... a}>

package/node_modules/@web-atoms/web-controls/src/index.d.ts

@@ -0,0 +1,33 @@
+declare module "*.png" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpeg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.gif" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.svg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.less" {
+    const value: string;
+    export default value;
+}
+
+
+declare module "*.json" {
+}