@web-atoms/web-controls 2.3.108 → 2.3.110

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

@@ -0,0 +1,128 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+        display: grid;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto 1fr auto;
+        align-items: center;
+
+    & > [data-element=icon] {
+        grid-column-start: 1;
+        grid-row-start: 1;
+        padding: 5px;
+        margin-right: 5px;
+        align-self: center;
+        justify-self: center; }
+
+    & > [data-element=header] {
+        grid-row-start: 1;
+        grid-column-start: 2; }
+
+    & > [data-element=caret] {
+        grid-row-start: 1;
+        grid-column-start: 3;
+        padding: 5px;
+        margin-left: 5px; }
+
+    & > [data-element=detail] {
+        grid-row-start: 2;
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        margin-top: 5px; }
+
+    &[data-is-expanded=true] {
+        & > [data-element=caret] {
+            overflow: hidden;
+            transform: rotate(-180deg);
+            transition: transform 150ms ease;
+            transform-origin: center center;
+        }
+    }
+
+    &[data-is-expanded=false] {
+        & > [data-element=caret] {
+            overflow: hidden;
+            transform: rotate(-360deg);
+            transform-origin: center center;
+            transition: transform 150ms ease;
+        }
+        & > *[data-element=detail] {
+            display: none;
+        }
+    }
+    `.installGlobal("*[data-is-expander=expander]");
+
+    styled.css `
+
+    display: grid;
+    grid-template-columns: auto auto 1fr auto;
+    align-items: center;
+    gap: 0px;
+
+    & > [data-element=icon] {
+        grid-column-start: 1;
+        grid-column-end: span 2;
+        grid-row-start: 1;
+        padding: 5px;
+        align-self: center;
+        justify-self: center;
+    }
+
+    & > [data-element=header] {
+        grid-row-start: 1;
+        grid-column-start: 3;
+    }
+
+    & > [data-element=caret] {
+        grid-row-start: 1;
+        grid-column-start: 4;
+        padding: 5px;
+        margin-left: 5px;
+    }
+
+    & > [data-element=detail] {
+        grid-row-start: 2;
+        grid-column-start: 2;
+        grid-column-end: span 3;
+        padding-left: 20px;
+        padding-top: 5px;
+        border-left-style: solid;
+        border-left-width: 1px;
+        border-left-color: var(--border-color, lightgray);
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border-bottom-width: 0px;
+        border-top-width: 0px;
+        margin-top: 0px;
+        margin-bottom: 0px;
+
+        &[data-selected=true] {
+            font-weight: bold;
+            border-left-color: var(--accent-color, darkgray);
+            border-left-width: medium;
+        }
+    }
+
+    &[data-is-expanded=true] {
+        & > [data-element=caret] {
+            overflow: hidden;
+            transform: rotate(-180deg);
+            transition: transform 150ms ease;
+            transform-origin: center center;
+        }
+    }
+
+    &[data-is-expanded=false] {
+        & > [data-element=caret] {
+            overflow: hidden;
+            transform: rotate(-360deg);
+            transform-origin: center center;
+            transition: transform 150ms ease;    
+        }
+        & > *[data-element=detail] {
+            display: none;    
+        }
+    }
+
+    `.installGlobal("*[data-is-expander=menu]")

package/src/basic/styles/form-field-style.ts

@@ -0,0 +1,136 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr auto auto;
+    grid-template-rows: auto auto auto;
+
+    & > [data-element=label] {
+        grid-row: 1;
+        grid-column: 1;
+    }
+
+    & > [data-element=content] {
+        grid-row-start: 2;
+        grid-column-start: 1;
+        grid-column-end: span 2;
+        margin-top: 5px;
+        margin-bottom: 5px; }
+
+    &[data-border=true] input {
+        border: none;
+        outline: none; }
+
+    &[data-border=true] textarea {
+        border: none;
+        outline: none; }
+
+    &[data-border=true] select {
+        border: none; }
+
+    & > i[data-border=border] {
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        grid-row-start: 3;
+        align-self: flex-end;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: #d3d3d3;
+    }
+
+    &[data-focused=true] > i[data-border=border] {
+        border-bottom-color: #000000;
+    }
+
+    & > i[data-help=help] {
+        grid-row-start: 2;
+        grid-column-start: 3;
+        padding: 5px;
+        font-size: x-large;
+        cursor: pointer;
+        margin-left: auto;
+        color: #90ee90;
+    }
+
+    & > .field-error {
+        grid-row-start: 4;
+        grid-column-start: 1;
+        grid-column-end: span 3;
+        padding: 5px;
+        margin: 5px;
+        border-radius: 9999px;
+        background-color: #ff0000;
+        color: #ffffff;
+        font-size: smaller;
+    }
+
+    & > .field-error:empty {
+        display: none;
+    }
+
+    & > span[data-required=required] {
+        grid-column-start: 2;
+        grid-row: 1;
+        visibility: hidden;
+        color: #ff0000;
+        
+        &.true {
+            visibility: visible;
+        }
+    }
+
+    &[data-layout=horizontal] {
+
+        grid-template-columns: auto auto 1fr auto;
+        grid-template-rows: auto auto;
+
+        & > label.label {
+            grid-row-start: 2;
+            margin-right: 5px;
+            margin-bottom: 5px;
+        }
+
+        & > [data-content=content] {
+            grid-row-start: 2;
+            grid-column-start: 3;
+            margin-top: 0px;
+            margin-bottom: 5px;
+        }
+
+        & > i[data-help=help] {
+            grid-row-start: 2;
+            grid-column-start: 4;
+        }
+
+        & > .field-error {
+            grid-row-start: 4;
+            grid-column-start: 1;
+            grid-column-end: span 3;
+        }
+
+        & > span[data-required=required] {
+            grid-row-start: 2;
+            grid-column-start: 2;
+            margin-right: 5px;
+            display: none;
+            color: #ff0000;
+
+            &.true {
+                display: inline;
+            }
+        }
+    }
+
+`.installGlobal("[data-wa-form-field=wa-form-field]");
+
+    styled.css `
+        overflow: auto;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
+    `.installGlobal("[data-form-field-help=help-window]");

package/src/basic/styles/inline-popup-style.ts

@@ -0,0 +1,19 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+    position: absolute;
+    border-radius: 5px;
+    padding: 5px;
+    box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;
+    border: solid 1px rgba(0, 0, 0, 0.05);
+    z-index: 5000;
+    background-color: var(--primary-bg, white);
+    color: var(--primary-color, darkgray);
+    left: 0;
+    `.installGlobal("*[data-inline-popup=inline-popup]");
+
+    styled.css `
+    right: 0;
+    left: unset;
+    `.installGlobal("*[data-alignment=bottom-right] > [data-inline-popup=inline-popup]");
+

package/src/basic/styles/list-repeater-style.ts

@@ -0,0 +1,25 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+    & > *[data-item-index] {
+        padding: 5px;
+        border-radius: 5px;
+        background-color: var(--list-bg-color);
+        color: var(--list-color);
+
+        &:hover {
+            background-color: var(--list-selected-bg-color-hover, lightgreen);
+            color: var(--list-selected-color-hover, inherit);
+        }
+
+        & > td {
+            padding : 5px;
+        }
+
+        &[data-selected-item=true] {
+            background-color: var(--list-selected-bg-color, lightgray);
+            color: var(--list-selected-color, inherit);
+        }
+    }
+    `.installGlobal("*[data-list-repeater=list-repeater]");

package/src/basic/styles/masked-input-div.ts

@@ -0,0 +1,41 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        display: inline;
+        position: relative;
+        padding-left: 2px;
+        padding-top: 2px;
+        font-family: monospace;
+
+        &::before {
+            position: absolute;
+            left: 2px;
+            top: 2px;
+            content: attr(data-label);
+            font-family: inherit;
+            font-weight: inherit;
+            font-size: inherit;
+            pointer-events: none;
+        }
+
+        &::after {
+            position: absolute;
+            left: 2px;
+            top: 2px;
+            content: attr(data-mask);
+            font-family: inherit;
+            font-weight: inherit;
+            font-size: inherit;
+            pointer-events: none;
+            opacity: 0.2;
+        }
+
+        * > input {
+            color: transparent;
+            caret-color: gray;
+            font-family: inherit;
+            font-weight: inherit;
+            font-size: inherit;
+        }
+
+    `.installGlobal();

package/src/basic/styles/masked-input-style.ts

@@ -0,0 +1,8 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        position: relative;
+        padding-left: 2px;
+        padding-top: 1px;
+        font-family: monospace;
+    `.installGlobal("input[data-mask]");

package/src/basic/styles/password-box-style.ts

@@ -0,0 +1,24 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+    display: inline-grid;
+    grid-template-columns: 1fr 20px;
+
+    & > input {
+        grid-row: 1;
+        grid-column: 1 / span 2;
+
+        &::-ms-reveal {
+            display: none;
+        }
+    }
+
+    & > i {
+        grid-row: 1;
+        grid-column: 1;
+        align-self: center;
+        justify-self: center;
+        z-index: 2;
+    }
+    `.installGlobal("div[data-password-box=password-box]");

package/src/basic/styles/pinch-zoom-view-style.ts

@@ -0,0 +1,50 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        position: relative;
+        overflow: hidden;
+        cursor: grab;
+
+        &[data-state=grabbing] {
+            cursor: grabbing;
+        }
+
+        & > .scale {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            border: solid 2px darkgray;
+            border-radius: 4px;
+            background-color: white;
+            padding: 4px;
+            color: black;
+        }
+
+        & > .image-container {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            overflow: hidden;
+            display: grid;
+            align-items: center;
+            justify-items: center;
+            justify-content: center;
+        }
+
+        & > .spinner {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            display: inline-grid;
+            align-items: center;
+            justify-items: center;
+        }
+
+        & > .hide {
+            display: none;
+        }
+    `.installGlobal("div[data-pinch-zoom]");

package/src/basic/styles/popup-button-style.ts

@@ -0,0 +1,30 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+    padding: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    flex-wrap: wrap;
+
+    &:hover {
+        background-color: lightgreen;
+    }
+
+    & > * {
+        flex-shrink: 0;
+    }
+
+    `.installGlobal("*[data-menu-item=menu-item]");
+
+    styled.css `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+    gap: 4px;
+    `.installGlobal("*[data-menu-items=menu-items]");

package/src/basic/styles/radio-button-list-style.ts

@@ -0,0 +1,34 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: row;
+    gap: 4px;
+    flex-wrap: wrap;
+    `.installGlobal("*[data-radio-button-list=radio-button-list]");
+
+    styled.css `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+    margin-right: 5px;
+
+    & > span {
+        cursor: pointer;
+    }
+
+    &[data-selected-item=true] {
+        & > i.fa-circle {
+            display: none;
+        }
+    }
+    &[data-selected-item=false] {
+        & > i.fa-dot-circle {
+            display: none;
+        }
+    }
+    `.installGlobal("div[data-item-type=radio]");

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]");