@social-mail/social-mail-client 1.2.762 → 1.2.764

package/dist/public/preview/video/PreviewVideo.pack.js

@@ -1975,175 +1975,8 @@ const UMD = new UMDClass();
 //# sourceMappingURL=umd.js.map
 
         AmdLoader.instance.register(
-            ["@social-mail/social-mail-client","@web-atoms/core","reflect-metadata","@web-atoms/date-time","@web-atoms/web-controls"],
-            ["@social-mail/social-mail-client/dist/public/preview/video/PreviewVideo","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/Pack","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/web-controls/dist/player/AtomVideoPlayer","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/web/styles/AtomTheme"]);
-
-System.register([], function (_export, _context) {
-  "use strict";
-
-  var viewModelParseWatchCache, viewModelParseWatchCache2;
-  function trimRegEx(t, r) {
-    const m = r.exec(t);
-    if (m && m.length) {
-      return [true, t.substring(m[0].length).trim(), m[0]];
-    }
-    return [false, t, ""];
-  }
-  function extractTill(text, search, returnOriginal = false) {
-    const index = text.indexOf(search);
-    if (index <= 0) {
-      return returnOriginal ? text : "";
-    }
-    return text.substring(0, index);
-  }
-  function parsePath(f, parseThis) {
-    let str = f.toString().trim();
-    str = str.split("\n").filter(s => !/^\/\//.test(s.trim())).join("\n");
-    const key = (parseThis === undefined ? "un:" : parseThis ? "_this:" : "_noThis:") + str;
-    const px1 = viewModelParseWatchCache[key];
-    if (px1) {
-      return px1;
-    }
-    if (str.endsWith("}")) {
-      str = str.substr(0, str.length - 1);
-    }
-    const functionRegEx = /^\w+\s*\(/;
-    const lambdaRegEx = /^\(?(\w+)?(\s?\,\s?\w+)*\)?\s?\=\>/;
-    let arg = "";
-    const original = str;
-    let [success, remaining] = trimRegEx(str, functionRegEx);
-    if (success) {
-      str = remaining;
-      remaining = extractTill(remaining, ")");
-      str = str.substring(remaining.length);
-      arg = extractTill(remaining, ",", true);
-    } else {
-      [success, str, remaining] = trimRegEx(str, lambdaRegEx);
-      if (success) {
-        remaining = remaining.trim();
-        remaining = remaining.substring(0, remaining.length - 2);
-        remaining = extractTill(remaining, ")", true);
-        arg = extractTill(remaining, ",", true);
-        if (arg.startsWith("(")) {
-          arg = arg.substring(1);
-        }
-      } else {
-        if (parseThis !== undefined && parseThis === false) {
-          return [];
-        } else {
-          parseThis = true;
-        }
-      }
-    }
-    str = str.trim();
-    const isThis = parseThis === undefined ? (arg ? false : true) || parseThis : parseThis;
-    const p = (isThis ? "(\\_this|this)" : arg || "").trim();
-    if (p.length === 0) {
-      const empty = [];
-      viewModelParseWatchCache[key] = empty;
-      return empty;
-    }
-    const regExp = `(?:(\\b${p})(?:(\\.[a-zA-Z_][a-zA-Z_0-9]*)+)\\s?(?:(\\(|\\=\\=\\=|\\=\\=|\\=)?))`;
-    const re = new RegExp(regExp, "gi");
-    let path = [];
-    const ms = str.replace(re, m => {
-      let px = m;
-      if (px.startsWith("this.")) {
-        if (parseThis !== true) {
-          px = px.substr(5);
-        }
-      } else if (px.startsWith("_this.")) {
-        if (parseThis !== true) {
-          px = px.substr(6);
-        } else {
-          px = px.substr(1);
-        }
-      } else {
-        px = px.substr(p.length + 1);
-      }
-      px = px.split(".").filter(s => !s.endsWith("(")).join(".");
-      if (!path.find(y => y === px)) {
-        path.push(px);
-      }
-      const filtered = [];
-      for (const iterator of path) {
-        if (iterator.endsWith("==") || !(iterator.endsWith("(") || iterator.endsWith("="))) {
-          filtered.push((iterator.endsWith("===") ? iterator.substr(0, iterator.length - 3) : iterator.endsWith("==") ? iterator.substr(0, iterator.length - 2) : iterator).trim());
-        }
-      }
-      path = filtered.filter(px11 => {
-        const search = px11 + ".";
-        for (const iterator of filtered) {
-          if (px11 !== iterator && iterator.indexOf(search) !== -1) {
-            return false;
-          }
-        }
-        return true;
-      });
-      return m;
-    });
-    path = path.sort((a, b) => b.localeCompare(a));
-    const duplicates = path;
-    path = [];
-    for (const iterator of duplicates) {
-      if (path.find(px2 => px2 === iterator)) {
-        continue;
-      }
-      path.push(iterator);
-    }
-    const rp = [];
-    for (const rpItem of path) {
-      if (rp.find(x => x.startsWith(rpItem))) {
-        continue;
-      }
-      rp.push(rpItem);
-    }
-    const pl = path.filter(p1 => p1).map(p1 => p1.split("."));
-    viewModelParseWatchCache[key] = pl;
-    return pl;
-  }
-  function parsePathLists(f) {
-    const str = f.toString().trim();
-    const key = str;
-    const px1 = viewModelParseWatchCache2[key];
-    if (px1) {
-      return px1;
-    }
-    const pl = {
-      pathList: parsePath(str, false),
-      thisPath: parsePath(str, true),
-      combined: []
-    };
-    if (pl.thisPath.length && pl.pathList.length) {
-      pl.combined = pl.thisPath.map(x => {
-        x[0] = "t";
-        x.splice(0, 0, "this");
-        return x;
-      }).concat(pl.pathList.map(x => {
-        x.splice(0, 0, "this", "x");
-        return x;
-      }));
-      pl.thisPath = [];
-      pl.pathList = [];
-    }
-    viewModelParseWatchCache2[key] = pl;
-    return pl;
-  }
-  _export({
-    parsePath: parsePath,
-    parsePathLists: parsePathLists
-  });
-  return {
-    setters: [],
-    execute: function () {
-      viewModelParseWatchCache = {};
-      viewModelParseWatchCache2 = {};
-    }
-  };
-});
-//# sourceMappingURL=ExpressionParser.js.map
-
-    AmdLoader.instance.setup("@web-atoms/core/dist/core/ExpressionParser");
+            ["@social-mail/social-mail-client","@web-atoms/core","reflect-metadata","@web-atoms/data-styles","@web-atoms/date-time","@web-atoms/web-controls"],
+            ["@social-mail/social-mail-client/dist/public/preview/video/PreviewVideo","@social-mail/social-mail-client/dist/style/GlobalStyle","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/core/AtomList","@web-atoms/core/dist/core/AtomBinder","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@web-atoms/core/dist/style/styled","@web-atoms/data-styles/data-styles","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/Pack","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/web-controls/dist/player/AtomVideoPlayer","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/web/styles/AtomTheme"]);
 
 /*! *****************************************************************************
 Copyright (C) Microsoft. All rights reserved.
@@ -3447,570 +3280,517 @@ System.register(["reflect-metadata", "./AtomMap"], function (_export, _context)
 
     AmdLoader.instance.setup("@web-atoms/core/dist/core/types");
 
-System.register(["tslib", "./ExpressionParser", "./types"], function (_export, _context) {
+System.register(["./types"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, parsePath, parsePathLists, CancelToken, ignoreValue, Bind, isEvent, bindSymbol;
-  function twoWaysConvert(name, b, control, e, creator) {
-    control.bind(e, name, b.thisPathList || b.pathList, b.eventList || true, null, b.thisPathList ? creator : undefined);
-  }
-  _export("default", void 0);
+  var ArrayHelper, AtomBinder, symbolHandlers, symbolBindable;
+  _export("AtomBinder", void 0);
   return {
-    setters: [function (_tslib) {
-      __awaiter = _tslib.__awaiter;
-    }, function (_ExpressionParser) {
-      parsePath = _ExpressionParser.parsePath;
-      parsePathLists = _ExpressionParser.parsePathLists;
-    }, function (_types) {
-      CancelToken = _types.CancelToken;
-      ignoreValue = _types.ignoreValue;
+    setters: [function (_types) {
+      ArrayHelper = _types.ArrayHelper;
     }],
     execute: function () {
-      isEvent = /^event/i;
-      _export("bindSymbol", bindSymbol = Symbol("Bind"));
-      _export("default", Bind = class Bind {
-        static forControl() {
-          return Bind;
-        }
-        static forData() {
-          return Bind;
-        }
-        static forViewModel() {
-          return Bind;
-        }
-        static forLocalViewModel() {
-          return Bind;
+      _export("symbolHandlers", symbolHandlers = Symbol.for("handlers"));
+      _export("symbolBindable", symbolBindable = Symbol.for("bindable"));
+      _export("AtomBinder", AtomBinder = class AtomBinder {
+        static refreshValue(target, key) {
+          const handlers = AtomBinder.get_WatchHandler(target, key);
+          if (handlers === undefined || handlers == null) {
+            return;
+          }
+          for (const item of handlers) {
+            item(target, key);
+          }
+          if (target.onPropertyChanged) {
+            target.onPropertyChanged(key);
+          }
         }
-        static presenter(name) {
-          return {
-            [bindSymbol](cn, control, e, creator) {
-              if (typeof name === "function") {
-                name(control);
+        static add_WatchHandler(target, key, handler) {
+          if (target == null) {
+            return;
+          }
+          const handlers = AtomBinder.get_WatchHandler(target, key);
+          handlers.push(handler);
+          if (Array.isArray(target)) {
+            return;
+          }
+          const pv = AtomBinder.getPropertyDescriptor(target, key);
+          if (pv && pv.get) {
+            return;
+          }
+          const tw = target;
+          let bindables = tw[symbolBindable];
+          if (bindables === undefined) {
+            bindables = {};
+            Object.defineProperty(tw, symbolBindable, {
+              value: bindables,
+              enumerable: false,
+              writable: true,
+              configurable: true
+            });
+          }
+          if (!bindables[key]) {
+            bindables[key] = 1;
+            const o = target[key];
+            const nk = Symbol.for(key);
+            target[nk] = o;
+            const set = function (v) {
+              const ov = this[nk];
+              if (ov === undefined ? ov === v : ov == v) {
                 return;
               }
-              const n = name || cn;
-              let c = control.element;
-              while (c) {
-                if (c.atomControl && c.atomControl[n] !== undefined) {
-                  break;
-                }
-                c = c._logicalParent || c.parentElement;
-              }
-              (c && c.atomControl || control)[n] = e;
+              this[nk] = v;
+              AtomBinder.refreshValue(this, key);
+            };
+            const get = function () {
+              return this[nk];
+            };
+            if (pv) {
+              delete target[key];
+              Object.defineProperty(target, key, {
+                get,
+                set,
+                configurable: true,
+                enumerable: true
+              });
+            } else {
+              Object.defineProperty(target, key, {
+                get,
+                set,
+                enumerable: true,
+                configurable: true
+              });
             }
-          };
+          }
         }
-        static event(sourcePath) {
-          return {
-            [bindSymbol](name, control, e) {
-              control.runAfterInit(() => {
-                if (isEvent.test(name)) {
-                  name = name.substring(5);
-                  if (name.startsWith("-")) {
-                    name = name.substring(1).replace(/-([a-z])/g, g => g[1].toUpperCase());
-                  } else {
-                    name = name[0].toLowerCase() + name.substring(1);
-                  }
-                }
-                control.bindEvent(e, name, e1 => {
-                  return sourcePath(control, e1);
-                });
-              });
+        static getPropertyDescriptor(target, key) {
+          const pv = Object.getOwnPropertyDescriptor(target, key);
+          if (!pv) {
+            const pt = Object.getPrototypeOf(target);
+            if (pt) {
+              return AtomBinder.getPropertyDescriptor(pt, key);
             }
-          };
+          }
+          return pv;
         }
-        static oneTime(sourcePath, now) {
+        static get_WatchHandler(target, key) {
+          if (target == null) {
+            return null;
+          }
+          let handlers = target[symbolHandlers];
+          if (handlers === undefined) {
+            handlers = {};
+            Object.defineProperty(target, symbolHandlers, {
+              value: handlers,
+              enumerable: false,
+              writable: true,
+              configurable: true
+            });
+          }
+          let handlersForKey = handlers[key];
+          if (handlersForKey === undefined || handlersForKey == null) {
+            handlersForKey = [];
+            handlers[key] = handlersForKey;
+          }
+          return handlersForKey;
+        }
+        static remove_WatchHandler(target, key, handler) {
+          if (target == null) {
+            return;
+          }
+          const handlers = target[symbolHandlers];
+          if (typeof handlers === "undefined") {
+            return;
+          }
+          const handlersForKey = target[symbolHandlers][key];
+          if (handlersForKey === undefined || handlersForKey == null) {
+            return;
+          }
+          ArrayHelper.remove(handlersForKey, f => f === handler);
+          if (!handlersForKey.length) {
+            handlers[key] = null;
+            delete handlers[key];
+          }
+        }
+        static invokeItemsEvent(target, mode, index, item, oldItem) {
+          const key = "_items";
+          const handlers = AtomBinder.get_WatchHandler(target, key);
+          if (!handlers) {
+            return;
+          }
+          for (const obj of handlers) {
+            obj(target, mode, index, item, oldItem);
+          }
+          AtomBinder.refreshValue(target, "length");
+        }
+        static refreshItems(ary) {
+          AtomBinder.invokeItemsEvent(ary, "refresh", -1, null);
+        }
+        static add_CollectionChanged(target, handler) {
+          if (target == null) {
+            throw new Error("Target Array to watch cannot be null");
+          }
+          if (handler == null) {
+            throw new Error("Target handle to watch an Array cannot be null");
+          }
+          const handlers = AtomBinder.get_WatchHandler(target, "_items");
+          handlers.push(handler);
           return {
-            [bindSymbol](name, control, e) {
-              control.runAfterInit(() => {
-                control.setLocalValue(e, name, sourcePath(control, e));
-              });
-              if (typeof now !== "undefined") {
-                control.setLocalValue(e, name, now);
-              }
+            dispose: () => {
+              AtomBinder.remove_CollectionChanged(target, handler);
             }
           };
         }
-        static oneTimeAsync(sourcePath, now) {
+        static remove_CollectionChanged(t, handler) {
+          if (t == null) {
+            return;
+          }
+          const target = t;
+          const handlers = target[symbolHandlers];
+          if (typeof handlers === "undefined") {
+            return;
+          }
+          const key = "_items";
+          const handlersForKey = handlers[key];
+          if (handlersForKey === undefined || handlersForKey == null) {
+            return;
+          }
+          ArrayHelper.remove(handlersForKey, f => f === handler);
+          if (!handlersForKey.length) {
+            handlers[key] = null;
+            delete handlers[key];
+          }
+        }
+        static watch(item, property, f) {
+          AtomBinder.add_WatchHandler(item, property, f);
           return {
-            [bindSymbol](name, control, e) {
-              control.runAfterInit(() => {
-                control.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-                  const value = yield sourcePath(control, e, new CancelToken());
-                  control.setLocalValue(e, name, value);
-                }));
-              });
-              if (typeof now !== "undefined") {
-                control.setLocalValue(e, name, now);
-              }
+            dispose: () => {
+              AtomBinder.remove_WatchHandler(item, property, f);
             }
           };
         }
-        static source(source, path, now) {
-          const lists = parsePath(path, false).map(x => ["this", ...x]);
-          return {
-            [bindSymbol](name, control, e, creator) {
-              const self = {
-                control,
-                source
-              };
-              control.bind(e, name, lists, false, () => {
-                return path.call(self, self);
-              }, self);
-              if (typeof now !== "undefined") {
-                control.setLocalValue(e, name, now);
-              }
+        static clear(a) {
+          a.length = 0;
+          this.invokeItemsEvent(a, "refresh", -1, null);
+          AtomBinder.refreshValue(a, "length");
+        }
+        static addItem(a, item) {
+          const index = a.length;
+          a.push(item);
+          this.invokeItemsEvent(a, "add", index, item);
+          AtomBinder.refreshValue(a, "length");
+        }
+        static removeItem(a, item) {
+          const i = a.findIndex(x => x === item);
+          if (i === -1) {
+            return false;
+          }
+          a.splice(i, 1);
+          AtomBinder.invokeItemsEvent(a, "remove", i, item);
+          AtomBinder.refreshValue(a, "length");
+          return true;
+        }
+      });
+    }
+  };
+});
+//# sourceMappingURL=AtomBinder.js.map
+
+    AmdLoader.instance.setup("@web-atoms/core/dist/core/AtomBinder");
+
+System.register(["./AtomBinder"], function (_export, _context) {
+  "use strict";
+
+  var AtomBinder, AtomList, ap;
+  _export("AtomList", void 0);
+  return {
+    setters: [function (_AtomBinder) {
+      AtomBinder = _AtomBinder.AtomBinder;
+    }],
+    execute: function () {
+      _export("AtomList", AtomList = class AtomList extends Array {
+        constructor() {
+          super();
+          this.startValue = 0;
+          this.totalValue = 0;
+          this.sizeValue = 10;
+          this["__proto__"] = AtomList.prototype;
+          this.next = () => {
+            this.start = this.start + this.size;
+          };
+          this.prev = () => {
+            if (this.start >= this.size) {
+              this.start = this.start - this.size;
             }
           };
         }
-        static oneWayAsync(sourcePath, {
-          watchDelayInMS = 250,
-          default: defaultValue
-        } = {}) {
-          let pathList;
-          let combined;
-          let thisPathList;
-          if (Array.isArray(sourcePath)) {
-            pathList = sourcePath;
-          } else {
-            const lists = parsePathLists(sourcePath);
-            if (lists.combined.length) {
-              combined = lists.combined;
-            }
-            if (lists.pathList.length) {
-              pathList = lists.pathList;
-            }
-            if (lists.thisPath.length) {
-              thisPathList = lists.thisPath;
+        get start() {
+          return this.startValue;
+        }
+        set start(v) {
+          if (v === this.startValue) {
+            return;
+          }
+          this.startValue = v;
+          AtomBinder.refreshValue(this, "start");
+        }
+        get total() {
+          return this.totalValue;
+        }
+        set total(v) {
+          if (v === this.totalValue) {
+            return;
+          }
+          this.totalValue = v;
+          AtomBinder.refreshValue(this, "total");
+        }
+        get size() {
+          return this.sizeValue;
+        }
+        set size(v) {
+          if (v === this.sizeValue) {
+            return;
+          }
+          this.sizeValue = v;
+          AtomBinder.refreshValue(this, "size");
+        }
+        add(item) {
+          const i = this.length;
+          const n = this.push(item);
+          AtomBinder.invokeItemsEvent(this, "add", i, item);
+          AtomBinder.refreshValue(this, "length");
+          return n;
+        }
+        addAll(items) {
+          for (const item of items) {
+            const i = this.length;
+            this.push(item);
+            AtomBinder.invokeItemsEvent(this, "add", i, item);
+            AtomBinder.refreshValue(this, "length");
+          }
+          const t = items["total"];
+          if (t) {
+            this.total = t;
+          }
+        }
+        replace(items, start, size) {
+          this.length = items.length;
+          for (let i = 0; i < items.length; i++) {
+            this[i] = items[i];
+          }
+          this.refresh();
+          const t = items["total"];
+          if (t) {
+            this.total = t;
+          }
+          if (start !== undefined) {
+            this.start = start;
+          }
+          if (size !== undefined) {
+            this.size = size;
+          }
+        }
+        insert(i, item) {
+          const n = this.splice(i, 0, item);
+          AtomBinder.invokeItemsEvent(this, "add", i, item);
+          AtomBinder.refreshValue(this, "length");
+        }
+        set(i, item) {
+          const old = this[i];
+          this[i] = item;
+          AtomBinder.invokeItemsEvent(this, "replace", i, item, old);
+          AtomBinder.refreshValue(this, "length");
+        }
+        removeAt(i) {
+          const item = this[i];
+          this.splice(i, 1);
+          AtomBinder.invokeItemsEvent(this, "remove", i, item);
+          AtomBinder.refreshValue(this, "length");
+          return item;
+        }
+        remove(item) {
+          if (item instanceof Function) {
+            let removed = false;
+            for (let index = 0; index < this.length;) {
+              const it = this[index];
+              if (item(it)) {
+                this.splice(index, 1);
+                AtomBinder.invokeItemsEvent(this, "remove", index, it);
+                AtomBinder.refreshValue(this, "length");
+                removed = true;
+                continue;
+              }
+              index++;
             }
+            return removed;
           }
-          if (!(combined || pathList || thisPathList)) {
-            throw new Error(`Failed to setup binding for ${sourcePath}, parsing failed`);
+          const n = this.indexOf(item);
+          if (n !== -1) {
+            this.removeAt(n);
+            return true;
           }
-          return {
-            [bindSymbol](name, control, e, creator) {
-              let bindingSource;
-              let finalPathList = pathList;
-              if (combined) {
-                bindingSource = {
-                  t: creator,
-                  x: control
-                };
-                finalPathList = combined;
-              } else if (thisPathList) {
-                finalPathList = thisPathList;
-                bindingSource = creator;
-              }
-              const asyncState = {
-                token: 0,
-                cancelToken: undefined
-              };
-              control.bind(e, name, finalPathList, false, () => {
-                var _a;
-                const app = control.app;
-                (_a = asyncState.cancelToken) === null || _a === void 0 ? void 0 : _a.cancel();
-                asyncState.cancelToken = undefined;
-                asyncState.token = app.setTimeoutAsync(() => __awaiter(this, void 0, void 0, function* () {
-                  var _b, _c;
-                  if ((_b = asyncState.cancelToken) === null || _b === void 0 ? void 0 : _b.cancelled) {
-                    return;
-                  }
-                  asyncState.token = undefined;
-                  (_c = asyncState.cancelToken) === null || _c === void 0 ? void 0 : _c.cancel();
-                  const ct = asyncState.cancelToken = new CancelToken();
-                  const value = yield sourcePath.call(creator, control, e, ct);
-                  if (!ct.cancelled) {
-                    control.setLocalValue(e, name, value);
-                  }
-                }), watchDelayInMS, asyncState.token);
-                return ignoreValue;
-              }, bindingSource);
-              if (typeof defaultValue !== "undefined") {
-                control.setLocalValue(e, name, defaultValue);
-              }
-            }
-          };
+          return false;
         }
-        static oneWay(sourcePath, now) {
-          let pathList;
-          let combined;
-          let thisPathList;
-          if (Array.isArray(sourcePath)) {
-            pathList = sourcePath;
-          } else {
-            const lists = parsePathLists(sourcePath);
-            if (lists.combined.length) {
-              combined = lists.combined;
-            }
-            if (lists.pathList.length) {
-              pathList = lists.pathList;
-            }
-            if (lists.thisPath.length) {
-              thisPathList = lists.thisPath;
-            }
-          }
-          if (!(combined || pathList || thisPathList)) {
-            throw new Error(`Failed to setup binding for ${sourcePath}, parsing failed`);
-          }
-          return {
-            [bindSymbol](name, control, e, creator) {
-              if (pathList) {
-                control.bind(e, name, pathList, false, () => {
-                  return sourcePath.call(creator, control, e);
-                });
-                if (typeof now !== "undefined") {
-                  control.setLocalValue(e, name, now);
-                }
-                return;
-              }
-              if (combined) {
-                const a = {
-                  t: creator,
-                  x: control
-                };
-                control.bind(e, name, combined, false, () => {
-                  return sourcePath.call(creator, control, e);
-                }, a);
-                if (typeof now !== "undefined") {
-                  control.setLocalValue(e, name, now);
-                }
-                return;
-              }
-              control.bind(e, name, thisPathList, false, () => {
-                return sourcePath.call(creator, control, e);
-              }, creator);
-              if (typeof now !== "undefined") {
-                control.setLocalValue(e, name, now);
-              }
-            }
-          };
+        clear() {
+          this.length = 0;
+          this.refresh();
         }
-        static twoWays(sourcePath, events, converter) {
-          let pathList;
-          let thisPathList;
-          if (Array.isArray(sourcePath)) {
-            pathList = sourcePath;
-          } else {
-            const lists = parsePathLists(sourcePath);
-            if (lists.combined.length) {
-              throw new Error("Cannot have combined binding for two ways");
-            }
-            if (lists.pathList.length) {
-              pathList = lists.pathList;
-            }
-            if (lists.thisPath.length) {
-              thisPathList = lists.thisPath;
-            }
-          }
-          if (!(thisPathList || pathList)) {
-            throw new Error(`Failed to setup twoWay binding on ${sourcePath}`);
+        refresh() {
+          AtomBinder.invokeItemsEvent(this, "refresh", -1, null);
+          AtomBinder.refreshValue(this, "length");
+        }
+        watch(f, wrap) {
+          if (wrap) {
+            const fx = f;
+            f = function () {
+              const p = [];
+              for (let i = 0; i < arguments.length; i++) {
+                const iterator = arguments[i];
+                p.push(iterator);
+              }
+              return fx.call(this, p);
+            };
           }
-          return {
-            [bindSymbol](name, control, e, creator) {
-              control.bind(e, name, thisPathList || pathList, events || true, converter, thisPathList ? creator : undefined);
-            }
-          };
+          return AtomBinder.add_CollectionChanged(this, f);
         }
-        static sourceTwoWays(source, path, events = ["input", "cut", "paste", "change"]) {
-          const lists = parsePath(path, false).map(x => ["this", ...x]);
-          return {
-            [bindSymbol](name, control, e, creator) {
-              const self = {
-                control,
-                source
-              };
-              control.bind(e, name, lists, events, lists, self);
+        count(f) {
+          let total = 0;
+          for (const iterator of this) {
+            if (f(iterator)) {
+              total++;
             }
-          };
-        }
-        static twoWaysImmediate(sourcePath, converter) {
-          return this.twoWays(sourcePath, ["change", "input", "paste", "cut"], converter);
+          }
+          return total;
         }
-        constructor(setupFunction, sourcePath, name, eventList) {
-          this.setupFunction = setupFunction;
-          this.name = name;
-          this.eventList = eventList;
-          this.sourcePath = sourcePath;
-          this[bindSymbol] = true;
-          if (!this.sourcePath) {
-            return;
+        avg(f) {
+          if (!this.length) {
+            return 0;
           }
-          if (Array.isArray(this.sourcePath)) {
-            this.pathList = this.sourcePath;
-          } else {
-            const lists = parsePathLists(this.sourcePath);
-            if (lists.combined.length) {
-              this.combined = lists.combined;
-            }
-            if (lists.pathList.length) {
-              this.pathList = lists.pathList;
-            }
-            if (lists.thisPath.length) {
-              this.thisPathList = lists.thisPath;
-            }
+          let sum = 0;
+          for (const iterator of this) {
+            sum += f(iterator);
           }
+          return sum / this.length;
+        }
+        includes(item) {
+          return this.indexOf(item) !== -1;
         }
       });
+      ap = Array.prototype;
+      for (const key of Object.getOwnPropertyNames(AtomList.prototype)) {
+        const {
+          value
+        } = Object.getOwnPropertyDescriptor(AtomList.prototype, key);
+        switch (key) {
+          case "add":
+          case "addAll":
+          case "clear":
+          case "refresh":
+          case "set":
+          case "remove":
+          case "removeAt":
+          case "watch":
+          case "replace":
+          case "insert":
+          case "count":
+          case "avg":
+          case "includes":
+            if (key in ap) {
+              continue;
+            }
+            Object.defineProperty(ap, key, {
+              enumerable: false,
+              value,
+              configurable: true,
+              writable: true
+            });
+            continue;
+        }
+      }
     }
   };
 });
-//# sourceMappingURL=Bind.js.map
+//# sourceMappingURL=AtomList.js.map
 
-    AmdLoader.instance.setup("@web-atoms/core/dist/core/Bind");
+    AmdLoader.instance.setup("@web-atoms/core/dist/core/AtomList");
 
-System.register(["./Bind"], function (_export, _context) {
+System.register([], function (_export, _context) {
   "use strict";
 
-  var bindSymbol, RootObject, XNode, xnodeSymbol, isControl, elementFactorySymbol, isFactorySymbol, attachedSymbol, isTemplateSymbol, constructorNeedsArgumentsSymbol, attachedProperties, attachedId, attach;
-  _export({
-    RootObject: void 0,
-    default: void 0
-  });
+  var StyleFragment, id, nextId, first, addMarker, globalLow, global, globalHigh, localLow, local, localHigh, styles, styled, svgAsCssDataUrl;
+  function* divide(text) {
+    const regex = /^(([^\{\n]+\{[\t\x20]*)|([^\n\}]*\}[^\S\n\r]*))$/gm;
+    let m;
+    let sentOnce = false;
+    let lastIndex = 0;
+    let lastMatch;
+    while ((m = regex.exec(text)) !== null) {
+      if (m.index === regex.lastIndex) {
+        regex.lastIndex++;
+      }
+      const match = m[0];
+      if (!sentOnce) {
+        sentOnce = true;
+        yield text.substring(lastIndex, m.index);
+        lastIndex = m.index + match.length;
+        lastMatch = match;
+        continue;
+      }
+      if (lastMatch.includes("}")) {
+        yield [lastMatch.trim()];
+        lastIndex = m.index + match.length;
+        lastMatch = match;
+        continue;
+      }
+      yield [lastMatch, text.substring(lastIndex, m.index), match];
+      lastIndex = m.index + match.length;
+      lastMatch = match;
+    }
+    if (lastMatch === null || lastMatch === void 0 ? void 0 : lastMatch.includes("}")) {
+      yield [lastMatch.trim()];
+    }
+  }
   return {
-    setters: [function (_Bind) {
-      bindSymbol = _Bind.bindSymbol;
-    }],
+    setters: [],
     execute: function () {
-      _export("RootObject", RootObject = class RootObject {
-        get vsProps() {
-          return undefined;
-        }
-        addEventListener(name, handler) {
-          return bridge.addEventHandler(this, name, handler);
+      ;
+      id = 1;
+      nextId = () => `styled-r${id++}`;
+      first = document.head.firstElementChild;
+      addMarker = name => {
+        const m = document.createElement("meta");
+        m.name = name;
+        if (first) {
+          first.insertAdjacentElement("afterend", m);
+        } else {
+          document.head.insertAdjacentElement("afterbegin", m);
         }
-        appendChild(e) {
-          bridge.appendChild(this, e);
+        first = m;
+        return m;
+      };
+      globalLow = addMarker("global-low-style");
+      global = addMarker("global-style");
+      globalHigh = addMarker("global-high-style");
+      localLow = addMarker("local-low-style");
+      local = addMarker("local-style");
+      localHigh = addMarker("local-high-style");
+      StyleFragment = class StyleFragment {
+        static newStyle({
+          selector = "",
+          content = ""
+        }) {
+          return new StyleFragment({
+            selector,
+            content
+          });
         }
-        dispatchEvent(evt) {
-          bridge.dispatchEvent(evt);
-        }
-      });
-      _export("xnodeSymbol", xnodeSymbol = Symbol("XNode"));
-      _export("isControl", isControl = Symbol("isControl"));
-      _export("elementFactorySymbol", elementFactorySymbol = Symbol("elementFactory"));
-      _export("isFactorySymbol", isFactorySymbol = Symbol("isFactory"));
-      _export("attachedSymbol", attachedSymbol = Symbol("attached"));
-      _export("isTemplateSymbol", isTemplateSymbol = Symbol("isTemplate"));
-      _export("constructorNeedsArgumentsSymbol", constructorNeedsArgumentsSymbol = Symbol("constructorNeedsArguments"));
-      _export("attachedProperties", attachedProperties = {});
-      attachedId = 1;
-      attach = (name, attacher) => {
-        const key = `:${attachedId++}`;
-        const fx = v => {
-          return {
-            [key]: v
-          };
-        };
-        attachedProperties[key] = attacher;
-        fx[attachedSymbol] = attacher;
-        fx[isFactorySymbol] = key;
-        return fx;
-      };
-      _export("default", XNode = class XNode {
-        static attach(n, tag) {
-          return {
-            factory: (attributes, ...nodes) => new XNode(n, attributes ? Object.assign(Object.assign({}, attributes), {
-              for: tag
-            }) : {
-              for: tag
-            }, nodes)
-          };
-        }
-        static prepare(n, isProperty, isTemplate) {
-          function px(v) {
-            return {
-              [n]: v
-            };
-          }
-          px.factory = (a, ...nodes) => {
-            return new XNode(n, a, nodes, isProperty, isTemplate);
-          };
-          px.toString = () => n;
-          return px;
-        }
-        static getClass(fullTypeName, assemblyName) {
-          const n = fullTypeName + ";" + assemblyName;
-          const cx = XNode.classes[n] || (XNode.classes[n] = bridge.getClass(fullTypeName, assemblyName, RootObject, (name, isProperty, isTemplate) => (a, ...nodes) => new XNode(name, a, nodes, isProperty, isTemplate)));
-          return cx;
-        }
-        static namespace(ns, assemblyName) {
-          return (type, isTemplate) => {
-            return c => {
-              for (const key in c) {
-                if (c.hasOwnProperty(key)) {
-                  const element = c[key];
-                  if (element) {
-                    const n = ns + "." + type + ":" + key + ";" + assemblyName;
-                    const af = a => {
-                      const r = {
-                        [n]: a
-                      };
-                      Object.defineProperty(r, "toString", {
-                        value: () => n,
-                        enumerable: false,
-                        configurable: false
-                      });
-                      return r;
-                    };
-                    af.factory = (a, ...nodes) => new XNode(n, a, nodes, true, element.isTemplate);
-                    af.toString = () => n;
-                    c[key] = af;
-                  }
-                }
-              }
-              const tn = ns + "." + type + ";" + assemblyName;
-              c.factory = (a, ...nodes) => {
-                return new XNode(tn, a, nodes, false, isTemplate);
-              };
-              c.toString = () => tn;
-            };
-          };
-        }
-        static create(name, attributes, ...children) {
-          if (typeof name === "string") {
-            return new XNode(name, attributes, children);
-          }
-          if (name[isFactorySymbol]) {
-            return new XNode(name, attributes, children);
-          }
-          if (name.factory) {
-            return name.factory(attributes, ...children);
-          }
-          switch (typeof name) {
-            case "object":
-              name = name.toString();
-              break;
-            case "function":
-              return name(attributes || {}, ...children);
-          }
-          return new XNode(name, attributes, children);
-        }
-        constructor(name, attributes, children, isProperty, isTemplate) {
-          this.name = name;
-          this.attributes = attributes;
-          this.children = children;
-          this.isProperty = isProperty;
-          this.isTemplate = isTemplate;
-          this[xnodeSymbol] = true;
-        }
-        toString() {
-          if (typeof this.name === "string") {
-            return `name is of type string and value is ${this.name}`;
-          }
-          return `name is of type ${typeof this.name}`;
-        }
-      });
-      XNode.isFactory = isFactorySymbol;
-      XNode.elementFactory = elementFactorySymbol;
-      XNode.bindSymbol = bindSymbol;
-      XNode.isTemplate = isTemplateSymbol;
-      XNode.prepareAttached = attach;
-      XNode.constructorNeedsArguments = constructorNeedsArgumentsSymbol;
-      XNode.classes = {};
-      XNode.factory = (name, isProperty, isTemplate) => (a, ...nodes) => {
-        return new XNode(name, a, nodes, isProperty, isTemplate);
-      };
-      if (typeof bridge !== "undefined") {
-        bridge.XNode = XNode;
-      }
-    }
-  };
-});
-//# sourceMappingURL=XNode.js.map
-
-    AmdLoader.instance.setup("@web-atoms/core/dist/core/XNode");
-
-System.register([], function (_export, _context) {
-  "use strict";
-
-  function Pack(...a) {}
-  _export("default", Pack);
-  return {
-    setters: [],
-    execute: function () {}
-  };
-});
-//# sourceMappingURL=Pack.js.map
-
-    AmdLoader.instance.setup("@web-atoms/core/dist/Pack");
-
-System.register([], function (_export, _context) {
-  "use strict";
-
-  var StyleFragment, id, nextId, first, addMarker, globalLow, global, globalHigh, localLow, local, localHigh, styles, styled, svgAsCssDataUrl;
-  function* divide(text) {
-    const regex = /^(([^\{\n]+\{[\t\x20]*)|([^\n\}]*\}[^\S\n\r]*))$/gm;
-    let m;
-    let sentOnce = false;
-    let lastIndex = 0;
-    let lastMatch;
-    while ((m = regex.exec(text)) !== null) {
-      if (m.index === regex.lastIndex) {
-        regex.lastIndex++;
-      }
-      const match = m[0];
-      if (!sentOnce) {
-        sentOnce = true;
-        yield text.substring(lastIndex, m.index);
-        lastIndex = m.index + match.length;
-        lastMatch = match;
-        continue;
-      }
-      if (lastMatch.includes("}")) {
-        yield [lastMatch.trim()];
-        lastIndex = m.index + match.length;
-        lastMatch = match;
-        continue;
-      }
-      yield [lastMatch, text.substring(lastIndex, m.index), match];
-      lastIndex = m.index + match.length;
-      lastMatch = match;
-    }
-    if (lastMatch === null || lastMatch === void 0 ? void 0 : lastMatch.includes("}")) {
-      yield [lastMatch.trim()];
-    }
-  }
-  return {
-    setters: [],
-    execute: function () {
-      ;
-      id = 1;
-      nextId = () => `styled-r${id++}`;
-      first = document.head.firstElementChild;
-      addMarker = name => {
-        const m = document.createElement("meta");
-        m.name = name;
-        if (first) {
-          first.insertAdjacentElement("afterend", m);
-        } else {
-          document.head.insertAdjacentElement("afterbegin", m);
-        }
-        first = m;
-        return m;
-      };
-      globalLow = addMarker("global-low-style");
-      global = addMarker("global-style");
-      globalHigh = addMarker("global-high-style");
-      localLow = addMarker("local-low-style");
-      local = addMarker("local-style");
-      localHigh = addMarker("local-high-style");
-      StyleFragment = class StyleFragment {
-        static newStyle({
-          selector = "",
-          content = ""
-        }) {
-          return new StyleFragment({
-            selector,
-            content
-          });
-        }
-        constructor({
-          selector,
-          content
-        }) {
-          this.order = "low";
-          this.selector = selector;
-          this.content = content;
+        constructor({
+          selector,
+          content
+        }) {
+          this.order = "low";
+          this.selector = selector;
+          this.content = content;
         }
         expand(selector) {
           selector !== null && selector !== void 0 ? selector : selector = this.selector;
@@ -4144,223 +3924,837 @@ System.register([], function (_export, _context) {
 
     AmdLoader.instance.setup("@web-atoms/core/dist/style/styled");
 
-System.register(["./types"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
 
-  var ArrayHelper, AtomBinder, symbolHandlers, symbolBindable;
-  _export("AtomBinder", void 0);
+  var styled;
   return {
-    setters: [function (_types) {
-      ArrayHelper = _types.ArrayHelper;
+    setters: [function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
     }],
     execute: function () {
-      _export("symbolHandlers", symbolHandlers = Symbol.for("handlers"));
-      _export("symbolBindable", symbolBindable = Symbol.for("bindable"));
-      _export("AtomBinder", AtomBinder = class AtomBinder {
-        static refreshValue(target, key) {
-          const handlers = AtomBinder.get_WatchHandler(target, key);
-          if (handlers === undefined || handlers == null) {
-            return;
-          }
-          for (const item of handlers) {
-            item(target, key);
-          }
-          if (target.onPropertyChanged) {
-            target.onPropertyChanged(key);
-          }
+      styled.css`
+
+    div[data-desktop-app=desktop-app] {
+        width: 100%;
+    }
+
+    /* div[data-base-page=base-page] {
+        & > [data-page-element=title] {
+            overflow-y: visible;
         }
-        static add_WatchHandler(target, key, handler) {
-          if (target == null) {
-            return;
-          }
-          const handlers = AtomBinder.get_WatchHandler(target, key);
-          handlers.push(handler);
-          if (Array.isArray(target)) {
-            return;
-          }
-          const pv = AtomBinder.getPropertyDescriptor(target, key);
-          if (pv && pv.get) {
-            return;
-          }
-          const tw = target;
-          let bindables = tw[symbolBindable];
-          if (bindables === undefined) {
-            bindables = {};
-            Object.defineProperty(tw, symbolBindable, {
-              value: bindables,
-              enumerable: false,
-              writable: true,
-              configurable: true
-            });
+    } */
+
+`.withId("default-app-style").withOrder("medium").installGlobal();
+    }
+  };
+});
+//# sourceMappingURL=OverrideAppStyle.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/OverrideAppStyle");
+
+
+System.register([], function(_export, _context) {
+    return {
+        setters: [],
+        execute: function() {
+
+            // this is because in web atoms loader
+            // root url may not be set when the module is registered
+            setTimeout(() => {
+
+                const cssModule = _context.meta.resolve("./data-styles.css");
+                const cssURL = System.resolve(cssModule);
+
+                const link = document.createElement("link");
+                link.id = "data-styles";
+                link.setAttribute("href", cssURL);
+                link.setAttribute("rel", "stylesheet");
+                link.setAttribute("as", "style");
+                link.setAttribute("crossorigin", "anonymous");
+                const head = document.head;
+                const firstElementChild = head.firstElementChild;
+                if (firstElementChild) {
+                    head.insertBefore(link, firstElementChild);
+                } else {
+                    head.appendChild(link);
+                }
+            }, 1);
+        }
+    };
+});
+    
+
+    AmdLoader.instance.setup("@web-atoms/data-styles/data-styles");
+
+System.register(["@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/AtomList", "./OverrideAppStyle", "@web-atoms/core/dist/style/styled", "@web-atoms/data-styles/data-styles"], function (_export, _context) {
+  "use strict";
+
+  var UMD, styled, ___UMD;
+  function addLinkTag(href, integrity, rel = "stylesheet") {
+    if (!document.head.querySelector(`[href="${href}"]`)) {
+      const fa = document.createElement("link");
+      fa.href = href;
+      fa.crossOrigin = "anonymous";
+      fa.as = "style";
+      fa.rel = "preload";
+      if (integrity) {
+        fa.integrity = integrity;
+      }
+      fa.onload = () => {
+        fa.onload = null;
+        fa.rel = rel;
+      };
+      document.head.insertBefore(fa, document.head.firstElementChild);
+    }
+  }
+  return {
+    setters: [function (_webAtomsCoreDistCoreTypes) {
+      UMD = _webAtomsCoreDistCoreTypes.UMD;
+    }, function (_webAtomsCoreDistCoreAtomList) {}, function (_OverrideAppStyle) {}, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_webAtomsDataStylesDataStyles) {}],
+    execute: function () {
+      _export("___UMD", ___UMD = UMD);
+      addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
+      addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.2/css/all.min.css");
+      addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
+      addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");
+      styled.css`
+
+:root {
+    --primary-color: #294D4A;
+    --accent-color: #ff6733;
+    --accent2-color: #ff673375;
+    --lighter-accent-color: #e6e6fa60;
+    --light-accent-color: #f2e5fa;
+    --accent-text-color: white;
+    --background-color: #f1f1f160;  
+    --window-background: #50505025;  
+    --media-bg-color: #9F33FF0F;
+    --font-size-small: 0.8125em;
+
+    --hover-color: #b8b88b20;
+    --command-bg-color: #50505025;
+    --hover-text-color: CanvasText;
+    --selection-color: #b8b88b60;
+    --selection-text-color: CanvasText;
+    --spacing: 5px;
+    --spacing-medium: 7px;
+    --spacing-large: 10px;
+}
+
+html, body {
+    margin:0;
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--accent-color) white;
+}
+
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+::-webkit-scrollbar-track {
+    background: white;
+    border-radius: 20px;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--accent-color);
+    border-radius: 20px;
+}
+
+    body {
+    font-family: trebuchet ms, "Source Sans Pro";
+    font-size: 16px;
+    justify-content: stretch;
+
+    & * {
+        font-family: trebuchet ms, "Source Sans Pro";
+        box-sizing: border-box;
+    }
+
+    &::placeholder {
+        font-size: smaller;
+    }
+
+    & ul {
+        padding-inline-start: 15px;
+    }
+
+    & input[type=search] {
+        border: none;
+        outline: none;
+        border-radius: 9999px;
+        padding-right: 10px;
+        padding-left: 25px;
+        background: canvas url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 5px center;
+    }
+}
+
+`.withId("global-styles").withOrder("medium").installGlobal();
+    }
+  };
+});
+//# sourceMappingURL=GlobalStyle.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/GlobalStyle");
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  var viewModelParseWatchCache, viewModelParseWatchCache2;
+  function trimRegEx(t, r) {
+    const m = r.exec(t);
+    if (m && m.length) {
+      return [true, t.substring(m[0].length).trim(), m[0]];
+    }
+    return [false, t, ""];
+  }
+  function extractTill(text, search, returnOriginal = false) {
+    const index = text.indexOf(search);
+    if (index <= 0) {
+      return returnOriginal ? text : "";
+    }
+    return text.substring(0, index);
+  }
+  function parsePath(f, parseThis) {
+    let str = f.toString().trim();
+    str = str.split("\n").filter(s => !/^\/\//.test(s.trim())).join("\n");
+    const key = (parseThis === undefined ? "un:" : parseThis ? "_this:" : "_noThis:") + str;
+    const px1 = viewModelParseWatchCache[key];
+    if (px1) {
+      return px1;
+    }
+    if (str.endsWith("}")) {
+      str = str.substr(0, str.length - 1);
+    }
+    const functionRegEx = /^\w+\s*\(/;
+    const lambdaRegEx = /^\(?(\w+)?(\s?\,\s?\w+)*\)?\s?\=\>/;
+    let arg = "";
+    const original = str;
+    let [success, remaining] = trimRegEx(str, functionRegEx);
+    if (success) {
+      str = remaining;
+      remaining = extractTill(remaining, ")");
+      str = str.substring(remaining.length);
+      arg = extractTill(remaining, ",", true);
+    } else {
+      [success, str, remaining] = trimRegEx(str, lambdaRegEx);
+      if (success) {
+        remaining = remaining.trim();
+        remaining = remaining.substring(0, remaining.length - 2);
+        remaining = extractTill(remaining, ")", true);
+        arg = extractTill(remaining, ",", true);
+        if (arg.startsWith("(")) {
+          arg = arg.substring(1);
+        }
+      } else {
+        if (parseThis !== undefined && parseThis === false) {
+          return [];
+        } else {
+          parseThis = true;
+        }
+      }
+    }
+    str = str.trim();
+    const isThis = parseThis === undefined ? (arg ? false : true) || parseThis : parseThis;
+    const p = (isThis ? "(\\_this|this)" : arg || "").trim();
+    if (p.length === 0) {
+      const empty = [];
+      viewModelParseWatchCache[key] = empty;
+      return empty;
+    }
+    const regExp = `(?:(\\b${p})(?:(\\.[a-zA-Z_][a-zA-Z_0-9]*)+)\\s?(?:(\\(|\\=\\=\\=|\\=\\=|\\=)?))`;
+    const re = new RegExp(regExp, "gi");
+    let path = [];
+    const ms = str.replace(re, m => {
+      let px = m;
+      if (px.startsWith("this.")) {
+        if (parseThis !== true) {
+          px = px.substr(5);
+        }
+      } else if (px.startsWith("_this.")) {
+        if (parseThis !== true) {
+          px = px.substr(6);
+        } else {
+          px = px.substr(1);
+        }
+      } else {
+        px = px.substr(p.length + 1);
+      }
+      px = px.split(".").filter(s => !s.endsWith("(")).join(".");
+      if (!path.find(y => y === px)) {
+        path.push(px);
+      }
+      const filtered = [];
+      for (const iterator of path) {
+        if (iterator.endsWith("==") || !(iterator.endsWith("(") || iterator.endsWith("="))) {
+          filtered.push((iterator.endsWith("===") ? iterator.substr(0, iterator.length - 3) : iterator.endsWith("==") ? iterator.substr(0, iterator.length - 2) : iterator).trim());
+        }
+      }
+      path = filtered.filter(px11 => {
+        const search = px11 + ".";
+        for (const iterator of filtered) {
+          if (px11 !== iterator && iterator.indexOf(search) !== -1) {
+            return false;
           }
-          if (!bindables[key]) {
-            bindables[key] = 1;
-            const o = target[key];
-            const nk = Symbol.for(key);
-            target[nk] = o;
-            const set = function (v) {
-              const ov = this[nk];
-              if (ov === undefined ? ov === v : ov == v) {
+        }
+        return true;
+      });
+      return m;
+    });
+    path = path.sort((a, b) => b.localeCompare(a));
+    const duplicates = path;
+    path = [];
+    for (const iterator of duplicates) {
+      if (path.find(px2 => px2 === iterator)) {
+        continue;
+      }
+      path.push(iterator);
+    }
+    const rp = [];
+    for (const rpItem of path) {
+      if (rp.find(x => x.startsWith(rpItem))) {
+        continue;
+      }
+      rp.push(rpItem);
+    }
+    const pl = path.filter(p1 => p1).map(p1 => p1.split("."));
+    viewModelParseWatchCache[key] = pl;
+    return pl;
+  }
+  function parsePathLists(f) {
+    const str = f.toString().trim();
+    const key = str;
+    const px1 = viewModelParseWatchCache2[key];
+    if (px1) {
+      return px1;
+    }
+    const pl = {
+      pathList: parsePath(str, false),
+      thisPath: parsePath(str, true),
+      combined: []
+    };
+    if (pl.thisPath.length && pl.pathList.length) {
+      pl.combined = pl.thisPath.map(x => {
+        x[0] = "t";
+        x.splice(0, 0, "this");
+        return x;
+      }).concat(pl.pathList.map(x => {
+        x.splice(0, 0, "this", "x");
+        return x;
+      }));
+      pl.thisPath = [];
+      pl.pathList = [];
+    }
+    viewModelParseWatchCache2[key] = pl;
+    return pl;
+  }
+  _export({
+    parsePath: parsePath,
+    parsePathLists: parsePathLists
+  });
+  return {
+    setters: [],
+    execute: function () {
+      viewModelParseWatchCache = {};
+      viewModelParseWatchCache2 = {};
+    }
+  };
+});
+//# sourceMappingURL=ExpressionParser.js.map
+
+    AmdLoader.instance.setup("@web-atoms/core/dist/core/ExpressionParser");
+
+System.register(["tslib", "./ExpressionParser", "./types"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, parsePath, parsePathLists, CancelToken, ignoreValue, Bind, isEvent, bindSymbol;
+  function twoWaysConvert(name, b, control, e, creator) {
+    control.bind(e, name, b.thisPathList || b.pathList, b.eventList || true, null, b.thisPathList ? creator : undefined);
+  }
+  _export("default", void 0);
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+    }, function (_ExpressionParser) {
+      parsePath = _ExpressionParser.parsePath;
+      parsePathLists = _ExpressionParser.parsePathLists;
+    }, function (_types) {
+      CancelToken = _types.CancelToken;
+      ignoreValue = _types.ignoreValue;
+    }],
+    execute: function () {
+      isEvent = /^event/i;
+      _export("bindSymbol", bindSymbol = Symbol("Bind"));
+      _export("default", Bind = class Bind {
+        static forControl() {
+          return Bind;
+        }
+        static forData() {
+          return Bind;
+        }
+        static forViewModel() {
+          return Bind;
+        }
+        static forLocalViewModel() {
+          return Bind;
+        }
+        static presenter(name) {
+          return {
+            [bindSymbol](cn, control, e, creator) {
+              if (typeof name === "function") {
+                name(control);
                 return;
               }
-              this[nk] = v;
-              AtomBinder.refreshValue(this, key);
-            };
-            const get = function () {
-              return this[nk];
-            };
-            if (pv) {
-              delete target[key];
-              Object.defineProperty(target, key, {
-                get,
-                set,
-                configurable: true,
-                enumerable: true
+              const n = name || cn;
+              let c = control.element;
+              while (c) {
+                if (c.atomControl && c.atomControl[n] !== undefined) {
+                  break;
+                }
+                c = c._logicalParent || c.parentElement;
+              }
+              (c && c.atomControl || control)[n] = e;
+            }
+          };
+        }
+        static event(sourcePath) {
+          return {
+            [bindSymbol](name, control, e) {
+              control.runAfterInit(() => {
+                if (isEvent.test(name)) {
+                  name = name.substring(5);
+                  if (name.startsWith("-")) {
+                    name = name.substring(1).replace(/-([a-z])/g, g => g[1].toUpperCase());
+                  } else {
+                    name = name[0].toLowerCase() + name.substring(1);
+                  }
+                }
+                control.bindEvent(e, name, e1 => {
+                  return sourcePath(control, e1);
+                });
               });
-            } else {
-              Object.defineProperty(target, key, {
-                get,
-                set,
-                enumerable: true,
-                configurable: true
+            }
+          };
+        }
+        static oneTime(sourcePath, now) {
+          return {
+            [bindSymbol](name, control, e) {
+              control.runAfterInit(() => {
+                control.setLocalValue(e, name, sourcePath(control, e));
               });
+              if (typeof now !== "undefined") {
+                control.setLocalValue(e, name, now);
+              }
             }
-          }
+          };
         }
-        static getPropertyDescriptor(target, key) {
-          const pv = Object.getOwnPropertyDescriptor(target, key);
-          if (!pv) {
-            const pt = Object.getPrototypeOf(target);
-            if (pt) {
-              return AtomBinder.getPropertyDescriptor(pt, key);
+        static oneTimeAsync(sourcePath, now) {
+          return {
+            [bindSymbol](name, control, e) {
+              control.runAfterInit(() => {
+                control.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+                  const value = yield sourcePath(control, e, new CancelToken());
+                  control.setLocalValue(e, name, value);
+                }));
+              });
+              if (typeof now !== "undefined") {
+                control.setLocalValue(e, name, now);
+              }
             }
-          }
-          return pv;
+          };
         }
-        static get_WatchHandler(target, key) {
-          if (target == null) {
-            return null;
-          }
-          let handlers = target[symbolHandlers];
-          if (handlers === undefined) {
-            handlers = {};
-            Object.defineProperty(target, symbolHandlers, {
-              value: handlers,
-              enumerable: false,
-              writable: true,
-              configurable: true
-            });
+        static source(source, path, now) {
+          const lists = parsePath(path, false).map(x => ["this", ...x]);
+          return {
+            [bindSymbol](name, control, e, creator) {
+              const self = {
+                control,
+                source
+              };
+              control.bind(e, name, lists, false, () => {
+                return path.call(self, self);
+              }, self);
+              if (typeof now !== "undefined") {
+                control.setLocalValue(e, name, now);
+              }
+            }
+          };
+        }
+        static oneWayAsync(sourcePath, {
+          watchDelayInMS = 250,
+          default: defaultValue
+        } = {}) {
+          let pathList;
+          let combined;
+          let thisPathList;
+          if (Array.isArray(sourcePath)) {
+            pathList = sourcePath;
+          } else {
+            const lists = parsePathLists(sourcePath);
+            if (lists.combined.length) {
+              combined = lists.combined;
+            }
+            if (lists.pathList.length) {
+              pathList = lists.pathList;
+            }
+            if (lists.thisPath.length) {
+              thisPathList = lists.thisPath;
+            }
           }
-          let handlersForKey = handlers[key];
-          if (handlersForKey === undefined || handlersForKey == null) {
-            handlersForKey = [];
-            handlers[key] = handlersForKey;
+          if (!(combined || pathList || thisPathList)) {
+            throw new Error(`Failed to setup binding for ${sourcePath}, parsing failed`);
           }
-          return handlersForKey;
+          return {
+            [bindSymbol](name, control, e, creator) {
+              let bindingSource;
+              let finalPathList = pathList;
+              if (combined) {
+                bindingSource = {
+                  t: creator,
+                  x: control
+                };
+                finalPathList = combined;
+              } else if (thisPathList) {
+                finalPathList = thisPathList;
+                bindingSource = creator;
+              }
+              const asyncState = {
+                token: 0,
+                cancelToken: undefined
+              };
+              control.bind(e, name, finalPathList, false, () => {
+                var _a;
+                const app = control.app;
+                (_a = asyncState.cancelToken) === null || _a === void 0 ? void 0 : _a.cancel();
+                asyncState.cancelToken = undefined;
+                asyncState.token = app.setTimeoutAsync(() => __awaiter(this, void 0, void 0, function* () {
+                  var _b, _c;
+                  if ((_b = asyncState.cancelToken) === null || _b === void 0 ? void 0 : _b.cancelled) {
+                    return;
+                  }
+                  asyncState.token = undefined;
+                  (_c = asyncState.cancelToken) === null || _c === void 0 ? void 0 : _c.cancel();
+                  const ct = asyncState.cancelToken = new CancelToken();
+                  const value = yield sourcePath.call(creator, control, e, ct);
+                  if (!ct.cancelled) {
+                    control.setLocalValue(e, name, value);
+                  }
+                }), watchDelayInMS, asyncState.token);
+                return ignoreValue;
+              }, bindingSource);
+              if (typeof defaultValue !== "undefined") {
+                control.setLocalValue(e, name, defaultValue);
+              }
+            }
+          };
         }
-        static remove_WatchHandler(target, key, handler) {
-          if (target == null) {
-            return;
+        static oneWay(sourcePath, now) {
+          let pathList;
+          let combined;
+          let thisPathList;
+          if (Array.isArray(sourcePath)) {
+            pathList = sourcePath;
+          } else {
+            const lists = parsePathLists(sourcePath);
+            if (lists.combined.length) {
+              combined = lists.combined;
+            }
+            if (lists.pathList.length) {
+              pathList = lists.pathList;
+            }
+            if (lists.thisPath.length) {
+              thisPathList = lists.thisPath;
+            }
           }
-          const handlers = target[symbolHandlers];
-          if (typeof handlers === "undefined") {
-            return;
+          if (!(combined || pathList || thisPathList)) {
+            throw new Error(`Failed to setup binding for ${sourcePath}, parsing failed`);
           }
-          const handlersForKey = target[symbolHandlers][key];
-          if (handlersForKey === undefined || handlersForKey == null) {
-            return;
+          return {
+            [bindSymbol](name, control, e, creator) {
+              if (pathList) {
+                control.bind(e, name, pathList, false, () => {
+                  return sourcePath.call(creator, control, e);
+                });
+                if (typeof now !== "undefined") {
+                  control.setLocalValue(e, name, now);
+                }
+                return;
+              }
+              if (combined) {
+                const a = {
+                  t: creator,
+                  x: control
+                };
+                control.bind(e, name, combined, false, () => {
+                  return sourcePath.call(creator, control, e);
+                }, a);
+                if (typeof now !== "undefined") {
+                  control.setLocalValue(e, name, now);
+                }
+                return;
+              }
+              control.bind(e, name, thisPathList, false, () => {
+                return sourcePath.call(creator, control, e);
+              }, creator);
+              if (typeof now !== "undefined") {
+                control.setLocalValue(e, name, now);
+              }
+            }
+          };
+        }
+        static twoWays(sourcePath, events, converter) {
+          let pathList;
+          let thisPathList;
+          if (Array.isArray(sourcePath)) {
+            pathList = sourcePath;
+          } else {
+            const lists = parsePathLists(sourcePath);
+            if (lists.combined.length) {
+              throw new Error("Cannot have combined binding for two ways");
+            }
+            if (lists.pathList.length) {
+              pathList = lists.pathList;
+            }
+            if (lists.thisPath.length) {
+              thisPathList = lists.thisPath;
+            }
           }
-          ArrayHelper.remove(handlersForKey, f => f === handler);
-          if (!handlersForKey.length) {
-            handlers[key] = null;
-            delete handlers[key];
+          if (!(thisPathList || pathList)) {
+            throw new Error(`Failed to setup twoWay binding on ${sourcePath}`);
           }
+          return {
+            [bindSymbol](name, control, e, creator) {
+              control.bind(e, name, thisPathList || pathList, events || true, converter, thisPathList ? creator : undefined);
+            }
+          };
         }
-        static invokeItemsEvent(target, mode, index, item, oldItem) {
-          const key = "_items";
-          const handlers = AtomBinder.get_WatchHandler(target, key);
-          if (!handlers) {
+        static sourceTwoWays(source, path, events = ["input", "cut", "paste", "change"]) {
+          const lists = parsePath(path, false).map(x => ["this", ...x]);
+          return {
+            [bindSymbol](name, control, e, creator) {
+              const self = {
+                control,
+                source
+              };
+              control.bind(e, name, lists, events, lists, self);
+            }
+          };
+        }
+        static twoWaysImmediate(sourcePath, converter) {
+          return this.twoWays(sourcePath, ["change", "input", "paste", "cut"], converter);
+        }
+        constructor(setupFunction, sourcePath, name, eventList) {
+          this.setupFunction = setupFunction;
+          this.name = name;
+          this.eventList = eventList;
+          this.sourcePath = sourcePath;
+          this[bindSymbol] = true;
+          if (!this.sourcePath) {
             return;
           }
-          for (const obj of handlers) {
-            obj(target, mode, index, item, oldItem);
+          if (Array.isArray(this.sourcePath)) {
+            this.pathList = this.sourcePath;
+          } else {
+            const lists = parsePathLists(this.sourcePath);
+            if (lists.combined.length) {
+              this.combined = lists.combined;
+            }
+            if (lists.pathList.length) {
+              this.pathList = lists.pathList;
+            }
+            if (lists.thisPath.length) {
+              this.thisPathList = lists.thisPath;
+            }
           }
-          AtomBinder.refreshValue(target, "length");
         }
-        static refreshItems(ary) {
-          AtomBinder.invokeItemsEvent(ary, "refresh", -1, null);
+      });
+    }
+  };
+});
+//# sourceMappingURL=Bind.js.map
+
+    AmdLoader.instance.setup("@web-atoms/core/dist/core/Bind");
+
+System.register(["./Bind"], function (_export, _context) {
+  "use strict";
+
+  var bindSymbol, RootObject, XNode, xnodeSymbol, isControl, elementFactorySymbol, isFactorySymbol, attachedSymbol, isTemplateSymbol, constructorNeedsArgumentsSymbol, attachedProperties, attachedId, attach;
+  _export({
+    RootObject: void 0,
+    default: void 0
+  });
+  return {
+    setters: [function (_Bind) {
+      bindSymbol = _Bind.bindSymbol;
+    }],
+    execute: function () {
+      _export("RootObject", RootObject = class RootObject {
+        get vsProps() {
+          return undefined;
         }
-        static add_CollectionChanged(target, handler) {
-          if (target == null) {
-            throw new Error("Target Array to watch cannot be null");
-          }
-          if (handler == null) {
-            throw new Error("Target handle to watch an Array cannot be null");
-          }
-          const handlers = AtomBinder.get_WatchHandler(target, "_items");
-          handlers.push(handler);
+        addEventListener(name, handler) {
+          return bridge.addEventHandler(this, name, handler);
+        }
+        appendChild(e) {
+          bridge.appendChild(this, e);
+        }
+        dispatchEvent(evt) {
+          bridge.dispatchEvent(evt);
+        }
+      });
+      _export("xnodeSymbol", xnodeSymbol = Symbol("XNode"));
+      _export("isControl", isControl = Symbol("isControl"));
+      _export("elementFactorySymbol", elementFactorySymbol = Symbol("elementFactory"));
+      _export("isFactorySymbol", isFactorySymbol = Symbol("isFactory"));
+      _export("attachedSymbol", attachedSymbol = Symbol("attached"));
+      _export("isTemplateSymbol", isTemplateSymbol = Symbol("isTemplate"));
+      _export("constructorNeedsArgumentsSymbol", constructorNeedsArgumentsSymbol = Symbol("constructorNeedsArguments"));
+      _export("attachedProperties", attachedProperties = {});
+      attachedId = 1;
+      attach = (name, attacher) => {
+        const key = `:${attachedId++}`;
+        const fx = v => {
           return {
-            dispose: () => {
-              AtomBinder.remove_CollectionChanged(target, handler);
-            }
+            [key]: v
+          };
+        };
+        attachedProperties[key] = attacher;
+        fx[attachedSymbol] = attacher;
+        fx[isFactorySymbol] = key;
+        return fx;
+      };
+      _export("default", XNode = class XNode {
+        static attach(n, tag) {
+          return {
+            factory: (attributes, ...nodes) => new XNode(n, attributes ? Object.assign(Object.assign({}, attributes), {
+              for: tag
+            }) : {
+              for: tag
+            }, nodes)
           };
         }
-        static remove_CollectionChanged(t, handler) {
-          if (t == null) {
-            return;
-          }
-          const target = t;
-          const handlers = target[symbolHandlers];
-          if (typeof handlers === "undefined") {
-            return;
-          }
-          const key = "_items";
-          const handlersForKey = handlers[key];
-          if (handlersForKey === undefined || handlersForKey == null) {
-            return;
-          }
-          ArrayHelper.remove(handlersForKey, f => f === handler);
-          if (!handlersForKey.length) {
-            handlers[key] = null;
-            delete handlers[key];
+        static prepare(n, isProperty, isTemplate) {
+          function px(v) {
+            return {
+              [n]: v
+            };
           }
+          px.factory = (a, ...nodes) => {
+            return new XNode(n, a, nodes, isProperty, isTemplate);
+          };
+          px.toString = () => n;
+          return px;
         }
-        static watch(item, property, f) {
-          AtomBinder.add_WatchHandler(item, property, f);
-          return {
-            dispose: () => {
-              AtomBinder.remove_WatchHandler(item, property, f);
-            }
+        static getClass(fullTypeName, assemblyName) {
+          const n = fullTypeName + ";" + assemblyName;
+          const cx = XNode.classes[n] || (XNode.classes[n] = bridge.getClass(fullTypeName, assemblyName, RootObject, (name, isProperty, isTemplate) => (a, ...nodes) => new XNode(name, a, nodes, isProperty, isTemplate)));
+          return cx;
+        }
+        static namespace(ns, assemblyName) {
+          return (type, isTemplate) => {
+            return c => {
+              for (const key in c) {
+                if (c.hasOwnProperty(key)) {
+                  const element = c[key];
+                  if (element) {
+                    const n = ns + "." + type + ":" + key + ";" + assemblyName;
+                    const af = a => {
+                      const r = {
+                        [n]: a
+                      };
+                      Object.defineProperty(r, "toString", {
+                        value: () => n,
+                        enumerable: false,
+                        configurable: false
+                      });
+                      return r;
+                    };
+                    af.factory = (a, ...nodes) => new XNode(n, a, nodes, true, element.isTemplate);
+                    af.toString = () => n;
+                    c[key] = af;
+                  }
+                }
+              }
+              const tn = ns + "." + type + ";" + assemblyName;
+              c.factory = (a, ...nodes) => {
+                return new XNode(tn, a, nodes, false, isTemplate);
+              };
+              c.toString = () => tn;
+            };
           };
         }
-        static clear(a) {
-          a.length = 0;
-          this.invokeItemsEvent(a, "refresh", -1, null);
-          AtomBinder.refreshValue(a, "length");
+        static create(name, attributes, ...children) {
+          if (typeof name === "string") {
+            return new XNode(name, attributes, children);
+          }
+          if (name[isFactorySymbol]) {
+            return new XNode(name, attributes, children);
+          }
+          if (name.factory) {
+            return name.factory(attributes, ...children);
+          }
+          switch (typeof name) {
+            case "object":
+              name = name.toString();
+              break;
+            case "function":
+              return name(attributes || {}, ...children);
+          }
+          return new XNode(name, attributes, children);
         }
-        static addItem(a, item) {
-          const index = a.length;
-          a.push(item);
-          this.invokeItemsEvent(a, "add", index, item);
-          AtomBinder.refreshValue(a, "length");
+        constructor(name, attributes, children, isProperty, isTemplate) {
+          this.name = name;
+          this.attributes = attributes;
+          this.children = children;
+          this.isProperty = isProperty;
+          this.isTemplate = isTemplate;
+          this[xnodeSymbol] = true;
         }
-        static removeItem(a, item) {
-          const i = a.findIndex(x => x === item);
-          if (i === -1) {
-            return false;
+        toString() {
+          if (typeof this.name === "string") {
+            return `name is of type string and value is ${this.name}`;
           }
-          a.splice(i, 1);
-          AtomBinder.invokeItemsEvent(a, "remove", i, item);
-          AtomBinder.refreshValue(a, "length");
-          return true;
+          return `name is of type ${typeof this.name}`;
         }
       });
+      XNode.isFactory = isFactorySymbol;
+      XNode.elementFactory = elementFactorySymbol;
+      XNode.bindSymbol = bindSymbol;
+      XNode.isTemplate = isTemplateSymbol;
+      XNode.prepareAttached = attach;
+      XNode.constructorNeedsArguments = constructorNeedsArgumentsSymbol;
+      XNode.classes = {};
+      XNode.factory = (name, isProperty, isTemplate) => (a, ...nodes) => {
+        return new XNode(name, a, nodes, isProperty, isTemplate);
+      };
+      if (typeof bridge !== "undefined") {
+        bridge.XNode = XNode;
+      }
     }
   };
 });
-//# sourceMappingURL=AtomBinder.js.map
+//# sourceMappingURL=XNode.js.map
 
-    AmdLoader.instance.setup("@web-atoms/core/dist/core/AtomBinder");
+    AmdLoader.instance.setup("@web-atoms/core/dist/core/XNode");
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  function Pack(...a) {}
+  _export("default", Pack);
+  return {
+    setters: [],
+    execute: function () {}
+  };
+});
+//# sourceMappingURL=Pack.js.map
+
+    AmdLoader.instance.setup("@web-atoms/core/dist/Pack");
 
 System.register([], function (_export, _context) {
   "use strict";
@@ -8980,7 +9374,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/AtomBinder", "@web-atoms/co
 
     AmdLoader.instance.setup("@web-atoms/web-controls/dist/player/AtomVideoPlayer");
 
-System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/Pack", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/web-controls/dist/player/AtomVideoPlayer"], function (_export, _context) {
+System.register(["tslib", "../../../style/GlobalStyle", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/Pack", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/web-controls/dist/player/AtomVideoPlayer"], function (_export, _context) {
   "use strict";
 
   var __awaiter, __decorate, __metadata, XNode, Pack, styled, AtomControl, AtomVideoPlayer, fileInfo, PreviewVideo;
@@ -8989,7 +9383,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       __awaiter = _tslib.__awaiter;
       __decorate = _tslib.__decorate;
       __metadata = _tslib.__metadata;
-    }, function (_webAtomsCoreDistCoreXNode) {
+    }, function (_styleGlobalStyle) {}, function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_webAtomsCoreDistPack) {
       Pack = _webAtomsCoreDistPack.default;
@@ -9003,24 +9397,33 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
     execute: function () {
       styled.css`
 
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto;
+    & [data-preview-video] {
 
-    align-items: stretch;
-    justify-content: stretch;
-    justify-items: stretch;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
 
-    & [video-player] {
-        grid-row: 1;
-    }
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr auto;
 
-    & > footer {
-        grid-row: 2;
+        align-items: stretch;
+        justify-content: stretch;
+        justify-items: stretch;
+
+        & [video-player] {
+            grid-row: 1;
+        }
+
+        & > footer {
+            grid-row: 2;
+        }
     }
     
 
-    `.installGlobal("[data-preview-video]");
+    `.installGlobal("body");
       fileInfo = window.fileInfo;
       if (!fileInfo) {
         fileInfo = window.fileInfo = {};
@@ -9032,6 +9435,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       PreviewVideo = class PreviewVideo extends AtomControl {
         constructor(app, e) {
           super(app, e);
+          this.element.setAttribute("data-preview-video", "preview-video");
           this.pushInit();
         }
         init() {