@web-atoms/web-controls 2.3.109 → 2.3.111

package/src/basic/styles/swipe-style.ts

@@ -0,0 +1,22 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        display: grid;
+        & > * {
+            grid-row: 1;
+            grid-column: 1;
+        }
+    `.installGlobal("[data-swipe]");
+
+    styled.css `
+        & > * {
+            align-self: center;
+            justify-self: end;
+            z-index: 2;
+            &:first-child {
+                align-self: stretch;
+                justify-self: stretch;
+                z-index: 10;
+            }
+        }
+    `.installGlobal("[data-swipe=left]");

package/src/basic/styles/switch-style.ts

@@ -0,0 +1,116 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        min-width: 70px;
+        height: 30px;
+        padding: 3px;
+        margin: 0px;
+        background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
+        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
+        border-radius: 18px;
+        box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
+        cursor: pointer;
+        box-sizing: content-box;
+    
+    & > .switch-input {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        opacity: 0;
+        box-sizing: content-box;
+    }
+        
+    & > .switch-label {
+        position: relative;
+        display: block;
+        height: inherit;
+        background-color: #eceeef;
+        border-radius: inherit;
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
+        box-sizing: content-box;
+        transition: all 0.3s ease;
+
+        &:before, &:after {
+            position: absolute;
+            top: 50%;
+            margin-top: -.5em;
+            line-height: 1;
+            webkit-transition: inherit;
+            transition: inherit;
+            box-sizing: content-box;
+        }
+
+        &:before {
+            content: attr(data-off);
+            right: 11px;
+            color: #aaaaaa;
+            text-shadow: 0 1px rgba(255, 255, 255, 0.5);
+        }
+
+        &:after {
+            content: attr(data-on);
+            left: 11px;
+            color: #FFFFFF;
+            text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+            opacity: 0; 
+        }
+    }
+
+    & > .switch-input:checked {
+
+        & ~ .switch-label {
+            background-color: #E1B42B;
+            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
+        }
+        
+        & ~ .switch-label:before {
+            opacity: 0;
+        }
+        
+        & ~ .switch-label:after {
+            opacity: 1;
+        }
+
+        & ~ .switch-handle {
+            left: 44px;
+            box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+        }
+    }
+        
+   
+    & > .switch-handle {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 28px;
+        height: 28px;
+        background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
+        border-radius: 100%;
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+        transition: all 0.3s ease;
+        &:before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 12px;
+            height: 12px;
+            background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
+            border-radius: 6px;
+            box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
+        }
+    }
+    
+    & > .switch-input:checked ~ .switch-handle {
+        left: 44px;
+        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+    }
+    
+    & > .switch-label, .switch-handle {
+        transition: All 0.3s ease;
+    }
+    `.installGlobal("[data-ui-switch=ui-switch]");

package/src/basic/styles/time-editor-style.ts

@@ -0,0 +1,53 @@
+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]");

package/src/basic/styles/title-editor-style.ts

@@ -0,0 +1,34 @@
+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: 1;
+        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]");

package/src/basic/styles/toggle-button-bar-style.ts

@@ -0,0 +1,37 @@
+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]");

package/src/basic/styles/toggle-view-style.ts

@@ -0,0 +1,80 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+    flex: 1 1 100%;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-around;
+    gap: 4px;
+    display: flex;
+    overflow: hidden;
+        
+    & > .toolbar {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        display: flex;
+        align-self: center; 
+
+        & > .item {
+            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;
+            }
+            
+            &.selected {
+                background-color: var(--accent-color, #00008b);
+                color: var(--accent-text-color,#ffffff); 
+            }
+
+            & > label {
+                white-space: nowrap;
+                margin-bottom: 0px; 
+            }
+        }
+        
+    }
+    
+    
+    & > .presenter {
+        flex: 1 1 100%;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        overflow: hidden; 
+        & > * {
+            grid-row-start: 1;
+            grid-column-start: 1;
+            transition: transform 0.3s;
+            overflow: auto;
+            padding: 5px; 
+        }
+        & > .left {
+            transform: translate(-100%, 0); 
+        }
+        
+        & > .right {
+            transform: translate(100%, 0); 
+        }
+        
+        & > .selected {
+            transform: translate(0, 0);
+        }
+    }
+    
+    `.installGlobal("*[data-wa-toggle-view=wa-toggle-view]");

package/src/basic/styles/tooltip-style.ts

@@ -0,0 +1,10 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        gap: 4px;
+        padding: 10px;
+    `.installGlobal("[data-tooltip=tooltip]");

package/src/html-editor/InlineHtmlEditor.tsx

@@ -1,29 +1,39 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import sleep from "@web-atoms/core/dist/core/sleep";
 import { CancelToken } from "@web-atoms/core/dist/core/types";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { ChildEnumerator, descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
-import RangeEditor, { RangeEditorCommands } from "./RangeEditor";
 
 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";
 
-CSS(StyleRule()
-    .child(StyleRule("[data-element=toolbar]")
-        .verticalFlexLayout({})
-        .child(StyleRule(".toolbar")
-            .flexLayout({})
-            .nested(StyleRule(".command")
-                .and(StyleRule(".pressed")
-                    .fontWeight("bold")
-                )
-            )
-        )
-    )
-, "[data-inline-editor=inline-editor]");
+    styled.css `
+
+    & > [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]")
 
 export default class InlineHtmlEditor extends AtomControl {
 

package/src/mobile-app/BottomPopup.tsx

@@ -2,81 +2,86 @@ 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 StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
 import PopupService, { IPopupOptions, PopupControl, PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 export * as zDoNotUse from "../animations/Animations";
 import MobileApp from "./MobileApp";
+import styled from "@web-atoms/core/dist/style/styled";
 
-CSS(StyleRule()
-    .maximizeAbsolute()
-    .backgroundColor(Colors.black.withAlphaPercent(0.3))
-    .zIndex("500")
-    .and(StyleRule("[data-background=transparent]")
-        .backgroundColor(Colors.transparent)
-    )
-, "div[data-bottom-popup-container]");
+    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]");
 
-CSS(StyleRule()
-    .absolutePosition({
-        left: 0,
-        right: 0,
-        bottom: 0
-    })
-    .marginLeft(2)
-    .marginRight(2)
-    .borderTopLeftRadius(5)
-    .borderTopRightRadius(5)
-    .display("grid")
-    .gridTemplateColumns("auto 1fr auto")
-    .gridTemplateRows("auto auto auto")
-    .backgroundColor(Colors.white)
-    .child(StyleRule("[data-element=bar]")
-        .borderTopLeftRadius(5)
-        .borderTopRightRadius(5)
-        .gridRow("1")
-        .gridColumn("1 / span 3")
-        .backgroundColor(Colors.lightGray)
-        .zIndex(10)
-    )
-    .child(StyleRule("[data-element=icon]")
-        .gridRow("1")
-        .gridColumn("1")
-        .padding(5)
-        .alignSelf("center")
-        .marginRight(5)
-        .zIndex(11)
-    )
-    .child(StyleRule("[data-element=close]")
-        .gridRow("1")
-        .gridColumn("3")
-        .padding(5)
-        .marginLeft(5)
-        .alignSelf("center")
-        .zIndex(11)
-    )
-    .child(StyleRule("[data-element=title]")
-        .gridRow("1")
-        .gridColumn("2")
-        .padding(5)
-        .zIndex(11)
-    )
-    .child(StyleRule("[data-element=content]")
-        .padding(5)
-        .gridRow("2")
-        .gridColumn("1 / span 3")
-        .zIndex(11)
-    )
-    .child(StyleRule("[data-element=footer]")
-        .gridRow("3")
-        .gridColumn("1 / span 3")
-        .marginTop(5)
-        .padding(5)
-        .zIndex(11)
-    )
-, "div[data-bottom-popup]");
+    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]");
 
 export interface IBottomPopupOptions extends IPopupOptions {
     parameters?: {[key: string]: any};