wj-elements 0.1.13 → 0.1.15

package/dist/wje-toggle.js

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,105 @@
+var d = Object.defineProperty;
+var u = (i, e, t) => e in i ? d(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var r = (i, e, t) => (u(i, typeof e != "symbol" ? e + "" : e, t), t);
+import m, { event as l } from "./wje-element.js";
+const w = ".native-tooltip{display:block;padding:var(--wje-tooltip-spacing);color:var(--wje-tooltip-color);background-color:var(--wje-tooltip-background);font-weight:400;font-size:var(--wje-tooltip-font-size);border-radius:var(--wje-tooltip-border-radius);line-height:1;box-sizing:border-box;box-shadow:var(--wje-tooltip-shadow)}.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}
+     */
+    r(this, "className", "Tooltip");
+    /**
+     * @summary Show tooltip
+     */
+    r(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
+     */
+    r(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 p = 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, p.appendChild(o), p;
+  }
+  /**
+   * @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

@@ -0,0 +1,56 @@
+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
+};

package/package.json

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