wj-elements 0.1.12 → 0.1.13

package/dist/wje-container.js

@@ -1,57 +0,0 @@
-var a = Object.defineProperty;
-var d = (t, e, n) => e in t ? a(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var r = (t, e, n) => (d(t, typeof e != "symbol" ? e + "" : e, n), n);
-import s from "./wje-element.js";
-const c = ":host{--wje-container-indent: 0;display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}:host([vertical]){flex-direction:column}@media (min-width: 768px){:host([indent]){margin-left:var(--wje-container-indent)}}";
-class l extends s {
-  /**
-   * Container constructor.
-   */
-  constructor() {
-    super();
-    /**
-     * Class name for the Container.
-     * @type {string}
-     */
-    r(this, "className", "Container");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {Object} The styles object.
-   * @static
-   */
-  static get cssStyleSheet() {
-    return c;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An empty array.
-   * @static
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the Container.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the Container.
-   * @param {Object} context - The context to draw in.
-   * @param {Object} store - The store to use.
-   * @param {Object} params - The parameters to use.
-   * @returns {DocumentFragment} The created document fragment.
-   */
-  draw(n, m, u) {
-    let i = document.createDocumentFragment();
-    this.indent && this.style.setProperty("--wje-container-indent", this.indent);
-    let o = document.createElement("slot");
-    return i.appendChild(o), i;
-  }
-}
-s.define("wje-container", l);
-export {
-  l as default
-};

package/dist/wje-copy-button.js

@@ -1,164 +0,0 @@
-var h = Object.defineProperty;
-var m = (o, e, t) => e in o ? h(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var r = (o, e, t) => (m(o, typeof e != "symbol" ? e + "" : e, t), t);
-import f, { event as c } from "./wje-element.js";
-import b from "./wje-input.js";
-function y(o) {
-  const e = document.createElement("pre");
-  return e.style.width = "1px", e.style.height = "1px", e.style.position = "fixed", e.style.top = "5px", e.textContent = o, e;
-}
-function p(o) {
-  if ("clipboard" in navigator)
-    return navigator.clipboard.writeText(o.textContent || "");
-  const e = getSelection();
-  if (e == null)
-    return Promise.reject(new Error());
-  e.removeAllRanges();
-  const t = document.createRange();
-  return t.selectNodeContents(o), e.addRange(t), e.removeAllRanges(), Promise.resolve();
-}
-function l(o) {
-  if ("clipboard" in navigator)
-    return navigator.clipboard.writeText(o);
-  const e = document.body;
-  if (!e)
-    return Promise.reject(new Error());
-  const t = y(o);
-  return e.appendChild(t), p(t), e.removeChild(t), Promise.resolve();
-}
-const g = ":host{cursor:pointer;padding:.5rem}";
-class d extends f {
-  /**
-   * Constructor for the CopyButton class.
-   * Initializes the timeout property.
-   */
-  constructor() {
-    super();
-    r(this, "className", "CopyButton");
-    /**
-     * Handles the click event.
-     * @param {Event} e - The event object.
-     */
-    r(this, "clicked", (t) => {
-      const i = t.currentTarget;
-      i instanceof HTMLElement && this.copy(i);
-    });
-    /**
-     * Handles the keydown event.
-     * @param {Event} e - The event object.
-     */
-    r(this, "keydown", (t) => {
-      if (t.key === " " || t.key === "Enter") {
-        const i = t.currentTarget;
-        i instanceof HTMLElement && this.copy(i);
-      }
-    });
-    /**
-     * Handles the focus event.
-     * @param {Event} e - The event object.
-     */
-    r(this, "focused", (t) => {
-      t.currentTarget.addEventListener("keydown", this.keydown);
-    });
-    /**
-     * Handles the blur event.
-     * @param {Event} e - The event object.
-     */
-    r(this, "blurred", (t) => {
-      t.currentTarget.removeEventListener("keydown", this.keydown);
-    });
-    /**
-     * Handles the copied event.
-     * @param {Event} e - The event object.
-     */
-    r(this, "copied", (t) => {
-      this.icon.setAttribute("color", "success"), this.icon.setAttribute("name", "check"), this.tooltip.setAttribute("content", this.labelSuccess || "Copied"), setTimeout(() => {
-        this.icon.removeAttribute("color"), this.icon.setAttribute("name", "clipboard"), this.tooltip.setAttribute("content", this.label || "Copy");
-      }, this.timeout);
-    });
-    this.timeout = 1e3;
-  }
-  /**
-   * Setter for the value property.
-   * @param {string} value - The value to be set.
-   */
-  set value(t) {
-    this.setAttribute("value", t);
-  }
-  /**
-   * Getter for the value property.
-   * @returns {string} The value of the value property.
-   */
-  get value() {
-    return this.getAttribute("value") || "";
-  }
-  /**
-   * Getter for the cssStyleSheet property.
-   * @returns {string} The CSS styles.
-   */
-  static get cssStyleSheet() {
-    return g;
-  }
-  /**
-   * Getter for the observedAttributes property.
-   * @returns {Array} An empty array.
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the CopyButton.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the ColorPicker.
-   * @param {Object} context - The context to draw in.
-   * @param {Object} store - The store to use.
-   * @param {Object} params - The parameters to use.
-   * @returns {DocumentFragment} The created document fragment.
-   */
-  draw(t, i, a) {
-    let s = document.createDocumentFragment(), n = document.createElement("wje-tooltip");
-    n.setAttribute("offset", "5"), n.setAttribute("content", this.label || "Copy");
-    let u = document.createElement("wje-icon");
-    return u.setAttribute("name", "clipboard"), n.appendChild(u), s.appendChild(n), this.tooltip = n, this.icon = u, s;
-  }
-  /**
-   * Sets up the event listeners after the CopyButton is drawn.
-   */
-  afterDraw() {
-    c.addListener(this, "click", null, this.clicked), c.addListener(this, "focus", null, this.focused), c.addListener(this, "blur", null, this.blurred), c.addListener(this, "wje:copy-button", null, this.copied);
-  }
-  /**
-   * Copies the specified text or node.
-   * @param {HTMLElement} button - The button element.
-   */
-  async copy(t) {
-    const i = this.getAttribute("for"), a = this.getAttribute("value");
-    if (t.getAttribute("aria-disabled") !== "true") {
-      if (a)
-        await l(a), c.dispatchCustomEvent(this, "wje:copy-button");
-      else if (i) {
-        const s = "getRootNode" in Element.prototype ? t.getRootNode() : t.ownerDocument;
-        if (!(s instanceof Document || "ShadowRoot" in window && s instanceof ShadowRoot))
-          return;
-        const n = s.getElementById(i);
-        n && (await this.copyTarget(n), c.dispatchCustomEvent(this, "wje:copy-button"));
-      }
-    }
-  }
-  /**
-   * Copies the target content.
-   * @param {HTMLElement} content - The content to be copied.
-   * @returns {Promise} A promise that resolves when the content is copied.
-   */
-  copyTarget(t) {
-    return t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof b ? l(t.value) : t instanceof HTMLAnchorElement && t.hasAttribute("href") ? l(t.href) : p(t);
-  }
-}
-d.define("wje-copy-button", d);
-export {
-  d as default
-};

package/dist/wje-dialog.js

@@ -1,86 +0,0 @@
-var u = Object.defineProperty;
-var f = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var s = (o, t, e) => (f(o, typeof t != "symbol" ? t + "" : t, e), e);
-import v, { event as p } from "./wje-element.js";
-import "./wje-icon.js";
-const x = ':host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wje-dialog-padding);padding-top:var(--wje-dialog-padding);padding-bottom:var(--wje-dialog-padding);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wje-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wje-dialog-padding);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wje-dialog-padding-inline);padding-top:var(--wje-dialog-padding-top);padding-bottom:var(--wje-dialog-padding-bottom)}dialog::backdrop{opacity:var(--wje-backdrop-opacity);background-color:var(--wje-backdrop)}dialog:focus-visible{outline:none}:host(.separator) .dialog-header:after{content:"";height:1px;background:#00000014;left:var(--wje-dialog-padding);right:var(--wje-dialog-padding);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wje-dialog-width);height:var(--wje-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wje-dialog-border-radius);border-width:var(--wje-dialog-border-width);border-style:var(--wje-dialog-border-style);border-color:var(--wje-dialog-border-color);margin-top:var(--wje-dialog-margin-top);margin-bottom:var(--wje-dialog-margin-bottom);margin-inline:var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);padding:0}:host(.stick-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 0 0 8px 8px;--wje-dialog-border-width: 0 1px 1px 1px;--wje-dialog-margin-top: 0;--wje-dialog-translate-from: translateY(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-up){--wje-dialog-width: 300px !important;--wje-dialog-height: fit-content;--wje-dialog-border-radius: 8px;--wje-dialog-border-width: 1px;--wje-dialog-opacity-from: 0;--wje-dialog-translate-from: scale(.9);--wje-dialog-translate-to: scale(1)}:host(.fill-in){--wje-dialog-width: 100%;--wje-dialog-height: 100%;--wje-dialog-border-radius: 0 0 0 0 !important;--wje-dialog-border-width: 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0;--wje-dialog-translate-from: scale(.95);--wje-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wje-dialog-width);min-height:var(--wje-dialog-height)}:host(.slide-left){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 1px 0 0;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: 0;--wje-dialog-margin-end: auto;--wje-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(-110%);--wje-dialog-template-to: translateX(0)}:host(.slide-right){--wje-dialog-width: 300px !important;--wje-dialog-height: 100% !important;--wje-dialog-border-radius: 0;--wje-dialog-border-width: 0 0 0 1px;--wje-dialog-margin-top: 0;--wje-dialog-margin-start: auto;--wje-dialog-margin-end: 0;--wje-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wje-dialog-height);--wje-dialog-translate-from: translateX(110%);--wje-dialog-template-to: translateX(0)}:host(.small){--wje-dialog-width: 300px !important}:host(.medium){--wje-dialog-width: 500px !important}:host(.large){--wje-dialog-width: 600px !important}:host(.ex-large){--wje-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wje-dialog-opacity-from, 1);transform:var(--wje-dialog-translate-from)}to{opacity:1;transform:var(--wje-dialog-translate-to)}}';
-class j extends v {
-  constructor() {
-    super();
-    s(this, "className", "Dialog");
-    s(this, "onOpen", (e) => {
-      Promise.resolve(this.beforeOpen(this)).then((g) => {
-        this.dialog.showModal(), this.dialog.open && Promise.resolve(this.afterOpen(this));
-      });
-    });
-    s(this, "onClose", (e) => {
-      Promise.resolve(this.beforeClose(this)).then((g) => {
-        this.dialog.close(), this.dialog.open && Promise.resolve(this.afterClose(this));
-      });
-    });
-  }
-  set placement(e) {
-    this.setAttribute("placement", e);
-  }
-  get placement() {
-    return this.getAttribute("placement") || "slide-up";
-  }
-  set async(e) {
-    this.setAttribute("async", "");
-  }
-  get async() {
-    return this.hasAttribute("async");
-  }
-  static get cssStyleSheet() {
-    return x;
-  }
-  static get observedAttributes() {
-    return [];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(e, g, r) {
-    let m = document.createDocumentFragment();
-    this.classList.add("fade", this.placement, r.size);
-    let b = document.createElement("slot"), a = document.createElement("dialog");
-    a.classList.add("modal-dialog");
-    let h = document.createElement("wje-icon");
-    h.setAttribute("name", "x"), h.setAttribute("slot", "icon-only");
-    let i = document.createElement("wje-button");
-    i.setAttribute("fill", "link"), i.setAttribute("size", "small"), i.classList.add("close"), i.addEventListener("click", () => {
-      this.close();
-    }), i.appendChild(h);
-    let d = document.createElement("div");
-    d.setAttribute("part", "header"), d.classList.add("dialog-header"), this.hasAttribute("headline") && (d.innerHTML = `<span>${this.headline}</span>`), d.appendChild(i);
-    let w = document.createElement("slot");
-    w.setAttribute("name", "header"), d.appendChild(w);
-    let n = document.createElement("div");
-    n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(b);
-    let l = document.createElement("div");
-    l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
-    let c = document.createElement("slot");
-    return c.setAttribute("name", "footer"), l.appendChild(c), a.appendChild(d), a.appendChild(n), a.appendChild(l), m.appendChild(a), this.dialog = a, m;
-  }
-  close() {
-    this.onClose();
-  }
-  afterDraw(e, g, r) {
-    this.button = document.querySelector(`[dialog=${r.trigger}]`), r.trigger && p.addListener(this.button, r.trigger, null, this.onOpen);
-  }
-  beforeOpen() {
-  }
-  afterOpen() {
-  }
-  beforeClose() {
-  }
-  afterClose() {
-  }
-  disconnectedCallback() {
-    p.removeElement(this.button), p.removeElement(this.dialog);
-  }
-}
-j.define("wje-dialog", j);
-export {
-  j as default
-};

package/dist/wje-divider.js

@@ -1,53 +0,0 @@
-var n = Object.defineProperty;
-var l = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => (l(r, typeof e != "symbol" ? e + "" : e, t), t);
-import c from "./wje-element.js";
-const v = ":host(:not([vertical])){display:block;border-top:var(--wje-divider-border-width) var(--wje-divider-border-style) var(--wje-divider-border-color);margin:var(--wje-divider-spacing) 0}:host([vertical]){display:inline-block;height:100%;border-left:var(--wje-divider-border-width) var(--wje-divider-border-style) var(--wje-divider-border-color);margin:0 var(--wje-divider-spacing)}";
-class a extends c {
-  /**
-   * Constructor for the Divider class.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the Divider class.
-     * @type {string}
-     */
-    o(this, "className", "Divider");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {string} The CSS stylesheet.
-   */
-  static get cssStyleSheet() {
-    return v;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An empty array as there are no observed attributes.
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the Divider.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the Divider.
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment} The created document fragment.
-   */
-  draw(t, m, p) {
-    let i = document.createDocumentFragment(), d = document.createElement("div"), s = document.createElement("slot");
-    return d.appendChild(s), i.appendChild(d), i;
-  }
-}
-a.define("wje-divider", a);
-export {
-  a as default
-};

package/dist/wje-dropdown.js

@@ -1,68 +0,0 @@
-var d = Object.defineProperty;
-var u = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var i = (r, t, e) => (u(r, typeof t != "symbol" ? t + "" : t, e), e);
-import m, { event as a } from "./wje-element.js";
-import { P as w } from "./popup.element-CpEjis9f.js";
-class h extends m {
-  constructor() {
-    super();
-    i(this, "depandencies", {
-      "wje-popup": w
-    });
-    i(this, "className", "Dropdown");
-    /**
-     * @summary Open the popup
-     * @param e
-     */
-    i(this, "onOpen", async (e) => {
-      this.classList.add("active"), Promise.resolve(this.beforeShow(this)).then((l) => {
-        if (!this.classList.contains("active"))
-          throw new Error("beforeShow method returned false or not string");
-        this.popup.show(), Promise.resolve(this.afterShow(this));
-      }).catch((l) => {
-        this.classList.remove("active"), this.popup.hide();
-      });
-    });
-    /*
-      * @summary Close the popup
-      * @param e
-     */
-    i(this, "onClose", async (e) => {
-      this.classList.remove("active"), this.popup.hide();
-    });
-  }
-  set trigger(e) {
-    this.setAttribute("trigger", e);
-  }
-  get trigger() {
-    return this.getAttribute("trigger") || "click";
-  }
-  static get observedAttributes() {
-    return ["active"];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(e, l, f) {
-    let c = document.createDocumentFragment();
-    this.classList.add("wje-placement", "wje-" + this.placement || "wje-start");
-    let o = document.createElement("div");
-    o.setAttribute("part", "native"), o.classList.add("native-dropdown");
-    let n = document.createElement("slot");
-    n.setAttribute("name", "trigger"), n.setAttribute("slot", "anchor");
-    let p = document.createElement("slot"), s = document.createElement("wje-popup");
-    return s.setAttribute("placement", this.placement), s.setAttribute("offset", this.offset), s.appendChild(n), s.appendChild(p), s.setAttribute("manual", ""), o.appendChild(s), c.appendChild(o), this.popup = s, this.anchorSlot = n, c;
-  }
-  afterDraw() {
-    this.trigger != "click" ? (a.addListener(this, "mouseenter", null, this.onOpen), a.addListener(this, "mouseleave", null, this.onClose)) : a.addListener(this.anchorSlot, "click", null, this.onOpen), this.hasAttribute("collapsible") && a.addListener(Array.from(this.querySelectorAll("wje-menu-item")), "click", "wje-menu-item:click", this.onClose);
-  }
-  beforeShow() {
-    return this.content;
-  }
-  afterShow() {
-  }
-}
-h.define("wje-dropdown", h);
-export {
-  h as default
-};