wj-elements 0.1.12 → 0.1.13

package/dist/wje-toggle.js

@@ -1,94 +0,0 @@
-var h = Object.defineProperty;
-var g = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var c = (r, t, e) => (g(r, typeof t != "symbol" ? t + "" : t, e), e);
-import b, { event as d } from "./wje-element.js";
-const w = ':host{--wje-toggle-color-base: var(--wje-color-contrast-3);--wje-toggle-width: 30px;--wje-toggle-height: 18px;--wje-toggle-border-radius: 50px;--wje-toggle-handle-width: 13px;--wje-toggle-handle-height: 13px;--wje-toggle-handle-border-radius: 9px;--wje-toggle-handle-color: #fff;--wje-toggle-handle-shadow: 1px 0 1px .5px rgba(0,0,0,.12), 2px 4px 6px rgba(0,0,0,.2);--wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,.08), -3px 3px 6px rgba(0,0,0,.3);--wje-toggle-duration: .25s;--wje-toggle-curve: cubic-bezier(.4,0,.2,1)}:host(.wje-color-primary) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-primary) !important}:host(.wje-color-complete) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-complete)}:host(.wje-color-success) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-success) !important}:host(.wje-color-warning) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-warning)}:host(.wje-color-danger) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-danger)}:host(.wje-color-info) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-info)}.native-toggle{display:flex}label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}label .label-wrapper{width:var(--wje-toggle-width)!important;min-width:var(--wje-toggle-width);height:var(--wje-toggle-height);position:relative;display:flex;align-items:center}label .label-wrapper:before{content:"";position:absolute;cursor:pointer;width:100%;height:100%;top:auto;left:0;background:var(--wje-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wje-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * .24)),box-shadow var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wje-toggle-handle-color);width:var(--wje-toggle-handle-width);height:var(--wje-toggle-handle-height);border-radius:var(--wje-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wje-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.58}input[type=checkbox][disabled]+label:before{cursor:not-allowed!important}input[type=checkbox]{position:absolute;z-index:-1;opacity:0}input[type=checkbox]:checked+label .label-wrapper:before{background-position:left;box-shadow:inset 0 0 0 1px #0000001f}input[type=checkbox]:checked+label .label-wrapper:after{transform:translate(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));box-shadow:var(--wje-toggle-handle-shadow-checked)}input[type=checkbox]:focus+label .label-wrapper:before{outline:none!important;box-shadow:inset 0 0 0 1px #0000001f,0 0 #78c8fe}input[type=checkbox][disabled]:active+label .label-wrapper:after{transform:scaleX(1.1);transform-origin:center left;transition:transform step-start}input[type=checkbox]:checked[disabled]:active+label .label-wrapper:after{transform:translate(calc(100% - 6px)) scaleX(1.1);transform-origin:center right}input[type=checkbox]:hover:active+label .label-wrapper:before{background-color:transparent}:host .text{margin-inline:.5rem 0}:host .end label{width:100%}:host .end .text{margin-inline:0 .5rem;width:100%}slot{display:flex;align-items:center;width:100%}';
-class p extends b {
-  /**
-   * @constructor
-   * @summary Toggle constructor
-   */
-  constructor() {
-    super();
-    /**
-     * @summary Class name
-     * @type {string}
-     */
-    c(this, "className", "Toggle");
-  }
-  /**
-   * @summary Set checked attribute
-   * @returns {boolean} true if the toggle is checked, false otherwise
-   */
-  set disabled(e) {
-    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  /**
-   * @summary Get disabled attribute
-   * @returns {boolean} true if the toggle is disabled, false otherwise
-   */
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  /**
-   * @summary Set checked attribute
-   * @returns {boolean} true if the toggle is checked, false otherwise
-   */
-  set checked(e) {
-    e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-  }
-  /**
-   * @summary Get checked attribute
-   * @returns {boolean} true if the toggle is checked, false otherwise
-   */
-  get checked() {
-    return this.hasAttribute("checked");
-  }
-  /**
-   * @summary Get CSS stylesheet
-   * @static
-   * @returns {Object} styles
-   */
-  static get cssStyleSheet() {
-    return w;
-  }
-  static get observedAttributes() {
-    return ["checked", "disabled"];
-  }
-  /**
-   * @summary Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
-   */
-  draw(e, u, j) {
-    let s = document.createDocumentFragment(), o = document.createElement("div");
-    o.setAttribute("part", "native"), o.classList.add("native-toggle");
-    let a = document.createElement("input");
-    a.setAttribute("part", "input"), a.setAttribute("type", "checkbox"), a.setAttribute("name", this.name), a.setAttribute("id", "input"), a.checked = this.hasAttribute("checked"), a.disabled = this.hasAttribute("disabled");
-    let l = document.createElement("label");
-    l.setAttribute("for", "input");
-    let i = document.createElement("div");
-    i.setAttribute("part", "toggle"), i.classList.add("label-wrapper");
-    let n = document.createElement("div");
-    return n.classList.add("text"), n.innerHTML = "<slot></slot>", this.color && this.classList.add("wje-color-" + this.color, "wje-color"), o.appendChild(a), o.appendChild(l), this.placement === "end" ? (o.classList.add("end"), l.appendChild(n), l.appendChild(i)) : (l.appendChild(i), l.appendChild(n)), s.appendChild(o), this.input = a, s;
-  }
-  afterDraw() {
-    this.disabled || (this.input.addEventListener("input", (e) => {
-      this.checked = e.target.checked, d.dispatchCustomEvent(this, "wje-toggle:input");
-    }), this.input.addEventListener("change", (e) => {
-      this.checked = e.target.checked, d.dispatchCustomEvent(this, "wje-toggle:change");
-    }));
-  }
-}
-p.define("wje-toggle", p);
-export {
-  p as default
-};

package/dist/wje-toolbar-action.js

@@ -1,63 +0,0 @@
-var d = Object.defineProperty;
-var m = (e, t, o) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var r = (e, t, o) => (m(e, typeof t != "symbol" ? t + "" : t, o), o);
-import u from "./wje-element.js";
-const p = ":host .native-toolbar-action{display:flex}";
-class l extends u {
-  /**
-   * @constructor
-   * @summary ToolbarAction constructor
-   */
-  constructor() {
-    super();
-    /**
-     * @summary Class name
-     * @type {string}
-     */
-    r(this, "className", "ToolbarAction");
-  }
-  /**
-   * @summary Get CSS stylesheet
-   * @static
-   * @returns {Object} styles
-   */
-  static get cssStyleSheet() {
-    return p;
-  }
-  /**
-   * @summary Get observed attributes
-   * @static
-   * @returns {Array} An empty array
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * @summary Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
-   */
-  draw(o, h, b) {
-    let a = document.createDocumentFragment(), n = +this.maxItems || 0, c = this.getActions(), i = document.createElement("slot"), s = document.createElement("div");
-    return s.setAttribute("part", "native"), s.classList.add("native-toolbar-action"), n !== 0 && c.length > n && (s = document.createElement("wje-dropdown")), s.appendChild(i), a.appendChild(s), a;
-  }
-  /**
-   * @summary Get actions
-   * @returns {Array} An array of wje-button elements
-   */
-  getActions() {
-    return Array.from(this.querySelectorAll("wje-button"));
-  }
-}
-l.define("wje-toolbar-action", l);
-export {
-  l as default
-};

package/dist/wje-toolbar.js

@@ -1,61 +0,0 @@
-var s = Object.defineProperty;
-var b = (e, t, o) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var d = (e, t, o) => (b(e, typeof t != "symbol" ? t + "" : t, o), o);
-import p from "./wje-element.js";
-import { w as c } from "./router-links-FtZbFUto.js";
-const m = ':host{--wje-toolbar-background: var(--wje-background);--wje-toolbar-height: auto;--wje-toolbar-min-height: 70px;--wje-toolbar-padding-top: 1rem;--wje-toolbar-padding-bottom: 1rem;--wje-toolbar-padding-inline: 1.5rem;--wje-toolbar-border-color: var(--wje-border-color);--wje-toolbar-top: 0;width:100%;height:var(--wje-toolbar-height)}.native-toolbar{background-color:var(--wje-toolbar-background);display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid var(--wje-toolbar-border-color);padding-inline:var(--wje-toolbar-padding-inline);padding-top:var(--wje-toolbar-padding-top);padding-bottom:var(--wje-toolbar-padding-bottom);box-shadow:0 10px 30px #523f690d}::slotted{grid-column:span 4}::slotted([slot="start"]){margin-right:auto}:host([sticky]){position:sticky;top:var(--wje-toolbar-top);z-index:99}';
-class l extends c(p) {
-  /**
-   * @constructor
-   * @summary Toolbar constructor
-   */
-  constructor() {
-    super();
-    /**
-     * @summary Class name
-     * @type {string}
-     */
-    d(this, "className", "Toolbar");
-  }
-  /**
-   * @summary Get CSS stylesheet
-   * @static
-   * @returns {Object} styles
-   */
-  static get cssStyleSheet() {
-    return m;
-  }
-  /**
-   * @summary Get observed attributes
-   * @static
-   * @returns {Array} An empty array
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * @summary Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
-   */
-  draw(o, u, w) {
-    let a = document.createDocumentFragment(), r = document.createElement("div");
-    r.setAttribute("part", "native"), r.classList.add("native-toolbar");
-    let n = document.createElement("slot");
-    n.setAttribute("name", "start");
-    let i = document.createElement("slot");
-    return i.setAttribute("name", "end"), r.appendChild(n), r.appendChild(i), a.appendChild(r), a;
-  }
-}
-l.define("wje-toolbar", l);
-export {
-  l as default
-};

package/dist/wje-tooltip.js

@@ -1,105 +0,0 @@
-var p = Object.defineProperty;
-var u = (r, e, t) => e in r ? p(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
-import m, { event as l } from "./wje-element.js";
-const w = ".native-tooltip{display:block;padding:.5rem;color:var(--wje-tooltip-color);background-color:var(--wje-tooltip-background);font-weight:400;font-size:.75rem!important;border-radius:var(--wje-border-radius-small);line-height:1;box-sizing:border-box;box-shadow:var(--wje-box-shadow-medium)}.arrow{position:absolute;width:10px;height:10px;background:var(--wje-tooltip-arrow-color);transform:rotate(45deg)}";
-class c extends m {
-  /**
-   * @constructor
-   * @summary Tooltip constructor
-   */
-  constructor() {
-    super();
-    /**
-     * @summary Class name
-     * @type {string}
-     */
-    i(this, "className", "Tooltip");
-    /**
-     * @summary Show tooltip
-     */
-    i(this, "onShow", () => {
-      this.classList.add("active"), Promise.resolve(this.beforeShow(this)).then((t) => {
-        if (!this.classList.contains("active") || !t || typeof t != "string")
-          throw new Error("beforeShow method returned false or not string");
-        this.native.innerHTML = t, this.popup.show(), Promise.resolve(this.afterShow(this));
-      }).catch((t) => {
-        this.classList.remove("active"), this.popup.hide();
-      });
-    });
-    /**
-     * @summary Hide tooltip
-     */
-    i(this, "onHide", () => {
-      this.classList.remove("active"), this.popup.hide();
-    });
-  }
-  set content(t) {
-    this.setAttribute("content", t);
-  }
-  get content() {
-    return this.hasAttribute("content") ? this.getAttribute("content") : "";
-  }
-  /**
-   * @summary Get CSS stylesheet
-   * @static
-   * @returns {Object} styles
-   */
-  static get cssStyleSheet() {
-    return w;
-  }
-  /**
-   * @summary Get observed attributes
-   * @static
-   * @returns {Array} An array of observed attributes
-   */
-  static get observedAttributes() {
-    return ["active"];
-  }
-  /**
-   * @summary Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
-   */
-  draw(t, h, v) {
-    let d = document.createDocumentFragment(), o = document.createElement("wje-popup");
-    o.setAttribute("placement", this.placement || "top"), o.setAttribute("offset", this.offset || "0");
-    let n = document.createElement("slot");
-    n.setAttribute("slot", "anchor");
-    let a = document.createElement("div");
-    a.classList.add("arrow"), a.setAttribute("slot", "arrow");
-    let s = document.createElement("div");
-    return s.setAttribute("part", "native"), s.classList.add("native-tooltip"), s.innerHTML = this.content, o.appendChild(n), o.appendChild(a), o.appendChild(s), this.mySlot = n, this.popup = o, this.native = s, d.appendChild(o), d;
-  }
-  /**
-   * @summary After draw method
-   */
-  afterDraw() {
-    let t = this.mySlot.assignedElements()[0];
-    t && (l.addListener(t, "mouseenter", null, this.onShow), l.addListener(t, "mouseleave", null, this.onHide));
-  }
-  dispatch(t) {
-    return new Promise((h) => {
-      l.dispatchCustomEvent(this, t, {
-        resolve: h
-      });
-    });
-  }
-  beforeShow() {
-    return this.content;
-  }
-  afterShow() {
-  }
-}
-c.define("wje-tooltip", c);
-export {
-  c as default
-};

package/dist/wje-visually-hidden.js

@@ -1,56 +0,0 @@
-var a = Object.defineProperty;
-var p = (e, t, n) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var i = (e, t, n) => (p(e, typeof t != "symbol" ? t + "" : t, n), n);
-import d from "./wje-element.js";
-const l = ":host(:not(:focus-within)){position:absolute!important;width:1px!important;height:1px!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:none!important;overflow:hidden!important;white-space:nowrap!important;padding:0!important}";
-class r extends d {
-  /**
-   * @constructor
-   * @summary VisuallyHidden constructor
-   */
-  constructor() {
-    super();
-    /**
-     * @summary Class name
-     * @type {string}
-     */
-    i(this, "className", "VisuallyHidden");
-  }
-  /**
-   * @summary Get CSS stylesheet
-   * @static
-   * @returns {Object} styles
-   */
-  static get cssStyleSheet() {
-    return l;
-  }
-  /**
-   * @summary Get observed attributes
-   * @static
-   * @returns {Array} An empty array
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * @summary Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
-   */
-  draw(n, m, c) {
-    let o = document.createDocumentFragment(), s = document.createElement("slot");
-    return o.appendChild(s), o;
-  }
-}
-r.define("wje-visually-hidden", r);
-export {
-  r as default
-};