wj-elements 0.1.116 → 0.1.117

package/dist/wje-checkbox.js

@@ -222,7 +222,7 @@ class Checkbox extends WJElement {
   /**
    * Removes the event listener when the checkbox is disconnected.
    */
-  disconnectedCallback() {
+  beforeDisconnect() {
     event.removeElement(this.input);
   }
   /**
@@ -231,7 +231,7 @@ class Checkbox extends WJElement {
    * @param {HTMLFormElement} form - The form the custom element is associated with.
    */
   formAssociatedCallback(form) {
-    form.addEventListener("submit", () => {
+    form == null ? void 0 : form.addEventListener("submit", () => {
     });
   }
   /**

package/dist/wje-element.js

@@ -393,20 +393,21 @@ const _WJElement = class _WJElement extends HTMLElement {
   constructor(componentTemplate) {
     super();
     __publicField(this, "initWjElement", async (force = false) => {
-      var _a;
-      this.functionStack = [];
-      const processId = Date.now();
-      this.functionStack.push(processId);
-      (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
-      if (this.isShadowRoot) {
-        !this.shadowRoot && this.attachShadow({ mode: this.shadowType || "open" });
-      }
-      this.setUpAccessors();
-      this.drawingStatus = "BEGINING";
-      this.display(force, processId);
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(this.constructor.cssStyleSheet);
-      this.context.adoptedStyleSheets = [sheet];
+      return new Promise(async (resolve, reject) => {
+        var _a;
+        this.drawingStatus = this.drawingStatuses.BEGINING;
+        (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
+        if (this.isShadowRoot) {
+          !this.shadowRoot && this.attachShadow({ mode: this.shadowType || "open" });
+        }
+        this.setUpAccessors();
+        this.drawingStatus = this.drawingStatuses.START;
+        await this.display(force);
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(this.constructor.cssStyleSheet);
+        this.context.adoptedStyleSheets = [sheet];
+        resolve();
+      });
     });
     this.template = componentTemplate || template;
     this.isAttached = false;
@@ -415,11 +416,15 @@ const _WJElement = class _WJElement extends HTMLElement {
     });
     this.definedependencies();
     this.rendering = false;
-    this.runtimeTimeout = null;
-    this.count = 0;
-    this.functionStack = [];
-    this.scheludedRefresh = false;
     this._dependencies = {};
+    this.drawingStatuses = {
+      ATTACHED: 1,
+      BEGINING: 2,
+      START: 3,
+      DRAWING: 4,
+      DONE: 5,
+      DISCONNECTED: 6
+    };
   }
   get permission() {
     return this.getAttribute("permission-check");
@@ -508,6 +513,7 @@ const _WJElement = class _WJElement extends HTMLElement {
     });
   }
   async connectedCallback() {
+    this.drawingStatus = this.drawingStatuses.ATTACHED;
     this.finisPromise = (resolve) => {
       resolve();
     };
@@ -515,7 +521,7 @@ const _WJElement = class _WJElement extends HTMLElement {
       reject();
     };
     this.refreshUpdatePromise();
-    await this.initWjElement(true);
+    this.renderPromise = this.initWjElement(true);
   }
   setupAttributes() {
     let allEvents = WjElementUtils.getEvents(this);
@@ -533,32 +539,37 @@ const _WJElement = class _WJElement extends HTMLElement {
     (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
     if (this.isAttached)
       this.context.innerHTML = "";
-    this.drawingStatus = "DISCONNECTED";
     this.isAttached = false;
     (_b = this.afterDisconnect) == null ? void 0 : _b.call(this);
+    this.drawingStatus = this.drawingStatuses.DISCONNECTED;
+  }
+  async enqueueUpdate() {
+    try {
+      await this.renderPromise;
+    } catch (e) {
+      Promise.reject(e);
+    }
+    const result = this.refresh();
+    if (result != null) {
+      await result;
+    }
+    this.renderPromise = null;
   }
   /**
    * Lifecycle method, called whenever an observed property changes
    */
   attributeChangedCallback(name, old, newName) {
-    if (!this.isAttached && old !== newName) {
-      this.scheludedRefresh = true;
-      return;
-    }
     if (old !== newName) {
-      this.refresh();
+      this.renderPromise = this.enqueueUpdate();
     }
   }
   async refresh() {
-    var _a, _b, _c;
-    (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
-    this.refreshUpdatePromise();
-    if (this.drawingStatus != "AFTER") {
+    var _a, _b;
+    if (this.drawingStatus && this.drawingStatus >= this.drawingStatuses.START) {
+      (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
+      this.refreshUpdatePromise();
       (_b = this.afterDisconnect) == null ? void 0 : _b.call(this);
-      await this.initWjElement(true);
-    } else {
-      (_c = this.unregister) == null ? void 0 : _c.call(this);
-      await this.initWjElement(true);
+      return this.initWjElement(true);
     }
   }
   /**
@@ -567,9 +578,7 @@ const _WJElement = class _WJElement extends HTMLElement {
   draw(context, store2, params) {
     return null;
   }
-  display(force = false, processId) {
-    if (this.isProcessingFlow(processId))
-      return;
+  display(force = false, signal) {
     if (force) {
       [...this.context.childNodes].forEach(this.context.removeChild.bind(this.context));
       this.isAttached = false;
@@ -577,33 +586,32 @@ const _WJElement = class _WJElement extends HTMLElement {
     this.context.append(this.template.content.cloneNode(true));
     if (this.isPermissionCheck || this.isShow) {
       if (WjePermissionsApi.isPermissionFulfilled.bind(this)(this.permission)) {
-        this._resolveRender(processId);
+        this.drawingStatus = this.drawingStatuses.DRAWING;
+        return this._resolveRender(signal);
       } else {
         this.remove();
       }
     } else {
-      this._resolveRender(processId);
+      return this._resolveRender(signal);
     }
   }
-  async render(processId) {
+  async render() {
     this.drawingStatus = "DRAWING";
-    if (this.isProcessingFlow(processId))
-      return;
-    await Promise.resolve(this.draw(this.context, this.store, WjElementUtils.getAttributes(this))).then((res) => {
-      let rend = res || "";
-      let element;
-      if (rend instanceof HTMLElement || rend instanceof DocumentFragment) {
-        element = rend;
-      } else {
-        let template2 = document.createElement("template");
-        template2.innerHTML = rend;
-        element = template2.content.cloneNode(true);
-      }
-      let rendered = element;
-      if (this.isProcessingFlow(processId))
-        return;
-      this.context.appendChild(rendered);
-    });
+    let _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
+    if (_draw instanceof Promise) {
+      _draw = await _draw;
+    }
+    let rend = _draw;
+    let element;
+    if (rend instanceof HTMLElement || rend instanceof DocumentFragment) {
+      element = rend;
+    } else {
+      let template2 = document.createElement("template");
+      template2.innerHTML = rend;
+      element = template2.content.cloneNode(true);
+    }
+    let rendered = element;
+    this.context.appendChild(rendered);
   }
   /**
    * Turns a string split with "-" into camel case notation
@@ -641,33 +649,27 @@ const _WJElement = class _WJElement extends HTMLElement {
       });
     });
   }
-  isProcessingFlow(processId) {
-    return !this.functionStack.find((d) => d == processId);
-  }
-  _resolveRender(processId) {
-    if (this.isProcessingFlow(processId))
-      return;
+  async _resolveRender(signal) {
     this.params = WjElementUtils.getAttributes(this);
-    Promise.resolve(this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this))).then((res) => {
-      this.drawingStatus = "BEFORE";
-      Promise.resolve(this.render(processId)).then((res2) => {
-        var _a;
-        if (this.isProcessingFlow(processId))
-          return;
-        Promise.resolve((_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this))).then(
-          (a, b, c) => {
-            this.drawingStatus = "AFTER";
-            this.finisPromise();
-            this.rendering = false;
-            this.isAttached = true;
-            this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect);
-            if (this.scheludedRefresh) {
-              this.refresh();
-              this.scheludedRefresh = false;
-            }
-          }
-        );
-      });
+    return new Promise(async (resolve, reject) => {
+      var _a;
+      const __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));
+      if (__beforeDraw instanceof Promise) {
+        await __beforeDraw;
+      }
+      await this.render();
+      const __afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this));
+      if (__afterDraw instanceof Promise) {
+        await __afterDraw;
+      }
+      this.finisPromise();
+      this.rendering = false;
+      this.isAttached = true;
+      this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect);
+      this.drawingStatus = this.drawingStatuses.DONE;
+      resolve();
+    }).catch((e) => {
+      console.log(e);
     });
   }
 };

package/dist/wje-input.js

@@ -390,7 +390,7 @@ class Input extends WJElement {
    * @param {HTMLFormElement} form - The form the custom element is associated with.
    */
   formAssociatedCallback(form) {
-    form.addEventListener("submit", () => {
+    form == null ? void 0 : form.addEventListener("submit", () => {
       this.validateInput();
       this.propagateValidation();
     });

package/dist/wje-options.js

@@ -60,6 +60,12 @@ class Options extends WJElement {
   get hasOptionArrayPath() {
     return this.hasAttribute("option-array-path");
   }
+  get dropdownHeight() {
+    return this.getAttribute("dropdown-height") || "100%";
+  }
+  set dropdownHeight(value) {
+    this.setAttribute("dropdown-height", value);
+  }
   set itemValue(value) {
     this.setAttribute("item-value", value);
   }
@@ -128,7 +134,7 @@ class Options extends WJElement {
       const list = document.createElement("wje-list");
       const infiniteScroll = document.createElement("wje-infinite-scroll");
       infiniteScroll.setAttribute("placement", "wje-list");
-      infiniteScroll.setAttribute("height", "100%");
+      infiniteScroll.setAttribute("height", this.dropdownHeight);
       infiniteScroll.setAttribute("object-name", this.optionArrayPath);
       infiniteScroll.append(list);
       infiniteScroll.dataToHtml = this.htmlItem;

package/dist/wje-select.js

@@ -597,7 +597,7 @@ class Select extends WJElement {
    * @param {HTMLFormElement} form - The form the custom element is associated with.
    */
   formAssociatedCallback(form) {
-    form.addEventListener("submit", () => {
+    form == null ? void 0 : form.addEventListener("submit", () => {
     });
   }
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.116",
+  "version": "0.1.117",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",