@social-mail/social-mail-hosted-web 1.2.18 → 1.2.21

package/node_modules/@web-atoms/web-controls/src/basic/styles/drop-down.global.less

@@ -0,0 +1,13 @@
+div[data-drop-down=drop-down] {
+
+    display: inline-flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+    justify-content: stretch;
+
+    & [data-white-space=nowrap] {
+        white-space: nowrap;
+    }
+
+}

package/node_modules/@web-atoms/web-controls/src/basic/styles/{expander-style.ts → expander.global.less}

@@ -1,133 +1,130 @@
-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;
-        margin-left: 25px;
-
-        &[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]")
+*[data-is-expander=expander] {
+
+    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;
+        }
+    }
+}
+
+*[data-is-expander=menu] {
+
+    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;
+        margin-left: 25px;
+
+        &[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;    
+        }
+    }
+}

package/node_modules/@web-atoms/web-controls/src/basic/styles/{form-field-style.ts → form-field.global.less}

@@ -1,136 +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]");
+[data-wa-form-field=wa-form-field] {
+
+    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;
+            }
+        }
+    }
+
+}
+
+[data-form-field-help=help-window] {
+
+    overflow: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+
+}

package/node_modules/@web-atoms/web-controls/src/basic/styles/inline-popup.global.less

@@ -0,0 +1,10 @@
+*[data-inline-popup=inline-popup] {
+    position: absolute;
+    border-radius: 5px;
+    padding: 5px;
+    box-shadow: rgba(50, 50, 105, 0.5) 0px 4px 6px 4px, rgba(0, 0, 0, 0.5) 0px 1px 1px 0px;
+    border: solid 1px rgba(0, 0, 0, 0.05);
+    z-index: 5000;
+    background-color: var(--popup-background-color, white);
+    color: var(--popup-text-color, rgba(0,0,0,0.8));
+}

package/node_modules/@web-atoms/web-controls/src/basic/styles/item-suggestion.global.less

@@ -0,0 +1,47 @@
+*[data-item-suggestion] {
+
+    padding: 1px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 10px;
+    display: grid;
+    align-items: center;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: auto 1fr auto;
+
+    max-width: 100%;
+
+    overflow-x: hidden;
+    
+    & > [data-content] {
+        grid-row-start: 2;
+        grid-column-start: 2;
+    }
+    & > .icon {
+        grid-column-start: 1;
+        grid-row-start: 1;
+        grid-row-end: span 2;
+        align-self: center;
+        margin-right: 5px;
+    }
+    & > .delete {
+        grid-column-start: 3;
+        grid-row-start: 1;
+        grid-row-end: span 2;
+        align-self: center;
+        color: #ff0000;
+    }
+    & > .header {
+        font-size: x-small;
+        grid-row-start: 1;
+        grid-column-start: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    & > .label {
+        grid-row-start: 2;
+        grid-column-start: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

package/node_modules/@web-atoms/web-controls/src/basic/styles/{list-repeater-style.ts → list-repeater.global.less}

@@ -1,25 +1,22 @@
-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]");
+*[data-list-repeater=list-repeater] {
+    & > *[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);
+        }
+    }
+}