@web-atoms/web-controls 2.4.58 → 2.4.60

package/src/styles/atom-html-editor.global.less

@@ -0,0 +1,64 @@
+.atom-control-html-editor {
+    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; 
+            }
+        }
+    }
+}

package/src/styles/button-bar.global.less

@@ -0,0 +1,25 @@
+*[data-button-bar=button-bar] {
+    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;
+        }
+    }
+}

package/src/styles/desktop-app.global.less

@@ -0,0 +1,63 @@
+*[data-desktop-app=desktop-app] {
+    
+    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; 
+        }
+    }
+}

package/src/styles/form.global.less

@@ -0,0 +1,25 @@
+[data-form=form] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing, 5px);
+
+    &[data-valid=true] {
+        & .field-error:not(:empty) {
+            display: none;
+        }
+        & > .error-message {
+            display: none;
+        }
+    }
+
+    & > .error-message {
+        padding: var(--spacing-small, 2px);
+        padding-left: var(--spacing-large, 10px);
+        padding-right: var(--spacing-large, 10px);
+        background-color: red;
+        border-radius: 9999px;
+        color: white;
+        position: sticky;
+        top: 0;
+    }
+}

package/src/styles/html-editor-toolbar.global.less

@@ -0,0 +1,16 @@
+[data-html-editor-element=toolbar] {
+    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;
+    }
+}

package/src/styles/inline-html-editor.global.less

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

package/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/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/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/src/styles/track-progress.global.less

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

package/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/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/dist/basic/styles/calendar-style.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=calendar-style.d.ts.map

package/dist/basic/styles/calendar-style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar-style.d.ts","sourceRoot":"","sources":["../../../src/basic/styles/calendar-style.ts"],"names":[],"mappings":""}

package/dist/basic/styles/calendar-style.js

@@ -1,109 +0,0 @@
-System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
-  "use strict";
-
-  var styled;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }],
-    execute: function () {
-      styled.css`
-
-    display: inline-grid;
-    grid-template-rows: auto auto 1fr;
-    grid-template-columns: auto auto auto auto;
-    justify-items: stretch;
-
-    & > .fa-solid {
-        padding: 5px;
-        padding-left: 10px;
-        padding-right: 10px;
-        cursor: pointer;
-    }
-
-    & > [data-element=year], & > [data-element=month] {
-        justify-self: center;
-    }
-
-    & > [data-element=previous] {
-        justify-self: start;
-    }
-
-    & > [data-element=next] {
-        justify-self: end;
-    }
-
-    & > .fa-solid:hover {
-        color: blueviolet;
-    }
-    & > select {
-        border: none;
-    }
-
-    & > .week {
-        grid-column-start: 1;
-        grid-column-end: span 4;
-        grid-row-start: 2;
-        display: inline-grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-        gap: 2px;
-
-        & > * {
-            font-size: smaller;
-            padding: 5px;
-            padding-left: 10px;
-            padding-right: 10px;
-            background-color: rgba(211,211,211,0.5);
-            cursor: default;
-            text-align: center;
-            align-self: center;
-            justify-self: stretch;
-        }
-    }
-
-    & > .dates {
-        grid-column-start: 1;
-        grid-column-end: span 4;
-        grid-row-start: 3;
-        display: inline-grid;
-        gap: 0px;
-        grid-template-columns: repeat(7, 1fr);
-
-        & > [data-item-index] {
-            align-self: stretch;
-            justify-self: stretch;
-            padding: 7px;
-            cursor: pointer;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            &:hover {
-                background-color: rgba(211,211,211,0.5);             
-            }
-
-            &[data-is-today=true] {
-                background-color: lightgreen; 
-            }
-
-            &[data-is-weekend=true] {
-                background-color: rgba(211,211,211,0.3);
-            }
-
-            &[data-is-other-month=true] {
-                opacity: 0.5;
-            }
-            &[data-is-disabled] {
-                text-decoration: line-through;            
-            }
-            &[data-selected-item=true] {
-                background-color: var( --selection-color, blueviolet);
-                color: var( --selection-color-text, white);
-            }
-        }
-    }
-    `.installGlobal("*[data-calendar=calendar]");
-    }
-  };
-});
-//# sourceMappingURL=calendar-style.js.map

package/dist/basic/styles/calendar-style.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["styled","_webAtomsCoreDistStyleStyled","default","execute","css","installGlobal"],"sources":["../../../src/basic/styles/calendar-style.ts"],"sourcesContent":[null],"mappings":";;;;;;MAAOA,MAAM,GAAAC,4BAAA,CAAAC,OAAA;IAAA;IAAAC,OAAA,WAAAA,CAAA;MAETH,MAAM,CAACI,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FV,CAACC,aAAa,CAAC,2BAA2B,CAAC;IAAC;EAAA;AAAA","ignoreList":[]}

package/dist/basic/styles/check-box-list-style.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=check-box-list-style.d.ts.map

package/dist/basic/styles/check-box-list-style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"check-box-list-style.d.ts","sourceRoot":"","sources":["../../../src/basic/styles/check-box-list-style.ts"],"names":[],"mappings":""}