@social-mail/social-mail-client 1.0.55 → 1.0.57

package/dist/web/AppIndex.pack.js

@@ -22859,7 +22859,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
 
         display: flex;
         flex-direction: column;
-        gap: 5px;
 
         & [data-layout=tree-view-item] {
 
@@ -22868,11 +22867,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
             grid-template-rows: auto auto;
             align-items: center;
 
-            &[data-selected] {
-                & > [data-element=label] {
-                    background-color: Highlight;
-                    color: HighlightText;
-                }
+            &:hover {
+                background-color: var(--hover-color);
+                color: var(--hover-text-color);
             }
 
             & > [data-element=action] {
@@ -22883,9 +22880,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
             & > [data-element=label] {
                 grid-row: 1;
                 grid-column: 2;
-                padding: 2px;
-                padding-left: 5px;
-                padding-right: 5px;
+                padding: 5px;
                 max-width: 200px;
                 white-space: nowrap;
                 text-overflow: ellipsis;
@@ -22893,11 +22888,16 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
                 cursor: pointer;
             }
 
+            &[data-selected] {
+                background-color: var(--selection-color);
+                color: var(--selection-text-color);
+            }
+
             & > [data-element=expand-collapse] {
 
                 grid-row: 1;
                 grid-column: 1;
-                padding-right: 5px;
+                padding: 5px;
                 cursor: pointer;
 
                 &::before {
@@ -22905,15 +22905,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
                 }
             }
 
-            & > [data-element=children] {
-
-                display: none;
-                padding: 5px;
-                grid-row: 2;
-                grid-column: 1 / span 2;
-                padding-left: 10px;
-            }
-
             &[data-expanded] {
 
                 & > [data-element=expand-collapse] {
@@ -22986,7 +22977,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
               rootElement === null || rootElement === void 0 ? void 0 : rootElement.dispose();
               if (this.root && this.childrenProperty && this.labelRenderer && this.collapseIconRenderer) {
                 this.element.innerHTML = "";
-                this.createElement(this.element, this.root, -1);
+                this.createElement(this.root, void 0, -1);
                 this.expand(this.root);
                 if (this.selectedItem) {
                   this.selectItem(this.selectedItem);
@@ -23026,7 +23017,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
           this.runAfterInit(() => {
             if (this.root && !this.element.firstElementChild) {
               if (this.childrenProperty) {
-                this.createElement(this.element, this.root);
+                this.createElement(this.root);
                 this.expand(this.root);
               }
               if (this.selectedItem) {
@@ -23046,92 +23037,143 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
           });
         }
         expandElement(element, toggle = true) {
-          if (element === null || element === void 0 ? void 0 : element.dataItem) {
-            if (element.getAttribute("data-expanded")) {
-              if (toggle) {
-                element.removeAttribute("data-expanded");
-                element.dispatchEvent(new CustomEvent("itemCollapsed", {
-                  detail: element.dataItem,
-                  bubbles: true,
-                  cancelable: true
-                }));
-              }
-            } else {
-              element.setAttribute("data-expanded", "true");
-              element.dispatchEvent(new CustomEvent("itemExpanded", {
-                detail: element.dataItem,
+          if (!element) {
+            return;
+          }
+          const {
+            dataItem
+          } = element;
+          if (!dataItem) {
+            return;
+          }
+          if (element.getAttribute("data-expanded")) {
+            if (toggle) {
+              element.removeAttribute("data-expanded");
+              element.dispatchEvent(new CustomEvent("itemCollapsed", {
+                detail: dataItem,
                 bubbles: true,
                 cancelable: true
               }));
+              this.updateExpanded(dataItem, false);
             }
+          } else {
+            element.setAttribute("data-expanded", "true");
+            element.dispatchEvent(new CustomEvent("itemExpanded", {
+              detail: dataItem,
+              bubbles: true,
+              cancelable: true
+            }));
+            this.updateExpanded(dataItem, true);
           }
         }
-        createElement(parent, item, insertIndex = -1) {
+        createElement(item, parentItem, insertIndex = -1) {
           var _a, _b, _c, _d, _e, _f;
           const element = document.createElement("div");
           element.setAttribute("data-layout", "tree-view-item");
           element.dataItem = item;
-          element.parentItem = ((_a = parent.parentElement) !== null && _a !== void 0 ? _a : parent).dataItem;
+          element.parentItem = parentItem;
           this.map.set(item, element);
           const children = this.childrenProperty(item);
           if (!children) {
             throw new Error("Children array must not be empty");
           }
-          const childrenElement = document.createElement("div");
-          childrenElement.setAttribute("data-element", "children");
-          element.appendChild(childrenElement);
           const watcher = children.watch((target, event, index, child) => {
+            var _a;
             if (event === "add" || event === "set") {
-              this.createElement(childrenElement, child, index);
+              this.createElement(child, item, index);
               return;
             }
             if (event === "remove") {
-              for (const iterator of Array.from(childrenElement.children)) {
-                if (iterator.dataItem === child) {
-                  iterator.remove();
-                  return;
-                }
-              }
+              const childElement = this.map.get(child);
+              childElement === null || childElement === void 0 ? void 0 : childElement.dispose();
+              return;
             }
-            for (const iterator of Array.from(childrenElement.children)) {
-              iterator === null || iterator === void 0 ? void 0 : iterator.dispose();
+            for (const iterator of children) {
+              (_a = this.map.get(iterator)) === null || _a === void 0 ? void 0 : _a.dispose();
             }
             for (const iterator of children) {
-              this.createElement(element, iterator);
+              this.createElement(iterator, item);
             }
           });
           element.dispose = () => {
+            var _a;
             watcher.dispose();
-            for (const iterator of Array.from(childrenElement.children)) {
-              iterator === null || iterator === void 0 ? void 0 : iterator.dispose();
+            for (const iterator of children) {
+              (_a = this.map.get(iterator)) === null || _a === void 0 ? void 0 : _a.dispose();
             }
             element.remove();
           };
-          const actionElement = (_b = this.actionRenderer) === null || _b === void 0 ? void 0 : _b.call(this, item);
+          const actionElement = (_a = this.actionRenderer) === null || _a === void 0 ? void 0 : _a.call(this, item);
           const collapseElement = this.collapseIconRenderer(item);
           const labelElement = this.labelRenderer(item);
           if (labelElement) {
-            const a = (_c = labelElement.attributes) !== null && _c !== void 0 ? _c : labelElement.attributes = {};
+            const a = (_b = labelElement.attributes) !== null && _b !== void 0 ? _b : labelElement.attributes = {};
             a["data-element"] = "label";
-            (_d = a["data-click-event"]) !== null && _d !== void 0 ? _d : a["data-click-event"] = "select-item";
+            (_c = a["data-click-event"]) !== null && _c !== void 0 ? _c : a["data-click-event"] = "select-item";
             this.render(XNode.create("div", null, labelElement), element, this);
           }
           if (actionElement) {
-            ((_e = actionElement.attributes) !== null && _e !== void 0 ? _e : actionElement.attributes = {})["data-element"] = "action";
+            ((_d = actionElement.attributes) !== null && _d !== void 0 ? _d : actionElement.attributes = {})["data-element"] = "action";
             this.render(XNode.create("div", null, actionElement), element, this);
           }
           if (collapseElement) {
-            const a = (_f = collapseElement.attributes) !== null && _f !== void 0 ? _f : collapseElement.attributes = {};
+            const a = (_e = collapseElement.attributes) !== null && _e !== void 0 ? _e : collapseElement.attributes = {};
             a["data-element"] = "expand-collapse";
             a["data-click-event"] = "toggle-expand";
             this.render(XNode.create("div", null, collapseElement), element, this);
           }
+          const header = document.createElement("div");
+          header.setAttribute("data-element", "header");
+          element.appendChild(header);
+          const parentElement = this.map.get(parentItem);
+          let last = parentElement;
+          if (parentItem) {
+            const siblings = this.childrenProperty(parentItem);
+            if (insertIndex === -1) {
+              insertIndex = siblings.indexOf(item);
+            }
+            if (insertIndex >= 1) {
+              last = this.map.get(siblings[insertIndex - 1]);
+            }
+            last.insertAdjacentElement("afterend", element);
+            const pad = Number((_f = parentElement.getAttribute("data-pad")) !== null && _f !== void 0 ? _f : "0") + 10;
+            element.setAttribute("data-pad", `${pad}`);
+            element.style.paddingLeft = `${pad}px`;
+          } else {
+            this.element.appendChild(element);
+            this.expandElement(element, false);
+          }
           for (const iterator of children) {
-            this.createElement(childrenElement, iterator);
+            this.createElement(iterator, item);
           }
-          parent.appendChild(element);
+          setTimeout(() => this.updateExpanded(), 1);
           return element;
         }
+        updateExpanded(item, show) {
+          if (!item) {
+            item = this.root;
+            show = true;
+          }
+          const element = this.map.get(item);
+          if (!element) {
+            return;
+          }
+          if (item === this.root) {
+            show = true;
+          } else if (show === void 0) {
+            show = element.getAttribute("data-expanded") === "true";
+          }
+          if (show) {
+            element.style.display = "";
+          } else {
+            element.style.display = "none";
+          }
+          const children = this.childrenProperty(element.dataItem);
+          show && (show = element.getAttribute("data-expanded") === "true");
+          for (const iterator of children) {
+            this.updateExpanded(iterator, show);
+          }
+        }
       });
       __decorate([BindableProperty, __metadata("design:type", Object)], TreeView.prototype, "root", void 0);
       __decorate([BindableProperty, __metadata("design:type", Object)], TreeView.prototype, "selectedItem", void 0);
@@ -26228,7 +26270,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
               "data-padding": "large",
               "data-font-size": "large",
               "data-color": "white",
-              text: "Social Mail Admin"
+              text: "Social Mail"
             })), XNode.create(MenuItem, {
               icon: "fas fa-home",
               label: "Home",