@angelscmf/front 1.0.29 → 1.0.31

package/dist/AngelsFrontLoader.js

@@ -1,3 +1,4 @@
+"use strict";
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -19,46 +20,224 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/AngelsElement.ts
-var AngelsElementClass = class {
+// src/AngelsFrontElement.ts
+var AngelsFrontElementClass = class _AngelsFrontElementClass {
   constructor(element) {
-    this.originalElement = element;
+    this.aProxyBaseClass = _AngelsFrontElementClass;
+    this.elementBase = element;
     return new Proxy(this, {
       get(target, prop, receiver) {
         if (prop in target) {
-          return target[prop];
+          return Reflect.get(target, prop);
         }
-        return target.originalElement[prop];
+        const valueOfProperty = Reflect.get(target.elementBase, prop);
+        if (typeof valueOfProperty === "function") {
+          return valueOfProperty.bind(target.elementBase);
+        }
+        return valueOfProperty;
       },
       set(target, prop, newValue, receiver) {
-        if (prop in target) {
-          target[prop] = newValue;
+        if (prop in target.elementBase) {
+          target.elementBase[prop] = newValue;
         } else {
-          target.originalElement[prop] = newValue;
+          target[prop] = newValue;
         }
         return true;
       }
     });
   }
+  aConcealElement() {
+    aLibConcealElement(this.elementBase);
+    return this;
+  }
+  aEngageElement(switcher = void 0) {
+    aLibEngageElement(this.elementBase, switcher);
+    return this;
+  }
   aHideElement() {
-    this.originalElement.hidden = true;
+    this.elementBase.hidden = true;
+    return this;
+  }
+  aRevealElement() {
+    aLibRevealElement(this.elementBase);
     return this;
   }
   aShowElement() {
-    this.originalElement.hidden = false;
+    this.elementBase.hidden = false;
     return this;
   }
-  aTextContent(content = void 0) {
-    var _a;
-    if (content === void 0) {
-      return (_a = this.originalElement.textContent) != null ? _a : ``;
-    }
-    this.originalElement.textContent = content.toString();
+  aSetTextContent(content) {
+    const contentToSet = content.toString();
+    this.elementBase.textContent = contentToSet;
     return this;
   }
+  aTextContent() {
+    if (this.elementBase.textContent === null) {
+      return ``;
+    }
+    return this.elementBase.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 = aLibPrepareElement(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") {
@@ -75,12 +254,12 @@ function aLibFindElement(selector) {
     element = selector;
   } else if (selector instanceof Element) {
     element = selector;
-  } else if (selector instanceof AngelsElementClass) {
+  } else if (selector instanceof AngelsFrontElementClass) {
     return selector;
   } else {
     element = selector;
   }
-  return new AngelsElementClass(element);
+  return new AngelsFrontElementClass(element);
 }
 function aLibRequireElement(selector) {
   const element = aLibFindElement(selector);
@@ -94,6 +273,17 @@ function aLibHideElement(selector) {
   element.hidden = true;
   return element;
 }
+function aLibPrepareElement(element) {
+  let angelsFrontElement;
+  if ("aProxyBaseClass" in element && element.aProxyBaseClass === AngelsFrontElementClass) {
+    angelsFrontElement = element;
+  } else if (element instanceof HTMLElement) {
+    angelsFrontElement = new AngelsFrontElementClass(element);
+  } else {
+    throw Error("Cannot prepare element: invalid element type.");
+  }
+  return angelsFrontElement;
+}
 function aLibShowElement(selector) {
   const element = aLibRequireElement(selector);
   element.hidden = false;
@@ -102,7 +292,7 @@ function aLibShowElement(selector) {
 function aLibToggleElement(originalElement, switcher = void 0) {
   const innerElement = aLibRequireElement(originalElement);
   if (switcher === void 0) {
-    switcher = !innerElement.hidden;
+    switcher = innerElement.hidden;
   }
   if (switcher) {
     return aLibShowElement(innerElement);
@@ -112,19 +302,6 @@ function aLibToggleElement(originalElement, switcher = void 0) {
 }
 
 // src/AngelsFrontAnimationLibrary.ts
-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 aLibConcealElement(originalElement) {
   return __async(this, null, function* () {
     const innerElement = aLibRequireElement(originalElement);
@@ -160,6 +337,19 @@ function aLibConcealElement(originalElement) {
     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);
@@ -191,13 +381,404 @@ function aLibRevealElement(originalElement) {
   });
 }
 
+// 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/AngelsFrontWebComponents/AngelsFrontDemoWebComponent.ts
+var pretty = require("pretty");
+var AngelsFrontDemoWebComponent = class extends HTMLElement {
+  constructor() {
+    super();
+    this.awcRoot = this.attachShadow({ mode: "open" });
+    this.awcRoot.innerHTML = this.awcTemplate() + this.awcStyles();
+    this.awcReDraw();
+  }
+  connectedCallback() {
+    this.addEventListener("slotchange", this.awcReDraw.bind(this));
+  }
+  awcReDraw() {
+    const headerPart = this.awcRoot.querySelector('[part="a-demo-header"]');
+    const headerSlot = headerPart.querySelector("slot");
+    headerPart.hidden = !headerSlot.assignedNodes({ flatten: true }).length;
+    const resultSlot = this.awcRoot.querySelector('[part="a-demo-result"] slot');
+    const codePart = this.awcRoot.querySelector('[part="a-demo-code"]');
+    let code = resultSlot.assignedNodes({ flatten: true }).map((n) => n.outerHTML || n.textContent).join("");
+    code = pretty(code, { ocd: true });
+    console.log("code", code);
+    codePart.textContent = code.trim();
+  }
+  awcTemplate() {
+    return `
+            <div part="a-demo-header"><slot name="a-demo-header"></slot></div>
+            <div part="a-demo-result"><slot></slot></div>
+            <pre part="a-demo-code"></pre>
+        `;
+  }
+  awcStyles() {
+    return `
+            <style>
+                :host {
+                    --a-demo-borderColor: darkmagenta;
+                    --a-demo-borderRadius: var(--a-borderRadius, 4px);
+                    --a-demo-backgroundColor: #fffbf3;
+                }
+                :host {
+                    background: var(--a-demo-borderColor);
+                    border: 1px solid var(--a-demo-borderColor);
+                    border-radius: var(--a-demo-borderRadius);
+                    display: grid;
+                    gap: 1px;
+                    font-family: Arial, sans-serif;
+                    overflow: hidden;
+                }
+                :host > * {
+                    background: var(--a-demo-backgroundColor);
+                    padding: .5em;
+                }
+                [part="a-demo-header"] {
+                }
+                [part="a-demo-result"] slot {
+                }
+                [part="a-demo-code"] {
+                    margin: 0;
+                    overflow: auto;
+                }   
+            </style>
+        `;
+  }
+};
+function angelsDemoDefine() {
+  if (!customElements.get("a-demo")) {
+    customElements.define("a-demo", AngelsFrontDemoWebComponent);
+  }
+  return customElements.get("a-demo");
+}
+
+// src/AngelsFrontWebComponents/AngelsFrontListWebComponent.ts
+var _AngelsFrontListWebComponent = class _AngelsFrontListWebComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.awcAppendStyles();
+  }
+  connectedCallback() {
+    this.awcRender();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.awcRender();
+  }
+  awcAppendStyles() {
+    if (_AngelsFrontListWebComponent.awcStylesAppended) {
+      return;
+    }
+    _AngelsFrontListWebComponent.awcStylesAppended = true;
+    const style = document.createElement("style");
+    style.textContent = `
+            a-list {
+                --a-list-space: var(--a-halfSize, 0.5em);
+                display: inline;
+            }
+            a-list::before {
+                content: attr(a-list-prefix);
+                display: inline;
+            }
+            a-list::after {
+                content: attr(a-list-suffix);
+                display: inline;
+            }
+            a-list .a-list-item:not(:last-child)::after {
+                content: attr(a-list-separator);
+                display: inline;
+                margin-right: var(--a-list-space);
+            }
+        `;
+    document.head.appendChild(style);
+  }
+  awcRender() {
+    const itemsAttr = this.getAttribute("a-list");
+    const separator = this.getAttribute("a-list-separator") || " ";
+    if (itemsAttr) {
+      try {
+        const items = JSON.parse(itemsAttr);
+        const children = [];
+        if (Array.isArray(items)) {
+          items.forEach((item, index) => {
+            const span = document.createElement("a-list-item");
+            span.textContent = item;
+            span.classList.add("a-list-item");
+            span.setAttribute("a-list-separator", this.getAttribute("a-list-separator") || " ");
+            children.push(span);
+          });
+        } else {
+          console.error('Attribute "a-list" must be an array of strings.');
+        }
+        this.replaceChildren(...children);
+      } catch (error) {
+        console.error(`Error parsing "a-list" attribute of "${itemsAttr}"`, error);
+        this.replaceChildren();
+      }
+    } else {
+      this.replaceChildren();
+    }
+  }
+};
+_AngelsFrontListWebComponent.awcStylesAppended = false;
+_AngelsFrontListWebComponent.observedAttributes = ["a-list", "a-list-separator"];
+var AngelsFrontListWebComponent = _AngelsFrontListWebComponent;
+function angelsListDefine() {
+  if (!customElements.get("a-list")) {
+    customElements.define("a-list", AngelsFrontListWebComponent);
+  }
+  return customElements.get("a-list");
+}
+
 // 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();
+angelsDemoDefine();
+angelsListDefine();
 //# sourceMappingURL=AngelsFrontLoader.js.map