@social-mail/social-mail-client 1.2.130 → 1.2.132

package/dist/admin/AdminAppIndex.pack.js

@@ -40221,6 +40221,10 @@ System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/
     ${properties.join("\n")}
 
     ${StylerSets.high.join("\n")}
+
+    * {
+        caret-color: #40404080 !important;
+    }
     
         `;
         }
@@ -42275,10 +42279,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@web-atoms/core/
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/PriceBox");
 
-System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/web/controls/AtomControl", "../drag-drop/DragDropHelper", "../toolbars/UndoRedoToolbar", "../blocks/WrapGrid", "../toolbars/EditorToolbar", "../properties/Properties", "../styler/StylerSet", "./SelectedElement", "@web-atoms/core/dist/core/AtomBinder", "../styler/Styler", "../blocks/ImageBox", "../blocks/RowBox", "../blocks/ColumnBox", "../blocks/VerticalImageBox", "../blocks/Image", "../blocks/ImageCard", "../blocks/TextBox", "../blocks/Card", "../blocks/List", "../blocks/Components", "@web-atoms/core/dist/core/types", "../blocks/Buttons", "../blocks/Columns2", "../blocks/Columns3", "../blocks/RightImageBox", "@web-atoms/core/dist/web/core/AtomUI", "../blocks/PriceBox"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/web/controls/AtomControl", "../drag-drop/DragDropHelper", "../toolbars/UndoRedoToolbar", "../blocks/WrapGrid", "../toolbars/EditorToolbar", "../properties/Properties", "../styler/StylerSet", "./SelectedElement", "@web-atoms/core/dist/core/AtomBinder", "../styler/Styler", "../blocks/ImageBox", "../blocks/RowBox", "../blocks/ColumnBox", "../blocks/VerticalImageBox", "../blocks/Image", "../blocks/ImageCard", "../blocks/TextBox", "../blocks/Card", "../blocks/List", "../blocks/Components", "@web-atoms/core/dist/core/types", "../blocks/Buttons", "../blocks/Columns2", "../blocks/Columns3", "../blocks/RightImageBox", "@web-atoms/core/dist/web/core/AtomUI", "../blocks/PriceBox", "@web-atoms/core/dist/core/BindableProperty"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, Bind, XNode, sleep, styled, Action, AtomControl, InstallDragDropHelper, UndoRedoToolbar, WrapGrid, EditorToolbar, Properties, StylerSet, SelectedElement, AtomBinder, StylerVariable, ImageBox, RowBox, ColumnBox, VerticalImageBox, Image, ImageCard, TextBox, Card, List, BlogComponent, UMD, ImageLink, LinkButton, Columns2, Columns3, RightImageBox, descendentElementIterator, PriceTable, HtmlPageEditor, desktopWidth, tabletWidth, mobileWidth;
+  var __awaiter, __decorate, __metadata, Bind, XNode, sleep, styled, Action, AtomControl, InstallDragDropHelper, UndoRedoToolbar, WrapGrid, EditorToolbar, Properties, StylerSet, SelectedElement, AtomBinder, StylerVariable, ImageBox, RowBox, ColumnBox, VerticalImageBox, Image, ImageCard, TextBox, Card, List, BlogComponent, UMD, ImageLink, LinkButton, Columns2, Columns3, RightImageBox, descendentElementIterator, PriceTable, BindableProperty, HtmlPageEditor, desktopWidth, tabletWidth, mobileWidth;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -42350,6 +42354,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       descendentElementIterator = _webAtomsCoreDistWebCoreAtomUI.descendentElementIterator;
     }, function (_blocksPriceBox) {
       PriceTable = _blocksPriceBox.PriceTable;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
     }],
     execute: function () {
       styled.css`
@@ -42472,114 +42478,29 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       tabletWidth = 768;
       mobileWidth = 480;
       _export("default", HtmlPageEditor = class HtmlPageEditor extends AtomControl {
-        get htmlPage() {
-          var _a, _b;
-          return (_b = (_a = this.htmlDocument) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.outerHTML;
+        get htmlPageUrl() {
+          return this.htmlDocument.baseURI.toString();
         }
-        set htmlPage(v) {
+        set htmlPageUrl(v) {
           if (!this.element) {
             return;
           }
           if (!this.ready) {
             setTimeout(() => {
-              this.htmlPage = v;
+              this.htmlPageUrl = v;
             }, 100);
             return;
           }
-          void this.ready.then(() => __awaiter(this, void 0, void 0, function* () {
-            if (!this.htmlDocument) {
-              return;
-            }
-            const iframe = this.element;
-            if (this.htmlDocument !== iframe.contentDocument) {
-              this.htmlDocument = void 0;
-              yield this.loadContentDocument();
-            }
-            this.htmlDocument.open();
-            this.htmlDocument.write(v);
-            this.htmlDocument.addEventListener("click", e => {
-              const target = e.target;
-              const previous = this.selection.element;
-              if (previous === null || previous === void 0 ? void 0 : previous.isContentEditable) {
-                let start = target;
-                while (start) {
-                  if (previous === target) {
-                    return;
-                  }
-                  start = start.parentElement;
-                }
-                previous.removeAttribute("contentEditable");
-                this.commit();
-              }
-              e.preventDefault();
-              this.setSelection(target);
-            });
-            this.htmlDocument.addEventListener("dblclick", e => {
-              const target = e.target;
-              e.preventDefault();
-              const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
-              if (element.tagName === "IMG") {
-                this.changeImage().catch(console.error);
-                return;
-              }
-              if (element.getAttribute("data-editable") === "false") {
-                return;
-              }
-              if (element.hasAttribute("data-web-atoms-view")) {
-                return;
-              }
-              element.setAttribute("contentEditable", "true");
-              this.setSelection(element);
-            });
-            this.htmlDocument.addEventListener("scroll", e => {
-              this.hover.update();
-              this.selection.update();
-            }, {
-              passive: true
-            });
-            this.htmlDocument.addEventListener("pointerover", e => {
-              let target = e.target;
-              target = target.nodeType === Node.ELEMENT_NODE && target.tagName ? target : target.parentElement;
-              if (this.hover.element === target) {
-                return;
-              }
-              this.hover.update(target);
-            }, {
-              capture: true
-            });
-            this.htmlDocument.addEventListener("keydown", e => {
-              if (e.ctrlKey || e.metaKey) {
-                switch (e.key) {
-                  case "s":
-                    this.contentEditor.dispatchEvent(new CustomEvent("savePage", {
-                      bubbles: true
-                    }));
-                    e.preventDefault();
-                    break;
-                  case "z":
-                    this.contentEditor.dispatchEvent(new CustomEvent("undo", {
-                      bubbles: true
-                    }));
-                    e.preventDefault();
-                    break;
-                  case "y":
-                    this.contentEditor.dispatchEvent(new CustomEvent("redo", {
-                      bubbles: true
-                    }));
-                    e.preventDefault();
-                    break;
-                }
-              }
-            });
-            InstallDragDropHelper(this);
-            this.htmlDocument.close();
-            setTimeout(() => {
-              this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-                yield this.setStylerSheet();
-                this.loadVariables();
-              }));
-            }, 10);
-          }));
+          console.log("Loading url");
+          this.contentEditor.setAttribute("src", v);
+          this.initDocument();
+        }
+        get htmlPage() {
+          var _a, _b;
+          return (_b = (_a = this.htmlDocument) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.outerHTML;
+        }
+        set htmlPage(v) {
+          throw new Error("Use url");
         }
         constructor(app, e) {
           super(app, e);
@@ -42692,7 +42613,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             }, XNode.create("i", {
               class: "fas fa-code"
             }), "Variables"), XNode.create(Properties, null))));
-            yield this.loadContentDocument();
+            this.contentEditor = this.element.querySelector(`[data-element="content-editor"]`);
           });
         }
         buildXNode(node) {
@@ -42844,9 +42765,22 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           }
         }
         commit() {
+          var _a;
           this.redoList.clear();
           const lastHtml = this.lastHtml;
           const clone = this.htmlDocument.documentElement.cloneNode(true);
+          const body = clone.querySelector("body");
+          body.removeAttribute("contentEditable");
+          if (this.baseUrl) {
+            if (!this.originalBaseUrl) {
+              (_a = clone.querySelector("base")) === null || _a === void 0 ? void 0 : _a.remove();
+            } else {
+              const baseUrl = clone.querySelector("base");
+              if (baseUrl) {
+                baseUrl.setAttribute("href", this.originalBaseUrl);
+              }
+            }
+          }
           const all = clone.querySelectorAll("*");
           for (let index = 0; index < all.length; index++) {
             const element = all[index];
@@ -42885,10 +42819,101 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
         undo() {
           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";
         }
         redo() {
           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";
+        }
+        initDocument() {
+          void this.ready.then(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.loadContentDocument(this.contentEditor.contentDocument.baseURI);
+            console.log("Attaching events");
+            this.htmlDocument.addEventListener("click", e => {
+              const target = e.target;
+              const previous = this.selection.element;
+              if (previous === null || previous === void 0 ? void 0 : previous.isContentEditable) {
+                let start = target;
+                while (start) {
+                  if (previous === target) {
+                    return;
+                  }
+                  start = start.parentElement;
+                }
+                if (previous !== this.htmlDocument.body) {
+                  previous.removeAttribute("contentEditable");
+                }
+                this.commit();
+              }
+              e.preventDefault();
+              this.setSelection(target);
+            });
+            this.htmlDocument.addEventListener("dblclick", e => {
+              const target = e.target;
+              e.preventDefault();
+              const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
+              if (element.tagName === "IMG") {
+                this.changeImage().catch(console.error);
+                return;
+              }
+              if (element.getAttribute("data-editable") === "false") {
+                return;
+              }
+              if (element.hasAttribute("data-web-atoms-view")) {
+                return;
+              }
+              this.setSelection(element);
+            });
+            this.htmlDocument.addEventListener("scroll", e => {
+              this.hover.update();
+              this.selection.update();
+            }, {
+              passive: true
+            });
+            this.htmlDocument.addEventListener("pointerover", e => {
+              let target = e.target;
+              target = target.nodeType === Node.ELEMENT_NODE && target.tagName ? target : target.parentElement;
+              if (this.hover.element === target) {
+                return;
+              }
+              this.hover.update(target);
+            }, {
+              capture: true
+            });
+            this.htmlDocument.addEventListener("keydown", e => {
+              if (e.ctrlKey || e.metaKey) {
+                switch (e.key) {
+                  case "s":
+                    this.contentEditor.dispatchEvent(new CustomEvent("savePage", {
+                      bubbles: true
+                    }));
+                    e.preventDefault();
+                    break;
+                  case "z":
+                    this.contentEditor.dispatchEvent(new CustomEvent("undo", {
+                      bubbles: true
+                    }));
+                    e.preventDefault();
+                    break;
+                  case "y":
+                    this.contentEditor.dispatchEvent(new CustomEvent("redo", {
+                      bubbles: true
+                    }));
+                    e.preventDefault();
+                    break;
+                }
+              }
+            });
+            InstallDragDropHelper(this);
+            this.htmlDocument.body.contentEditable = "true";
+            setTimeout(() => {
+              this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+                yield this.setStylerSheet();
+                this.loadVariables();
+              }));
+            }, 10);
+          }));
         }
         setStylerSheet() {
           return __awaiter(this, void 0, void 0, function* () {
@@ -42917,16 +42942,24 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           };
           this.pageVariables = StylerSet.instance.vars.map(x => new StylerVariable(x.name, x.value, this.htmlDocument, onChange));
         }
-        loadContentDocument() {
+        loadContentDocument(url) {
+          var _a;
           return __awaiter(this, void 0, void 0, function* () {
-            this.contentEditor = this.element.querySelector(`[data-element="content-editor"]`);
-            while (!this.htmlDocument) {
+            while (url === this.contentEditor.contentDocument.baseURI) {
+              yield sleep(100);
+            }
+            for (;;) {
               this.htmlDocument = this.contentEditor.contentDocument;
+              if (((_a = this.htmlDocument) === null || _a === void 0 ? void 0 : _a.readyState) === "complete") {
+                break;
+              }
               yield sleep(100);
             }
+            this.htmlDocument.body.contentEditable = "true";
           });
         }
       });
+      __decorate([BindableProperty, __metadata("design:type", String)], HtmlPageEditor.prototype, "baseUrl", void 0);
       __decorate([Action({
         onEvent: "delete-element"
       }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], HtmlPageEditor.prototype, "deleteElement", null);
@@ -43759,14 +43792,14 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
           this.pageContent = "";
         }
         init() {
-          var _a, _b;
-          var _c;
+          var _a, _b, _c;
+          var _d;
           return __awaiter(this, void 0, void 0, function* () {
             this.search = "";
             this.root = yield this.cloudFileService.root(this.parameters);
             this.title = this.root.name;
             this.webSite = yield this.websiteService.get(this.root.appFileID);
-            (_a = (_c = this.root).children) !== null && _a !== void 0 ? _a : _c.children = [];
+            (_a = (_d = this.root).children) !== null && _a !== void 0 ? _a : _d.children = [];
             this.root.children.remove(x => x.isDeleted || !(/^(text\/(html|css))$/i.test(x.contentType) || x.isFolder));
             this.root.children.sort((a, b) => a.isFolder ? -1 : 0);
             yield this.onItemExpanded(this.root);
@@ -43776,6 +43809,11 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
             }
             const indexHtml = this.root.children.find(x => x.name === "index.html");
             this.selectedFile = indexHtml;
+            let baseUrl = void 0;
+            const firstHost = (_c = this.webSite.hosts) === null || _c === void 0 ? void 0 : _c[0];
+            if (firstHost) {
+              baseUrl = `https://draft-${firstHost.host}`;
+            }
             this.titleRenderer = () => XNode.create("div", {
               "data-layout": "row"
             }, XNode.create("div", {
@@ -43842,7 +43880,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               folder: this.root,
               presenter: Bind.presenter(c => this.htmlEditor = c),
               "event-html-page-changed": ce => this.pageContent = ce.detail,
-              htmlPage: Bind.oneWayAsync((s, e, cancelToken) => this.selectedFile ? FetchBuilder.get(this.selectedFile.downloadUrl).cancelToken(cancelToken).responseAsText(true) : void 0)
+              htmlPageUrl: Bind.oneWay(() => "/api/site/draft/" + this.webSite.folderID + "/" + this.selectedFile.name)
             }));
             this.footerRenderer = () => XNode.create("div", {
               "data-layout": "command-row",