@social-mail/social-mail-client 1.2.424 → 1.2.426

package/content/templates/plain/index.html

@@ -13,6 +13,7 @@
         <div
             styler-layout="floating-nav-bar"
             styler-background-color="header"
+            styler-background-mode="stretch"
             styler-color="header"
             styler-backdrop-filter="blur"
             styler-box-shadow="default"

package/dist/admin/AdminAppIndex.pack.js

@@ -46900,6 +46900,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/co
     padding: ${stylerVars.sizeDefault};
     margin: ${stylerVars.sizeDefault};
     gap: ${stylerVars.sizeLarge};
+    --children-width: 100%;
 
     @media (min-width: 900px) {
         & {
@@ -46921,12 +46922,18 @@ System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/co
 
     &[styler-full-screen] {
         width: 100%;
-        --children-width: 100%;
         max-width: 100%;
         padding: 0;
         margin: 0;
     }
 
+    & > [styler-background-mode=extend] {
+        align-self: center;
+        width: 100vw;
+        padding: 10px calc(50vw - var(--children-width) / 2 + 20px);
+        border-radius: 0;
+    }
+
     `.expand("[styler-layout=main]"));
       StylerSets.register("high", styled.css`
     & [styler-layout] {
@@ -46983,6 +46990,8 @@ System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/co
             display: flex;
             flex-direction: column;
             width: 100vw;
+            padding: 0;
+            margin: 0;
             align-self: center;
             align-items: center;
             justify-content: center;
@@ -46997,6 +47006,14 @@ System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/co
             &:empty:before {
                 content: "Inject Not Set";
             }
+
+            & > [styler-background-mode=extend] {
+                align-self: center;
+                width: 100vw;
+                padding: 10px calc(50vw - var(--children-width) / 2 + 20px);
+                border-radius: 0;
+            }
+
         }
 
         & video-player {
@@ -47247,21 +47264,38 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
 
   var __rest, XNode, AtomControl, Expander, Select, Bind, styled, BindEditor, BindStyleValue, BindStyleCustom;
   function PropertyEditor(_a, ...nodes) {
-    var _b, _c;
-    var _d;
+    var _b, _c, _d;
+    var _e;
     var {
         label = void 0,
-        custom = void 0
+        custom = void 0,
+        property,
+        attributeName = void 0
       } = _a,
-      a = __rest(_a, ["label", "custom"]);
+      a = __rest(_a, ["label", "custom", "property", "attributeName"]);
     if (!label && nodes.length === 1) {
       return nodes[0];
     }
+    if (custom) {
+      const ca = (_b = custom.attributes) !== null && _b !== void 0 ? _b : custom.attributes = {};
+      ca["data-element"] = "custom";
+    }
     for (const iterator of nodes) {
-      (_c = (_d = (_b = iterator.attributes) !== null && _b !== void 0 ? _b : iterator.attributes = {})["data-element"]) !== null && _c !== void 0 ? _c : _d["data-element"] = "editor";
+      (_d = (_e = (_c = iterator.attributes) !== null && _c !== void 0 ? _c : iterator.attributes = {})["data-element"]) !== null && _d !== void 0 ? _d : _e["data-element"] = "editor";
     }
     return XNode.create("div", Object.assign({
-      "data-element": "property-editor"
+      "data-element": "property-editor",
+      "event-input": e => {
+        const target = e.target;
+        const currentTarget = e.currentTarget;
+        if (target.tagName === "SELECT") {
+          if (target.value === "custom") {
+            currentTarget.setAttribute("data-custom", "true");
+          } else {
+            currentTarget.removeAttribute("data-custom");
+          }
+        }
+      }
     }, a), label && XNode.create("label", {
       "data-font-size": "small"
     }, label), ...nodes, custom);
@@ -47288,9 +47322,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       a = __rest(_a, ["label", "property"]);
     return XNode.create(PropertyEditor, Object.assign({
       label: label,
+      property: property,
       custom: XNode.create("input", Object.assign({
-        type: "text",
-        "data-element": "custom"
+        type: "text"
       }, BindStyleCustom(property.key)))
     }, a), XNode.create(Select, Object.assign({}, BindStyleValue(property.key), {
       "data-flex": "stretch-full",
@@ -47308,7 +47342,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       } = _a,
       a = __rest(_a, ["label", "property"]);
     return XNode.create(PropertyEditor, Object.assign({
-      label: label
+      label: label,
+      property: property
     }, a), XNode.create("input", Object.assign({}, BindStyleValue(property.key), {
       "data-flex": "stretch-full",
       type: "tel"
@@ -47322,19 +47357,50 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       } = _a,
       a = __rest(_a, ["label", "property", "attributeName"]);
     return XNode.create(PropertyEditor, Object.assign({
-      label: label
+      label: label,
+      property: property,
+      attributeName: attributeName
     }, a), XNode.create("input", Object.assign({
-      type: "text",
-      "data-element": "custom"
+      type: "text"
     }, BindStyleValue(attributeName !== null && attributeName !== void 0 ? attributeName : property.key), {
       "data-flex": "stretch-full"
     })));
   }
+  function ButtonProperty(_a) {
+    var {
+        label,
+        property,
+        eventClick,
+        icon
+      } = _a,
+      a = __rest(_a, ["label", "property", "eventClick", "icon"]);
+    return XNode.create(PropertyEditor, Object.assign({
+      label: label,
+      property: property,
+      custom: XNode.create("div", {
+        "data-layout": "row"
+      }, XNode.create("input", Object.assign({
+        type: "text"
+      }, BindStyleCustom(property.key))), XNode.create("i", {
+        "data-click-event": eventClick,
+        class: icon
+      }))
+    }, a), XNode.create(Select, Object.assign({}, BindStyleValue(property.key), {
+      "data-flex": "stretch-full",
+      valuePath: v => v.value,
+      items: [{
+        label: "-",
+        value: ""
+      }, ...property.values.map(pair => pair.toPair())]
+    })));
+  }
   _export({
+    PropertyEditor: PropertyEditor,
     ExpanderPropertyEditor: ExpanderPropertyEditor,
     DropDownProperty: DropDownProperty,
     NumberProperty: NumberProperty,
-    TextProperty: TextProperty
+    TextProperty: TextProperty,
+    ButtonProperty: ButtonProperty
   });
   return {
     setters: [function (_tslib) {
@@ -47365,7 +47431,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
         const editor = c;
         const pv = editor.selection.style(v);
         c.render(XNode.create("div", {
-          "style-display": Bind.source(pv, s => s.source.value === "custom"),
           value: Bind.sourceTwoWays(pv, s => s.source.custom)
         }), e, c);
       }));
@@ -47405,6 +47470,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
         padding-right: 10px;
     }
 
+    &:not([data-custom]) > [data-element=custom] {
+        display: none;
+    }
+
     `.installGlobal("[data-element=property-editor]");
       styled.css`
     
@@ -47564,7 +47633,8 @@ System.register(["../Styler"], function (_export, _context) {
         stylerLeft: new StylerProperty("styler-left", createVarSet("left", sizeVarList)),
         stylerTop: new StylerProperty("styler-top", createVarSet("top", sizeVarList)),
         stylerRight: new StylerProperty("styler-right", createVarSet("right", sizeVarList)),
-        stylerBottom: new StylerProperty("styler-bottom", createVarSet("bottom", sizeVarList))
+        stylerBottom: new StylerProperty("styler-bottom", createVarSet("bottom", sizeVarList)),
+        stylerZIndex: new StylerProperty("styler-z-index", createSet("z-index", ["none", "last", "back", "front", "first"]))
       });
     }
   };
@@ -47764,23 +47834,36 @@ System.register(["@web-atoms/core/dist/style/styled", "../Styler", "../StylerSet
           "text": styled.css`
             background-clip: text;
             -webkit-background-clip: text;
-        `
+        `,
+          "border-box": styled.css`background-clip: border-box;`,
+          "padding-box": styled.css`background-clip: padding-box;`,
+          "content-box": styled.css`background-clip: content-box;`
         }),
         stylerBackgroundImage: new StylerProperty("styler-background-image", {
           "none": styled.css`background-image: none;`,
           "custom": styled.css`background-image: var(--styler-background-image);`
         }),
         stylerBackgroundPosition: new StylerProperty("styler-background-position", {
-          "custom": styled.css`background-position: var(--styler-background-position);`
+          "custom": styled.css`background-position: var(--styler-background-position);`,
+          "top": styled.css`background-position: top;`,
+          "bottom": styled.css`background-position: bottom;`,
+          "left": styled.css`background-position: left;`,
+          "right": styled.css`background-position: right;`
         }),
         stylerBackgroundPositionX: new StylerProperty("styler-background-position-x", createVarSet("background-position-x", sizeVarList)),
         stylerBackgroundPositionY: new StylerProperty("styler-background-position-y", createVarSet("background-position-y", sizeVarList)),
         stylerBackgroundSize: new StylerProperty("styler-background-size", {
-          "custom": styled.css`background-size: var(--styler-background-size);`
+          "custom": styled.css`background-size: var(--styler-background-size);`,
+          "cover": styled.css`background-size: cover;`,
+          "contain": styled.css`background-size: contain;`,
+          "p50": styled.css`background-size: 50%;`,
+          "p100": styled.css`background-size: 100%;`
         }),
+        stylerBackgroundBlendMode: new StylerProperty("styler-background-blend-mode", createSet("background-blend-mode", ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"])),
         stylerBackgroundRepeat: new StylerProperty("styler-background-repeat", createSet("background-repeat", ["no-repeat", "repeat", "repeat-x", "repeat-y", "round", "space"])),
-        stylerBackgroundAttachment: new StylerProperty("styler-background-attachment", createSet("background-attachment", ["fixed", "local", "scroll"])),
-        stylerBackgroundOrigin: new StylerProperty("styler-background-origin", createSet("background-origin", ["border-box", "content-box", "padding-box"]))
+        stylerBackgroundAttachment: new StylerProperty("styler-background-attachment", createSet("background-attachment", ["fixed", "local", "scroll", "local, scroll", "scroll, local"])),
+        stylerBackgroundOrigin: new StylerProperty("styler-background-origin", createSet("background-origin", ["border-box", "content-box", "padding-box"])),
+        stylerBackgroundMode: new StylerProperty("styler-background-mode", createSet("background-mode", ["none", "extend"]))
       });
     }
   };
@@ -48429,6 +48512,9 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
     }), XNode.create(SizeEditorControl, {
       label: "Bottom",
       property: properties.stylerBottom
+    }), XNode.create(DropDownProperty, {
+      label: "Z-Index",
+      property: properties.stylerZIndex
     })));
   }
   _export("default", PositionGroupEditor);
@@ -48458,7 +48544,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
 System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../../styler/StylerSet", "../controls/SizeEditorControl"], function (_export, _context) {
   "use strict";
 
-  var XNode, DropDownProperty, ExpanderPropertyEditor, StylerSet, SizeEditorControl, properties;
+  var XNode, ButtonProperty, DropDownProperty, ExpanderPropertyEditor, StylerSet, SizeEditorControl, properties;
   function BackgroundGroupEditor() {
     return XNode.create(ExpanderPropertyEditor, {
       label: "Background"
@@ -48468,8 +48554,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
     }), XNode.create(DropDownProperty, {
       label: "Color",
       property: properties.stylerBackgroundColor
-    }), XNode.create(DropDownProperty, {
+    }), XNode.create(ButtonProperty, {
       label: "Image",
+      eventClick: "change-background-image",
+      icon: "fas fa-folder",
       property: properties.stylerBackgroundImage
     }), XNode.create(DropDownProperty, {
       label: "Clip",
@@ -48492,6 +48580,9 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
     }), XNode.create(DropDownProperty, {
       label: "Attachment",
       property: properties.stylerBackgroundAttachment
+    }), XNode.create(DropDownProperty, {
+      label: "Mode",
+      property: properties.stylerBackgroundMode
     }));
   }
   _export("default", BackgroundGroupEditor);
@@ -48499,6 +48590,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_controlsPropertyEditor) {
+      ButtonProperty = _controlsPropertyEditor.ButtonProperty;
       DropDownProperty = _controlsPropertyEditor.DropDownProperty;
       ExpanderPropertyEditor = _controlsPropertyEditor.ExpanderPropertyEditor;
     }, function (_stylerStylerSet) {
@@ -51324,6 +51416,13 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             });
           });
         }
+        changeBackgroundImage() {
+          return __awaiter(this, void 0, void 0, function* () {
+            const img = prompt("Image Src", "");
+            this.selection.element.style.setProperty("--styler-background-image", `url(${JSON.stringify(img)})`);
+            return;
+          });
+        }
         extractElement() {
           return __awaiter(this, void 0, void 0, function* () {
             alert("Not implemented");
@@ -51678,6 +51777,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       __decorate([Action({
         onEvent: "change-image"
       }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], HtmlPageEditor.prototype, "changeImage", null);
+      __decorate([Action({
+        onEvent: "change-background-image"
+      }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], HtmlPageEditor.prototype, "changeBackgroundImage", null);
       __decorate([Action({
         onEvent: "extract-element"
       }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], HtmlPageEditor.prototype, "extractElement", null);
@@ -52113,6 +52215,23 @@ System.register(["tslib", "@web-atoms/core/dist/core/BindableProperty", "./HtmlP
           this.folder = null;
           this.selectedFile = null;
         }
+        changeBackgroundImage() {
+          return __awaiter(this, void 0, void 0, function* () {
+            const element = this.selection.element;
+            const files = yield PageNavigator.pushPageForResult(ChooseMediaPage, {
+              folder: this.folder,
+              accept: "image/*",
+              multiple: false
+            });
+            const {
+              folder,
+              file
+            } = files[0];
+            const path = "./" + [...folder, file.name].join("/");
+            element.style.setProperty("background-image", `url("${path}")`);
+            element.removeAttribute("styler-background-image");
+          });
+        }
         changeImage() {
           return __awaiter(this, void 0, void 0, function* () {
             const element = this.selection.element;