@web-atoms/web-controls 2.4.59 → 2.4.60

package/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/src/html-editor/commands/Source.tsx

@@ -24,7 +24,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/src/html-editor/commands/Toolbar.tsx

@@ -1,23 +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;
-        align-content: center;
-        justify-content: center;
-        gap: var(--spacing, 5px);
-
-        & .command {
-            display: flex;
-            align-content: center;
-            justify-content: center;
-            align-items: center;
-            justify-items: center;
-        }
-
-    `.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/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" {
+}

package/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/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/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,253 +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-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;    
-        }
-    }
-    
-`.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>

package/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/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;
+                }
+            }
+        }
+    }
+}

package/src/player/TrackProgress.tsx

@@ -1,14 +1,6 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-        height: 5px;
-        & > * {
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-    `.installGlobal("*[data-track-progress=track-progress]");
+import "../styles/track-progress.global.less";
 
 export default function TrackProgress(a) {
     return <div