@social-mail/social-mail-client 1.2.149 → 1.2.151

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.149",
+  "version": "1.2.151",
   "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/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,7 @@ 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";
 
     styled.css `
         display: grid;
@@ -288,6 +289,7 @@ export default class HtmlPageEditor extends AtomControl {
                 <TypeWriterComponent/>
                 <Billboard/>
                 <OutlineText/>
+                <Carousel/>
             </EditorToolbar>
             <div data-element="editor"
                 style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>

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.18/dist/components.webpack.js");
     }
 
 

package/src/site-editor/properties/controls/PropertyEditor.tsx

@@ -30,7 +30,7 @@ export const BindStyleCustom = AtomControl.registerProperty("data-style-property
     grid-template-rows: auto auto auto;
     justify-items: stretch;
     align-items: center;
-    column-gap: 5px;
+    gap: 5px;
     max-width: 200px;
     & > * {
         width: 100%;
@@ -64,10 +64,12 @@ export const BindStyleCustom = AtomControl.registerProperty("data-style-property
 
     styled.css `
     
+    border-bottom: solid 1px #a0a0a050;
+
         & select {
             outline: none;
             border: none;
-            background-color: #e7e7e775;
+            background-color: #e7e7e734;
             border-radius: 9999px;
             padding-left: 10px;
             padding-right: 10px;