wj-elements 0.1.4 → 0.1.6

package/dist/wje-item.js

@@ -1,45 +0,0 @@
-var d = Object.defineProperty;
-var l = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var r = (i, t, e) => (l(i, typeof t != "symbol" ? t + "" : t, e), e);
-import m from "./wje-element.js";
-const p = ':host{--wje-border-width: 0 0 1px 0;--wje-item-background: transparent;--wje-item-background-hover: var(--wje-color-contrast-3);--wje-item-padding-top: 0px;--wje-item-padding-bottom: 0px;--wje-item-padding-end: 0px;--wje-item-padding-start: 0px;--wje-item-inner-border-width: 0 0 1px 0;--wje-item-inner-padding-top: 0px;--wje-item-inner-padding-bottom: 0px;--wje-item-inner-padding-start: 0px;--wje-item-inner-padding-end: 0px;--wje-item-inner-box-shadow: none;--wje-item-min-height: 40px;--wje-item-transition: opacity 15ms linear, background-color 15ms linear;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--wje-item-color);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box;width:100%}.item-native{border-radius:var(--wje-item-border-radius);padding-top:var(--wje-item-padding-top);padding-bottom:var(--wje-item-padding-bottom);padding-inline:var(--wje-item-padding-start) var(--wje-item-padding-end);margin:0;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--wje-item-min-height);transition:var(--wje-item-transition);outline:none;background:var(--wje-item-background);overflow:inherit;box-sizing:border-box;z-index:1;text-decoration:none;color:var(--wje-item-color)}.item-native .item-inner{margin:0;padding:var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);display:flex;position:relative;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--wje-border-width);border-style:var(--wje-border-style);border-color:var(--wje-border-color);box-shadow:var(--wje-item-inner-box-shadow);overflow:inherit;box-sizing:border-box}.item-native .item-inner .input-wrapper{display:flex;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}.item-native .item-bottom{padding:0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);display:flex;justify-content:space-between}@media (any-hover: hover){:host(:hover) .item-native{color:var(--wje-item-color)}:host(:hover) .item-native :after{transition:var(--wje-item-transition);z-index:-1;top:0;right:0;bottom:0;left:0;position:absolute;content:"";background:var(--wje-item-background-hover);opacity:.7}}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted([slot=start]){margin-inline:0 1rem}::slotted(wje-label:not([slot=end])){flex:1 1 0}';
-class a extends m {
-  constructor() {
-    super();
-    r(this, "className", "Item");
-    r(this, "hostContext", (e, n) => n.closest(e) !== null);
-    this.labelColorStyles = {}, this.itemStyles = /* @__PURE__ */ new Map(), this.inheritedAriaAttributes = {}, this.multipleInputs = !1, this.focusable = !0, this.button = !1, this.detailIcon = "", this.disabled = !1, this.counter = !1, this.routerDirection = "forward", this.type = "button";
-  }
-  isClickable() {
-    return this.hasAttribute("href") || this.button;
-  }
-  static get cssStyleSheet() {
-    return p;
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  beforeDraw(e, n, s) {
-  }
-  draw(e, n, s) {
-    const o = this.isClickable() ? this.hasAttribute("href") === void 0 ? "button" : "a" : "div";
-    return this.hostContext("wje-list", this) && this.classList.add("wje-item-list"), `<${o} class="item-native" part="native">
-			<slot name="start"></slot>
-			<div class="item-inner">
-					<div class="input-wrapper">
-							<slot></slot>
-					</div>
-					<slot name="end"></slot>
-			</div>
-			<div class="item-highlight"></div>
-    </${o}>
-		<div class="item-bottom">
-				<slot name="error"></slot>
-				<slot name="helper"></slot>
-		</div>`;
-  }
-}
-a.define("wje-item", a);
-export {
-  a as default
-};

package/dist/wje-label.js

@@ -1,67 +0,0 @@
-var i = Object.defineProperty;
-var w = (e, o, t) => o in e ? i(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
-var l = (e, o, t) => (w(e, typeof o != "symbol" ? o + "" : o, t), t);
-import m from "./wje-element.js";
-const h = ":host(.wje-color-primary){--wje-color: var(--wje-color-primary) !important}:host(.wje-color-complete){--wje-color: var(--wje-color-complete) !important}:host(.wje-color-success){--wje-color-base: var(--wje-color-success) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host(.wje-color-warning){--wje-color-base: var(--wje-color-warning) !important;--wje-color-contrast: var(--wje-color-contrast-11) !important}:host(.wje-color-danger){--wje-color-base: var(--wje-color-danger) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host(.wje-color-info){--wje-color-base: var(--wje-color-info) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host(.wje-color-menu){--wje-color-base: var(--wje-color-menu) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host{--wje-color: initial;display:block;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}:host(.wje-color){color:current-color(base)}:host(.wje-text-wrap),:host([text-wrap]){white-space:normal!important}:host(.label-fixed){flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.label-stacked),:host(.label-floating){margin-bottom:0;align-self:stretch;width:auto;max-width:100%}:host(.label-no-animate.label-floating){transition:none}::slotted(*) h1,::slotted(*) h2,::slotted(*) h3,::slotted(*) h4,::slotted(*) h5,::slotted(*) h6{text-overflow:inherit;overflow:inherit}:host(.wje-color){color:var(--wje-color)}::slotted(*:first-child){margin-top:0!important}::slotted(*:last-child){margin-bottom:0!important}";
-class s extends m {
-  /**
-   * Creates an instance of Label.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    l(this, "className", "Label");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return h;
-  }
-  /**
-   * 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";
-  }
-  /**
-   * Prepares the component before drawing.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   */
-  beforeDraw(t, c, r) {
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(t, c, r) {
-    let a = document.createDocumentFragment();
-    this.color && this.classList.add("wje-color-" + r.color, "wje-color");
-    let n = document.createElement("slot");
-    return a.appendChild(n), a;
-  }
-}
-s.define("wje-label", s);
-export {
-  s as default
-};

package/dist/wje-list.js

@@ -1,53 +0,0 @@
-var o = Object.defineProperty;
-var l = (e, t, s) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var r = (e, t, s) => (l(e, typeof t != "symbol" ? t + "" : t, s), s);
-import d from "./wje-element.js";
-const c = ":host{--wje-list-inset-padding: 1rem;--wje-list-border-radius: 8px;--wje-list-background: var(--wje-background);margin:0;padding:0;display:block;contain:content;list-style-type:none}:host(.wje-inset){background:var(--wje-list-background);transform:translateZ(0);overflow:hidden;padding:var(--wje-list-inset-padding);border-radius:var(--wje-list-border-radius)}:host(.wje-lines-none) ::slotted(wje-item){--wje-border-width: 0 !important}";
-class n extends d {
-  /**
-   * Creates an instance of List.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    r(this, "className", "List");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return c;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(s, u, w) {
-    let i = document.createDocumentFragment(), a = document.createElement("slot");
-    return i.appendChild(a), i;
-  }
-  /**
-   * Called after the component has been drawn.
-   */
-  afterDraw() {
-    this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines")), this.classList.toggle("wje-inset", this.hasAttribute("inset"));
-  }
-}
-n.define("wje-list", n);
-export {
-  n as default
-};

package/dist/wje-main.js

@@ -1,56 +0,0 @@
-var i = Object.defineProperty;
-var l = (t, e, s) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
-var a = (t, e, s) => (l(t, typeof e != "symbol" ? e + "" : e, s), s);
-import c from "./wje-element.js";
-const d = ":host{display:block;flex:1;flex-basis:auto;padding:1.5rem;box-sizing:border-box}";
-class n extends c {
-  /**
-   * Creates an instance of Main.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    a(this, "className", "Main");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return d;
-  }
-  /**
-   * 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.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(s, m, u) {
-    let r = document.createDocumentFragment(), o = document.createElement("slot");
-    return r.appendChild(o), r;
-  }
-}
-n.define("wje-main", n);
-export {
-  n as default
-};

package/dist/wje-masonry.js

@@ -1,218 +0,0 @@
-var p = Object.defineProperty;
-var b = (o, s, t) => s in o ? p(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
-var r = (o, s, t) => (b(o, typeof s != "symbol" ? s + "" : s, t), t);
-import w from "./wje-element.js";
-const A = 500, C = 300, x = "--wje-masonry-layout-col-count", v = "--wje-masonry-layout-gap", d = 1, m = /* @__PURE__ */ new Map();
-function c(o, s, t) {
-  const e = parseFloat(o.getAttribute(s) || "");
-  return isNaN(e) ? t : e;
-}
-function g(o, s, t) {
-  return isNaN(s) ? Math.max(1, Math.ceil(o / t)) : s;
-}
-function E(o, s, t) {
-  const e = m.get(t);
-  e != null && window.clearTimeout(e), m.set(t, window.setTimeout(o, s));
-}
-function S(o) {
-  let s = 0, t = 1 / 0;
-  return o.forEach((e, n) => {
-    e < t && (t = e, s = n);
-  }), s;
-}
-const N = ":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}";
-class f extends w {
-  /**
-   * Constructor for the Masonry class.
-   */
-  constructor() {
-    super();
-    r(this, "debounceId", `layout_${Math.random()}`);
-    r(this, "ro");
-    r(this, "className", "Masonry");
-    /**
-     * Called when the slot changes.
-     */
-    r(this, "onSlotChange", () => {
-      (this.unsetSlot.assignedNodes() || []).filter((e) => e.nodeType === d).length > 0 && this.layout();
-    });
-    /**
-     * Called when the window resizes.
-     * @param {Array} entries - The entries to use.
-     */
-    r(this, "onResize", (t) => {
-      const { width: e } = t != null && Array.isArray(t) && t.length > 0 ? t[0].contentRect : { width: this.offsetWidth };
-      g(e, this.cols, this.maxColWidth) !== this.columns.length && this.scheduleLayout();
-    });
-    /**
-     * Lays out the element.
-     */
-    r(this, "layout", () => {
-      this.currentRequestAnimationFrameCallback != null && window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback), this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
-        const t = this.gap, e = Array.from(this.children).filter((l) => l.nodeType === d), n = g(this.offsetWidth, this.cols, this.maxColWidth), a = Array(n).fill(0), i = [];
-        for (const l of e) {
-          const y = l.getBoundingClientRect().height;
-          let u = S(a);
-          a[u] += y + +t;
-          const h = u;
-          l.slot !== h && i.push(() => l.slot = h);
-        }
-        for (const l of i)
-          l();
-        this.renderCols(n);
-      });
-    });
-    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(t) {
-    this.setAttribute("max-col-width", t);
-  }
-  /**
-   * Getter for the maxColWidth property.
-   * @returns {number} The maximum column width.
-   */
-  get maxColWidth() {
-    return this.hasAttribute("max-col-width") ? +this.getAttribute("max-col-width") : +A;
-  }
-  /**
-   * Setter for the cols property.
-   * @param {number} value - The number of columns.
-   */
-  set cols(t) {
-    this.hasAttribute("cols") && this.setAttribute("cols", t);
-  }
-  /**
-   * Getter for the cols property.
-   * @returns {number} The number of columns.
-   */
-  get cols() {
-    return c(this, "cols", "auto");
-  }
-  /**
-   * Setter for the gap property.
-   * @param {number} value - The gap between columns.
-   */
-  set gap(t) {
-    this.setAttribute("gap", t);
-  }
-  /**
-   * Getter for the gap property.
-   * @returns {number} The gap between columns.
-   */
-  get gap() {
-    return c(this, "gap", "24");
-  }
-  /**
-   * Setter for the debounce property.
-   * @param {number} value - The debounce time.
-   */
-  set debounce(t) {
-    this.setAttribute("debounce", t);
-  }
-  /**
-   * Getter for the debounce property.
-   * @returns {number} The debounce time.
-   */
-  get debounce() {
-    return c(this, "debounce", C);
-  }
-  /**
-   * Getter for the columns property.
-   * @returns {Array} An array of all the columns.
-   */
-  get columns() {
-    return Array.from(this.shadowRoot.querySelectorAll(".column"));
-  }
-  /**
-   * Getter for the cssStyleSheet property.
-   * @returns {CSSStyleSheet} The CSS style sheet.
-   */
-  static get cssStyleSheet() {
-    return N;
-  }
-  /**
-   * 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.
-   * @param {string} name - The name of the attribute.
-   * @param {string} old - The old value of the attribute.
-   * @param {string} newName - The new value of the attribute.
-   */
-  attributeChangedCallback(t, e, n) {
-    switch (t) {
-      case "gap":
-        this.style.setProperty(v, `${this.gap}px`);
-        break;
-    }
-    this.scheduleLayout();
-  }
-  /**
-   * Callback for when the element is disconnected.
-   */
-  disconnectedCallback() {
-    this.unsetSlot.removeEventListener("slotchange", this.onSlotChange), window.removeEventListener("resize", this.onResize), this.ro != null && this.ro.unobserve(this);
-  }
-  /**
-   * Sets up the attributes for the element.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the element.
-   * @param {CanvasRenderingContext2D} context - The context to draw on.
-   * @param {Object} store - The store to use.
-   * @param {Object} params - The parameters to use.
-   * @returns {DocumentFragment} The drawn element.
-   */
-  draw(t, e, n) {
-    let a = document.createDocumentFragment(), i = document.createElement("div");
-    i.setAttribute("id", "unset-items"), i.setAttribute("part", "native");
-    let l = document.createElement("slot");
-    return i.appendChild(l), this.unsetSlot = l, this.native = i, a.appendChild(i), a;
-  }
-  /**
-   * Called after the element is drawn.
-   */
-  afterDraw() {
-    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);
-  }
-  /**
-   * Renders the columns.
-   * @param {number} colCount - The number of columns to render.
-   */
-  renderCols(t) {
-    const e = this.columns;
-    if (e.length !== t) {
-      for (const n of e)
-        n.parentNode && n.parentNode.removeChild(n);
-      for (let n = 0; n < t; n++) {
-        const a = document.createElement("div");
-        a.classList.add("column"), a.setAttribute("part", `column column-${n}`);
-        const i = document.createElement("slot");
-        i.setAttribute("name", n), a.appendChild(i), this.context.appendChild(a);
-      }
-      this.style.setProperty(x, t);
-    }
-  }
-  /**
-   * Schedules a layout.
-   * @param {number} ms - The number of milliseconds to wait before laying out.
-   */
-  scheduleLayout(t = this.debounce) {
-    E(this.layout, t, this.debounceId);
-  }
-}
-f.define("wje-masonry", f);
-export {
-  f as default
-};