wj-elements 0.7.7 → 0.8.0

package/dist/wje-main.js

@@ -1,52 +1,28 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Main ]\n*/\n\n:host {\n    display: block;\n    flex: 1;\n    flex-basis: auto;\n    padding: 1.5rem;\n    box-sizing: border-box;\n}\n";
-class Main extends WJElement {
-  /**
-   * Creates an instance of Main.
-   * @class
-   */
+import e from "./wje-element.js";
+class t extends e {
   constructor() {
     super();
     __publicField(this, "className", "Main");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:block;flex:1;flex-basis:auto;padding:1.5rem;box-sizing:border-box}";
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the component for the main section.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("slot");
+    return e2.appendChild(t2), e2;
   }
 }
-Main.define("wje-main", Main);
+t.define("wje-main", t);
 export {
-  Main as default
+  t as default
 };
 //# sourceMappingURL=wje-main.js.map

package/dist/wje-main.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-main.js","sources":["../packages/wje-main/main.element.js","../packages/wje-main/main.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Main` is a custom web component that represents a main section.\n * It extends from `WJElement`.\n * @summary This element represents a main section.\n * @documentation https://elements.webjet.sk/components/main\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the main section.\n * @tag wje-main\n */\n\nexport default class Main extends WJElement {\n    /**\n     * Creates an instance of Main.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Main';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the main section.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Main from './main.element.js';\n\nexport default Main;\n\nMain.define('wje-main', Main);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;AC1DA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-main.js","sources":["../packages/wje-main/main.element.js","../packages/wje-main/main.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Main` is a custom web component that represents a main section.\n * It extends from `WJElement`.\n * @summary This element represents a main section.\n * @documentation https://elements.webjet.sk/components/main\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the main section.\n * @tag wje-main\n */\n\nexport default class Main extends WJElement {\n    /**\n     * Creates an instance of Main.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Main';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the main section.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Main from './main.element.js';\n\nexport default Main;\n\nMain.define('wje-main', Main);\n"],"names":["Main","WJElement","constructor","super","className","cssStyleSheet","setupAttributes","this","isShadowRoot","draw","fragment","document","createDocumentFragment","element","createElement","appendChild","define"],"mappings":";;;;AAce,MAAMA,UAAaC,EAAAA;AAAAA,EAK9B,cAAAC;AACIC,UAAAA;AAGJC,qCAAY;AAAA,EAFZ;AAAA,EASA,2BAAWC;AACP;EACJ;AAAA,EAOA,WAAA;AACI,WAAO,CAAA;AAAA,EACX;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,0BAEpBC,KAAUF,SAASG,cAAc,MAAA;AAGrC,WAFAJ,GAASK,YAAYF,EAAAA,GAEdH;AAAAA,EACX;AAAA;ACzDJV,EAAKgB,OAAO,YAAYhB,CAAAA;"}

package/dist/wje-masonry.js

@@ -1,267 +1,122 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const DEFAULT_DEBOUNCE_MS = 300;
-const COL_COUNT_CSS_VAR_NAME = `--wje-masonry-layout-col-count`;
-const GAP_CSS_VAR_NAME = `--wje-masonry-layout-gap`;
-const ELEMENT_NODE_TYPE = 1;
-const DEBOUNCE_MAP = /* @__PURE__ */ new Map();
-function getNumberAttribute($elem, name, defaultValue) {
-  const value = parseFloat($elem.getAttribute(name) || "");
-  return isNaN(value) ? defaultValue : value;
+import t from "./wje-element.js";
+const e = /* @__PURE__ */ new Map();
+function s(t2, e2, s2) {
+  const o2 = parseFloat(t2.getAttribute(e2) || "");
+  return isNaN(o2) ? s2 : o2;
 }
-function getColCount(totalWidth, cols, maxColWidth) {
-  return isNaN(cols) ? Math.max(1, Math.ceil(totalWidth / maxColWidth)) : cols;
+function o(t2, e2, s2) {
+  return isNaN(e2) ? Math.max(1, Math.ceil(t2 / s2)) : e2;
 }
-function debounce(cb, ms, id) {
-  const existingTimeout = DEBOUNCE_MAP.get(id);
-  if (existingTimeout !== null && existingTimeout !== void 0) window.clearTimeout(existingTimeout);
-  DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
+function i(t2) {
+  let e2 = 0, s2 = 1 / 0;
+  return t2.forEach((t3, o2) => {
+    t3 < s2 && (s2 = t3, e2 = o2);
+  }), e2;
 }
-function findSmallestColIndex(colHeights) {
-  let smallestIndex = 0;
-  let smallestHeight = Infinity;
-  colHeights.forEach((height, i) => {
-    if (height < smallestHeight) {
-      smallestHeight = height;
-      smallestIndex = i;
-    }
-  });
-  return smallestIndex;
-}
-const styles = "/*\n[ WJ Masonry ]\n*/\n\n:host {\n    display: flex;\n    align-items: flex-start;\n    justify-content: stretch;\n    width: 100%;\n}\n\n.column {\n    max-width: calc(\n        (\n            100% / var(--wje-masonry-layout-col-count, 1) -\n                (\n                    (\n                        var(--wje-masonry-layout-gap, 1rem) * (var(--wje-masonry-layout-col-count, 1) - 1) /\n                            var(--wje-masonry-layout-col-count, 1)\n                    )\n                )\n        )\n    );\n    width: 100%;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.column:not(:last-child) {\n    margin-inline-end: var(--wje-masonry-layout-gap, 1rem);\n}\n\n.column ::slotted(*) {\n    margin-block-end: var(--wje-masonry-layout-gap, 1rem);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n/* Hide the items that has not yet found the correct slot */\n#unset-items {\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n";
-class Masonry extends WJElement {
-  /**
-   * Constructor for the Masonry class.
-   */
+class n extends t {
   constructor() {
     super();
     __publicField(this, "debounceId", `layout_${Math.random()}`);
     __publicField(this, "ro");
     __publicField(this, "className", "Masonry");
-    /**
-     * Called when the slot changes.
-     */
     __publicField(this, "onSlotChange", () => {
-      const $unsetElements = (this.unsetSlot.assignedNodes() || []).filter(
-        (node) => node.nodeType === ELEMENT_NODE_TYPE
-      );
-      if ($unsetElements.length > 0) {
-        this.layout();
-      }
+      (this.unsetSlot.assignedNodes() || []).filter((t2) => 1 === t2.nodeType).length > 0 && this.layout();
     });
-    /**
-     * Called when the window resizes.
-     * @param {Array} entries The entries to use.
-     */
-    __publicField(this, "onResize", (entries) => {
-      const { width } = entries !== null && entries !== void 0 && Array.isArray(entries) && entries.length > 0 ? entries[0].contentRect : { width: this.offsetWidth };
-      const colCount = getColCount(width, this.cols, this.maxColWidth);
-      if (colCount !== this.columns.length) {
-        this.scheduleLayout();
-      }
+    __publicField(this, "onResize", (t2) => {
+      const { width: e2 } = null != t2 && Array.isArray(t2) && t2.length > 0 ? t2[0].contentRect : { width: this.offsetWidth };
+      o(e2, this.cols, this.maxColWidth) !== this.columns.length && this.scheduleLayout();
     });
-    /**
-     * Lays out the element.
-     */
     __publicField(this, "layout", () => {
-      if (this.currentRequestAnimationFrameCallback !== null && this.currentRequestAnimationFrameCallback !== void 0) {
-        window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
-      }
-      this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
-        const gap = this.gap;
-        const $elements = Array.from(this.children).filter((node) => node.nodeType === ELEMENT_NODE_TYPE);
-        const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);
-        const colHeights = Array(colCount).fill(0);
-        const writes = [];
-        for (const elem of $elements) {
-          const height = elem.getBoundingClientRect().height;
-          let smallestColIndex = findSmallestColIndex(colHeights);
-          colHeights[smallestColIndex] += height + +gap;
-          const newSlot = smallestColIndex;
-          if (elem.slot !== newSlot) {
-            writes.push(() => elem.slot = newSlot);
-          }
-        }
-        for (const write of writes) {
-          write();
+      null !== this.currentRequestAnimationFrameCallback && void 0 !== this.currentRequestAnimationFrameCallback && window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback), this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
+        const t2 = this.gap, e2 = Array.from(this.children).filter((t3) => 1 === t3.nodeType), s2 = o(this.offsetWidth, this.cols, this.maxColWidth), n2 = Array(s2).fill(0), r = [];
+        for (const s3 of e2) {
+          const e3 = s3.getBoundingClientRect().height;
+          let o2 = i(n2);
+          n2[o2] += e3 + +t2;
+          const a = o2;
+          s3.slot !== a && r.push(() => s3.slot = a);
         }
-        this.renderCols(colCount);
+        for (const t3 of r) t3();
+        this.renderCols(s2);
       });
     });
-    this.debounceId = `layout_${Math.random()}`;
-    this.ro = void 0;
-    this.currentRequestAnimationFrameCallback = void 0;
-    this.unsetSlot = void 0;
+    this.debounceId = `layout_${Math.random()}`, this.ro = void 0, this.currentRequestAnimationFrameCallback = void 0, this.unsetSlot = void 0;
   }
-  /**
-   * Setter for the maxColWidth property.
-   * @param {number} value The maximum column width.
-   */
-  set maxColWidth(value) {
-    this.setAttribute("max-col-width", value);
+  set maxColWidth(t2) {
+    this.setAttribute("max-col-width", t2);
   }
-  /**
-   * Getter for the maxColWidth property.
-   * @returns {number} The maximum column width.
-   */
   get maxColWidth() {
     return this.hasAttribute("max-col-width") ? +this.getAttribute("max-col-width") : 500;
   }
-  /**
-   * Setter for the cols property.
-   * @param {number} value The number of columns.
-   */
-  set cols(value) {
-    if (this.hasAttribute("cols")) this.setAttribute("cols", value);
-    else this.setAttribute("cols", "auto");
+  set cols(t2) {
+    this.hasAttribute("cols") ? this.setAttribute("cols", t2) : this.setAttribute("cols", "auto");
   }
-  /**
-   * Getter for the cols property.
-   * @returns {number} The number of columns.
-   */
   get cols() {
-    return getNumberAttribute(this, "cols", "auto");
+    return s(this, "cols", "auto");
   }
-  /**
-   * Setter for the gap property.
-   * @param {number} value The gap between columns.
-   */
-  set gap(value) {
-    this.setAttribute("gap", value);
+  set gap(t2) {
+    this.setAttribute("gap", t2);
   }
-  /**
-   * Getter for the gap property.
-   * @returns {number} The gap between columns.
-   */
   get gap() {
-    return getNumberAttribute(this, "gap", "24");
+    return s(this, "gap", "24");
   }
-  /**
-   * Setter for the debounce property.
-   * @param {number} value The debounce time.
-   */
-  set debounce(value) {
-    this.setAttribute("debounce", value);
+  set debounce(t2) {
+    this.setAttribute("debounce", t2);
   }
-  /**
-   * Getter for the debounce property.
-   * @returns {number} The debounce time.
-   */
   get debounce() {
-    return getNumberAttribute(this, "debounce", DEFAULT_DEBOUNCE_MS);
+    return s(this, "debounce", 300);
   }
-  /**
-   * Getter for the columns property.
-   * @returns {Array} An array of all the columns.
-   */
   get columns() {
-    return Array.from(this.shadowRoot.querySelectorAll(`.column`));
+    return Array.from(this.shadowRoot.querySelectorAll(".column"));
   }
-  /**
-   * Getter for the cssStyleSheet property.
-   * @static
-   * @returns {CSSStyleSheet} The CSS style sheet for the masonry layout.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:flex;align-items:flex-start;justify-content:stretch;width:100%}.column{max-width:calc((100% / var(--wje-masonry-layout-col-count, 1) - ((var(--wje-masonry-layout-gap, 1rem) * (var(--wje-masonry-layout-col-count, 1) - 1) / var(--wje-masonry-layout-col-count, 1)))));width:100%;flex:1;display:flex;flex-direction:column}.column:not(:last-child){margin-inline-end:var(--wje-masonry-layout-gap, 1rem)}.column ::slotted(*){margin-block-end:var(--wje-masonry-layout-gap, 1rem);box-sizing:border-box;width:100%}#unset-items{opacity:0;position:absolute;pointer-events:none}";
   }
-  /**
-   * Getter for the observedAttributes property.
-   * @returns {Array} An array of the observed attributes.
-   */
   static get observedAttributes() {
     return ["max-col-width", "gap", "cols"];
   }
-  /**
-   * Callback for when an attribute changes.
-   */
-  attributeChangedCallback(name, old, newName) {
-    switch (name) {
-      case "gap":
-        this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);
-        break;
-    }
+  attributeChangedCallback(t2, e2, s2) {
+    if ("gap" === t2) this.style.setProperty("--wje-masonry-layout-gap", `${this.gap}px`);
     this.scheduleLayout();
   }
-  /**
-   * Callback for when the element is disconnected.
-   */
   beforeDisconnect() {
-    this.unsetSlot.removeEventListener("slotchange", this.onSlotChange);
-    window.removeEventListener("resize", this.onResize);
-    if (this.ro !== null && this.ro !== void 0) {
-      this.ro.unobserve(this);
-    }
+    this.unsetSlot.removeEventListener("slotchange", this.onSlotChange), window.removeEventListener("resize", this.onResize), null !== this.ro && void 0 !== this.ro && this.ro.unobserve(this);
   }
-  /**
-   * Sets up the attributes for the element.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the element for the masonry layout.
-   * @returns {DocumentFragment} The drawn element.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("id", "unset-items");
-    native.setAttribute("part", "native");
-    let unsetSlot = document.createElement("slot");
-    native.appendChild(unsetSlot);
-    this.unsetSlot = unsetSlot;
-    this.native = native;
-    fragment.appendChild(native);
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("id", "unset-items"), e2.setAttribute("part", "native");
+    let s2 = document.createElement("slot");
+    return e2.appendChild(s2), this.unsetSlot = s2, this.native = e2, t2.appendChild(e2), t2;
   }
-  /**
-   * Called after the element is drawn.
-   */
   afterDraw() {
-    this.onSlotChange();
-    this.onResize();
-    this.layout();
-    this.unsetSlot.addEventListener("slotchange", this.onSlotChange);
-    if ("ResizeObserver" in window) {
-      this.ro = new ResizeObserver(this.onResize);
-      this.ro.observe(this);
-    } else {
-      window.addEventListener("resize", this.onResize);
-    }
-  }
-  /**
-   * Renders the columns.
-   * @param {number} colCount The number of columns to render.
-   */
-  renderCols(colCount) {
-    const columns = this.columns;
-    if (columns.length === colCount) {
-      return;
-    }
-    for (let i = 0; i < colCount; i++) {
-      const column = document.createElement("div");
-      column.classList.add("column");
-      column.setAttribute("part", `column column-${i}`);
-      const slot = document.createElement("slot");
-      slot.setAttribute("name", i);
-      column.appendChild(slot);
-      this.context.appendChild(column);
+    this.onSlotChange(), this.onResize(), this.layout(), this.unsetSlot.addEventListener("slotchange", this.onSlotChange), "ResizeObserver" in window ? (this.ro = new ResizeObserver(this.onResize), this.ro.observe(this)) : window.addEventListener("resize", this.onResize);
+  }
+  renderCols(t2) {
+    if (this.columns.length !== t2) {
+      for (let e2 = 0; e2 < t2; e2++) {
+        const t3 = document.createElement("div");
+        t3.classList.add("column"), t3.setAttribute("part", `column column-${e2}`);
+        const s2 = document.createElement("slot");
+        s2.setAttribute("name", e2), t3.appendChild(s2), this.context.appendChild(t3);
+      }
+      this.style.setProperty("--wje-masonry-layout-col-count", t2);
     }
-    this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount);
   }
-  /**
-   * Schedules a layout.
-   * @param {number} ms The number of milliseconds to wait before laying out.
-   */
-  scheduleLayout(ms = this.debounce) {
-    debounce(this.layout, ms, this.debounceId);
+  scheduleLayout(t2 = this.debounce) {
+    !(function(t3, s2, o2) {
+      const i2 = e.get(o2);
+      null != i2 && window.clearTimeout(i2), e.set(o2, window.setTimeout(t3, s2));
+    })(this.layout, t2, this.debounceId);
   }
 }
-Masonry.define("wje-masonry", Masonry);
+n.define("wje-masonry", n);
 export {
-  Masonry as default
+  n as default
 };
 //# sourceMappingURL=wje-masonry.js.map

package/dist/wje-masonry.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-masonry.js","sources":["../packages/wje-masonry/service/service.js","../packages/wje-masonry/masonry.element.js","../packages/wje-masonry/masonry.js"],"sourcesContent":["export const DEFAULT_MAX_COL_WIDTH = 500;\nexport const DEFAULT_DEBOUNCE_MS = 300;\n\nexport const COL_COUNT_CSS_VAR_NAME = `--wje-masonry-layout-col-count`;\nexport const GAP_CSS_VAR_NAME = `--wje-masonry-layout-gap`;\n\nexport const ELEMENT_NODE_TYPE = 1;\n\nconst DEBOUNCE_MAP = new Map();\n\n/**\n * Returns a number attribute from an element.\n * @param $elem\n * @param name\n * @param defaultValue\n * @returns {string|number}\n */\nexport function getNumberAttribute($elem, name, defaultValue) {\n    const value = parseFloat($elem.getAttribute(name) || '');\n    return isNaN(value) ? defaultValue : value;\n}\n\n/**\n * Returns the amount of cols that the masonry grid should have.\n * @param totalWidth\n * @param cols\n * @param maxColWidth\n */\nexport function getColCount(totalWidth, cols, maxColWidth) {\n    return isNaN(cols) ? Math.max(1, Math.ceil(totalWidth / maxColWidth)) : cols;\n}\n\n/**\n * Debounces a function.\n * @param cb\n * @param ms\n * @param id\n */\nexport function debounce(cb, ms, id) {\n    const existingTimeout = DEBOUNCE_MAP.get(id);\n    if (existingTimeout !== null && existingTimeout !== undefined) window.clearTimeout(existingTimeout);\n    DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));\n}\n\n/**\n * Returns the index of the column with the smallest height.\n * @param colHeights\n */\nexport function findSmallestColIndex(colHeights) {\n    let smallestIndex = 0;\n    let smallestHeight = Infinity;\n\n    colHeights.forEach((height, i) => {\n        if (height < smallestHeight) {\n            smallestHeight = height;\n            smallestIndex = i;\n        }\n    });\n\n    return smallestIndex;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport {\n    COL_COUNT_CSS_VAR_NAME,\n    debounce,\n    DEFAULT_DEBOUNCE_MS,\n    DEFAULT_MAX_COL_WIDTH,\n    ELEMENT_NODE_TYPE,\n    findSmallestColIndex,\n    GAP_CSS_VAR_NAME,\n    getColCount,\n    getNumberAttribute,\n} from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Masonry` is a custom web component that represents a masonry layout.\n * It extends from `WJElement`.\n * @summary This element represents a masonry layout.\n * @documentation https://elements.webjet.sk/components/masonry\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the masonry layout.\n * @csspart column - The individual columns in the masonry layout.\n * @slot - The default slot for the masonry layout.\n * @cssproperty [--wje-masonry-layout-gap=1rem] - The gap between items in the masonry layout. Accepts any valid CSS length. Default is 1rem.\n * @cssproperty [--wje-masonry-layout-col-count=1] - The count column in the masonry layout. Accepts any valid CSS length.\n * @tag wje-masonry\n */\nexport default class Masonry extends WJElement {\n    /**\n     * Constructor for the Masonry class.\n     */\n    constructor() {\n        super();\n\n        this.debounceId = `layout_${Math.random()}`;\n        this.ro = undefined;\n        this.currentRequestAnimationFrameCallback = undefined;\n        this.unsetSlot = undefined;\n    }\n\n    /**\n     * Setter for the maxColWidth property.\n     * @param {number} value The maximum column width.\n     */\n    set maxColWidth(value) {\n        this.setAttribute('max-col-width', value);\n    }\n\n    /**\n     * Getter for the maxColWidth property.\n     * @returns {number} The maximum column width.\n     */\n    get maxColWidth() {\n        return this.hasAttribute('max-col-width') ? +this.getAttribute('max-col-width') : +DEFAULT_MAX_COL_WIDTH;\n    }\n\n    /**\n     * Setter for the cols property.\n     * @param {number} value The number of columns.\n     */\n    set cols(value) {\n        if (this.hasAttribute('cols')) this.setAttribute('cols', value);\n        else this.setAttribute('cols', 'auto');\n    }\n\n    /**\n     * Getter for the cols property.\n     * @returns {number} The number of columns.\n     */\n    get cols() {\n        return getNumberAttribute(this, 'cols', 'auto');\n    }\n\n    /**\n     * Setter for the gap property.\n     * @param {number} value The gap between columns.\n     */\n    set gap(value) {\n        this.setAttribute('gap', value);\n    }\n\n    /**\n     * Getter for the gap property.\n     * @returns {number} The gap between columns.\n     */\n    get gap() {\n        return getNumberAttribute(this, 'gap', '24');\n    }\n\n    /**\n     * Setter for the debounce property.\n     * @param {number} value The debounce time.\n     */\n    set debounce(value) {\n        this.setAttribute('debounce', value);\n    }\n\n    /**\n     * Getter for the debounce property.\n     * @returns {number} The debounce time.\n     */\n    get debounce() {\n        return getNumberAttribute(this, 'debounce', DEFAULT_DEBOUNCE_MS);\n    }\n\n    /**\n     * Getter for the columns property.\n     * @returns {Array} An array of all the columns.\n     */\n    get columns() {\n        return Array.from(this.shadowRoot.querySelectorAll(`.column`));\n    }\n\n    debounceId = `layout_${Math.random()}`;\n\n    ro = undefined;\n\n    className = 'Masonry';\n\n    /**\n     * Getter for the cssStyleSheet property.\n     * @static\n     * @returns {CSSStyleSheet} The CSS style sheet for the masonry layout.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes property.\n     * @returns {Array} An array of the observed attributes.\n     */\n    static get observedAttributes() {\n        return ['max-col-width', 'gap', 'cols'];\n    }\n\n    /**\n     * Callback for when an attribute changes.\n     */\n    attributeChangedCallback(name, old, newName) {\n        switch (name) {\n            case 'gap':\n                this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);\n                break;\n        }\n\n        this.scheduleLayout();\n    }\n\n    /**\n     * Callback for when the element is disconnected.\n     */\n    beforeDisconnect() {\n        this.unsetSlot.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.onResize);\n        if (this.ro !== null && this.ro !== undefined) {\n            this.ro.unobserve(this);\n        }\n    }\n\n    /**\n     * Sets up the attributes for the element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the element for the masonry layout.\n     * @returns {DocumentFragment} The drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('id', 'unset-items');\n        native.setAttribute('part', 'native');\n\n        let unsetSlot = document.createElement('slot');\n\n        native.appendChild(unsetSlot);\n\n        this.unsetSlot = unsetSlot;\n        this.native = native;\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the element is drawn.\n     */\n    afterDraw() {\n        this.onSlotChange();\n        this.onResize();\n        this.layout();\n\n        this.unsetSlot.addEventListener('slotchange', this.onSlotChange);\n\n        if ('ResizeObserver' in window) {\n            this.ro = new ResizeObserver(this.onResize);\n            this.ro.observe(this);\n        } else {\n            window.addEventListener('resize', this.onResize);\n        }\n    }\n\n    /**\n     * Called when the slot changes.\n     */\n    onSlotChange = () => {\n        const $unsetElements = (this.unsetSlot.assignedNodes() || []).filter(\n            (node) => node.nodeType === ELEMENT_NODE_TYPE\n        );\n        if ($unsetElements.length > 0) {\n            this.layout();\n        }\n    };\n\n    /**\n     * Called when the window resizes.\n     * @param {Array} entries The entries to use.\n     */\n    onResize = (entries) => {\n        const { width } =\n            entries !== null && entries !== undefined && Array.isArray(entries) && entries.length > 0\n                ? entries[0].contentRect\n                : { width: this.offsetWidth };\n        const colCount = getColCount(width, this.cols, this.maxColWidth);\n        if (colCount !== this.columns.length) {\n            this.scheduleLayout();\n        }\n    };\n\n    /**\n     * Renders the columns.\n     * @param {number} colCount The number of columns to render.\n     */\n    renderCols(colCount) {\n        const columns = this.columns;\n\n        if (columns.length === colCount) {\n            return;\n        }\n\n        for (let i = 0; i < colCount; i++) {\n            const column = document.createElement('div');\n            column.classList.add('column');\n            column.setAttribute('part', `column column-${i}`);\n\n            const slot = document.createElement('slot');\n            slot.setAttribute('name', i);\n\n            column.appendChild(slot);\n\n            this.context.appendChild(column);\n        }\n\n        this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount);\n    }\n\n    /**\n     * Schedules a layout.\n     * @param {number} ms The number of milliseconds to wait before laying out.\n     */\n    scheduleLayout(ms = this.debounce) {\n        debounce(this.layout, ms, this.debounceId);\n    }\n\n    /**\n     * Lays out the element.\n     */\n    layout = () => {\n        if (\n            this.currentRequestAnimationFrameCallback !== null &&\n            this.currentRequestAnimationFrameCallback !== undefined\n        ) {\n            window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);\n        }\n\n        this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {\n            const gap = this.gap;\n            const $elements = Array.from(this.children).filter((node) => node.nodeType === ELEMENT_NODE_TYPE);\n            const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);\n            const colHeights = Array(colCount).fill(0);\n            const writes = [];\n\n            for (const elem of $elements) {\n                const height = elem.getBoundingClientRect().height;\n                let smallestColIndex = findSmallestColIndex(colHeights);\n\n                colHeights[smallestColIndex] += height + +gap;\n\n                const newSlot = smallestColIndex;\n\n                if (elem.slot !== newSlot) {\n                    writes.push(() => (elem.slot = newSlot));\n                }\n            }\n\n            for (const write of writes) {\n                write();\n            }\n\n            this.renderCols(colCount);\n        });\n    };\n}\n","import Masonry from './masonry.element.js';\n\nexport default Masonry;\n\nMasonry.define('wje-masonry', Masonry);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-masonry.js","sources":["../packages/wje-masonry/service/service.js","../packages/wje-masonry/masonry.element.js","../packages/wje-masonry/masonry.js"],"sourcesContent":["export const DEFAULT_MAX_COL_WIDTH = 500;\nexport const DEFAULT_DEBOUNCE_MS = 300;\n\nexport const COL_COUNT_CSS_VAR_NAME = `--wje-masonry-layout-col-count`;\nexport const GAP_CSS_VAR_NAME = `--wje-masonry-layout-gap`;\n\nexport const ELEMENT_NODE_TYPE = 1;\n\nconst DEBOUNCE_MAP = new Map();\n\n/**\n * Returns a number attribute from an element.\n * @param $elem\n * @param name\n * @param defaultValue\n * @returns {string|number}\n */\nexport function getNumberAttribute($elem, name, defaultValue) {\n    const value = parseFloat($elem.getAttribute(name) || '');\n    return isNaN(value) ? defaultValue : value;\n}\n\n/**\n * Returns the amount of cols that the masonry grid should have.\n * @param totalWidth\n * @param cols\n * @param maxColWidth\n */\nexport function getColCount(totalWidth, cols, maxColWidth) {\n    return isNaN(cols) ? Math.max(1, Math.ceil(totalWidth / maxColWidth)) : cols;\n}\n\n/**\n * Debounces a function.\n * @param cb\n * @param ms\n * @param id\n */\nexport function debounce(cb, ms, id) {\n    const existingTimeout = DEBOUNCE_MAP.get(id);\n    if (existingTimeout !== null && existingTimeout !== undefined) window.clearTimeout(existingTimeout);\n    DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));\n}\n\n/**\n * Returns the index of the column with the smallest height.\n * @param colHeights\n */\nexport function findSmallestColIndex(colHeights) {\n    let smallestIndex = 0;\n    let smallestHeight = Infinity;\n\n    colHeights.forEach((height, i) => {\n        if (height < smallestHeight) {\n            smallestHeight = height;\n            smallestIndex = i;\n        }\n    });\n\n    return smallestIndex;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport {\n    COL_COUNT_CSS_VAR_NAME,\n    debounce,\n    DEFAULT_DEBOUNCE_MS,\n    DEFAULT_MAX_COL_WIDTH,\n    ELEMENT_NODE_TYPE,\n    findSmallestColIndex,\n    GAP_CSS_VAR_NAME,\n    getColCount,\n    getNumberAttribute,\n} from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Masonry` is a custom web component that represents a masonry layout.\n * It extends from `WJElement`.\n * @summary This element represents a masonry layout.\n * @documentation https://elements.webjet.sk/components/masonry\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the masonry layout.\n * @csspart column - The individual columns in the masonry layout.\n * @slot - The default slot for the masonry layout.\n * @cssproperty [--wje-masonry-layout-gap=1rem] - The gap between items in the masonry layout. Accepts any valid CSS length. Default is 1rem.\n * @cssproperty [--wje-masonry-layout-col-count=1] - The count column in the masonry layout. Accepts any valid CSS length.\n * @tag wje-masonry\n */\nexport default class Masonry extends WJElement {\n    /**\n     * Constructor for the Masonry class.\n     */\n    constructor() {\n        super();\n\n        this.debounceId = `layout_${Math.random()}`;\n        this.ro = undefined;\n        this.currentRequestAnimationFrameCallback = undefined;\n        this.unsetSlot = undefined;\n    }\n\n    /**\n     * Setter for the maxColWidth property.\n     * @param {number} value The maximum column width.\n     */\n    set maxColWidth(value) {\n        this.setAttribute('max-col-width', value);\n    }\n\n    /**\n     * Getter for the maxColWidth property.\n     * @returns {number} The maximum column width.\n     */\n    get maxColWidth() {\n        return this.hasAttribute('max-col-width') ? +this.getAttribute('max-col-width') : +DEFAULT_MAX_COL_WIDTH;\n    }\n\n    /**\n     * Setter for the cols property.\n     * @param {number} value The number of columns.\n     */\n    set cols(value) {\n        if (this.hasAttribute('cols')) this.setAttribute('cols', value);\n        else this.setAttribute('cols', 'auto');\n    }\n\n    /**\n     * Getter for the cols property.\n     * @returns {number} The number of columns.\n     */\n    get cols() {\n        return getNumberAttribute(this, 'cols', 'auto');\n    }\n\n    /**\n     * Setter for the gap property.\n     * @param {number} value The gap between columns.\n     */\n    set gap(value) {\n        this.setAttribute('gap', value);\n    }\n\n    /**\n     * Getter for the gap property.\n     * @returns {number} The gap between columns.\n     */\n    get gap() {\n        return getNumberAttribute(this, 'gap', '24');\n    }\n\n    /**\n     * Setter for the debounce property.\n     * @param {number} value The debounce time.\n     */\n    set debounce(value) {\n        this.setAttribute('debounce', value);\n    }\n\n    /**\n     * Getter for the debounce property.\n     * @returns {number} The debounce time.\n     */\n    get debounce() {\n        return getNumberAttribute(this, 'debounce', DEFAULT_DEBOUNCE_MS);\n    }\n\n    /**\n     * Getter for the columns property.\n     * @returns {Array} An array of all the columns.\n     */\n    get columns() {\n        return Array.from(this.shadowRoot.querySelectorAll(`.column`));\n    }\n\n    debounceId = `layout_${Math.random()}`;\n\n    ro = undefined;\n\n    className = 'Masonry';\n\n    /**\n     * Getter for the cssStyleSheet property.\n     * @static\n     * @returns {CSSStyleSheet} The CSS style sheet for the masonry layout.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes property.\n     * @returns {Array} An array of the observed attributes.\n     */\n    static get observedAttributes() {\n        return ['max-col-width', 'gap', 'cols'];\n    }\n\n    /**\n     * Callback for when an attribute changes.\n     */\n    attributeChangedCallback(name, old, newName) {\n        switch (name) {\n            case 'gap':\n                this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);\n                break;\n        }\n\n        this.scheduleLayout();\n    }\n\n    /**\n     * Callback for when the element is disconnected.\n     */\n    beforeDisconnect() {\n        this.unsetSlot.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.onResize);\n        if (this.ro !== null && this.ro !== undefined) {\n            this.ro.unobserve(this);\n        }\n    }\n\n    /**\n     * Sets up the attributes for the element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the element for the masonry layout.\n     * @returns {DocumentFragment} The drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('id', 'unset-items');\n        native.setAttribute('part', 'native');\n\n        let unsetSlot = document.createElement('slot');\n\n        native.appendChild(unsetSlot);\n\n        this.unsetSlot = unsetSlot;\n        this.native = native;\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the element is drawn.\n     */\n    afterDraw() {\n        this.onSlotChange();\n        this.onResize();\n        this.layout();\n\n        this.unsetSlot.addEventListener('slotchange', this.onSlotChange);\n\n        if ('ResizeObserver' in window) {\n            this.ro = new ResizeObserver(this.onResize);\n            this.ro.observe(this);\n        } else {\n            window.addEventListener('resize', this.onResize);\n        }\n    }\n\n    /**\n     * Called when the slot changes.\n     */\n    onSlotChange = () => {\n        const $unsetElements = (this.unsetSlot.assignedNodes() || []).filter(\n            (node) => node.nodeType === ELEMENT_NODE_TYPE\n        );\n        if ($unsetElements.length > 0) {\n            this.layout();\n        }\n    };\n\n    /**\n     * Called when the window resizes.\n     * @param {Array} entries The entries to use.\n     */\n    onResize = (entries) => {\n        const { width } =\n            entries !== null && entries !== undefined && Array.isArray(entries) && entries.length > 0\n                ? entries[0].contentRect\n                : { width: this.offsetWidth };\n        const colCount = getColCount(width, this.cols, this.maxColWidth);\n        if (colCount !== this.columns.length) {\n            this.scheduleLayout();\n        }\n    };\n\n    /**\n     * Renders the columns.\n     * @param {number} colCount The number of columns to render.\n     */\n    renderCols(colCount) {\n        const columns = this.columns;\n\n        if (columns.length === colCount) {\n            return;\n        }\n\n        for (let i = 0; i < colCount; i++) {\n            const column = document.createElement('div');\n            column.classList.add('column');\n            column.setAttribute('part', `column column-${i}`);\n\n            const slot = document.createElement('slot');\n            slot.setAttribute('name', i);\n\n            column.appendChild(slot);\n\n            this.context.appendChild(column);\n        }\n\n        this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount);\n    }\n\n    /**\n     * Schedules a layout.\n     * @param {number} ms The number of milliseconds to wait before laying out.\n     */\n    scheduleLayout(ms = this.debounce) {\n        debounce(this.layout, ms, this.debounceId);\n    }\n\n    /**\n     * Lays out the element.\n     */\n    layout = () => {\n        if (\n            this.currentRequestAnimationFrameCallback !== null &&\n            this.currentRequestAnimationFrameCallback !== undefined\n        ) {\n            window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);\n        }\n\n        this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {\n            const gap = this.gap;\n            const $elements = Array.from(this.children).filter((node) => node.nodeType === ELEMENT_NODE_TYPE);\n            const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);\n            const colHeights = Array(colCount).fill(0);\n            const writes = [];\n\n            for (const elem of $elements) {\n                const height = elem.getBoundingClientRect().height;\n                let smallestColIndex = findSmallestColIndex(colHeights);\n\n                colHeights[smallestColIndex] += height + +gap;\n\n                const newSlot = smallestColIndex;\n\n                if (elem.slot !== newSlot) {\n                    writes.push(() => (elem.slot = newSlot));\n                }\n            }\n\n            for (const write of writes) {\n                write();\n            }\n\n            this.renderCols(colCount);\n        });\n    };\n}\n","import Masonry from './masonry.element.js';\n\nexport default Masonry;\n\nMasonry.define('wje-masonry', Masonry);\n"],"names":["DEBOUNCE_MAP","Map","getNumberAttribute","$elem","name","defaultValue","value","parseFloat","getAttribute","isNaN","getColCount","totalWidth","cols","maxColWidth","Math","max","ceil","findSmallestColIndex","colHeights","smallestIndex","smallestHeight","Infinity","forEach","height","i","Masonry","WJElement","constructor","super","debounceId","random","ro","className","onSlotChange","this","unsetSlot","assignedNodes","filter","node","nodeType","length","layout","onResize","entries","width","Array","isArray","contentRect","offsetWidth","columns","scheduleLayout","currentRequestAnimationFrameCallback","window","cancelAnimationFrame","requestAnimationFrame","gap","$elements","from","children","colCount","fill","writes","elem","getBoundingClientRect","smallestColIndex","newSlot","slot","push","write","renderCols","setAttribute","hasAttribute","debounce","shadowRoot","querySelectorAll","cssStyleSheet","observedAttributes","old","newName","style","setProperty","beforeDisconnect","removeEventListener","unobserve","setupAttributes","isShadowRoot","draw","fragment","document","createDocumentFragment","native","createElement","appendChild","afterDraw","addEventListener","ResizeObserver","observe","column","classList","add","context","ms","cb","id","existingTimeout","get","clearTimeout","set","setTimeout","define"],"mappings":"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"}