wj-elements 0.0.5 → 0.0.7

package/dist/wj-toggle.js

@@ -1,13 +1,13 @@
 var d = Object.defineProperty;
-var g = (o, e, r) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r;
-var c = (o, e, r) => (g(o, typeof e != "symbol" ? e + "" : e, r), r);
-import b from "./wj-element.js";
+var p = (o, e, r) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r;
+var c = (o, e, r) => (p(o, typeof e != "symbol" ? e + "" : e, r), r);
+import g from "./wj-element.js";
 import "./wj-store.js";
-const p = `/*!
+const h = `/*!
 * direction.scss
-*/:host(.wj-color-primary){--wj-toggle-color-base: linear-gradient(to right, #7252D3 0%, #845ae0 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-complete){--wj-toggle-color-base: linear-gradient(to right, #0072EC 0%, #0f8ff9 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-success){--wj-toggle-color-base: linear-gradient(to right, #19AD79 0%, #26bf93 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%) !important}:host(.wj-color-warning){--wj-toggle-color-base: linear-gradient(to right, #FFd945 0%, #ffe858 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-danger){--wj-toggle-color-base: linear-gradient(to right, #D83C31 0%, #e6533c 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-dark){--wj-toggle-color-base: linear-gradient(to right, #3B4752 0%, #475b6b 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host{--wj-toggle-color-base: $color-contrast-lowest;--wj-toggle-width: 30px;--wj-toggle-height: 18px;--wj-toggle-border-radius: 50px;--wj-toggle-handle-width: 14px;--wj-toggle-handle-height: 14px;--wj-toggle-handle-border-radius: 9px;--wj-toggle-handle-color: #fff;--wj-toggle-handle-shadow: 1px 0 1px .5px rgba(0,0,0,.12), 2px 4px 6px rgba(0,0,0,.2);--wj-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,.08), -3px 3px 6px rgba(0,0,0,.3)}.native-toggle{display:flex}label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}label .label-wrapper{width:var(--wj-toggle-width);height:var(--wj-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(--wj-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wj-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background .31s,box-shadow .25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wj-toggle-handle-color);width:var(--wj-toggle-handle-width);height:var(--wj-toggle-handle-height);border-radius:var(--wj-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wj-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:#4b4b4b;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(--wj-toggle-width) - var(--wj-toggle-handle-width) - 4px));box-shadow:var(--wj-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(.wj-color-primary){--wj-toggle-color-base: var(--wj-color-primary)}:host(.wj-color-complete){--wj-toggle-color-base: var(--wj-color-complete)}:host(.wj-color-success){--wj-toggle-color-base: var(--wj-color-success) !important}:host(.wj-color-warning){--wj-toggle-color-base: var(--wj-color-warning)}:host(.wj-color-danger){--wj-toggle-color-base: var(--wj-color-danger)}:host(.wj-color-info){--wj-toggle-color-base: var(--wj-color-info)}:host{--wj-toggle-color-base: var(--wj-color-contrast-3);--wj-toggle-width: 30px;--wj-toggle-height: 18px;--wj-toggle-border-radius: 50px;--wj-toggle-handle-width: 14px;--wj-toggle-handle-height: 14px;--wj-toggle-handle-border-radius: 9px;--wj-toggle-handle-color: #fff;--wj-toggle-handle-shadow: 1px 0 1px .5px rgba(0,0,0,.12), 2px 4px 6px rgba(0,0,0,.2);--wj-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,.08), -3px 3px 6px rgba(0,0,0,.3);--switch-duration: .25s;--switch-curve: cubic-bezier(.4,0,.2,1)}.native-toggle{display:flex}label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}label .label-wrapper{width:var(--wj-toggle-width);height:var(--wj-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(--wj-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wj-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background calc(var(--switch-duration) + var(--switch-duration) * .24),box-shadow var(--switch-duration);transition-timing-function:var(--switch-curve)}label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wj-toggle-handle-color);width:var(--wj-toggle-handle-width);height:var(--wj-toggle-handle-height);border-radius:var(--wj-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wj-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:var(--switch-duration);transition-timing-function:var(--switch-curve)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wj-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(--wj-toggle-width) - var(--wj-toggle-handle-width) - 4px));box-shadow:var(--wj-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}
 `;
-class h extends b {
+class b extends g {
   constructor() {
     super();
     c(this, "className", "Toggle");
@@ -19,7 +19,7 @@ class h extends b {
     return this.hasAttribute("checked");
   }
   static get cssStyleSheet() {
-    return p;
+    return h;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
@@ -37,7 +37,7 @@ class h extends b {
     return n.classList.add("text"), n.innerHTML = "<slot></slot>", this.color && this.classList.add("wj-color-" + this.color, "wj-color"), this.checked && (t.checked = this.checked), this.disabled && (t.disabled = this.disabled), a.appendChild(t), a.appendChild(l), l.appendChild(i), l.appendChild(n), s.appendChild(a), s;
   }
 }
-customElements.get("wj-toggle") || window.customElements.define("wj-toggle", h);
+customElements.get("wj-toggle") || window.customElements.define("wj-toggle", b);
 export {
-  h as Toggle
+  b as Toggle
 };

package/dist/wj-toolbar.js

@@ -1,20 +1,18 @@
-var s = Object.defineProperty;
-var d = (o, t, e) => t in o ? s(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var l = (o, t, e) => (d(o, typeof t != "symbol" ? t + "" : t, e), e);
-import p from "./wj-element.js";
-import { w as b } from "./router-links-e0087f84.js";
+var i = Object.defineProperty;
+var s = (o, t, e) => t in o ? i(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var d = (o, t, e) => (s(o, typeof t != "symbol" ? t + "" : t, e), e);
+import b from "./wj-element.js";
+import { w as p } from "./router-links-e0087f84.js";
 import "./wj-store.js";
-const c = `/*!
-* direction.scss
-*/:host{--wj-toolbar-backcolor: #fff;--wj-toolbar-min-height: 70px;--wj-toolbar-padding-top: 1rem;--wj-toolbar-padding-bottom: 1rem;--wj-toolbar-padding-inline: 1.5rem;--wj-toolbar-border-color: rgba(33, 33, 33, .14);--wj-toolbar-top: 0;width:100%;height:var(--wj-toolbar-height)}.native-toolbar{background-color:var(--wj-toolbar-backcolor);display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid var(--wj-toolbar-border-color);padding-inline:var(--wj-toolbar-padding-inline);padding-top:var(--wj-toolbar-padding-top);padding-bottom:var(--wj-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(--wj-toolbar-top);z-index:999}
+const m = `:host{--wj-toolbar-background: var(--wj-background);--wj-toolbar-min-height: 70px;--wj-toolbar-padding-top: 1rem;--wj-toolbar-padding-bottom: 1rem;--wj-toolbar-padding-inline: 1.5rem;--wj-toolbar-border-color: var(--wj-border-color);--wj-toolbar-top: 0;width:100%;height:var(--wj-toolbar-height)}.native-toolbar{background-color:var(--wj-toolbar-background);display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid var(--wj-toolbar-border-color);padding-inline:var(--wj-toolbar-padding-inline);padding-top:var(--wj-toolbar-padding-top);padding-bottom:var(--wj-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(--wj-toolbar-top);z-index:999}
 `;
-class m extends b(p) {
+class c extends p(b) {
   constructor() {
     super();
-    l(this, "className", "Toolbar");
+    d(this, "className", "Toolbar");
   }
   static get cssStyleSheet() {
-    return c;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -27,11 +25,11 @@ class m extends b(p) {
     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;
+    let l = document.createElement("slot");
+    return l.setAttribute("name", "end"), r.appendChild(n), r.appendChild(l), a.appendChild(r), a;
   }
 }
-customElements.get("wj-toolbar") || window.customElements.define("wj-toolbar", m);
+customElements.get("wj-toolbar") || window.customElements.define("wj-toolbar", c);
 export {
-  m as Toolbar
+  c as Toolbar
 };

package/dist/wj-tooltip.js

@@ -1,25 +1,23 @@
-var d = Object.defineProperty;
-var c = (s, e, t) => e in s ? d(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var r = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
-import u, { event as p } from "./wj-element.js";
+var p = Object.defineProperty;
+var c = (r, e, t) => e in r ? p(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var s = (r, e, t) => (c(r, typeof e != "symbol" ? e + "" : e, t), t);
+import m, { event as d } from "./wj-element.js";
 import "./wj-store.js";
-const h = `/*!
-* direction.scss
-*/:host{--arrow-size: 7px;--arrow-color: #000000}.native-tooltip{display:block;padding:.5rem;color:#fff;background-color:var(--arrow-color);font-weight:400;font-size:.75rem!important;border-radius:4px;line-height:1;box-sizing:border-box;box-shadow:0 1px 8px #00000080}.arrow{position:absolute;width:10px;height:10px;background:black;transform:rotate(45deg)}
+const u = `:host{--wj-tooltip-arrow-color: var(--wj-color-contrast-11)}.native-tooltip{display:block;padding:.5rem;color:var(--wj-color-contrast-0);background-color:var(--wj-color-contrast-11);font-weight:400;font-size:.75rem!important;border-radius:var(--wj-border-radius-small);line-height:1;box-sizing:border-box;box-shadow:var(--wj-box-shadow-medium)}.arrow{position:absolute;width:10px;height:10px;background:var(--wj-tooltip-arrow-color);transform:rotate(45deg)}
 `;
-class m extends u {
+class h extends m {
   constructor() {
     super();
-    r(this, "className", "Tooltip");
-    r(this, "onShow", () => {
-      console.log("show"), this.popup.show();
+    s(this, "className", "Tooltip");
+    s(this, "onShow", () => {
+      this.popup.show();
     });
-    r(this, "onHide", () => {
+    s(this, "onHide", () => {
       this.popup.hide();
     });
   }
   static get cssStyleSheet() {
-    return h;
+    return u;
   }
   static get observedAttributes() {
     return ["active", "content"];
@@ -35,14 +33,14 @@ class m extends u {
     let i = document.createElement("div");
     i.classList.add("arrow"), i.setAttribute("slot", "arrow");
     let a = document.createElement("div");
-    return a.classList.add("native-tooltip"), a.innerHTML = this.content, o.appendChild(n), o.appendChild(i), o.appendChild(a), this.slot = n, this.popup = o, l.appendChild(o), l;
+    return a.classList.add("native-tooltip"), a.innerHTML = this.content, o.appendChild(n), o.appendChild(i), o.appendChild(a), this.mySlot = n, this.popup = o, l.appendChild(o), l;
   }
   afterDraw() {
-    let t = this.slot.assignedElements()[0];
-    console.log(t), p.addListener(t, "mouseenter", null, this.onShow), p.addListener(t, "mouseleave", null, this.onHide);
+    let t = this.mySlot.assignedElements()[0];
+    t && (d.addListener(t, "mouseenter", null, this.onShow), d.addListener(t, "mouseleave", null, this.onHide));
   }
 }
-customElements.get("wj-tooltip") || window.customElements.define("wj-tooltip", m);
+customElements.get("wj-tooltip") || window.customElements.define("wj-tooltip", h);
 export {
-  m as Tooltip
+  h as Tooltip
 };

package/dist/wj-visually-hidden.js

@@ -3,17 +3,15 @@ var a = (e, t, n) => t in e ? r(e, t, { enumerable: !0, configurable: !0, writab
 var i = (e, t, n) => (a(e, typeof t != "symbol" ? t + "" : t, n), n);
 import p from "./wj-element.js";
 import "./wj-store.js";
-const d = `/*!
-* direction.scss
-*/: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}
+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 l extends p {
+class m extends p {
   constructor() {
     super();
     i(this, "className", "VisuallyHidden");
   }
   static get cssStyleSheet() {
-    return d;
+    return l;
   }
   static get observedAttributes() {
     return [];
@@ -21,12 +19,12 @@ class l extends p {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(n, m, c) {
+  draw(n, d, c) {
     let o = document.createDocumentFragment(), s = document.createElement("slot");
     return o.appendChild(s), o;
   }
 }
-customElements.get("wj-visually-hidden") || window.customElements.define("wj-visually-hidden", l);
+customElements.get("wj-visually-hidden") || window.customElements.define("wj-visually-hidden", m);
 export {
-  l as VisuallyHidden
+  m as VisuallyHidden
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "files": [
     "./dist"