@web-atoms/web-controls 2.4.58 → 2.4.60

package/src/basic/styles/{radio-button-list-style.ts → radio-button-list.global.less}

@@ -1,35 +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;
-    }
-
-    &:not([data-selected-item]) {
-        & > i.fa-dot-circle {
-            display: none;
-        }
-    }
-
-    &[data-selected-item=true] {
-        & > i.fa-circle {
-            display: none;
-        }
-    }
-    `.installGlobal("div[data-item-type=radio]");
+*[data-radio-button-list=radio-button-list] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: row;
+    gap: 4px;
+    flex-wrap: wrap;
+}
+
+div[data-item-type=radio] {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+    margin-right: 5px;
+
+    & > span {
+        cursor: pointer;
+    }
+
+    &:not([data-selected-item]) {
+        & > i.fa-dot-circle {
+            display: none;
+        }
+    }
+
+    &[data-selected-item=true] {
+        & > i.fa-circle {
+            display: none;
+        }
+    }
+}

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

@@ -1,60 +1,59 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-
-*[data-item-index] {
-    & i[data-click-event] {
-        padding: 5px;
-    }
-    & [data-no-wrap=true] {
-        white-space: nowrap;
-    }
-}
-
-*[data-item-index] {
-    & label[data-selector=check-box] {
-        padding: 5px;
-        width: 30px;
-        & > i {
-            padding: 0;
-        }
-    }
-    &:not([data-selected-item]) {
-        & [data-selector=check-box] {
-            & i[data-click-event=item-deselect] {
-                display: none;
-            }
-        }
-    }
-    &[data-selected-item=true] {
-        & [data-selector=check-box] {
-            & i[data-click-event=item-select] {
-                display: none;
-            }
-        }
-    }
-}
-
-*[data-select-all=select-all] {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin: 0;
-    & i[data-ui-type] {
-        padding: 5px;
-    }
-    & [data-no-wrap=true] {
-        white-space: nowrap;
-    }
-    &[data-is-selected=true] {
-        & i[data-ui-type=item-select] {
-            display: none;
-        }
-    }
-    &[data-is-selected=false] {
-        & i[data-ui-type=item-deselect] {
-            display: none;
-        }
-    }
-}
-`.withId("repeater-styles").installGlobal();
+*[data-item-index] {
+    & i[data-click-event] {
+        padding: 5px;
+    }
+    & [data-no-wrap=true] {
+        white-space: nowrap;
+    }
+}
+
+*[data-item-index] {
+    & label[data-selector=check-box] {
+        padding: 5px;
+        width: 30px;
+        & > i {
+            padding: 0;
+        }
+    }
+    &:not([data-selected-item]) {
+        & [data-selector=check-box] {
+            & i[data-click-event=item-deselect] {
+                display: none;
+            }
+        }
+    }
+    &[data-selected-item=true] {
+        & [data-selector=check-box] {
+            & i[data-click-event=item-select] {
+                display: none;
+            }
+        }
+    }
+}
+
+*[data-select-all=select-all] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0;
+    & i[data-ui-type] {
+        padding: 5px;
+    }
+    & [data-no-wrap=true] {
+        white-space: nowrap;
+    }
+    &[data-is-selected=true] {
+        & i[data-ui-type=item-select] {
+            display: none;
+        }
+    }
+    &[data-is-selected=false] {
+        & i[data-ui-type=item-deselect] {
+            display: none;
+        }
+    }
+}
+
+[data-ui-display=none] {
+    display: none;
+}

package/src/basic/styles/scale.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
+<path d="M502.6 54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L336 130.7 336 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 128c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-50.7 0L502.6 54.6zM80 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l50.7 0L9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L176 381.3l0 50.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128c0-17.7-14.3-32-32-32L80 272z"/>
+</svg>

package/src/basic/styles/{suggestion-popup.ts → suggestion-popup.global.less}

@@ -1,28 +1,27 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-const hasMoreHeight =  (window.screen.availHeight / 2) > 250
-    ? `height: 250px;`
-    : `max-height: 80px;`;
-
-    styled.css `
-    ${hasMoreHeight}
-    min-width: 80px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    gap: 4px;
-
-    & > .items {
-        flex: 1 1 100%;
-        overflow: auto;
-        & > .presenter {
-            & > * {
-                padding: 5px;
-            }
-            & > [data-selected-item=true] {
-                background-color: lightgreen;
-            }
-        }
-    }
-    `.installGlobal("*[data-suggestion-popup=suggestion-popup]");
+*[data-suggestion-popup=suggestion-popup] {
+    height: 250px;
+    min-width: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    gap: 4px;
+
+    @media (max-width: 700px) {
+        height: unset;
+        max-height: 80px;
+    }
+
+    & > .items {
+        flex: 1 1 100%;
+        overflow: auto;
+        & > .presenter {
+            & > * {
+                padding: 5px;
+            }
+            & > [data-selected-item=true] {
+                background-color: lightgreen;
+            }
+        }
+    }
+}

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

@@ -1,40 +1,38 @@
-import styled from "@web-atoms/core/dist/style/styled";
-
-    styled.css `
-    margin: 5px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    gap: 4px;
-    overflow: hidden;
-    & > .header {
-        color: darkorange;
-        white-space: nowrap;
-    }
-    & > .items {
-        flex: 1 1 100%;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-        gap: 0;
-        overflow: hidden;
-        & > * {
-            white-space: nowrap;
-            padding: 3px;
-            cursor: pointer;
-            &:hover {
-                color: blue;
-                text-decoration: underline;
-            }
-        }
-    }
-    & > .more {
-        font-size: smaller;
-        color: blue;
-        text-transform: lowercase;
-        text-decoration: underline;
-        cursor: pointer;
-    }
-    `.installGlobal("*[data-suggestions=suggestions]");
+*[data-suggestions=suggestions] {
+    margin: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    gap: 4px;
+    overflow: hidden;
+    & > .header {
+        color: darkorange;
+        white-space: nowrap;
+    }
+    & > .items {
+        flex: 1 1 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 0;
+        overflow: hidden;
+        & > * {
+            white-space: nowrap;
+            padding: 3px;
+            cursor: pointer;
+            &:hover {
+                color: blue;
+                text-decoration: underline;
+            }
+        }
+    }
+    & > .more {
+        font-size: smaller;
+        color: blue;
+        text-transform: lowercase;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}

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

@@ -0,0 +1,20 @@
+[data-swipe] {
+    display: grid;
+    & > * {
+        grid-row: 1;
+        grid-column: 1;
+    }
+}
+
+[data-swipe=left] {
+    & > * {
+        align-self: center;
+        justify-self: end;
+        z-index: 2;
+        &:first-child {
+            align-self: stretch;
+            justify-self: stretch;
+            z-index: 10;
+        }
+    }
+}

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

@@ -1,116 +1,114 @@
-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]");
+[data-ui-switch=ui-switch] {
+
+    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;
+    }
+}