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

package/node_modules/@web-atoms/web-controls/src/mobile-app/BottomPopup.tsx

@@ -1,5 +1,4 @@
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import { CancelToken } from "@web-atoms/core/dist/core/types";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
@@ -7,81 +6,8 @@ import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
 import PopupService, { IPopupOptions, PopupControl, PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
 export * as zDoNotUse from "../animations/Animations";
 import MobileApp from "./MobileApp";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    background-color: rgba(0,0,0,0.3);
-    z-index: 500;
-    `.installGlobal("*[data-bottom-popup-container]");
-
-    styled.css `
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    margin-left: 2px;
-    margin-right: 2px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto auto auto;
-    background-color: #ffffff;
-        
-    & > [data-element=bar] {
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        grid-row: 1;
-        grid-column: 1 / span 3;
-        background-color: #d3d3d3;
-        z-index: 10;
-    }
-    
-    & > [data-element=icon] {
-        grid-row: 1;
-        grid-column: 1;
-        padding: 5px;
-        align-self: center;
-        margin-right: 5px;
-        z-index: 11;
-    }
-    
-    & > [data-element=close] {
-        grid-row: 1;
-        grid-column: 3;
-        padding: 5px;
-        margin-left: 5px;
-        align-self: center;
-        z-index: 11;
-    }
-    
-    & > [data-element=title] {
-        grid-row: 1;
-        grid-column: 2;
-        padding: 5px;
-        z-index: 11;
-    }
-    
-    & > [data-element=content] {
-        padding: 5px;
-        grid-row: 2;
-        grid-column: 1 / span 3;
-        z-index: 11;
-    }
-    
-    & > [data-element=footer] {
-        grid-row: 3;
-        grid-column: 1 / span 3;
-        margin-top: 5px;
-        padding: 5px;
-        z-index: 11;
-    }
-    `.installGlobal("*[data-bottom-popup]");
+import "./bottom-popup.global.less";
 
 export interface IBottomPopupOptions extends IPopupOptions {
     parameters?: {[key: string]: any};

package/node_modules/@web-atoms/web-controls/src/mobile-app/MasterDetailPage.tsx

@@ -1,72 +1,10 @@
-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 PageNavigator, { Page } from "../PageNavigator";
 import { ContentPage, isMobileView } from "./MobileApp";
-import { IDisposable } from "@web-atoms/core/dist/core/types";
-import { ChildEnumerator, descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
+import { descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
 import AtomRepeater from "../basic/AtomRepeater";
 
-    styled.css `
-        & > [data-page-element=content] {
-            display: grid;
-            & > * {
-                grid-row: 1;
-                grid-column: 1;
-                align-self: stretch;
-                justify-self: stretch;
-            }
-            & > *[data-element=detail] {
-                display: none;
-            }
-            &[data-mode=desktop] {
-                display: grid;
-                grid-template-columns: 5fr minmax(400px, 3fr) auto;
-                grid-template-rows: auto 1fr;
-                overflow: hidden;
-                & > *{
-                    grid-row: 1 / span 2;
-                    grid-column: 1;
-                    overflow: auto;
-                }
-                & > *[data-element=close] {
-                    grid-row: 1;
-                    grid-column: 3;
-                    color: red;
-                    margin-top: 0.35em;
-                    padding: 5px;
-                    align-self: center;
-                    justify-self: center;
-                    font-size: 1.5em;
-                    z-index: 2;
-                }
-                & > *[data-element=detail] {
-                    grid-row: 1 / span 2;
-                    grid-column: 2 / span 2;
-                    align-self: stretch;
-                    justify-self: stretch;
-                    transform: none;
-                    transition: none;
-                    display: grid;
-                    position: relative;
-                    margin: 5px;
-                    border-radius: 9px;
-                    box-shadow: rgb(50 50 105 / 7%) 0px 2px 5px 0px, rgb(0 0 0 / 3%) 0px 1px 1px 0px;
-                    border: solid 1px rgb(217 217 217);
-                    padding: 0;
-                    & > [data-page-element=header] {
-                        grid-column: 1 / span 3;
-                    }
-                    & > [data-page-element=footer] {
-                        grid-column: 1 / span 3;
-                    }
-                    & > [data-page-element=content] {
-                        grid-column: 1 / span 3;
-                    }
-                }
-            }
-        }
-    `.installGlobal("[data-page-type=master-detail]");
+import "./master-detail.global.less";
+
 
 const findItem = (content: Element, item) => {
     for (const iterator of descendentElementIterator(content)) {

package/node_modules/@web-atoms/web-controls/src/mobile-app/MobileApp.tsx

@@ -8,7 +8,6 @@ import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import PopupService, { IDialogOptions, PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
 import PageNavigator from "../PageNavigator";
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
-import styled from "@web-atoms/core/dist/style/styled";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList";
 import Bind from "@web-atoms/core/dist/core/Bind";
@@ -17,248 +16,7 @@ import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
 import { displayRouteSymbol, routeSymbol } from "@web-atoms/core/dist/core/Command";
 import Route from "@web-atoms/core/dist/core/Route";
 
-    styled.css `
-
-    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;
-    }
-
-    `.installGlobal("[data-page-app=page-app]");
-
-    styled.css `
-
-    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-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;    
-        }
-    }
-    
-`.installGlobal("[data-base-page=base-page]");
-
-    styled.css `
-        @media screen {
-            body {
-            overflow: hidden;
-        }        
-    }
-`.installGlobal();
+import "../styles/mobile-app.global.less";
 
 export function PullToRefresh() {
     return <div>
@@ -325,6 +83,8 @@ export class BasePage extends AtomControl {
 
     public iconClass: any;
 
+    public keep = false;
+
     /**
      * If set to true, you must set `autofocus` attribute
      * to enable focus when page is visible.
@@ -349,7 +109,7 @@ export class BasePage extends AtomControl {
         this.routeUrl = url;
         // we will unregister previous disposable...
 
-        this.reouteDisposable?.dispose();
+        this.routeDisposable?.dispose();
         let last = void 0;
 
         // this is to prevent unloading of the page
@@ -379,12 +139,12 @@ export class BasePage extends AtomControl {
                 }
             }
         };
-        this.reouteDisposable = this.registerDisposable(d);
+        this.routeDisposable = this.registerDisposable(d);
     }
 
     private routeUrl: string;
 
-    private reouteDisposable: IDisposable;
+    private routeDisposable: IDisposable;
 
     private viewModelTitle: string;
 
@@ -579,7 +339,11 @@ export class BasePage extends AtomControl {
         </div>, e, creator);
         this.contentElement = this.element.querySelector("[data-page-element='content']");
 
-        setTimeout(() => this.contentElement.scrollTo(0, 0), 100);
+        setTimeout(() => {
+            // this.contentElement.scrollTo(0, 0);
+            this.contentElement.scrollTop = 0;
+            this.contentElement.scrollLeft = 0;
+        }, 100);
     }
 
     protected enablePullToRefreshEvents() {
@@ -703,7 +467,12 @@ export class BasePage extends AtomControl {
         if (!element) {
             return;
         }
-        element.dataset.pageState = "hidden";
+        element.setAttribute("data-page-state", "hidden");
+        if (this.keep) {
+            setTimeout(() => 
+                element.setAttribute("data-page-removed", "true"), 400);
+            return;
+        }
         element._logicalParent = element.parentElement;
         this.scrollTop = this.contentElement?.scrollTop;
         setTimeout(() => {
@@ -712,12 +481,16 @@ export class BasePage extends AtomControl {
     }
 
     protected show() {
-        this.element._logicalParent.appendChild(this.element);
+        if (this.keep) {
+            this.element.removeAttribute("data-page-removed");
+        } else {
+            this.element._logicalParent.appendChild(this.element);
+        }
         setTimeout(() => {
             if (this.scrollTop) {
                 this.contentElement.scrollTop = this.scrollTop;
             }
-            this.element.dataset.pageState = "ready";
+            this.element.setAttribute("data-page-state", "ready");
         }, 1);
     }
 }

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

@@ -0,0 +1,73 @@
+*[data-bottom-popup] {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    margin-left: 2px;
+    margin-right: 2px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    background-color: #ffffff;
+        
+    & > [data-element=bar] {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        grid-row: 1;
+        grid-column: 1 / span 3;
+        background-color: #d3d3d3;
+        z-index: 10;
+    }
+
+    & > [data-element=icon] {
+        grid-row: 1;
+        grid-column: 1;
+        padding: 5px;
+        align-self: center;
+        margin-right: 5px;
+        z-index: 11;
+    }
+
+    & > [data-element=close] {
+        grid-row: 1;
+        grid-column: 3;
+        padding: 5px;
+        margin-left: 5px;
+        align-self: center;
+        z-index: 11;
+    }
+
+    & > [data-element=title] {
+        grid-row: 1;
+        grid-column: 2;
+        padding: 5px;
+        z-index: 11;
+    }
+
+    & > [data-element=content] {
+        padding: 5px;
+        grid-row: 2;
+        grid-column: 1 / span 3;
+        z-index: 11;
+    }
+
+    & > [data-element=footer] {
+        grid-row: 3;
+        grid-column: 1 / span 3;
+        margin-top: 5px;
+        padding: 5px;
+        z-index: 11;
+    }
+}
+
+*[data-bottom-popup-container] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0,0,0,0.3);
+    z-index: 500;
+}

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

@@ -0,0 +1,60 @@
+[data-page-type=master-detail] {
+    & > [data-page-element=content] {
+        display: grid;
+        & > * {
+            grid-row: 1;
+            grid-column: 1;
+            align-self: stretch;
+            justify-self: stretch;
+        }
+        & > *[data-element=detail] {
+            display: none;
+        }
+        &[data-mode=desktop] {
+            display: grid;
+            grid-template-columns: 5fr minmax(400px, 3fr) auto;
+            grid-template-rows: auto 1fr;
+            overflow: hidden;
+            & > *{
+                grid-row: 1 / span 2;
+                grid-column: 1;
+                overflow: auto;
+            }
+            & > *[data-element=close] {
+                grid-row: 1;
+                grid-column: 3;
+                color: red;
+                margin-top: 0.35em;
+                padding: 5px;
+                align-self: center;
+                justify-self: center;
+                font-size: 1.5em;
+                z-index: 2;
+            }
+            & > *[data-element=detail] {
+                grid-row: 1 / span 2;
+                grid-column: 2 / span 2;
+                align-self: stretch;
+                justify-self: stretch;
+                transform: none;
+                transition: none;
+                display: grid;
+                position: relative;
+                margin: 5px;
+                border-radius: 9px;
+                box-shadow: rgb(50 50 105 / 7%) 0px 2px 5px 0px, rgb(0 0 0 / 3%) 0px 1px 1px 0px;
+                border: solid 1px rgb(217 217 217);
+                padding: 0;
+                & > [data-page-element=header] {
+                    grid-column: 1 / span 3;
+                }
+                & > [data-page-element=footer] {
+                    grid-column: 1 / span 3;
+                }
+                & > [data-page-element=content] {
+                    grid-column: 1 / span 3;
+                }
+            }
+        }
+    }
+}