@web-atoms/web-controls 2.4.58 → 2.4.60

package/src/basic/styles/{time-editor-style.ts → time-editor.global.less}

@@ -1,53 +1,51 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-
-    padding-left: 5px;
-    grid-row: 2;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: start;
-    gap: 0;
-
-    & > [data-element=hour] {
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-
-    & > [data-element=minute] {
-        margin-left: 5px;
-    }
-
-    & > [data-element=pm] {
-        margin-right: 5px;
-    }
-
-    & > button {
-        border-radius: 9999px;
-        outline: none;
-        border: none;
-        background-color: transparent;
-
-        &[data-selected=true] {
-            background-color: var(--accent-color, blue);
-            color: var(--accent-text-color, white);
-        }
-
-        &[data-element=am] {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        &[data-element=pm] {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-    }
-
-    & > select {
-        border: none;
-        outline: none;
-    }
-
-    `.installGlobal("[data-time-editor]");
+[data-time-editor] {
+
+    padding-left: 5px;
+    grid-row: 2;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    gap: 0;
+
+    & > [data-element=hour] {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+
+    & > [data-element=minute] {
+        margin-left: 5px;
+    }
+
+    & > [data-element=pm] {
+        margin-right: 5px;
+    }
+
+    & > button {
+        border-radius: 9999px;
+        outline: none;
+        border: none;
+        background-color: transparent;
+
+        &[data-selected=true] {
+            background-color: var(--accent-color, blue);
+            color: var(--accent-text-color, white);
+        }
+
+        &[data-element=am] {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &[data-element=pm] {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    & > select {
+        border: none;
+        outline: none;
+    }
+
+}

package/src/basic/styles/{title-editor-style.ts → title-editor.global.less}

@@ -1,34 +1,33 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-    display: inline-grid;
-    grid-template-rows: 1fr auto;
-    grid-template-columns: 1fr 40px;
-    column-gap: 5px;
-
-    & > input {
-        grid-row: 1 / span 2;
-        grid-column: 1;
-    }
-
-    & > i {
-        grid-row: 1;
-        grid-column: 2;
-        font-size: smaller;
-        padding-left: 5px;
-        padding-right: 5px;
-        align-self: stretch;
-        justify-self: stretch;
-        text-align: center;
-    }
-
-    & > span {
-        grid-row: 2;
-        grid-column: 2;
-        font-size: xx-small;
-        align-self: stretch;
-        justify-self: stretch;
-        text-align: center;
-    }
-
-    `.installGlobal("[data-title-editor=title-editor]");
+[data-title-editor=title-editor] {
+
+    display: inline-grid;
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 1fr 40px;
+    column-gap: 5px;
+
+    & > input {
+        grid-row: 1 / span 2;
+        grid-column: 1;
+    }
+
+    & > i {
+        grid-row: 1;
+        grid-column: 2;
+        font-size: smaller;
+        padding-left: 5px;
+        padding-right: 5px;
+        align-self: stretch;
+        justify-self: stretch;
+        text-align: center;
+    }
+
+    & > span {
+        grid-row: 2;
+        grid-column: 2;
+        font-size: xx-small;
+        align-self: stretch;
+        justify-self: stretch;
+        text-align: center;
+    }
+
+}

package/src/basic/styles/{toggle-button-bar-style.ts → toggle-button-bar.global.less}

@@ -1,37 +1,35 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-
-    display: inline-grid;
-    grid-auto-flow: column;
-    align-content: center;
-    justify-items: stretch;
-    text-align: center;
-    border-style: solid;
-    border-width: 1px;
-    border-color: #d3d3d3;
-    border-radius: 9999px;
-        
-    & > [data-item-type=toggle-button] {
-        padding: 5px;
-        background-color: #ffffff;
-        cursor: pointer;
-
-        &:first-child {
-            padding-left: 10px;
-            border-top-left-radius: 9999px;
-            border-bottom-left-radius: 9999px;
-        }
-
-        &:last-child {
-            border-top-right-radius: 9999px;
-            border-bottom-right-radius: 9999px;
-            padding-right: 10px;
-        }
-
-        &[data-selected-item=true] {
-            background-color: var(--accent-color, black);
-            color: #ffffff;
-        }
-    }        
-    `.installGlobal("[data-button-bar=button-bar]");
+[data-button-bar=button-bar] {
+
+    display: inline-grid;
+    grid-auto-flow: column;
+    align-content: center;
+    justify-items: stretch;
+    text-align: center;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #d3d3d3;
+    border-radius: 9999px;
+        
+    & > [data-item-type=toggle-button] {
+        padding: 5px;
+        background-color: #ffffff;
+        cursor: pointer;
+
+        &:first-child {
+            padding-left: 10px;
+            border-top-left-radius: 9999px;
+            border-bottom-left-radius: 9999px;
+        }
+
+        &:last-child {
+            border-top-right-radius: 9999px;
+            border-bottom-right-radius: 9999px;
+            padding-right: 10px;
+        }
+
+        &[data-selected-item=true] {
+            background-color: var(--accent-color, black);
+            color: #ffffff;
+        }
+    }        
+}

package/src/basic/styles/{toggle-view-style.ts → toggle-view.global.less}

@@ -1,78 +1,77 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-    flex: 1 1 100%;
-    gap: 4px;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    overflow: hidden;
-    align-items: stretch;
-    justify-items: stretch;
-    justify-content: stretch;
-        
-    & > .toolbar {
-        grid-row: 1;
-        flex-direction: row;
-        display: flex;
-        place-self: center;
-
-        & > [data-element=header] {
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-around;
-            gap: 4px;
-            display: inline-flex;
-            border: solid 1px lightgray;
-            padding: 5px; 
-
-            &:first-child {
-                border-top-left-radius: 10px;
-                border-bottom-left-radius: 10px;
-                border-right: none;
-            }
-            
-            &:last-child {
-                border-top-right-radius: 10px;
-                border-bottom-right-radius: 10px; 
-                border-left: none;
-            }
-            
-            &[data-selected=true] {
-                background-color: var(--accent-color, #00008b);
-                color: var(--accent-text-color,#ffffff); 
-            }
-
-            & > label {
-                white-space: nowrap;
-                margin-bottom: 0px; 
-            }
-        }
-        
-    }
-    
-    
-    & > [data-element=view] {
-        grid-row-start: 2;
-        grid-column-start: 1;
-        transition: transform 0.3s;
-        align-self: stretch;
-        justify-self: stretch;
-        overflow: auto;
-        padding: 5px;
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-        &[data-left=true] {
-            transform: translate(-100%, 0); 
-        }
-        
-        &[data-right=true] {
-            transform: translate(100%, 0); 
-        }
-        
-        &[data-selected=true] {
-            transform: translate(0, 0);
-        }
-    }
-    
-    `.installGlobal("*[data-wa-toggle-view=wa-toggle-view]");
+*[data-wa-toggle-view=wa-toggle-view] {
+    
+    flex: 1 1 100%;
+    gap: 4px;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    overflow: hidden;
+    align-items: stretch;
+    justify-items: stretch;
+    justify-content: stretch;
+        
+    & > .toolbar {
+        grid-row: 1;
+        flex-direction: row;
+        display: flex;
+        place-self: center;
+
+        & > [data-element=header] {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-around;
+            gap: 4px;
+            display: inline-flex;
+            border: solid 1px lightgray;
+            padding: 5px; 
+
+            &:first-child {
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+                border-right: none;
+            }
+            
+            &:last-child {
+                border-top-right-radius: 10px;
+                border-bottom-right-radius: 10px; 
+                border-left: none;
+            }
+            
+            &[data-selected=true] {
+                background-color: var(--accent-color, #00008b);
+                color: var(--accent-text-color,#ffffff); 
+            }
+
+            & > label {
+                white-space: nowrap;
+                margin-bottom: 0px; 
+            }
+        }
+        
+    }
+    
+    
+    & > [data-element=view] {
+        grid-row-start: 2;
+        grid-column-start: 1;
+        transition: transform 0.3s;
+        align-self: stretch;
+        justify-self: stretch;
+        overflow: auto;
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        &[data-left=true] {
+            transform: translate(-100%, 0); 
+        }
+        
+        &[data-right=true] {
+            transform: translate(100%, 0); 
+        }
+        
+        &[data-selected=true] {
+            transform: translate(0, 0);
+        }
+    }
+    
+}

package/src/basic/styles/tooltip.global.less

@@ -0,0 +1,8 @@
+[data-tooltip=tooltip] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    gap: 4px;
+    padding: 10px;
+}

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