@web-atoms/core 2.1.369 → 2.1.370

package/dist/web/controls/AtomControl.sys.js

@@ -1,667 +0,0 @@
-System.register(["../../core/AtomBinder", "../../core/AtomBridge", "../../core/AtomComponent", "../../core/BindableProperty", "../../core/FormattedString", "../../core/WebImage", "../../core/XNode", "../../di/TypeKey", "../styles/AtomStyle", "../styles/AtomStyleSheet"], function (_export, _context) {
-  "use strict";
-
-  var AtomBinder, AtomBridge, AtomComponent, BindableProperty, FormattedString, WebImage, XNode, isControl, TypeKey, AtomStyle, AtomStyleSheet, AtomControl, __decorate, __metadata, isAtomControl, fromHyphenToCamel, bridgeInstance, defaultStyleSheets, ElementValueSetters, propertyId;
-
-  function setAttribute(name) {
-    return (ctrl, e, value) => {
-      e.setAttribute(name, value);
-    };
-  }
-
-  function setEvent(name) {
-    return (ctrl, e, value) => {
-      ctrl.bindEvent(e, name, value);
-    };
-  }
-
-  function setStyle(name, applyUnit) {
-    if (applyUnit) {
-      return (ctrl, e, value) => {
-        if (typeof value === "number") {
-          e.style[name] = value + applyUnit;
-          return;
-        }
-
-        e.style[name] = value;
-      };
-    }
-
-    return (ctrl, e, value) => {
-      e.style[name] = value;
-    };
-  }
-
-  function disposeChildren(owner, e) {
-    if (!e) {
-      return;
-    }
-
-    let s = e.firstElementChild;
-
-    while (s) {
-      const c = s;
-      s = s.nextElementSibling;
-      const ac = c.atomControl;
-
-      if (ac) {
-        ac.dispose();
-        c.remove();
-        continue;
-      }
-
-      disposeChildren(owner, c);
-      owner.unbind(c);
-      owner.unbindEvent(c);
-      c.remove();
-    }
-  }
-
-  _export("AtomControl", void 0);
-
-  return {
-    setters: [function (_coreAtomBinder) {
-      AtomBinder = _coreAtomBinder.AtomBinder;
-    }, function (_coreAtomBridge) {
-      AtomBridge = _coreAtomBridge.AtomBridge;
-    }, function (_coreAtomComponent) {
-      AtomComponent = _coreAtomComponent.AtomComponent;
-    }, function (_coreBindableProperty) {
-      BindableProperty = _coreBindableProperty.BindableProperty;
-    }, function (_coreFormattedString) {
-      FormattedString = _coreFormattedString.default;
-    }, function (_coreWebImage) {
-      WebImage = _coreWebImage.default;
-    }, function (_coreXNode) {
-      XNode = _coreXNode.default;
-      isControl = _coreXNode.isControl;
-    }, function (_diTypeKey) {
-      TypeKey = _diTypeKey.TypeKey;
-    }, function (_stylesAtomStyle) {
-      AtomStyle = _stylesAtomStyle.AtomStyle;
-    }, function (_stylesAtomStyleSheet) {
-      AtomStyleSheet = _stylesAtomStyleSheet.AtomStyleSheet;
-    }],
-    execute: function () {
-      __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
-        var c = arguments.length,
-            r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-            d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-      };
-
-      __metadata = void 0 && (void 0).__metadata || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-      };
-
-      isAtomControl = isControl;
-
-      fromHyphenToCamel = input => input.replace(/-([a-z])/g, g => g[1].toUpperCase());
-
-      if (typeof bridge !== "undefined" && bridge.platform) {
-        throw new Error("AtomControl of Web should not be used with Xamarin Forms");
-      }
-
-      bridgeInstance = AtomBridge.instance;
-      defaultStyleSheets = {};
-
-      _export("ElementValueSetters", ElementValueSetters = {
-        text(ctrl, e, value) {
-          e.textContent = value;
-        },
-
-        ["class"](ctrl, e, value) {
-          if (typeof value === "string") {
-            e.className = value;
-            return;
-          }
-
-          ctrl.setElementClass(e, value, true);
-        },
-
-        alt: setAttribute("alt"),
-        title: setAttribute("title"),
-        href: setAttribute("href"),
-        target: setAttribute("target"),
-        style: setAttribute("style"),
-        styleLeft: setStyle("left", "px"),
-        styleTop: setStyle("top", "px"),
-        styleBottom: setStyle("bottom", "px"),
-        styleRight: setStyle("right", "px"),
-        styleWidth: setStyle("width", "px"),
-        styleHeight: setStyle("height", "px"),
-        stylePosition: setStyle("position"),
-        styleFontSize: setStyle("fontSize", "px"),
-        styleFontFamily: setStyle("fontFamily"),
-        styleFontWeight: setStyle("fontWeight"),
-        styleBorder: setStyle("border"),
-        styleBorderWidth: setStyle("borderWidth", "px"),
-        styleBorderColor: setStyle("borderColor"),
-        styleColor: setStyle("color"),
-        styleBackgroundColor: setStyle("backgroundColor"),
-        dir: setAttribute("dir"),
-        name: setAttribute("name"),
-        tabIndex: setAttribute("tabIndex"),
-        contentEditable: setAttribute("contentEditable"),
-        eventClick: setEvent("click"),
-        eventKeydown: setEvent("keydown"),
-        eventKeyup: setEvent("keyup"),
-        eventKeypress: setEvent("keypress"),
-        eventMousedown: setEvent("mousedown"),
-        eventMouseup: setEvent("mouseup"),
-        eventMousemove: setEvent("mousemove"),
-
-        src(ctrl, e, value) {
-          if (value && /^http\:/i.test(value)) {
-            e.src = value.substring(5);
-            return;
-          }
-
-          e.src = value;
-        },
-
-        styleClass(ctrl, e, value) {
-          ctrl.setElementClass(e, value);
-        },
-
-        styleDisplay(ctrl, e, value) {
-          if (typeof value === "boolean") {
-            e.style.display = value ? "" : "none";
-            return;
-          }
-
-          e.style.display = value;
-        },
-
-        formattedText(ctrl, e, value) {
-          if (value instanceof FormattedString) {
-            value.applyTo(ctrl.app, e);
-          } else {
-            e.textContent = (value || "").toString();
-          }
-        },
-
-        disabled(ctrl, e, value) {
-          if (value) {
-            e.setAttribute("disabled", "");
-            return;
-          }
-
-          e.removeAttribute("disabled");
-        },
-
-        autofocus(ctrl, element, value) {
-          ctrl.app.callLater(() => {
-            const ie = element;
-
-            if (ie) {
-              ie.focus();
-            }
-          });
-        },
-
-        autocomplete(ctrl, element, value) {
-          ctrl.app.callLater(() => {
-            element.autocomplete = value;
-          });
-        },
-
-        onCreate(ctrl, element, value) {
-          value(ctrl, element);
-        },
-
-        watch(ctrl, element, value) {
-          setTimeout((c1, e1, v1) => {
-            e1.dispatchEvent(new CustomEvent("watch", {
-              bubbles: true,
-              cancelable: true,
-              detail: {
-                control: c1,
-                value: v1
-              }
-            }));
-          }, 1, ctrl, element, value);
-        }
-
-      });
-
-      ElementValueSetters["style-display"] = ElementValueSetters.styleDisplay;
-      ElementValueSetters["style-left"] = ElementValueSetters.styleLeft;
-      ElementValueSetters["style-top"] = ElementValueSetters.styleTop;
-      ElementValueSetters["style-bottom"] = ElementValueSetters.styleBottom;
-      ElementValueSetters["style-right"] = ElementValueSetters.styleRight;
-      ElementValueSetters["style-width"] = ElementValueSetters.styleWidth;
-      ElementValueSetters["style-height"] = ElementValueSetters.styleHeight;
-      ElementValueSetters["style-position"] = ElementValueSetters.stylePosition;
-      ElementValueSetters["style-font-size"] = ElementValueSetters.styleFontSize;
-      ElementValueSetters["style-font-family"] = ElementValueSetters.styleFontFamily;
-      ElementValueSetters["style-font-weight"] = ElementValueSetters.styleFontWeight;
-      ElementValueSetters["style-border"] = ElementValueSetters.styleBorder;
-      ElementValueSetters["style-border-width"] = ElementValueSetters.styleBorderWidth;
-      ElementValueSetters["style-border-color"] = ElementValueSetters.styleBorderColor;
-      ElementValueSetters["style-color"] = ElementValueSetters.styleColor;
-      ElementValueSetters["style-background-color"] = ElementValueSetters.styleBackgroundColor;
-      ElementValueSetters["on-create"] = ElementValueSetters.onCreate;
-      propertyId = 1;
-
-      _export("AtomControl", AtomControl = class AtomControl extends AtomComponent {
-        constructor(app, e) {
-          super(app, e || document.createElement("div"));
-        }
-
-        static registerProperty(attributeName, attributeValue, setter) {
-          const setterSymbol = `${attributeName}_${attributeValue}_${propertyId++}`;
-          ElementValueSetters[setterSymbol] = setter;
-
-          function setterFx(v) {
-            return {
-              [setterSymbol]: v
-            };
-          }
-
-          setterFx.toString = () => {
-            return setterSymbol;
-          };
-
-          return setterFx;
-        }
-
-        get controlStyle() {
-          if (this.mControlStyle === undefined) {
-            const key = TypeKey.get(this.defaultControlStyle || this.constructor);
-            this.mControlStyle = defaultStyleSheets[key];
-
-            if (this.mControlStyle) {
-              return this.mControlStyle;
-            }
-
-            if (this.defaultControlStyle) {
-              this.mControlStyle = defaultStyleSheets[key] || (defaultStyleSheets[key] = this.theme.createNamedStyle(this.defaultControlStyle, key));
-            }
-
-            this.mControlStyle = this.mControlStyle || null;
-          }
-
-          return this.mControlStyle;
-        }
-
-        set controlStyle(v) {
-          if (v instanceof AtomStyle) {
-            this.mControlStyle = v;
-          } else {
-            const key = TypeKey.get(v);
-            this.mControlStyle = defaultStyleSheets[key] || (defaultStyleSheets[key] = this.theme.createNamedStyle(v, key));
-          }
-
-          AtomBinder.refreshValue(this, "controlStyle");
-          this.invalidate();
-        }
-
-        get theme() {
-          return this.mTheme || this.mCachedTheme || (this.mCachedTheme = this.parent ? this.parent.theme : this.app.resolve(AtomStyleSheet, false, null));
-        }
-
-        set theme(v) {
-          this.mTheme = v;
-          bridgeInstance.refreshInherited(this, "theme");
-        }
-
-        get parent() {
-          let e = this.element._logicalParent || this.element.parentElement;
-
-          if (!e) {
-            return null;
-          }
-
-          while (e) {
-            const ac = e.atomControl;
-
-            if (ac) {
-              return ac;
-            }
-
-            e = e._logicalParent || e.parentElement;
-          }
-        }
-
-        get factory() {
-          return AtomControl;
-        }
-
-        onPropertyChanged(name) {
-          super.onPropertyChanged(name);
-
-          switch (name) {
-            case "theme":
-              this.mCachedTheme = null;
-              AtomBinder.refreshValue(this, "style");
-              break;
-
-            case "renderer":
-              this.rendererChanged();
-              break;
-          }
-        }
-
-        atomParent(e) {
-          var _a;
-
-          while (e) {
-            const ac = e.atomControl;
-
-            if (ac) {
-              return ac;
-            }
-
-            e = (_a = e._logicalParent) !== null && _a !== void 0 ? _a : e.parentElement;
-          }
-        }
-
-        append(element) {
-          if (element instanceof AtomControl) {
-            this.element.appendChild(element.element);
-          } else {
-            this.element.appendChild(element);
-          }
-
-          return this;
-        }
-
-        updateSize() {
-          this.onUpdateSize();
-          bridgeInstance.visitDescendents(this.element, (e, ac) => {
-            if (ac) {
-              ac.updateSize();
-              return false;
-            }
-
-            return true;
-          });
-        }
-
-        rendererChanged() {
-          disposeChildren(this, this.element);
-          const r = this.renderer;
-
-          if (!r) {
-            return;
-          }
-
-          delete this.render;
-          this.render(r);
-        }
-
-        preCreate() {}
-
-        setElementValue(element, name, value) {
-          if (value === undefined) {
-            return;
-          }
-
-          const setter = ElementValueSetters[name];
-
-          if (setter !== void 0) {
-            setter(this, element, value);
-            return;
-          }
-
-          if (/^data\-/.test(name)) {
-            name = fromHyphenToCamel(name.substring(5));
-
-            if (typeof value === "object") {
-              value = JSON.stringify(value);
-            }
-
-            element.dataset[name] = value;
-            return;
-          }
-
-          if (/^style/.test(name)) {
-            name = name.substring(5);
-
-            if (name.startsWith("-")) {
-              name = fromHyphenToCamel(name.substring(1));
-            } else {
-              name = name.charAt(0).toLowerCase() + name.substring(1);
-            }
-
-            if (value instanceof WebImage) {
-              value = `url(${value})`;
-            }
-
-            element.style[name] = value;
-            return;
-          }
-
-          if (/^event/.test(name)) {
-            name = name.substring(5);
-
-            if (name.startsWith("-")) {
-              name = fromHyphenToCamel(name.substring(1));
-            } else {
-              name = name.charAt(0).toLowerCase() + name.substring(1);
-            }
-
-            this.bindEvent(element, name, value);
-            return;
-          }
-
-          element[name] = value;
-        }
-
-        setElementClass(element, value, clear) {
-          const s = value;
-
-          if (s && typeof s === "object") {
-            if (!s.className) {
-              if (clear) {
-                let sr = "";
-
-                for (const key in s) {
-                  if (s.hasOwnProperty(key)) {
-                    const sv = s[key];
-
-                    if (sv) {
-                      sr += sr ? " " + key : key;
-                    }
-                  }
-                }
-
-                element.className = sr;
-                return;
-              }
-
-              for (const key in s) {
-                if (s.hasOwnProperty(key)) {
-                  const sv = s[key];
-
-                  if (sv) {
-                    if (!element.classList.contains(key)) {
-                      element.classList.add(key);
-                    }
-                  } else {
-                    if (element.classList.contains(key)) {
-                      element.classList.remove(key);
-                    }
-                  }
-                }
-              }
-
-              return;
-            }
-          }
-
-          const sv1 = s ? s.className || s.toString() : "";
-          element.className = sv1;
-        }
-
-        onUpdateSize() {}
-
-        removeAllChildren(e) {
-          let child = e.firstElementChild;
-
-          while (child) {
-            const c = child;
-            child = child.nextElementSibling;
-            const ac = c;
-
-            if (ac && ac.atomControl) {
-              ac.atomControl.dispose();
-            } else {
-              this.unbindEvent(child);
-              this.unbind(child);
-            }
-
-            c.remove();
-          }
-        }
-
-        createNode(app, e, iterator, creator) {
-          const name = iterator.name;
-          const attributes = iterator.attributes;
-
-          if (typeof name === "string") {
-            const element = document.createElement(name);
-
-            if (name === "input") {
-              if (!attributes.autocomplete) {
-                this.app.callLater(() => {
-                  element.autocomplete = "google-stop";
-                });
-              }
-            }
-
-            e === null || e === void 0 ? void 0 : e.appendChild(element);
-            this.render(iterator, element, creator);
-            return element;
-          }
-
-          if (name[isAtomControl]) {
-            const forName = attributes === null || attributes === void 0 ? void 0 : attributes.for;
-            const ctrl = new name(app, forName ? document.createElement(forName) : undefined);
-            const element = ctrl.element;
-            e === null || e === void 0 ? void 0 : e.appendChild(element);
-            ctrl.render(iterator, element, creator);
-            return element;
-          }
-
-          throw new Error(`not implemented create for ${iterator.name}`);
-        }
-
-        toTemplate(app, iterator, creator) {
-          var _a;
-
-          const name = iterator.name;
-
-          if (typeof name === "string") {
-            return class Template extends AtomControl {
-              constructor(a, e) {
-                super(a !== null && a !== void 0 ? a : app, e !== null && e !== void 0 ? e : document.createElement(name));
-              }
-
-              create() {
-                super.create();
-                this.render(iterator, null, creator);
-              }
-
-            };
-          }
-
-          if (name[isAtomControl]) {
-            const forName = (_a = name.attributes) === null || _a === void 0 ? void 0 : _a.for;
-
-            if (forName) {
-              return class Template extends name {
-                constructor(a, e) {
-                  super(a !== null && a !== void 0 ? a : app, e !== null && e !== void 0 ? e : document.createElement(forName));
-                }
-
-                create() {
-                  super.create();
-                  this.render(iterator, null, creator);
-                }
-
-              };
-            }
-
-            return class Template extends name {
-              constructor(a, e) {
-                super(a !== null && a !== void 0 ? a : app, e);
-              }
-
-              create() {
-                super.create();
-                this.render(iterator, null, creator);
-              }
-
-            };
-          }
-
-          throw new Error(`Creating template from ${name} not supported`);
-        }
-
-        dispatchClickEvent(e, data) {
-          let clickEvent = data.clickEvent;
-
-          if (!clickEvent) {
-            return;
-          }
-
-          clickEvent = clickEvent.replace(/-([a-z])/g, g => g[1].toUpperCase());
-          e.target.dispatchEvent(new CustomEvent(clickEvent, {
-            detail: data,
-            bubbles: true,
-            cancelable: true
-          }));
-        }
-
-      });
-
-      __decorate([BindableProperty, __metadata("design:type", XNode)], AtomControl.prototype, "renderer", void 0);
-
-      document.body.addEventListener("click", e => {
-        if (e.defaultPrevented) {
-          return;
-        }
-
-        const originalTarget = e.target;
-        let control;
-        let start = originalTarget;
-
-        while (start) {
-          if (start.atomControl) {
-            control = start.atomControl;
-            break;
-          }
-
-          start = start.parentElement;
-        }
-
-        if (control !== void 0) {
-          const data = new Proxy(originalTarget, {
-            get(target, p) {
-              if (typeof p !== "string") {
-                return;
-              }
-
-              while (target) {
-                const value = target.dataset[p];
-
-                if (value !== void 0) {
-                  return value;
-                }
-
-                target = target.parentElement;
-              }
-            }
-
-          });
-          control.dispatchClickEvent(e, data);
-        }
-      });
-      bridgeInstance.controlFactory = AtomControl;
-    }
-  };
-});
-//# sourceMappingURL=AtomControl.sys.js.map