@social-mail/social-mail-client 1.4.12 → 1.4.13

package/dist/web/AppIndex.pack.js

@@ -49101,7 +49101,7 @@ System.register(["@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/A
     execute: function () {
       _export("___UMD", ___UMD = UMD);
       addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
-      addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.2/css/all.min.css");
+      addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.7.1/css/all.min.css");
       addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
       addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");
       styled.css`

package/dist/web/AppIndex.pack.min.js

@@ -2990,7 +2990,7 @@ and limitations under the License.
         }
     } */
 
-`.withId("default-app-style").withOrder("medium").installGlobal()}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/OverrideAppStyle");System.register(["@web-atoms/core/dist/core/types","@web-atoms/core/dist/core/AtomList","./OverrideAppStyle","@web-atoms/core/dist/style/styled","@web-atoms/data-styles/data-styles"],(function(_export,_context){"use strict";var UMD,styled,___UMD;function addLinkTag(href,integrity,rel="stylesheet"){if(!document.head.querySelector(`[href="${href}"]`)){const fa=document.createElement("link");fa.href=href;fa.crossOrigin="anonymous";fa.as="style";fa.rel="preload";if(integrity){fa.integrity=integrity}fa.onload=()=>{fa.onload=null;fa.rel=rel};document.head.insertBefore(fa,document.head.firstElementChild)}}return{setters:[function(_webAtomsCoreDistCoreTypes){UMD=_webAtomsCoreDistCoreTypes.UMD},function(_webAtomsCoreDistCoreAtomList){},function(_OverrideAppStyle){},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_webAtomsDataStylesDataStyles){}],execute:function(){_export("___UMD",___UMD=UMD);addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.2/css/all.min.css");addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");styled.css`
+`.withId("default-app-style").withOrder("medium").installGlobal()}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/OverrideAppStyle");System.register(["@web-atoms/core/dist/core/types","@web-atoms/core/dist/core/AtomList","./OverrideAppStyle","@web-atoms/core/dist/style/styled","@web-atoms/data-styles/data-styles"],(function(_export,_context){"use strict";var UMD,styled,___UMD;function addLinkTag(href,integrity,rel="stylesheet"){if(!document.head.querySelector(`[href="${href}"]`)){const fa=document.createElement("link");fa.href=href;fa.crossOrigin="anonymous";fa.as="style";fa.rel="preload";if(integrity){fa.integrity=integrity}fa.onload=()=>{fa.onload=null;fa.rel=rel};document.head.insertBefore(fa,document.head.firstElementChild)}}return{setters:[function(_webAtomsCoreDistCoreTypes){UMD=_webAtomsCoreDistCoreTypes.UMD},function(_webAtomsCoreDistCoreAtomList){},function(_OverrideAppStyle){},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_webAtomsDataStylesDataStyles){}],execute:function(){_export("___UMD",___UMD=UMD);addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.7.1/css/all.min.css");addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");styled.css`
 
 :root {
     --primary-color: #294D4A;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/blocks/Grid.tsx

@@ -0,0 +1,29 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../styler/Styler";
+import { StylerSets } from "../styler/StylerSets";
+import { Block } from "./Block";
+
+StylerSets.register("low", styled.css `
+    display: grid;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    overflow: hidden;
+`.expand("[styler-layout=grid]"));
+
+
+export const GridBox = Block({
+    className: "fa-sharp-duotone fa-solid fa-grid-5",
+    title: "Add Grid Box",
+    // text: "\uf73f",
+    factory: () => <section
+        styler-layout="grid">
+        <section></section>
+        <section></section>
+    </section>
+});
+
+

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -54,6 +54,7 @@ import { WebComponents } from "./webComponentsPath";
 import UndoRedo from "./UndoRedo";
 import DomHelper from "./DomHelper";
 import { FlipBox } from "../blocks/FlipBox";
+import { GridBox } from "../blocks/Grid";
 
     styled.css `
         display: grid;
@@ -398,6 +399,7 @@ export default class HtmlPageEditor extends AtomControl {
                 <ColumnBox/>
                 <Columns2/>
                 <Columns3/>
+                <GridBox/>
                 <List/>
                 <ImageLink/>
                 <LinkButton/>

package/src/site-editor/properties/groups/LayoutEditor.tsx

@@ -14,6 +14,14 @@ export default function LayoutEditor () {
             style-display={BindEditor.oneWay((e) => e.selection.currentStyle.display === "flex")}
             label="Direction"
             property={properties.stylerFlexDirection}/>
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => e.selection.currentStyle.display === "grid")}
+            label="Template Rows"
+            property={properties.stylerGridTemplateRows}/>
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => e.selection.currentStyle.display === "grid")}
+            label="Template Columns"
+            property={properties.stylerGridTemplateColumns}/>
         <DropDownProperty
             style-display={BindEditor.oneWay((e) => /flex|grid/i.test(e.selection.currentStyle.display))}
             label="Justify Content"
@@ -57,6 +65,42 @@ export default function LayoutEditor () {
             property={properties.stylerJustifySelf}
             />
 
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => /grid/i.test(e.selection.parentStyle.display))}
+            label="Row"
+            property={properties.stylerGridRow}
+            />
+
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => /grid/i.test(e.selection.parentStyle.display))}
+            label="Row Start"
+            property={properties.stylerGridRowStart}
+            />
+
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => /grid/i.test(e.selection.parentStyle.display))}
+            label="Row End"
+            property={properties.stylerGridRowEnd}
+            />
+
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => /grid/i.test(e.selection.parentStyle.display))}
+            label="Column"
+            property={properties.stylerGridColumn}
+            />
+
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => /grid/i.test(e.selection.parentStyle.display))}
+            label="Column Start"
+            property={properties.stylerGridColumnStart}
+            />
+
+        <DropDownProperty
+            style-display={BindEditor.oneWay((e) => /grid/i.test(e.selection.parentStyle.display))}
+            label="Column End"
+            property={properties.stylerGridColumnEnd}
+            />
+
         {/*
             // This is pending
             <NumberProperty

package/src/site-editor/styler/properties/layouts/items-position/itemsPosition.ts

@@ -1,3 +1,4 @@
+import styled from "@web-atoms/core/dist/style/styled";
 import { StylerProperty, createSet, createVarSet, pair, sizeVarList } from "../../../Styler";
 
 export const itemPositions = {
@@ -53,5 +54,100 @@ export const itemPositions = {
     stylerRowGap: new StylerProperty("styler-row-gap", createVarSet("row-gap", sizeVarList)),
     stylerColumnGap: new StylerProperty("styler-column-gap", createVarSet("column-gap", sizeVarList)),
 
-    stylerFlexWrap: new StylerProperty("styler-flex-wrap", createSet("flex-wrap", ["none", "wrap"]))
+    stylerFlexWrap: new StylerProperty("styler-flex-wrap", createSet("flex-wrap", ["none", "wrap"])),
+
+    stylerGridTemplateRows: new StylerProperty("styler-grid-template-rows", {
+        "custom": styled.css `grid-template-rows: var(--styler-grid-template-rows);`,
+        "auto": styled.css `grid-template-rows: auto;`,
+        "masonry": styled.css `grid-template-rows: masonry;`,
+        "subgrid": styled.css `grid-template-rows: subgrid;`,
+        "row-1": styled.css `grid-template-rows: 1fr;`,
+        "rows-2": styled.css `grid-template-rows: 1fr 1fr;`,
+        "rows-3": styled.css `grid-template-rows: 1fr 1fr 1fr;`,
+        "rows-4": styled.css `grid-template-rows: 1fr 1fr 1fr 1fr;`,
+        "rows-3-auto": styled.css `grid-template-rows: auto 1fr auto;`,
+    }),
+
+    stylerGridTemplateColumns: new StylerProperty("styler-grid-template-columns", {
+        "custom": styled.css `grid-template-columns: var(--styler-grid-template-columns);`,
+        "auto": styled.css `grid-template-columns: auto;`,
+        "masonry": styled.css `grid-template-columns: masonry;`,
+        "subgrid": styled.css `grid-template-columns: subgrid;`,
+        "column-1": styled.css `grid-template-columns: 1fr;`,
+        "columns-2": styled.css `grid-template-columns: 1fr 1fr;`,
+        "columns-3": styled.css `grid-template-columns: 1fr 1fr 1fr;`,
+        "columns-4": styled.css `grid-template-columns: 1fr 1fr 1fr 1fr;`,
+        "columns-3-auto": styled.css `grid-template-columns: auto 1fr auto;`,
+    }),
+
+    stylerGridRow: new StylerProperty("styler-grid-row", {
+        "custom": styled.css `grid-row: var(--styler-grid-row);`,
+        "row1": styled.css `grid-row: 1;`,
+        "row2": styled.css `grid-row: 2;`,
+        "row3": styled.css `grid-row: 3;`,
+        "row4": styled.css `grid-row: 4;`,
+        "row1-span2": styled.css `grid-row: 1 / span 2;`,
+        "row1-span3": styled.css `grid-row: 1 / span 3;`,
+        "row1-span4": styled.css `grid-row: 1 / span 4;`,
+        "row2-span2": styled.css `grid-row: 2 / span 2;`,
+        "row2-span3": styled.css `grid-row: 2 / span 3;`,
+        "row2-span4": styled.css `grid-row: 2 / span 4;`,
+        "row3-span2": styled.css `grid-row: 3 / span 2;`,
+        "row3-span3": styled.css `grid-row: 3 / span 3;`,
+        "row3-span4": styled.css `grid-row: 3 / span 4;`,
+        "row4-span2": styled.css `grid-row: 4 / span 2;`,
+        "row4-span3": styled.css `grid-row: 4 / span 3;`,
+        "row4-span4": styled.css `grid-row: 4 / span 4;`,
+    }),
+
+    stylerGridRowStart: new StylerProperty("styler-grid-row-start", {
+        "custom": styled.css `grid-row-start: var(--styler-grid-row-start);`,
+        "row1": styled.css `grid-row-start: 1;`,
+        "row2": styled.css `grid-row-start: 2;`,
+        "row3": styled.css `grid-row-start: 3;`,
+        "row4": styled.css `grid-row-start: 4;`,
+    }),
+
+    stylerGridRowEnd: new StylerProperty("styler-grid-row-end", {
+        "custom": styled.css `grid-row-end: var(--styler-grid-row-end);`,
+        "span2": styled.css `grid-row-start: span 2;`,
+        "span3": styled.css `grid-row-start: span 3;`,
+        "span4": styled.css `grid-row-start: span 4;`,
+    }),
+
+    stylerGridColumn: new StylerProperty("styler-grid-column", {
+        "custom": styled.css `grid-column: var(--styler-grid-column);`,
+        "column1": styled.css `grid-column: 1;`,
+        "column2": styled.css `grid-column: 2;`,
+        "column3": styled.css `grid-column: 3;`,
+        "column4": styled.css `grid-column: 4;`,
+        "column1-span2": styled.css `grid-column: 1 / span 2;`,
+        "column1-span3": styled.css `grid-column: 1 / span 3;`,
+        "column1-span4": styled.css `grid-column: 1 / span 4;`,
+        "column2-span2": styled.css `grid-column: 2 / span 2;`,
+        "column2-span3": styled.css `grid-column: 2 / span 3;`,
+        "column2-span4": styled.css `grid-column: 2 / span 4;`,
+        "column3-span2": styled.css `grid-column: 3 / span 2;`,
+        "column3-span3": styled.css `grid-column: 3 / span 3;`,
+        "column3-span4": styled.css `grid-column: 3 / span 4;`,
+        "column4-span2": styled.css `grid-column: 4 / span 2;`,
+        "column4-span3": styled.css `grid-column: 4 / span 3;`,
+        "column4-span4": styled.css `grid-column: 4 / span 4;`,
+    }),
+
+    stylerGridColumnStart: new StylerProperty("styler-grid-column-start", {
+        "custom": styled.css `grid-column-start: var(--styler-grid-column-start);`,
+        "column1": styled.css `grid-column-start: 1;`,
+        "column2": styled.css `grid-column-start: 2;`,
+        "column3": styled.css `grid-column-start: 3;`,
+        "column4": styled.css `grid-column-start: 4;`,
+    }),
+
+    stylerGridColumnEnd: new StylerProperty("styler-grid-column-end", {
+        "custom": styled.css `grid-column-end: var(--styler-grid-column-end);`,
+        "span2": styled.css `grid-column-start: span 2;`,
+        "span3": styled.css `grid-column-start: span 3;`,
+        "span4": styled.css `grid-column-start: span 4;`,
+    }),
+
 };

package/src/style/GlobalStyle.ts

@@ -30,7 +30,7 @@ function addLinkTag(href, integrity?, rel = "stylesheet") {
 }
 
 addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
-addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.2/css/all.min.css");
+addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.7.1/css/all.min.css");
 addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
 addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");