@social-mail/social-mail-client 1.2.150 → 1.2.152

package/package.json

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

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

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-namespace */
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Block } from "./Block";
+import { StylerSets } from "../styler/StylerSets";
+import styled from "@web-atoms/core/dist/style/styled";
+import { defaultImageSrc } from "./defaultImage";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "carousel-slider": any;
+        }
+    }
+}
+
+StylerSets.register("low", styled.css `
+
+    display: flex;
+    flex-direction: row;
+
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+
+    }
+`.expand("carousel-slider"));
+
+export const Carousel = Block({
+    className: "fad fa-gallery-thumbnails",
+    title: "Add Carousel",
+    factory: () => <carousel-slider>
+        <section styler-layout="vertical-image-box">
+            <img src={defaultImageSrc}/>
+            <section></section>
+        </section>
+        <section styler-layout="vertical-image-box">
+            <img src={defaultImageSrc}/>
+            <section></section>
+        </section>
+        <section styler-layout="vertical-image-box">
+            <img src={defaultImageSrc}/>
+            <section></section>
+        </section>
+    </carousel-slider>
+});

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

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-namespace */
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Block } from "./Block";
+import { StylerSets } from "../styler/StylerSets";
+import styled from "@web-atoms/core/dist/style/styled";
+import { defaultImageSrc } from "./defaultImage";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "image-gallery": any;
+        }
+    }
+}
+
+StylerSets.register("low", styled.css `
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+
+    }
+`.expand("image-gallery"));
+
+StylerSets.register("low", styled.css `
+    & image-gallery {
+        & > * {
+            max-height: 50vh;
+            max-width: 50vw;
+            margin: 10px;
+        }
+    }
+`.expand("body[editing]"));
+
+export const ImageGallery = Block({
+    className: "fad fa-panorama",
+    title: "Add Carousel",
+    factory: () => <image-gallery>
+        <img src={defaultImageSrc}/>
+        <img src={defaultImageSrc}/>
+        <img src={defaultImageSrc}/>
+    </image-gallery>
+});

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

@@ -14,11 +14,10 @@ StylerSets.register("low", styled.css `
     margin: ${stylerVars.sizeDefault};
     border-radius: ${stylerVars.sizeDefault};
     justify-items: center;
-    align-items: stretch;
+    align-items: center;
     contain: content;
 
     & > img {
-        align-self: stretch;
         border-radius: ${stylerVars.sizeLarge};
         max-width: 100%;
     }

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

@@ -35,6 +35,8 @@ import { PriceTable } from "../blocks/PriceBox";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import { Billboard } from "../blocks/Billboard";
 import { OutlineText } from "../blocks/OutlineText";
+import { Carousel } from "../blocks/Carousel";
+import { ImageGallery } from "../blocks/ImageGallery";
 
     styled.css `
         display: grid;
@@ -288,6 +290,8 @@ export default class HtmlPageEditor extends AtomControl {
                 <TypeWriterComponent/>
                 <Billboard/>
                 <OutlineText/>
+                <Carousel/>
+                <ImageGallery/>
             </EditorToolbar>
             <div data-element="editor"
                 style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>
@@ -532,6 +536,7 @@ export default class HtmlPageEditor extends AtomControl {
         const clone = this.htmlDocument.documentElement.cloneNode(true) as HTMLElement;
         const body = clone.querySelector("body");
         body.removeAttribute("contentEditable");
+        body.removeAttribute("editing");
         const all = clone.querySelectorAll("*");
         // eslint-disable-next-line @typescript-eslint/prefer-for-of
         for (let index = 0; index < all.length; index++) {
@@ -582,6 +587,7 @@ export default class HtmlPageEditor extends AtomControl {
         this.redoList.insert(this.redoList.length, this.htmlDocument.documentElement.innerHTML);
         this.htmlDocument.documentElement.innerHTML = this.undoList.removeAt(this.undoList.length-1);
         this.htmlDocument.body.contentEditable = "true";
+        this.htmlDocument.body.setAttribute("editing", "true");
     }
 
     @Action({ onEvent: "redo"})
@@ -589,6 +595,7 @@ export default class HtmlPageEditor extends AtomControl {
         this.undoList.insert(this.undoList.length, this.htmlDocument.documentElement.innerHTML);
         this.htmlDocument.documentElement.innerHTML = this.redoList.removeAt(this.redoList.length-1);
         this.htmlDocument.body.contentEditable = "true";
+        this.htmlDocument.body.setAttribute("editing", "true");
     }
 
     protected initDocument(v: string) {
@@ -672,6 +679,7 @@ export default class HtmlPageEditor extends AtomControl {
             this.htmlDocument.close();
 
             this.htmlDocument.body.contentEditable = "true";
+            this.htmlDocument.body.setAttribute("editing", "true");
 
             // install styler...
             setTimeout(() => {

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

@@ -63,7 +63,7 @@ export class SelectedElement {
 
     public getDropTarget(dragged: HTMLElement, target: HTMLElement) {
 
-        const isDropTarget = /^(main|section)$/i;
+        const isDropTarget = /^(main|section|carousel\-slider)$/i;
 
         // check if dragged has root only....
         if (isDropTarget.test(dragged?.tagName)) {

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

@@ -53,7 +53,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
             script.setAttribute("defer", "true");
             this.htmlDocument.head.appendChild(script);
         }
-        script.setAttribute("src", "//cdn.jsdelivr.net/npm/@social-mail/web-components@latest/dist/components.js");
+        script.setAttribute("src", "//cdn.jsdelivr.net/npm/@social-mail/web-components@1.0.24/dist/components.webpack.js");
     }