wj-elements 0.0.29 → 0.0.30

package/dist/wj-visually-hidden.js

@@ -27,7 +27,7 @@ class VisuallyHidden extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-visually-hidden") || window.customElements.define("wj-visually-hidden", VisuallyHidden);
+WJElement.define("wj-visually-hidden", VisuallyHidden);
 export {
-  VisuallyHidden
+  VisuallyHidden as default
 };

package/package.json

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

package/dist/wj-nav-menu.js

@@ -1,37 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Button Group ]\n*/\n:host {\n  display: inline-block;\n}\n:host .native-button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  line-height: 1;\n}\n:host slot {\n  display: contents;\n}\n::slotted(wj-button) {\n  margin: 0;\n}";
-class NavMenu extends WJElement {
-  constructor() {
-    super();
-    __publicField(this, "className", "NavMenu");
-  }
-  static get cssStyleSheet() {
-    return styles;
-  }
-  static get observedAttributes() {
-    return [];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.classList.add("native-button-group");
-    element.setAttribute("part", "native");
-    this.slotElement = document.createElement("slot");
-    element.appendChild(this.slotElement);
-    fragment.appendChild(element);
-    return fragment;
-  }
-}
-customElements.get("wj-button-group") || window.customElements.define("wj-button-group", NavMenu);
-export {
-  NavMenu
-};

package/dist/wj-nav.js

@@ -1,61 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*------------------------------------------------------------------\n[11. Tabs & Accordians]\n*/\n/* Tabs\n------------------------------------\n*/\n.nav-tabs {\n  display: flex;\n  position: relative;\n}\n.nav-tabs > .nav-item {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0;\n  padding-right: 0;\n}\n.nav-tabs > .nav-item > a.active:hover, .nav-tabs > .nav-item > a.active:focus {\n  border-color: #e0e0e0;\n  color: #4b4b4b;\n  background-color: #e0e0e0;\n}\n.nav-tabs > .nav-item > a {\n  display: block;\n  border-radius: 0;\n  padding: 13px 17px;\n  margin-right: 0;\n  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  color: #757575;\n  font-size: 10.5px;\n  min-width: 70px;\n  text-transform: uppercase;\n  border-color: transparent;\n  position: relative;\n  line-height: 1.7em;\n  cursor: pointer;\n}\n.nav-tabs > .nav-item > a:hover, .nav-tabs > .nav-item > a:focus {\n  background: transparent;\n  border-color: transparent;\n  color: #4b4b4b;\n}\n.nav-tabs > .nav-item > a .tab-icon {\n  margin-right: 6px;\n}\n.nav-tabs > .nav-item > a.active {\n  color: #212121;\n}\n.nav-tabs ~ .tab-content {\n  padding: 15px;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left, .nav-tabs ~ .tab-content > .tab-pane.slide-right {\n  -webkit-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left.sliding, .nav-tabs ~ .tab-content > .tab-pane.slide-right.sliding {\n  opacity: 0 !important;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left.active, .nav-tabs ~ .tab-content > .tab-pane.slide-right.active {\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n  -ms-transform: translate(0, 0);\n  opacity: 1;\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-left.sliding {\n  -webkit-transform: translate3d(10%, 0, 0);\n  transform: translate3d(10%, 0, 0);\n  -ms-transform: translate(10%, 0);\n}\n.nav-tabs ~ .tab-content > .tab-pane.slide-right.sliding {\n  -webkit-transform: translate3d(-10%, 0, 0);\n  transform: translate3d(-10%, 0, 0);\n  -ms-transform: translate(-10%, 0);\n}\n.nav-tabs.nav-tabs-left, .nav-tabs.nav-tabs-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -webkit-flex-shrink: 0;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n.nav-tabs.nav-tabs-left:after, .nav-tabs.nav-tabs-right:after {\n  border-bottom: 0px;\n}\n.nav-tabs.nav-tabs-left > .nav-item, .nav-tabs.nav-tabs-right > .nav-item {\n  float: none;\n}\n.nav-tabs.nav-tabs-left {\n  float: left;\n  padding-right: 0;\n}\n.nav-tabs.nav-tabs-left ~ .tab-content {\n  border-left: 1px solid rgba(0, 0, 0, 0.1);\n  -ms-flex: 1;\n  -ms-flex-negative: 0;\n}\n.nav-tabs.nav-tabs-right {\n  float: right;\n  padding-right: 0;\n}\n.nav-tabs.nav-tabs-right ~ .tab-content {\n  border-right: 1px solid rgba(0, 0, 0, 0.1);\n  -ms-flex: 1;\n  -ms-flex-negative: 0;\n}\n/* Tabs : Simple\n------------------------------------\n*/\n.nav-tabs-simple > .nav-item > a:after, .nav-tabs-simple > .nav-item > a.nav-tabs-info:after, .nav-tabs-simple > .nav-item > a.nav-tabs-warning:after, .nav-tabs-simple > .nav-item > a.nav-tabs-danger:after, .nav-tabs-simple > .nav-item > a.nav-tabs-complete:after, .nav-tabs-simple > .nav-item > a.nav-tabs-success:after, .nav-tabs-simple > .nav-item > a.nav-tabs-primary:after {\n  position: absolute;\n  -webkit-transition: all 0.1s linear 0s;\n  transition: all 0.1s linear 0s;\n  -webkit-backface-visibility: hidden;\n  width: 100%;\n  display: block;\n  background-color: #D83C31;\n  height: 0px;\n  content: "";\n  left: 0;\n  z-index: 125;\n  top: 100%;\n}\n.nav-tabs-simple {\n  border-bottom: 0;\n}\n.nav-tabs-simple:after {\n  content: "";\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n}\n.nav-tabs-simple.no-border:after {\n  border-bottom: 0 none;\n}\n.nav-tabs-simple > .nav-item {\n  margin-bottom: 0;\n}\n.nav-tabs-simple > .nav-item > a {\n  min-width: auto;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-primary:after {\n  background-color: #7252D3 !important;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-success:after {\n  background-color: #19AD79;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-complete:after {\n  background-color: #0072EC;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-danger:after {\n  background-color: #D83C31;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-warning:after {\n  background-color: #FFd945;\n}\n.nav-tabs-simple > .nav-item > a.nav-tabs-info:after {\n  background-color: #3B4752;\n}\n.nav-tabs-simple > .nav-item > a.active:hover, .nav-tabs-simple > .nav-item > a.active:focus {\n  background-color: transparent;\n  border-color: transparent;\n}\n.nav-tabs-simple > .nav-item > a.active:after, .nav-tabs-simple > .nav-item > a:hover:after {\n  height: 3px;\n}\n.nav-tabs-simple.nav-tabs-left:after, .nav-tabs-simple.nav-tabs-right:after {\n  border-bottom: 0px;\n}\n.nav-tabs-simple.nav-tabs-left > .nav-item > a:after, .nav-tabs-simple.nav-tabs-right > .nav-item > a:after {\n  width: 0px;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  position: absolute;\n}\n.nav-tabs-simple.nav-tabs-left > .nav-item > a.active:after, .nav-tabs-simple.nav-tabs-left > .nav-item > a:hover:after, .nav-tabs-simple.nav-tabs-right > .nav-item > a.active:after, .nav-tabs-simple.nav-tabs-right > .nav-item > a:hover:after {\n  width: 3px;\n}\n.nav-tabs-simple.nav-tabs-left > .nav-item > a:after {\n  right: 0;\n  left: auto;\n}\n.nav-tabs-simple.nav-tabs-right > .nav-item > a:after {\n  left: 0;\n}\n/* Tabs : Line Triangles\n------------------------------------\n*/\n.nav-tabs-linetriangle {\n  border-bottom: 0;\n}\n.nav-tabs-linetriangle:after {\n  content: "";\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: absolute;\n  bottom: -1px;\n  z-index: 100;\n  left: 0;\n}\n.nav-tabs-linetriangle > .nav-item > a.active {\n  background: transparent;\n  box-shadow: none;\n  border-color: transparent;\n}\n.nav-tabs-linetriangle > .nav-item > a.active:hover, .nav-tabs-linetriangle > .nav-item > a.active:focus, .nav-tabs-linetriangle > .nav-item > a.active:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n.nav-tabs-linetriangle > .nav-item > a.active:after, .nav-tabs-linetriangle > .nav-item > a.active:before {\n  content: "";\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  z-index: 120;\n  top: 98%;\n}\n.nav-tabs-linetriangle > .nav-item > a.active:after {\n  width: 11px;\n  height: 11px;\n  display: block;\n  background: white;\n  border: solid rgba(0, 0, 0, 0.1);\n  transform: rotate(-45deg);\n  margin: -5px 0px 0px -5px;\n  border-width: 0px 0px 1px 1px;\n}\n.nav-tabs-linetriangle > .nav-item > a span {\n  font-size: 1em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nav-tabs-linetriangle > .nav-item > a:hover, .nav-tabs-linetriangle > .nav-item > a:focus {\n  overflow: visible;\n  -webkit-transition: color 0.2s ease 0s;\n  transition: color 0.2s ease 0s;\n}\n.nav-tabs-linetriangle ~ .tab-content {\n  background: #fff;\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs:after {\n  border-bottom: none;\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  border-top: 11px solid transparent;\n  border-bottom: 11px solid transparent;\n  border-left: 11px solid rgba(0, 0, 0, 0.2);\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:after {\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-left: 10px solid #f4f4f4;\n  margin-top: 1px;\n  margin-right: 2px;\n}\n.nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:after, .nav-tabs-linetriangle.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  top: auto;\n  right: -22px;\n  left: auto;\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs:after {\n  border-bottom: none;\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:before {\n  border-top: 11px solid transparent;\n  border-bottom: 11px solid transparent;\n  border-right: 11px solid rgba(0, 0, 0, 0.2);\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:after {\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-right: 10px solid #f4f4f4;\n  margin-top: 1px;\n  margin-left: -9px;\n}\n.nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:after, .nav-tabs-linetriangle.nav-tabs-right.nav-tabs > .nav-item > a.active:before {\n  top: auto;\n  left: -11px;\n  right: auto;\n}\n@media screen and (max-width: 58em) {\n  .nav-tabs-linetriangle {\n    font-size: 0.6em;\n  }\n}\n/* Tabs : Line Triangles Custom\n------------------------------------\n*/\n.nav-tabs-linetriangle-custom {\n  border-bottom: 0;\n}\n.nav-tabs-linetriangle-custom:after {\n  content: "";\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: absolute;\n  bottom: -1px;\n  z-index: 100;\n  left: 0;\n}\n.nav-tabs-linetriangle-custom > .nav-item {\n  transition: all 0.3s linear;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a {\n  padding: 1rem 0.5rem !important;\n  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  text-transform: none;\n  font-size: 12px !important;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active {\n  background: transparent;\n  box-shadow: none;\n  border-color: transparent;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active:hover, .nav-tabs-linetriangle-custom > .nav-item > a.active:focus, .nav-tabs-linetriangle-custom > .nav-item > a.active:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active:after, .nav-tabs-linetriangle-custom > .nav-item > a.active:before {\n  content: "";\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  z-index: 120;\n  top: 98%;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a.active:after {\n  width: 11px;\n  height: 11px;\n  display: block;\n  background: white;\n  border: solid rgba(0, 0, 0, 0.1);\n  transform: rotate(-45deg);\n  margin: -5px 0px 0px -5px;\n  border-width: 0px 0px 1px 1px;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a span {\n  font-size: 1em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nav-tabs-linetriangle-custom > .nav-item > a:hover, .nav-tabs-linetriangle-custom > .nav-item > a:focus {\n  overflow: visible;\n  -webkit-transition: color 0.2s ease 0s;\n  transition: color 0.2s ease 0s;\n}\n.nav-tabs-linetriangle-custom ~ .tab-content {\n  background: #eae0fb;\n  border: 0 none !important;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs {\n  padding: 2rem !important;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs:after {\n  border-bottom: none;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item {\n  margin-bottom: 1rem;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a {\n  background-color: transparent;\n  color: #212121;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a i {\n  font-size: 20px;\n  margin-bottom: 10px;\n  color: #757575;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.rounded-border {\n  border-radius: 8px;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a:hover {\n  background: rgba(33, 33, 33, 0.05);\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active {\n  color: #4e37b6;\n  background-color: #eae0fb;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active i {\n  color: #4e37b6;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  border-top: 11px solid transparent;\n  border-bottom: 11px solid transparent;\n  border-left: 10px solid transparent;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:after {\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-left: 10px solid #eae0fb;\n  margin-top: 1px;\n  margin-right: 2px;\n}\n.nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:after, .nav-tabs-linetriangle-custom.nav-tabs-left.nav-tabs > .nav-item > a.active:before {\n  right: 0;\n  left: unset;\n  top: 50%;\n  transform: translate(100%, -50%);\n  margin-top: 0;\n  margin-right: 0;\n}\n@media screen and (max-width: 58em) {\n  .nav-tabs-linetriangle {\n    font-size: 0.6em;\n  }\n}\n/* Tabs : Fill-up\n------------------------------------\n*/\n.nav-tabs-fillup {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-perspective: 1000;\n  -moz-perspective: 1000;\n  perspective: 1000;\n}\n.nav-tabs-fillup > .nav-item {\n  overflow: hidden;\n}\n.nav-tabs-fillup > .nav-item > a {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-transition: color 0.3s ease 0s;\n  transition: color 0.3s ease 0s;\n  background: transparent;\n}\n.nav-tabs-fillup > .nav-item > a:after {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  background: none repeat scroll 0 0 #19AD79;\n  border: 1px solid #19AD79;\n  content: "";\n  height: calc(100% + 1px);\n  left: 0;\n  position: absolute;\n  top: 0;\n  -webkit-transform: translate3d(0, 100%, 0px);\n  transform: translate3d(0, 100%, 0px);\n  -webkit-transition: -webkit-transform 0.3s ease 0s;\n  transition: transform 0.3s ease 0s;\n  width: 100%;\n  z-index: -1;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-primary {\n  background: none repeat scroll 0 0 #7252D3;\n  border: 1px solid #7252D3;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-success {\n  background: none repeat scroll 0 0 #19AD79;\n  border: 1px solid #19AD79;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-complete {\n  background: none repeat scroll 0 0 #0072EC;\n  border: 1px solid #0072EC;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-warning {\n  background: none repeat scroll 0 0 #FFd945;\n  border: 1px solid #FFd945;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-danger {\n  background: none repeat scroll 0 0 #D83C31;\n  border: 1px solid #D83C31;\n}\n.nav-tabs-fillup > .nav-item > a:after.nav-tabs-info {\n  background: none repeat scroll 0 0 #3B4752;\n  border: 1px solid #3B4752;\n}\n.nav-tabs-fillup > .nav-item > a span {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-transform: translate3d(0px, 5px, 0px);\n  transform: translate3d(0px, 5px, 0px);\n  -webkit-transition: -webkit-transform 0.5s ease 0s;\n  transition: transform 0.5s ease 0s;\n  display: block;\n  font-weight: 700;\n  line-height: 1.5;\n}\n.nav-tabs-fillup > .nav-item > a.active {\n  z-index: 100;\n  color: #fff;\n}\n.nav-tabs-fillup > .nav-item > a.active:hover, .nav-tabs-fillup > .nav-item > a.active:focus {\n  border-color: transparent;\n  background: transparent;\n  color: #fff;\n}\n.nav-tabs-fillup > .nav-item > a.active:after {\n  -webkit-transform: translate3d(0px, 0px, 0px);\n  transform: translate3d(0px, 0px, 0px);\n  -ms-transform: translate(0px, 0px);\n}\n.nav-tabs-fillup > .nav-item > a.active span {\n  -webkit-transform: translate3d(0px, -5px, 0px);\n  transform: translate3d(0px, -5px, 0px);\n  -ms-transform: translate(0px, -5px);\n}\n.nav-tabs-fillup .icon:before {\n  -webkit-transform: translate3d(0px, 5px, 0px);\n  transform: translate3d(0px, 5px, 0px);\n  -ms-transform: translate(0px, 5px);\n  -webkit-transition: transform 0.5s ease 0s;\n  transition: transform 0.5s ease 0s;\n  display: block;\n  margin: 0;\n}\n.nav-tabs-fillup ~ .tab-content {\n  background: #fff;\n}\n.nav-tabs-fillup.nav-tabs-left, .nav-tabs-fillup.nav-tabs-right {\n  border-bottom: none;\n}\n.nav-tabs-fillup.nav-tabs-left:after, .nav-tabs-fillup.nav-tabs-right:after {\n  border-bottom: none;\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item > a:after, .nav-tabs-fillup.nav-tabs-right > .nav-item > a:after {\n  width: calc(100% + 1px);\n  height: 100%;\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item.active a:after, .nav-tabs-fillup.nav-tabs-right > .nav-item.active a:after {\n  -webkit-transform: translate3d(0px, 0px, 0px);\n  transform: translate3d(0px, 0px, 0px);\n  -ms-transform: translate(0px, 0px);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item > a:after {\n  -webkit-transform: translate3d(100%, 0, 0);\n  transform: translate3d(100%, 0, 0);\n  -ms-transform: translate(100%, 0);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item > a span {\n  -webkit-transform: translate3d(5px, 0, 0px);\n  transform: translate3d(5px, 0, 0px);\n  -ms-transform: translate(5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item.active a span {\n  -webkit-transform: translate3d(-5px, 0, 0px);\n  transform: translate3d(-5px, 0, 0px);\n  -ms-transform: translate(-5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-left > .nav-item.active .icon:before {\n  -webkit-transform: translate3d(-5px, 0, 0px);\n  transform: translate3d(-5px, 0, 0px);\n  -ms-transform: translate(-5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item > a:after {\n  -webkit-transform: translate3d(-100%, 0, 0);\n  transform: translate3d(-100%, 0, 0);\n  -ms-transform: translate(-100%, 0);\n  left: -1px;\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item > a span {\n  -webkit-transform: translate3d(-5px, 0, 0px);\n  transform: translate3d(-5px, 0, 0px);\n  -ms-transform: translate(-5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item.active a span {\n  -webkit-transform: translate3d(5px, 0, 0px);\n  transform: translate3d(5px, 0, 0px);\n  -ms-transform: translate(5px, 0);\n}\n.nav-tabs-fillup.nav-tabs-right > .nav-item.active .icon:before {\n  -webkit-transform: translate3d(5px, 0, 0px);\n  transform: translate3d(5px, 0, 0px);\n  -ms-transform: translate(5px, 0);\n}\n.nav-tabs-header {\n  overflow: scroll;\n  width: 100%;\n}\n.nav-tabs-header .nav-tabs {\n  width: auto;\n  white-space: nowrap;\n}\n.nav-tabs-header .nav-tabs > .nav-item {\n  display: inline-block;\n  float: inherit;\n}\n.nav-tabs-header.nav-tabs-linetriangle {\n  height: 54px;\n  overflow-y: hidden;\n}\n.nav-tabs-header.nav-tabs-linetriangle:after {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  width: 100%;\n  position: relative;\n  bottom: 3px;\n  z-index: 120;\n  content: "";\n  clear: both;\n}\n.nav-tabs-header.nav-tabs-linetriangle ~ .tab-content {\n  position: relative;\n  top: -12px;\n}\n.nav-tabs-header ~ .tab-content {\n  overflow: hidden;\n  padding: 15px;\n}\n.nav-tab-dropdown .cs-select {\n  width: 100% !important;\n  max-width: 100%;\n}\n.nav-tab-dropdown .cs-select .cs-placeholder {\n  height: 48px;\n  padding: 12px 34px 15px 15px;\n  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  font-size: 10.5px;\n  text-transform: uppercase;\n}\n.nav-tab-dropdown .cs-select .cs-backdrop {\n  border: 1px solid transparent;\n  border-bottom: 1px solid rgba(33, 33, 33, 0.14);\n}\n/* Panel Groups\n------------------------------------\n*/\n.card-group {\n  margin-bottom: 18px;\n}\n.card-group.horizontal {\n  display: block;\n}\n.card-group summary {\n  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-size: 10.5px;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-text-stroke: 0px;\n  filter: alpha(opacity=40);\n  -webkit-transition: opacity 0.3s ease;\n  transition: opacity 0.3s ease;\n  list-style-type: none;\n}\n.card-group summary::marker {\n  display: none;\n  list-style-type: none;\n}\n.card-group summary:after {\n  font-family: "pages-icon";\n  content: "\\e987";\n  font-size: 17px;\n  position: absolute;\n  right: 17px;\n  top: 36%;\n  color: #4b4b4b;\n}\n.card-group summary:focus-visible {\n  outline: 0;\n}\n.card-group .card-header {\n  padding: 13px 18px 10px 22px;\n}\n.card-group .card-header.collapsed {\n  background-color: #fff;\n}\n.card-group .card-header + .card-collapse .card-body {\n  border: 0;\n}\n.card-group .card-header .card-title {\n  width: 100%;\n}\n.card-group .card-header .card-title > a {\n  color: #4b4b4b;\n  font-size: inherit;\n  padding: inherit;\n  margin: inherit;\n  display: block;\n  opacity: 1;\n}\n.card-group .card-header .card-title > a:hover {\n  color: #4b4b4b !important;\n}\n.card-group .card-header .card-title > a:hover:after {\n  color: #4b4b4b !important;\n}\n.card-group .card-header .card-title > a:after {\n  font-family: "pages-icon";\n  content: "\\e987";\n  font-size: 17px;\n  position: absolute;\n  right: 13px;\n  top: 36%;\n  color: #4b4b4b;\n}\n.card-group .card-header .card-title > a.collapsed {\n  color: rgba(75, 75, 75, 0.7);\n  opacity: 1;\n}\n.card-group .card-header .card-title > a.collapsed:after {\n  content: "\\e986";\n  color: rgba(75, 75, 75, 0.7);\n}\n.card-group .card {\n  box-shadow: none;\n  border: 1px solid rgba(33, 33, 33, 0.14);\n  -webkit-box-flex: 1;\n  -webkit-flex: 1 0 0;\n  -ms-flex: 1 0 0;\n  flex: 1 0 0;\n}\n.card-group .card + .card {\n  margin-top: 2px;\n}\n.card-group .card .card-body {\n  height: auto;\n}\n.card-group .card.card-default {\n  box-shadow: none;\n  border: 1px solid rgba(33, 33, 33, 0.1);\n}\n.card-group .card[open] .card-header:after {\n  content: "\\e986";\n  color: rgba(75, 75, 75, 0.7);\n}\n.card-group .card-file summary:after {\n  transform: rotate(180deg);\n  right: -3px;\n}\n.card-group .card-file[open] summary:after {\n  transform: rotate(0deg);\n}\n.nav-pills > .nav-item:first-child {\n  padding-left: 0;\n}\n.nav-pills > .nav-item > a {\n  color: #4b4b4b;\n}\n.nav-pills > .nav-item.active > a, .nav-pills > .nav-item.active > a:hover, .nav-pills > .nav-item.active > a:focus {\n  color: #4b4b4b;\n  background-color: #e0e0e0;\n}\n@media (max-width: 767px) {\n  .nav.nav-tabs.nav-stack-sm .nav-item {\n    float: none;\n  }\n  .nav.nav-tabs.nav-stack-sm.nav-tabs-linetriangle > li.active > a:after, .nav.nav-tabs.nav-stack-sm.nav-tabs-linetriangle > li.active > a:before {\n    display: none;\n  }\n}\n.rotate-90 {\n  transform: rotateZ(90deg);\n  transition: transform 0.3s ease;\n}\n.collapsed > .rotate-90, .collapsible:not(.collapsed) > .rotate-90 {\n  transform: rotateZ(0deg);\n  transition: transform 0.3s ease;\n}';
-class Nav extends WJElement {
-  constructor() {
-    super(template);
-    __publicField(this, "className", "Nav");
-    this.store.define("nav", [], null);
-    this.active = 0;
-    this.store.subscribe("nav", (key, state, oldState) => {
-      this.data = state;
-      this.refresh();
-    });
-  }
-  static get cssStyleSheet() {
-    return styles;
-  }
-  static get observedAttributes() {
-    return ["show-collapsed-indicator", "collapsed", "last"];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  beforeDraw(context, store, params) {
-    this.store.dispatch(this.defaultStoreActions.loadAction("itemActions")(this.actions));
-    this.store.makeEveryArrayEntryAsStoreState("item", this.data, "id");
-  }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let div = document.createElement("div");
-    div.classList.add("nav", "nav-tabs", "nav-tabs-simple", "mb-3");
-    this.store.getState().nav.forEach((item) => {
-      let element = new NavItem({
-        data: item,
-        actions: this.jsonActions,
-        nav: this
-      });
-      div.appendChild(element);
-    });
-    fragment.appendChild(div);
-    return fragment;
-  }
-  afterDraw(context, store, params) {
-    this.shadowRoot.addEventListener("wj-nav-change", (e) => {
-      let nav = store.getState().nav.map((i) => {
-        i.id == e.detail.data.id ? i.active = true : i.active = false;
-        return i;
-      });
-      store.dispatch(this.defaultStoreActions.loadAction("nav")(nav));
-    });
-  }
-}
-customElements.get("wj-nav") || window.customElements.define("wj-nav", Nav);
-export {
-  Nav
-};