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

package/node_modules/@web-atoms/web-controls/src/styles/limited-text.global.less

@@ -0,0 +1,36 @@
+[data-limited-text] {
+    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;
+        }
+    }
+
+}

package/node_modules/@web-atoms/web-controls/src/styles/mobile-app.global.less

@@ -0,0 +1,242 @@
+[data-page-app=page-app] {
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    padding: 5px;
+
+    & > [data-container] {
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        bottom: 0px;
+        transition: left 0.3s ease-out;
+    }
+
+    @media screen {
+        & {
+            position: absolute;
+            overflow: hidden;        
+        
+            & > [data-container] {
+                position: absolute;
+                overflow: hidden;
+            }
+        }
+    }
+    
+    &[data-drawer=visible] {
+
+        & > [data-container] {
+            left: 80%;
+        }
+
+        & > [data-drawer-page] {
+            left: 0px;
+        }
+    }
+    
+    & div[data-drawer-page=drawer-page] {
+        position: absolute;
+        top: 0px;
+        left: -80%;
+        width: 80%;
+        height: 100%;
+        overflow: hidden;
+        transition: left 0.3s ease-out;
+    }
+}
+
+
+[data-base-page=base-page] {
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    contain: content;
+    transition: transform 0.3s ease-out;
+    display: grid;
+    grid-template-rows: auto auto 1fr auto;
+    grid-template-columns: auto 1fr auto;
+    transform: translate(100%,0);
+
+    @media screen {
+        & {
+            position: absolute;
+            overflow: hidden;
+        }   
+    }
+
+    & > [data-icon-button=icon-button] {
+        padding: 5px;
+    }
+    
+    & > [data-page-element=action-bar] {
+        z-index: 11;
+        grid-row-start: 1;
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        background-color: var(--accent-color, lightgray); 
+    }
+    
+    & > [data-page-element=icon] {
+        font-size: 20px;
+        z-index: 14;
+        padding: 10px;
+        text-align: center;
+        align-self: center;
+        justify-self: center;
+        grid-row-start: 1;
+        grid-column-start: 1;
+        color: var(--accent-text-color, black); 
+    }
+    
+    & > [data-page-element=title] {
+        font-size: 20px;
+        z-index: 14;
+        padding: 5px;
+        align-self: center;
+        justify-self: stretch;
+        grid-row-start: 1;
+        grid-column-start: 2;
+        color: var(--accent-text-color, black); 
+    }
+    
+    & > [data-page-element=action] {
+        font-size: 20px;
+        z-index: 14;
+        padding: 10px;
+        grid-row-start: 1;
+        grid-column-start: 3;
+        color: var(--accent-text-color, black); 
+
+        & button {
+            width: 30px;
+            border: none;
+            outline: none;
+            background: transparent;
+            font-size: inherit; 
+        }
+    }
+    
+    & > button[data-page-element=action] {
+        min-width: 40px;
+        border: none;
+        outline: none;
+        background: transparent; 
+    }
+    
+    & > [data-page-element=header] {
+        z-index: 12;
+        padding: 5px;
+        grid-row-start: 2;
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        background-color: #c0c0c0; 
+    }
+    
+    & > [data-page-element=pull-to-refresh] {
+        grid-row-start: 3;
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        padding: 5px;
+        margin: 10px;
+        z-index: 9;
+        align-self: start;
+        justify-self: center; 
+
+        & .pull-icon {
+            transition: all 0.3s ease-out; 
+        }
+        
+        &[data-mode=up] .pull-icon {
+            transform: rotate(180deg); 
+        }
+        
+        &[data-mode=loading] .pull-icon {
+            display: none; 
+        }
+        
+        &:not([data-mode=down]) .down {
+            display: none; 
+        }
+        
+        &:not([data-mode=up]) .up {
+            display: none; 
+        }
+        
+        &:not([data-mode=loading]) .loading {
+            display: none; 
+        }
+    }
+        
+    & > [data-page-element=content] {
+        grid-row-start: 3;
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        padding: 5px;
+        position: relative;
+        overflow-x: hidden;
+        overflow-y: auto;
+        z-index: 10;
+        scrollbar-width: 5px;
+        scrollbar-color: #ffa500 white; 
+
+        &::-webkit-scrollbar {
+            width: 5px; 
+        }
+        
+        &::-webkit-scrollbar-thumb {
+            background-color: white;
+            border-radius: 20px;
+            border: 3px solid #ffa500; 
+        }
+        
+    }
+        
+    & > [data-page-element=footer] {
+        grid-row-start: 4;
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        z-index: 11;
+        padding: 5px; 
+    }
+    
+    &[data-page-state=ready] {
+        transform: translate(0,0); 
+    }
+    
+    &[data-page-state=hidden] {
+        transform: translate(-100%,0); 
+    }
+
+    &[data-page-removed] {
+        display: none;
+        z-index: -1000;
+    }
+
+    &[data-hide-toolbar=true] {
+
+        & > [data-page-element=icon] {
+            display: none; 
+        }
+        
+        & > [data-page-element=title] {
+            display: none; 
+        }
+        
+        & > [data-page-element=action-bar] {
+            display: none; 
+        }
+        
+        & > [data-page-element=action] {
+            display: none;    
+        }
+    }
+}
+
+@media screen {
+    body {
+        overflow: hidden;
+    }
+}

package/node_modules/@web-atoms/web-controls/src/styles/resizable.global.less

@@ -0,0 +1,26 @@
+[data-resizable=resizable] {
+    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;
+        }
+    }
+}

package/node_modules/@web-atoms/web-controls/src/styles/track-progress.global.less

@@ -0,0 +1,8 @@
+*[data-track-progress=track-progress] {
+    height: 5px;
+    & > * {
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+}

package/node_modules/@web-atoms/web-controls/src/styles/type-writer.global.less

@@ -0,0 +1,10 @@
+[data-component=type-writer] {
+    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;
+}

package/node_modules/@web-atoms/web-controls/src/toggle-view/AtomToggleView.tsx

@@ -2,7 +2,7 @@ import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 
-import "../basic/styles/toggle-view-style";
+import "../basic/styles/toggle-view.global.less";
 import IElement from "../basic/IElement";
 import Action from "@web-atoms/core/dist/view-model/Action";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-hosted-web",
-  "version": "1.2.18",
+  "version": "1.2.21",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,16 +11,31 @@
   "license": "ISC",
   "bundledDependencies": true,
   "dependencies": {
-    "@web-atoms/core": "^2.4.10",
-    "@web-atoms/data-styles": "^1.0.117",
-    "@web-atoms/date-time": "^1.1.0",
-    "@web-atoms/email-dom": "^1.0.30",
-    "@web-atoms/entity": "^2.4.37",
-    "@web-atoms/font-awesome": "^1.0.37",
-    "@web-atoms/hybrid-clr": "^1.0.21",
-    "@web-atoms/module-loader": "^2.1.42",
-    "@web-atoms/web-controls": "^2.4.21",
     "@social-mail/social-mail-client": "^1.2.115",
+    "@web-atoms/core": "^2.4.37",
+    "@web-atoms/data-styles": "^1.0.123",
+    "@web-atoms/date-time": "^1.1.0",
+    "@web-atoms/email-dom": "^1.0.33",
+    "@web-atoms/entity": "^2.4.76",
+    "@web-atoms/module-loader": "^2.1.85",
+    "@web-atoms/web-controls": "^2.4.67",
     "reflect-metadata": "^0.1.13"
-  }
+  },
+  "devDependencies": {
+    "@neurospeech/jex": "^1.0.112",
+    "@web-atoms/pack": "^1.0.109",
+    "less": "^4.2.1",
+    "tslib": "^2.4.1"
+  },
+  "bundleDependencies": [
+    "@web-atoms/core",
+    "@web-atoms/data-styles",
+    "@web-atoms/date-time",
+    "@web-atoms/email-dom",
+    "@web-atoms/entity",
+    "@web-atoms/module-loader",
+    "@web-atoms/web-controls",
+    "@social-mail/social-mail-client",
+    "reflect-metadata"
+  ]
 }

package/src/admin/drawer/AdminDrawer.local.less

@@ -0,0 +1,20 @@
+.social-mail-cloud-server-admin-drawer {
+    min-width: 300px;
+
+    background-color: transparent;
+
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    & > .header {
+        grid-row: 1;
+    }
+    & > .menus {
+        grid-row: 2;
+        background-color: #FFFFFF25;
+        padding: var(--spacing);
+        margin: var(--spacing);
+        border-radius: 10px;
+    }
+
+}

package/src/admin/drawer/AdminDrawer.tsx

@@ -1,29 +1,12 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 import { Drawer } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import MenuItem from "../../controls/menu/MenuItem";
 import AdminCommands from "../commands/AdminCommands";
 
-const css = styled.css `
-    min-width: 300px;
 
-    background-color: transparent;
+import "./AdminDrawer.local.less";
 
-    display: grid;
-    grid-template-rows: auto 1fr;
-
-    & > .header {
-        grid-row: 1;
-    }
-    & > .menus {
-        grid-row: 2;
-        background-color: #FFFFFF25;
-        padding: var(--spacing);
-        margin: var(--spacing);
-        border-radius: 10px;
-    }
-
-`.installLocal();
+const css = "social-mail-cloud-server-admin-drawer";
 
 export default class AdminDrawer extends Drawer {
 

package/src/admin/pages/dns/DnsZoneService.ts

@@ -16,6 +16,7 @@ export default class DnsZoneService {
         version = 1
     }) {
         return this.entityService.query(DnsZone)
+            .include((x) => x.ksk)
             .toPagedList({
                 start,
                 size,

package/src/controls/basic/AppBar.global.less

@@ -0,0 +1,23 @@
+.app-bar {
+    backdrop-filter: blur(14px) saturate(180%);
+    -webkit-backdrop-filter: blur(14px) saturate(180%);
+    background-color: rgba(17, 25, 40, 0.56);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
+    position: sticky;
+    top: 5px;
+    z-index: 200;
+    display: flex;
+    gap: 5px;
+    font-size: 2em;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-right: 10px;
+    & > img {
+        max-height: 50px;
+    }
+    & > a {
+        text-decoration: none;
+        color: white;
+    }
+}

package/src/controls/basic/AppBar.tsx

@@ -1,33 +1,8 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { ContentFolder } from "../../common/ContentFolder";
-import styled from "@web-atoms/core/dist/style/styled";
 import AppCommands from "../../commands/AppCommands";
 
-    styled.css `
-
-    backdrop-filter: blur(14px) saturate(180%);
-    -webkit-backdrop-filter: blur(14px) saturate(180%);
-    background-color: rgba(17, 25, 40, 0.56);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.125);
-    position: sticky;
-    top: 5px;
-    z-index: 200;
-    display: flex;
-    gap: 5px;
-    font-size: 2em;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-right: 10px;
-    & > img {
-        max-height: 50px;
-    }
-    & > a {
-        text-decoration: none;
-        color: white;
-    }
-
-`.installGlobal(".app-bar");
+import "./AppBar.global.less";
 
 export default function AppBar() {
     return <header class="app-bar">

package/src/controls/basic/Banner.global.less

@@ -0,0 +1,8 @@
+.banner {
+    padding: 30px;
+    margin: 50px;
+    display: flex;
+    gap: 30px;
+    flex-direction: column;
+
+}

package/src/controls/basic/Banner.tsx

@@ -1,15 +1,5 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-
-        padding: 30px;
-        margin: 50px;
-        display: flex;
-        gap: 30px;
-        flex-direction: column;
-
-`.installGlobal(".banner");
+import "./Banner.global.less";
 
 export default function Banner(a, ... nodes: XNode[]) {
     return <div class="banner" { ... a}>{ ... nodes }</div>;

package/src/controls/basic/Box.global.less

@@ -0,0 +1,42 @@
+.box {
+    padding: 30px;
+    border-radius: 30px;
+    margin: 50px;
+    backdrop-filter: blur(11px) saturate(180%);
+    -webkit-backdrop-filter: blur(11px) saturate(180%);
+    background-color: rgba(255, 255, 255, 0.27);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.125);
+    color: white;
+    display: flex;
+    gap: 30px;
+    flex-direction: column;
+    contain: content;
+    & > header {
+        background-color: #0093E9;
+        background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+        opacity: 0.8;
+        color: var(--primary-color);
+        margin: -30px;
+        padding: 25px;
+        margin-bottom: 10px;
+        text-align: center;
+        font-size: 1.4em;
+
+        &.green {
+            background-color: #85FFBD;
+            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
+        }
+
+        &.yellow {
+            background-color: #FBAB7E;
+            background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
+        }
+
+        &.fuschia {
+            background-color: #4158D0;
+            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+            color: white;
+        }
+    }
+}

package/src/controls/basic/Box.tsx

@@ -1,48 +1,6 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-        padding: 30px;
-        border-radius: 30px;
-        margin: 50px;
-        backdrop-filter: blur(11px) saturate(180%);
-        -webkit-backdrop-filter: blur(11px) saturate(180%);
-        background-color: rgba(255, 255, 255, 0.27);
-        border-radius: 12px;
-        border: 1px solid rgba(255, 255, 255, 0.125);
-        color: white;
-        display: flex;
-        gap: 30px;
-        flex-direction: column;
-        contain: content;
-        & > header {
-            background-color: #0093E9;
-            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
-            opacity: 0.8;
-            color: var(--primary-color);
-            margin: -30px;
-            padding: 25px;
-            margin-bottom: 10px;
-            text-align: center;
-            font-size: 1.4em;
-
-            &.green {
-                background-color: #85FFBD;
-                background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
-            }
-
-            &.yellow {
-                background-color: #FBAB7E;
-                background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
-            }
-
-            &.fuschia {
-                background-color: #4158D0;
-                background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
-                color: white;
-            }
-        }
-    `.installGlobal(".box");
+import "./Box.global.less";
 
 export default function Box( { header = null, headerClass = null, ... a}, ... nodes: XNode[]) {
     return <div class="box" { ... a}>

package/src/controls/basic/FeatureList.tsx

@@ -2,20 +2,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import styled from "@web-atoms/core/dist/style/styled";
 import Box from "./Box";
 
-    styled.css `
-
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding: 10px;
-    align-items: stretch;
-    justify-items: stretch;
-
-    & > * {
-        font-size: 1.2em;
-    }
-
-    `.installGlobal(".feature-list");
+import "./FeaturedList.global.less";
 
 export default function FeatureList({ header=null, headerClass=null, ... a }, ... nodes: XNode[]) {
 
@@ -26,22 +13,6 @@ export default function FeatureList({ header=null, headerClass=null, ... a }, ..
     </Box>;
 }
 
-    styled.css `
-
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-    align-items: center;
-    font-size: 1.3em;
-    & > i {
-        min-width: 40px;
-        text-align: center;
-        color: #ff98ff;
-        font-size: 1.4em;
-    }
-
-`.installGlobal(".feature")
-
 export function Feature({ icon, ... a }, ... nodes: XNode[]) {
     return <div class="feature" { ... a}>
         { icon && <i class={icon}/>}