wj-elements 0.0.29 → 0.0.31

package/README.md

@@ -1,21 +1,27 @@
 # WJ Elements
-WebJET Elementy sú modernou sadou nástrojov používateľského rozhrania využívajúca silu web komponentov, ktorá je určená na zjednodušenie vývoja webových aplikácií. Poskytuje kolekciu zapúzdrených a opakovane použiteľných elementov, ktoré môžu výrazne zvýšiť efektivitu a udržiavateľnosť projektov vývoja webových stránok. Ponúkajú jednoduchú integráciu s React a Vue.
+WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development. It provides a collection of encapsulated and reusable elements that can greatly increase the efficiency and maintainability of web development projects. They offer easy integration with React and Vue.
 
-Zahrňte WebJET Elements do svojho projektu pomocou [CDN](#inštalácia-s-cdn) alebo ho nainštalujte pomocou [npm](#inštalácia-s-npm).
+Include WebJET Elements in your project using [CDN](#inštalácia-s-cdn) or install it using [npm](#inštalácia-s-npm).
+
+Documentation: [elements.webjet](https://elements.webjet.sk/)
+
+Source: [https://github.com/lencys/wj-elements](https://github.com/lencys/wj-elements)
+
+Discord: [WJElements](https://discord.com/invite/b5DqKM997s)
 
 ## Inštalácia s npm
 
-Pomocou správcu balíkov npm môžete do takmer každého projektu vložiť zdrojové súbory aplikácie Elements.
+Using the npm package manager, you can insert Elements source files into almost any project.
 
-Pred pokračovaním sa uistite, že máte v počítači nainštalovaný Node.js. Ak chcete nastaviť prostredie pre Elements, pozrite si [tieto pokyny](environment.md).
+Make sure you have Node.js installed on your computer before proceeding. To set up the environment for Elements, see these instructions.
 
-Nainštalujte WebJet Elements pomocou npm:
+Install WebJet Elements using npm:
 
 ```shell
 $ npm install wj-elements
 ```
 
-Ak existovala predchádzajúca inštalácia rozhrania Ionic CLI, bude potrebné ju odinštalovať z dôvodu zmeny názvu balíka.
+If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a package name change.
 
 ```shell
 $ npm uninstall wj-elements
@@ -23,10 +29,16 @@ $ npm uninstall wj-elements
 
 ## Inštalácia s CDN
 
-Použite CDN a zahrňte do svojho projektu skompilované CSS a JS súbory WebJET Elements.
+Use CDN and include compiled CSS and JS files of WebJET Elements in your project.
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/gh/lencys/wj-elements@dddb1c19734498c5b2a17f2e6ed605d0cd40d02e/wj-master.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lencys/wj-elements@e5cdd8566b4acaad5c11040bfbb4e09e170074c9/style.css" />
 ```
 
+### Basic usage
+
+```html
+<wj-button>Button</wj-button>
+```
+

package/dist/wj-animation.js

@@ -70,7 +70,7 @@ class Animation extends WJElement {
     return await fetchAndParseCSS(cssUrl);
   }
 }
-customElements.get("wj-animation") || window.customElements.define("wj-animation", Animation);
+WJElement.define("wj-animation", Animation);
 export {
-  Animation
+  Animation as default
 };

package/dist/wj-aside.js

@@ -31,7 +31,7 @@ class Aside extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-aside") || window.customElements.define("wj-aside", Aside);
+WJElement.define("wj-aside", Aside);
 export {
-  Aside
+  Aside as default
 };

package/dist/wj-avatar.js

@@ -62,7 +62,7 @@ class Avatar extends WJElement {
     return this.getElementsByTagName("wj-img").length > 0;
   }
 }
-customElements.get("wj-avatar") || window.customElements.define("wj-avatar", Avatar);
+WJElement.define("wj-avatar", Avatar);
 export {
-  Avatar
+  Avatar as default
 };

package/dist/wj-badge.js

@@ -26,9 +26,7 @@ class Badge extends WJElement {
     return fragment;
   }
 }
-let __esModule = "true";
-customElements.get("wj-badge") || window.customElements.define("wj-badge", Badge);
+WJElement.define("wj-badge", Badge);
 export {
-  Badge,
-  __esModule
+  Badge as default
 };

package/dist/wj-breadcrumb.js

@@ -138,6 +138,7 @@ class Breadcrumb extends WJElement {
   }
 }
 customElements.get("wj-breadcrumb") || window.customElements.define("wj-breadcrumb", Breadcrumb);
+WJElement.define("wj-breadcrumb", Breadcrumb);
 export {
-  Breadcrumb
+  Breadcrumb as default
 };

package/dist/wj-breadcrumbs.js

@@ -49,7 +49,7 @@ class Breadcrumbs extends WJElement {
     return Array.from(this.querySelectorAll("wj-breadcrumb")) || [];
   }
 }
-customElements.get("wj-breadcrumbs") || window.customElements.define("wj-breadcrumbs", Breadcrumbs);
+WJElement.define("wj-breadcrumbs", Breadcrumbs);
 export {
-  Breadcrumbs
+  Breadcrumbs as default
 };

package/dist/wj-button-group.js

@@ -48,7 +48,7 @@ class ButtonGroup extends WJElement {
     return el.closest(selector) ?? el.querySelector(selector);
   }
 }
-customElements.get("wj-button-group") || window.customElements.define("wj-button-group", ButtonGroup);
+WJElement.define("wj-button-group", ButtonGroup);
 export {
-  ButtonGroup
+  ButtonGroup as default
 };

package/dist/wj-button.js

@@ -5,6 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { WjElementUtils, event } from "./wj-element.js";
+import IconElement from "./wj-icon.js";
 const bool = (v) => {
   return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
 };
@@ -12,6 +13,9 @@ const styles = "/*\n[ WJ Button ]\n*/\n:host(.wj-button-solid.wj-color-primary)
 class Button extends WJElement {
   constructor() {
     super();
+    __publicField(this, "depandencies", {
+      "wj-icon": IconElement
+    });
     __publicField(this, "className", "Button");
     __publicField(this, "eventDialogOpen", (e) => {
       document.dispatchEvent(
@@ -154,7 +158,7 @@ class Button extends WJElement {
     this.removeEventListener("click", this.eventDialogOpen);
   }
 }
-customElements.get("wj-button") || window.customElements.define("wj-button", Button);
+WJElement.define("wj-button", Button);
 export {
-  Button
+  Button as default
 };

package/dist/wj-card-content.js

@@ -24,7 +24,7 @@ class CardContent extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-card-content") || window.customElements.define("wj-card-content", CardContent);
+WJElement.define("wj-card-content", CardContent);
 export {
-  CardContent
+  CardContent as default
 };

package/dist/wj-card-controls.js

@@ -24,7 +24,7 @@ class CardControls extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-card-controls") || window.customElements.define("wj-card-controls", CardControls);
+WJElement.define("wj-card-controls", CardControls);
 export {
-  CardControls
+  CardControls as default
 };

package/dist/wj-card-header.js

@@ -26,7 +26,7 @@ class CardHeader extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-card-header") || window.customElements.define("wj-card-header", CardHeader);
+WJElement.define("wj-card-header", CardHeader);
 export {
-  CardHeader
+  CardHeader as default
 };

package/dist/wj-card-subtitle.js

@@ -29,7 +29,7 @@ class CardSubtitle extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-card-subtitle") || window.customElements.define("wj-card-subtitle", CardSubtitle);
+WJElement.define("wj-card-subtitle", CardSubtitle);
 export {
-  CardSubtitle
+  CardSubtitle as default
 };

package/dist/wj-card-title.js

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

package/dist/wj-card.js

@@ -26,7 +26,7 @@ class Card extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-card") || window.customElements.define("wj-card", Card);
+WJElement.define("wj-card", Card);
 export {
-  Card
+  Card as default
 };

package/dist/wj-carousel-item.js

@@ -31,7 +31,7 @@ class CarouselItem extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-carousel-item") || window.customElements.define("wj-carousel-item", CarouselItem);
+WJElement.define("wj-carousel-item", CarouselItem);
 export {
-  CarouselItem
+  CarouselItem as default
 };

package/dist/wj-carousel.js

@@ -10,7 +10,6 @@ class Carousel extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "Carousel");
-    this.activeSlide = 0;
     this.slidePerPage = 1;
   }
   set activeSlide(value) {
@@ -48,6 +47,9 @@ class Carousel extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  beforeDraw(context, store, params) {
+    this.cloneFirstAndLastItems();
+  }
   draw(context, store, params) {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
@@ -67,24 +69,8 @@ class Carousel extends WJElement {
       native.appendChild(this.createThumbnails());
     fragment.appendChild(native);
     this.slides = slides;
-    this.cloneFirstAndLastItems();
     return fragment;
   }
-  setIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        this.entriesMap.set(entry.target, entry);
-      });
-    }, {
-      root: this.context.querySelector(".carousel-slides"),
-      threshold: 0.5
-    });
-    this.entriesMap = /* @__PURE__ */ new Map();
-    this.records = this.intersectionObserver.takeRecords();
-    this.records.forEach((entry) => {
-      this.entriesMap.set(entry.target, entry);
-    });
-  }
   afterDraw() {
     this.setIntersectionObserver();
     this.getSlidesWithClones().forEach((slide, i) => {
@@ -108,6 +94,21 @@ class Carousel extends WJElement {
       }
     });
   }
+  setIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        this.entriesMap.set(entry.target, entry);
+      });
+    }, {
+      root: this.context.querySelector(".carousel-slides"),
+      threshold: 0.5
+    });
+    this.entriesMap = /* @__PURE__ */ new Map();
+    this.records = this.intersectionObserver.takeRecords();
+    this.records.forEach((entry) => {
+      this.entriesMap.set(entry.target, entry);
+    });
+  }
   goToSlide(index, behavior = "smooth", next = true) {
     const slides = this.getSlides();
     const slideWithClones = this.getSlidesWithClones();
@@ -248,7 +249,7 @@ class Carousel extends WJElement {
     return this.querySelector(".native-carousel").scrollLeft > 0;
   }
 }
-customElements.get("wj-carousel") || window.customElements.define("wj-carousel", Carousel);
+WJElement.define("wj-carousel", Carousel);
 export {
-  Carousel
+  Carousel as default
 };

package/dist/wj-checkbox.js

@@ -66,6 +66,7 @@ class Checkbox extends WJElement {
   }
 }
 customElements.get("wj-checkbox") || window.customElements.define("wj-checkbox", Checkbox);
+WJElement.define("wj-checkbox", Checkbox);
 export {
-  Checkbox
+  Checkbox as default
 };

package/dist/wj-chip.js

@@ -47,7 +47,7 @@ class Chip extends WJElement {
     event.addListener(this.remove, "click", "wj:chip-remove", null, { stopPropagation: true });
   }
 }
-customElements.get("wj-chip") || window.customElements.define("wj-chip", Chip);
+WJElement.define("wj-chip", Chip);
 export {
-  Chip
+  Chip as default
 };

package/dist/wj-col.js

@@ -38,7 +38,7 @@ class Col extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-col") || window.customElements.define("wj-col", Col);
+WJElement.define("wj-col", Col);
 export {
-  Col
+  Col as default
 };

package/dist/wj-color-picker.js

@@ -1277,7 +1277,7 @@ class ColorPicker extends WJElement {
     return tinycolor(hsva);
   }
 }
-customElements.get("wj-color-picker") || window.customElements.define("wj-color-picker", ColorPicker);
+WJElement.define("wj-color-picker", ColorPicker);
 export {
-  ColorPicker
+  ColorPicker as default
 };

package/dist/wj-container.js

@@ -29,7 +29,7 @@ class Container extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-container") || window.customElements.define("wj-container", Container);
+WJElement.define("wj-container", Container);
 export {
-  Container
+  Container as default
 };

package/dist/wj-copy-button.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wj-element.js";
-import { Input } from "./wj-input.js";
+import Input from "./wj-input.js";
 function createNode(text) {
   const node = document.createElement("pre");
   node.style.width = "1px";
@@ -145,7 +145,7 @@ class CopyButton extends WJElement {
     }
   }
 }
-customElements.get("wj-copy-button") || window.customElements.define("wj-copy-button", CopyButton);
+WJElement.define("wj-copy-button", CopyButton);
 export {
-  CopyButton
+  CopyButton as default
 };

package/dist/wj-dialog.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { WjElementUtils } from "./wj-element.js";
-import "./wj-button.js";
 import "./wj-icon.js";
 const styles = '/*\n[ WJ Dialog ]\n*/\n:host {\n  --wj-dialog-width: 600px;\n  --wj-dialog-height: 600px;\n  --wj-dialog-border-radius: var(--wj-border-radius-large);\n  --wj-dialog-border-width: var(--wj-border-width);\n  --wj-dialog-border-style: var(--wj-border-style);\n  --wj-dialog-border-color: var(--wj-border-color);\n  --wj-dialog-margin-top: auto;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: auto;\n}\n:host .close {\n  margin-left: auto;\n}\n:host .modal-content {\n  border-radius: 3px;\n  box-shadow: none;\n}\n:host .dialog-header {\n  position: relative;\n  border-bottom: 0;\n  padding-inline: var(--wj-dialog-padding, 1rem);\n  padding-top: var(--wj-dialog-padding, 1rem);\n  padding-bottom: var(--wj-dialog-padding, 0);\n  display: flex;\n  align-items: center;\n}\n:host .dialog-header span {\n  font-family: var(--wj-font-family-secondary);\n  font-size: 10.5px;\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n}\n:host .dialog-content {\n  box-shadow: none;\n  padding-inline: var(--wj-dialog-padding, 1rem);\n  white-space: normal;\n  z-index: 1;\n}\n:host .dialog-footer {\n  display: flex;\n  justify-content: end;\n  border-top: none;\n  box-shadow: none;\n  margin-top: 0;\n  padding-inline: var(--wj-dialog-padding-inline, 1rem);\n  padding-top: var(--wj-dialog-padding-top, 1rem);\n  padding-bottom: var(--wj-dialog-padding-bottom, 1rem);\n}\n\ndialog::backdrop {\n  opacity: var(--wj-backdrop-opacity);\n  background-color: var(--wj-backdrop);\n}\n\n:host(.separator) .dialog-header:after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  left: var(--wj-dialog-padding, 1rem);\n  right: var(--wj-dialog-padding, 1rem);\n  position: absolute;\n  bottom: 0;\n}\n\n:host dialog {\n  box-sizing: border-box;\n  transition: all 0.2s !important;\n  width: var(--wj-dialog-width);\n  height: var(--wj-dialog-height);\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n  border-radius: var(--wj-dialog-border-radius);\n  border-width: var(--wj-dialog-border-width);\n  border-style: var(--wj-dialog-border-style);\n  border-color: var(--wj-dialog-border-color);\n  margin-top: var(--wj-dialog-margin-top);\n  margin-bottom: var(--wj-dialog-margin-bottom);\n  margin-inline: var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);\n  padding: 0;\n}\n\n:host(.stick-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 0 0 8px 8px;\n  --wj-dialog-border-width: 0 1px 1px 1px;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-translate-from: translateY(-110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 8px;\n  --wj-dialog-border-width: 1px;\n  --wj-dialog-opacity-from: 0;\n  --wj-dialog-translate-from: scale(.9);\n  --wj-dialog-translate-to: scale(1);\n}\n\n:host(.fill-in) {\n  --wj-dialog-width: 100%;\n  --wj-dialog-height: 100%;\n  --wj-dialog-border-radius: 0 0 0 0 !important;\n  --wj-dialog-border-width: 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n  --wj-dialog-translate-from: scale(.95);\n  --wj-dialog-translate-to: scale(1);\n}\n:host(.fill-in) dialog {\n  min-width: var(--wj-dialog-width);\n  min-height: var(--wj-dialog-height);\n}\n\n:host(.slide-left) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 1px 0 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-left) dialog {\n  min-height: var(--wj-dialog-height);\n  --wj-dialog-translate-from: translateX(-110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-right) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 0 0 1px;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-right) dialog {\n  min-height: var(--wj-dialog-height);\n  --wj-dialog-translate-from: translateX(110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.small) {\n  --wj-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n  --wj-dialog-width: 500px !important;\n}\n\n:host(.large) {\n  --wj-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n  --wj-dialog-width: 900px !important;\n}\n\ndialog[open] {\n  animation: show 0.5s ease normal;\n}\n\n@keyframes show {\n  from {\n    opacity: var(--wj-dialog-opacity-from, 1);\n    transform: var(--wj-dialog-translate-from);\n  }\n  to {\n    opacity: 1;\n    transform: var(--wj-dialog-translate-to);\n  }\n}';
 class Dialog extends WJElement {
@@ -84,7 +83,7 @@ class Dialog extends WJElement {
     }
   }
 }
-customElements.get("wj-dialog") || window.customElements.define("wj-dialog", Dialog);
+WJElement.define("wj-dialog", Dialog);
 export {
-  Dialog
+  Dialog as default
 };

package/dist/wj-divider.js

@@ -29,7 +29,7 @@ class Divider extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-divider") || window.customElements.define("wj-divider", Divider);
+WJElement.define("wj-divider", Divider);
 export {
-  Divider
+  Divider as default
 };

package/dist/wj-dropdown.js

@@ -41,7 +41,7 @@ class Dropdown extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-dropdown") || window.customElements.define("wj-dropdown", Dropdown);
+WJElement.define("wj-dropdown", Dropdown);
 export {
-  Dropdown
+  Dropdown as default
 };

package/dist/wj-element.js

@@ -330,7 +330,7 @@ dispatch_fn = function(e) {
 let event = new WjEvent();
 const template = document.createElement("template");
 template.innerHTML = ``;
-class WJElement extends HTMLElement {
+const _WJElement = class _WJElement extends HTMLElement {
   constructor(componentTemplate) {
     super();
     __publicField(this, "initWjElement", async (force = false) => {
@@ -350,16 +350,17 @@ class WJElement extends HTMLElement {
       this.context.adoptedStyleSheets = [sheet];
     });
     this.template = componentTemplate || template;
-    this._attributes = {};
     this.isAttached = false;
     this.service = new UniversalService({
       store
     });
+    this.defineDepandencies();
     this.rendering = false;
     this.runtimeTimeout = null;
     this.count = 0;
     this.functionStack = [];
     this.scheludedRefresh = false;
+    this._depandencies = {};
   }
   get permission() {
     return this.getAttribute("permission-check");
@@ -420,6 +421,23 @@ class WJElement extends HTMLElement {
     var _a;
     return (_a = this.getAttribute("remove-class-after-connect")) == null ? void 0 : _a.split(" ");
   }
+  get depandencies() {
+    return this._depandencies;
+  }
+  set depandencies(value) {
+    this._depandencies = value;
+  }
+  static define(name, elementConstructor = this, options = {}) {
+    const definedElement = customElements.get(name);
+    if (!definedElement) {
+      customElements.define(name, elementConstructor, options);
+      return;
+    }
+  }
+  defineDepandencies() {
+    if (this.depandencies)
+      Object.entries(depandencies).forEach((name, component) => _WJElement.define(name, component));
+  }
   beforeDraw() {
   }
   afterDraw() {
@@ -586,21 +604,14 @@ class WJElement extends HTMLElement {
       );
     });
   }
-  static define(name, elementConstructor = this, options = {}) {
-    const definedElement = customElements.get(name);
-    if (!definedElement) {
-      customElements.define(name, elementConstructor, options);
-      return;
-    }
-  }
-}
-__publicField(WJElement, "processTemplates", (pTemplate, template2) => {
+};
+__publicField(_WJElement, "processTemplates", (pTemplate, template2) => {
   const newTemplate = document.createElement("template");
   newTemplate.innerHTML = [template2.innerHTML, (pTemplate == null ? void 0 : pTemplate.innerHTML) || ""].join("");
   return newTemplate;
 });
+let WJElement = _WJElement;
 let __esModule = "true";
-customElements.get("wj-element") || customElements.define("wj-element", WJElement);
 export {
   WjElementUtils,
   WjPermissionsApi,

package/dist/wj-file-upload-item.js

@@ -82,7 +82,7 @@ class FileUploadItem extends WJElement {
     this.button.addEventListener("wj:button-click", this.onDelete);
   }
 }
-customElements.get("wj-file-upload-item") || window.customElements.define("wj-file-upload-item", FileUploadItem);
+WJElement.define("wj-file-upload-item", FileUploadItem);
 export {
-  FileUploadItem
+  FileUploadItem as default
 };

package/dist/wj-file-upload.js

@@ -314,7 +314,7 @@ class FileUpload extends WJElement {
     this.updateStatusMessage(`🤷‍♂ Nothing's uploaded`);
   }
 }
-customElements.get("wj-file-upload") || window.customElements.define("wj-file-upload", FileUpload);
+WJElement.define("wj-file-upload", FileUpload);
 export {
-  FileUpload
+  FileUpload as default
 };

package/dist/wj-footer.js

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

package/dist/wj-form.js

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

package/dist/wj-format-digital.js

@@ -59,7 +59,7 @@ class FormatDigital extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-format-digital") || window.customElements.define("wj-format-digital", FormatDigital);
+WJElement.define("wj-format-digital", FormatDigital);
 export {
-  FormatDigital
+  FormatDigital as default
 };

package/dist/wj-grid.js

@@ -29,7 +29,7 @@ class Grid extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-grid") || window.customElements.define("wj-grid", Grid);
+WJElement.define("wj-grid", Grid);
 export {
-  Grid
+  Grid as default
 };

package/dist/wj-header.js

@@ -31,7 +31,7 @@ class Header extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-header") || window.customElements.define("wj-header", Header);
+WJElement.define("wj-header", Header);
 export {
-  Header
+  Header as default
 };

package/dist/wj-icon-picker.js

@@ -5,8 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wj-element.js";
-import { InfiniteScroll } from "./wj-infinite-scroll.js";
-import "./wj-tooltip.js";
+import InfiniteScroll from "./wj-infinite-scroll.js";
 const styles = "/*\n[ Wj Icon Picker ]\n*/\n:host {\n  --wj-icon-picker-radius: var(--wj-border-radius-small);\n  --wj-icon-picker-icon-size: 1.5rem;\n  --wj-icon-picker-border-width: 1px;\n  --wj-icon-picker-border-style: solid;\n  --wj-icon-picker-border-color: var(--wj-border-color);\n  --wj-icon-picker-padding: .25rem;\n  padding: 0 1rem;\n}\n\n.anchor {\n  width: var(--wj-icon-picker-icon-size);\n  height: var(--wj-icon-picker-icon-size);\n  padding: var(--wj-icon-picker-padding);\n  border-width: var(--wj-icon-picker-border-width);\n  border-style: var(--wj-icon-picker-border-style);\n  border-color: var(--wj-icon-picker-border-color);\n  box-sizing: border-box;\n  border-radius: var(--wj-icon-picker-radius);\n}\n\n.picker {\n  width: 320px;\n  height: 271px;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1);\n  border-radius: var(--wj-icon-picker-radius);\n  border-width: var(--wj-icon-picker-border-width);\n  border-style: var(--wj-icon-picker-border-style);\n  border-color: var(--wj-icon-picker-border-color);\n  overflow: auto;\n  padding: 1rem;\n  background: var(--wj-background);\n}\n\n.icon-items {\n  --icon-min-width: 2rem;\n  display: grid;\n  grid-gap: 0.5rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--icon-min-width), 1fr));\n}\n\n.icon-item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: inherit;\n  padding: 0.25rem;\n  min-height: var(--wj-icon-picker-icon-size);\n  min-width: var(--wj-icon-picker-icon-size);\n  text-decoration: none;\n}\n.icon-item:hover {\n  border-radius: 0.25rem;\n  background: var(--wj-border-color);\n}\n\n.wj-size {\n  --wj-icon-size: 24px !important;\n}\n\nicon-item svg {\n  width: var(--wj-icon-picker-icon-size);\n  height: var(--wj-icon-picker-icon-size);\n}\n\nwj-input {\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: 0;\n}\n\nwj-infinite-scroll {\n  margin-top: 1rem;\n}\n\nwj-select {\n  --wj-select-border-width: 0 0 1px 0 !important;\n  --wj-select-border-radius: 0 !important;\n  margin-bottom: 1rem;\n}\n\n.anchor wj-icon {\n  --wj-icon-size: 100% !important;\n}";
 class IconPicker extends WJElement {
   constructor() {
@@ -184,7 +183,7 @@ class IconPicker extends WJElement {
     this.context.querySelector(".icon-items").innerHTML = "";
   }
 }
-customElements.get("wj-icon-picker") || window.customElements.define("wj-icon-picker", IconPicker);
+WJElement.define("wj-icon-picker", IconPicker);
 export {
-  IconPicker
+  IconPicker as default
 };

package/dist/wj-icon.js

@@ -116,7 +116,7 @@ const getNamedUrl = (iconName) => {
   return new URL(parsedUrl.origin + folderPath + path).href;
 };
 const styles = "/*\n[ WJ Icon ]\n*/\n:host(.wj-color-primary) {\n  --wj-icon-color: var(--wj-color-primary);\n}\n\n:host(.wj-color-complete) {\n  --wj-icon-color: var(--wj-color-complete);\n}\n\n:host(.wj-color-success) {\n  --wj-icon-color: var(--wj-color-success);\n}\n\n:host(.wj-color-warning) {\n  --wj-icon-color: var(--wj-color-warning);\n}\n\n:host(.wj-color-danger) {\n  --wj-icon-color: var(--wj-color-danger);\n}\n\n:host(.wj-color-info) {\n  --wj-icon-color: var(--wj-color-info);\n}\n\n:host {\n  --wj-icon-size: 1rem;\n  --wj-icon-width: var(--wj-icon-size, 100%);\n  --wj-icon-height: var(--wj-icon-size, 100%);\n  display: inline-block;\n  width: var(--wj-icon-width);\n  height: var(--wj-icon-height);\n  contain: strict;\n  fill: currentColor;\n  box-sizing: content-box !important;\n}\n\n.icon-inner, svg {\n  display: block;\n  width: var(--wj-icon-width);\n  height: var(--wj-icon-height);\n}\n\n:host(.wj-size-small) {\n  --wj-icon-size: 18px;\n}\n\n:host(.wj-size-large) {\n  --wj-icon-size: 32px;\n}\n\n:host(.wj-size) {\n  font-size: var(--wj-icon-size);\n}\n\n:host(.wj-color) {\n  color: var(--wj-icon-color) !important;\n}";
-class Icon extends WJElement {
+class IconElement extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "Icon");
@@ -160,7 +160,7 @@ class Icon extends WJElement {
     lazyImageObserver.observe(this.element);
   }
 }
-customElements.get("wj-icon") || window.customElements.define("wj-icon", Icon);
+WJElement.define("wj-icon", IconElement);
 export {
-  Icon
+  IconElement as default
 };