@angelscmf/front 1.0.28 → 1.0.30

package/dist/AngelsFrontLoader.js

@@ -0,0 +1,623 @@
+"use strict";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/AngelsFrontElement.ts
+var AngelsFrontElementClass = class {
+  constructor(element) {
+    this.originalElement = element;
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        if (prop in target) {
+          return Reflect.get(target, prop);
+        }
+        const valueOfProperty = Reflect.get(target.originalElement, prop);
+        if (typeof valueOfProperty === "function") {
+          return valueOfProperty.bind(target.originalElement);
+        }
+        return valueOfProperty;
+      },
+      set(target, prop, newValue, receiver) {
+        if (prop in target.originalElement) {
+          target.originalElement[prop] = newValue;
+        } else {
+          target[prop] = newValue;
+        }
+        return true;
+      }
+    });
+  }
+  aConcealElement() {
+    aLibConcealElement(this.originalElement);
+    return this;
+  }
+  aEngageElement(switcher = void 0) {
+    aLibEngageElement(this.originalElement, switcher);
+    return this;
+  }
+  aHideElement() {
+    this.originalElement.hidden = true;
+    return this;
+  }
+  aRevealElement() {
+    aLibRevealElement(this.originalElement);
+    return this;
+  }
+  aShowElement() {
+    this.originalElement.hidden = false;
+    return this;
+  }
+  aSetTextContent(content) {
+    const contentToSet = content.toString();
+    this.originalElement.textContent = contentToSet;
+    return this;
+  }
+  aTextContent() {
+    if (this.originalElement.textContent === null) {
+      return ``;
+    }
+    return this.originalElement.textContent;
+  }
+};
+
+// src/AngelsFrontMod.ts
+var AngelsFrontMod = class {
+  constructor() {
+    this.modWaitStartTimeout = 1e3;
+    this.modSubMods = new Array();
+  }
+  /**
+   * Starts AngelsFrontMod.
+   */
+  modStart() {
+    this.modInit();
+    this.modBind();
+    this.modLink();
+    this.modRun();
+    setTimeout(() => {
+      this.modWait();
+    }, this.modWaitStartTimeout);
+  }
+  /**
+   * Finishes AngelsFrontMod.
+   */
+  modFinish() {
+    this.modDeWait();
+    this.modDeRun();
+    this.modDeLink();
+    this.modDeBind();
+    this.modDeInit();
+  }
+  /**
+   * Inits AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modInit() {
+    this.modSubMods.forEach((mod) => mod.modInit());
+  }
+  /**
+   * Binds AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modBind() {
+    this.modSubMods.forEach((mod) => mod.modBind());
+  }
+  /**
+   * Links AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modLink() {
+    this.modSubMods.forEach((mod) => mod.modLink());
+  }
+  /**
+   * Runs AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modRun() {
+    this.modSubMods.forEach((mod) => mod.modRun());
+  }
+  /**
+   * Waits AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modWait() {
+    this.modSubMods.forEach((mod) => mod.modWait());
+  }
+  /**
+   * DeInits AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modDeInit() {
+    this.modSubMods.forEach((mod) => mod.modDeInit());
+  }
+  /**
+   * DeBinds AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modDeBind() {
+    this.modSubMods.forEach((mod) => mod.modDeBind());
+  }
+  /**
+   * DeLinks AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modDeLink() {
+    this.modSubMods.forEach((mod) => mod.modDeLink());
+  }
+  /**
+   * DeRuns AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modDeRun() {
+    this.modSubMods.forEach((mod) => mod.modDeRun());
+  }
+  /**
+   * DeWaits AngelsFrontMod and its sub-modules AngelsFrontMod.
+   */
+  modDeWait() {
+    this.modSubMods.forEach((mod) => mod.modDeWait());
+  }
+  modDestructor() {
+    this.modSubMods.forEach((mod) => mod.modDestructor());
+  }
+  modAddSubMod(mod) {
+    if (mod) {
+      this.modSubMods.push(mod);
+      mod.modInit();
+      return mod;
+    }
+    return null;
+  }
+  modRequireSubMod(mod) {
+    this.modSubMods.push(mod);
+    mod.modInit();
+    return mod;
+  }
+};
+
+// src/AngelsFrontWidgetClass.ts
+var AngelsFrontWidgetClass = class extends AngelsFrontMod {
+  constructor(element) {
+    super();
+    this.widElement = new AngelsFrontElementClass(element);
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        if (prop in target) {
+          const valueOfProperty2 = target[prop];
+          if (typeof valueOfProperty2 === "function") {
+            return Reflect.get(target, prop);
+          }
+          return valueOfProperty2;
+        }
+        const valueOfProperty = target.widElement[prop];
+        if (typeof valueOfProperty === "function") {
+          return valueOfProperty.bind(target.widElement);
+        }
+        return valueOfProperty;
+      },
+      set(target, prop, newValue, receiver) {
+        if (prop in target) {
+          target[prop] = newValue;
+        } else {
+          target.widElement[prop] = newValue;
+        }
+        return true;
+      }
+    });
+  }
+  widFindElement(selector) {
+    const findElement = this.widElement.querySelector(selector);
+    if (findElement) {
+      return aFindElement(findElement);
+    }
+    return null;
+  }
+  widFindElements(selector) {
+    return Array.from(this.widElement.querySelectorAll(selector)).map(aFindElement);
+  }
+  widRequireElement(selector) {
+    const element = this.widElement.querySelector(selector);
+    if (element) {
+      return aFindElement(element);
+    }
+    throw Error(`Element '${selector}' is not found.`);
+  }
+};
+
+// src/AngelsFrontDOMLibrary.ts
+function aLibCreateWidget(element) {
+  return new AngelsFrontWidgetClass(element);
+}
+function aLibFindElement(selector) {
+  let element;
+  if (typeof selector === "undefined") {
+    return null;
+  } else if (selector === null) {
+    return null;
+  } else if (typeof selector === "string") {
+    const findElement = document.querySelector(selector);
+    if (!findElement) {
+      return null;
+    }
+    element = findElement;
+  } else if (selector instanceof HTMLElement) {
+    element = selector;
+  } else if (selector instanceof Element) {
+    element = selector;
+  } else if (selector instanceof AngelsFrontElementClass) {
+    return selector;
+  } else {
+    element = selector;
+  }
+  return new AngelsFrontElementClass(element);
+}
+function aLibRequireElement(selector) {
+  const element = aLibFindElement(selector);
+  if (element) {
+    return element;
+  }
+  throw Error(`Element not found by '${selector}' selector.`);
+}
+function aLibHideElement(selector) {
+  const element = aLibRequireElement(selector);
+  element.hidden = true;
+  return element;
+}
+function aLibShowElement(selector) {
+  const element = aLibRequireElement(selector);
+  element.hidden = false;
+  return element;
+}
+function aLibToggleElement(originalElement, switcher = void 0) {
+  const innerElement = aLibRequireElement(originalElement);
+  if (switcher === void 0) {
+    switcher = !innerElement.hidden;
+  }
+  if (switcher) {
+    return aLibShowElement(innerElement);
+  } else {
+    return aLibHideElement(innerElement);
+  }
+}
+
+// src/AngelsFrontAnimationLibrary.ts
+function aLibConcealElement(originalElement) {
+  return __async(this, null, function* () {
+    const innerElement = aLibRequireElement(originalElement);
+    const promise = new Promise((resolve) => {
+      if (innerElement.hidden) {
+        resolve();
+        return;
+      }
+      let timeout;
+      const animationHandler = () => {
+        clearTimeout(timeout);
+        innerElement.removeEventListener("animationend", animationHandler);
+        innerElement.hidden = true;
+        innerElement.classList.remove("a-out-animation");
+        resolve();
+      };
+      innerElement.classList.add("a-out-animation");
+      const animations = innerElement.getAnimations();
+      if (animations.length > 0) {
+        timeout = setTimeout(() => {
+          innerElement.removeEventListener("animationend", animationHandler);
+          innerElement.hidden = true;
+          innerElement.classList.remove("a-out-animation");
+          console.warn("Animation timeout");
+          resolve();
+        }, 5e3);
+        innerElement.addEventListener("animationend", animationHandler);
+      } else {
+        innerElement.hidden = true;
+        resolve();
+      }
+    });
+    return promise;
+  });
+}
+function aLibEngageElement(originalElement, switcher = void 0) {
+  return __async(this, null, function* () {
+    const innerElement = aLibRequireElement(originalElement);
+    if (switcher === void 0) {
+      switcher = innerElement.hidden;
+    }
+    if (switcher) {
+      return yield aLibRevealElement(innerElement);
+    } else {
+      return yield aLibConcealElement(innerElement);
+    }
+  });
+}
+function aLibRevealElement(originalElement) {
+  return __async(this, null, function* () {
+    const innerElement = aLibRequireElement(originalElement);
+    const promise = new Promise((resolve) => {
+      if (!innerElement.hidden) {
+        resolve();
+        return;
+      }
+      let timeout;
+      const animationHandler = () => {
+        clearTimeout(timeout);
+        innerElement.removeEventListener("animationend", animationHandler);
+        resolve();
+      };
+      innerElement.hidden = false;
+      const animations = innerElement.getAnimations();
+      if (animations.length > 0) {
+        timeout = setTimeout(() => {
+          innerElement.removeEventListener("animationend", animationHandler);
+          console.warn("Animation timeout");
+          resolve();
+        }, 5e3);
+        innerElement.addEventListener("animationend", animationHandler);
+      } else {
+        resolve();
+      }
+    });
+    return promise;
+  });
+}
+
+// src/AngelsFrontWebComponents/AngelsFrontBoardWebComponent.ts
+var AngelsFrontBoardWebComponent = class _AngelsFrontBoardWebComponent extends HTMLElement {
+  /**
+   * Use the global displayHandler if set
+   */
+  get displayHandler() {
+    return _AngelsFrontBoardWebComponent.globalDisplayHandler;
+  }
+  /**
+   * Switch the visible child by key
+   */
+  aBoardSwitch(aBoardItemKey) {
+    this.setAttribute("a-board-show", aBoardItemKey);
+  }
+  /**
+   * Update visibility based on children/text
+   */
+  aBoardUpdateDisplaying() {
+    const children = Array.from(this.children);
+    const hasVisibleChildren = children.some((el) => !el.hidden);
+    const hasNonWhitespaceText = Array.from(this.childNodes).some(
+      (node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ""
+    );
+    this.hidden = !hasVisibleChildren && !hasNonWhitespaceText;
+    this.toggleAttribute("a-board-auto-hidden", this.hidden);
+  }
+  aBoardShowKey() {
+    return this.getAttribute("a-board-show") || "";
+  }
+  connectedCallback() {
+    this.initContent();
+    this.observeMutations();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
+  }
+  static get observedAttributes() {
+    return ["a-board-show"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case "a-board-show":
+        if (oldValue !== newValue) {
+          this.updateContent();
+        }
+    }
+  }
+  /**
+   * Update which child is visible
+   */
+  initContent() {
+    return __async(this, null, function* () {
+      const key = this.aBoardShowKey();
+      const items = Array.from(this.querySelectorAll(`:scope > [a-board-key]`));
+      const activeItem = items.find((el) => el.getAttribute("a-board-key") === key);
+      items.filter((el) => el !== activeItem).forEach((el) => {
+        const show = el === activeItem;
+        el.hidden = true;
+      });
+      if (activeItem) {
+        activeItem.hidden = false;
+      }
+      this.aBoardUpdateDisplaying();
+    });
+  }
+  /**
+   * Update which child is visible
+   */
+  updateContent() {
+    return __async(this, null, function* () {
+      var _a;
+      (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
+      const key = this.aBoardShowKey();
+      const items = Array.from(this.querySelectorAll(`:scope > [a-board-key]`));
+      const activeItem = items.find((el) => el.getAttribute("a-board-key") === key);
+      const rect = this.getBoundingClientRect();
+      const prevWidth = this.style.width;
+      const prevHeight = this.style.height;
+      const prevOverflow = this.style.overflow;
+      this.style.width = rect.width + "px";
+      this.style.height = rect.height + "px";
+      this.style.overflow = "hidden";
+      if (this.displayHandler) {
+        const promises = [];
+        items.filter((el) => el !== activeItem).forEach((el) => {
+          const displayHandlerResult = this.displayHandler(el, false);
+          if (displayHandlerResult instanceof Promise) {
+            promises.push(displayHandlerResult);
+          }
+        });
+        yield Promise.all(promises);
+        let targetHeight = 0;
+        console.log("targetHeight", targetHeight);
+        if (activeItem) {
+          activeItem.classList.add("a-technical-transparent");
+          targetHeight = activeItem.scrollHeight;
+          activeItem.classList.remove("a-technical-transparent");
+        }
+        console.log("targetHeight", targetHeight);
+        const heightAnimation = this.animate([
+          { height: rect.height + "px" },
+          { height: targetHeight + "px" }
+        ], {
+          duration: 300,
+          easing: "ease-in-out"
+        });
+        yield new Promise((resolve) => {
+          heightAnimation.addEventListener("finish", resolve);
+        });
+        this.style.height = targetHeight + "px";
+        if (activeItem) {
+          yield this.displayHandler(activeItem, true);
+        }
+      } else {
+        items.filter((el) => el !== activeItem).forEach((el) => {
+          const show = el === activeItem;
+          el.hidden = true;
+        });
+        let targetHeight = 0;
+        if (activeItem) {
+          activeItem.classList.add("a-technical-transparent");
+          targetHeight = activeItem.scrollHeight;
+          ;
+          activeItem.classList.remove("a-technical-transparent");
+        }
+        this.style.height = targetHeight + "px";
+        if (activeItem) {
+          activeItem.hidden = false;
+        }
+      }
+      this.style.height = "";
+      this.style.width = prevWidth;
+      this.style.overflow = prevOverflow;
+      this.aBoardUpdateDisplaying();
+      this.observeMutations();
+    });
+  }
+  /**
+   * Observe direct children and text nodes only, with debounce
+   */
+  observeMutations() {
+    if (this.mutationObserver) this.mutationObserver.disconnect();
+    this.mutationObserver = new MutationObserver(() => {
+      clearTimeout(this.mutationTimeout);
+      this.mutationTimeout = window.setTimeout(() => {
+        this.aBoardUpdateDisplaying();
+      }, 50);
+    });
+    this.mutationObserver.observe(this, {
+      childList: true,
+      characterData: true,
+      attributes: true,
+      subtree: false,
+      attributeFilter: ["hidden", "style", "class"]
+    });
+  }
+  /**
+   * Set global display handler for all <a-board> instances
+   */
+  static setGlobalDisplayHandler(handler) {
+    _AngelsFrontBoardWebComponent.globalDisplayHandler = handler;
+  }
+};
+function angelsBoardDefine(options) {
+  if (!customElements.get("a-board")) {
+    if (options == null ? void 0 : options.displayHandler) {
+      AngelsFrontBoardWebComponent.setGlobalDisplayHandler(options.displayHandler);
+    }
+    customElements.define("a-board", AngelsFrontBoardWebComponent);
+  } else if (options == null ? void 0 : options.displayHandler) {
+    AngelsFrontBoardWebComponent.setGlobalDisplayHandler(options.displayHandler);
+  }
+  return customElements.get("a-board");
+}
+
+// src/AngelsFrontWebComponents/AngelsFrontStateWebComponent.ts
+var _AngelsFrontStateWebComponent = class _AngelsFrontStateWebComponent extends HTMLElement {
+  connectedCallback() {
+    this.hidden = this.textContent.trim().length === 0;
+  }
+  aStateAlert(message) {
+    this.aStateSet("a-alert" /* ALERT */, message);
+  }
+  aStateClear() {
+    this.classList.remove(..._AngelsFrontStateWebComponent.aStateClasses);
+    this.aStateSetMessage("");
+  }
+  aStateDebug(message) {
+    this.aStateSet("a-debug" /* DEBUG */, message);
+  }
+  aStateDone(message) {
+    this.aStateSet("a-done" /* DONE */, message);
+  }
+  aStateError(message) {
+    this.aStateSet("a-error" /* ERROR */, message);
+  }
+  aStateInfo(message) {
+    this.aStateSet("a-info" /* INFO */, message);
+  }
+  aStateSet(className, message) {
+    this.aStateSetType(className);
+    this.aStateSetMessage(message);
+  }
+  aStateSetMessage(message) {
+    this.textContent = message;
+    this.hidden = this.textContent.trim().length === 0;
+  }
+  aStateSetType(className) {
+    const classesToRemove = _AngelsFrontStateWebComponent.aStateClasses.filter((c) => c !== className);
+    this.classList.remove(...classesToRemove);
+    this.classList.add(className);
+  }
+  aStateTip(message) {
+    this.aStateSet("a-tip" /* TIP */, message);
+  }
+  aStateWarn(message) {
+    this.aStateSet("a-warn" /* WARN */, message);
+  }
+};
+_AngelsFrontStateWebComponent.aStateClasses = [
+  "a-alert" /* ALERT */,
+  "a-debug" /* DEBUG */,
+  "a-done" /* DONE */,
+  "a-error" /* ERROR */,
+  "a-info" /* INFO */,
+  "a-tip" /* TIP */,
+  "a-warn" /* WARN */
+];
+var AngelsFrontStateWebComponent = _AngelsFrontStateWebComponent;
+function angelsStateDefine() {
+  if (!customElements.get("a-state")) {
+    customElements.define("a-state", AngelsFrontStateWebComponent);
+  }
+  return customElements.get("a-state");
+}
+
+// src/AngelsFrontLoader.ts
+window.aEngageElement = aLibEngageElement;
+window.aConcealElement = aLibConcealElement;
+window.aRevealElement = aLibRevealElement;
+window.aCreateWidget = aLibCreateWidget;
+window.aFindElement = aLibFindElement;
+window.aHideElement = aLibHideElement;
+window.aRequireElement = aLibRequireElement;
+window.aShowElement = aLibShowElement;
+window.aToggleElement = aLibToggleElement;
+angelsBoardDefine({
+  displayHandler: aEngageElement
+});
+angelsStateDefine();
+//# sourceMappingURL=AngelsFrontLoader.js.map