wj-elements 0.0.28 → 0.0.30

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

@@ -248,7 +248,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");
@@ -392,11 +393,11 @@ class WJElement extends HTMLElement {
   get store() {
     return store;
   }
-  //		addAction,
-  //     deleteAction,
-  //     loadAction,
-  //     updateAction,
-  //     addManyAction
+  // addAction,
+  // deleteAction,
+  // loadAction,
+  // updateAction,
+  // addManyAction
   /**
    * @typedef {Object} ArrayActions
    * @property {function} addAction - Indicates whether the Courage component is present.
@@ -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() {
@@ -460,6 +478,7 @@ class WJElement extends HTMLElement {
   disconnectedCallback() {
     var _a, _b;
     (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
+    console.log(this.isAttached);
     if (this.isAttached)
       this.context.innerHTML = "";
     this.isAttached = false;
@@ -585,14 +604,14 @@ class WJElement extends HTMLElement {
       );
     });
   }
-}
-__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
 };

package/dist/wj-img-comparer.js

@@ -87,7 +87,7 @@ class ImgComparer extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-img-comparer") || window.customElements.define("wj-img-comparer", ImgComparer);
+WJElement.define("wj-img-comparer", ImgComparer);
 export {
-  ImgComparer
+  ImgComparer as default
 };

package/dist/wj-img.js

@@ -40,7 +40,7 @@ class Img extends WJElement {
     lazyImageObserver.observe(this.img);
   }
 }
-customElements.get("wj-img") || window.customElements.define("wj-img", Img);
+WJElement.define("wj-img", Img);
 export {
-  Img
+  Img as default
 };

package/dist/wj-infinite-scroll.js

@@ -131,7 +131,7 @@ class InfiniteScroll extends WJElement {
     }
   }
 }
-customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", InfiniteScroll);
+WJElement.define("wj-infinite-scroll", InfiniteScroll);
 export {
-  InfiniteScroll
+  InfiniteScroll as default
 };

package/dist/wj-input-file.js

@@ -63,7 +63,7 @@ class InputFile extends WJElement {
     });
   }
 }
-customElements.get("wj-input-file") || window.customElements.define("wj-input-file", InputFile);
+WJElement.define("wj-input-file", InputFile);
 export {
-  InputFile
+  InputFile as default
 };

package/dist/wj-input.js

@@ -236,7 +236,7 @@ class Input extends WJElement {
   }
 }
 __publicField(Input, "formAssociated", true);
-customElements.get("wj-input") || window.customElements.define("wj-input", Input);
+WJElement.define("wj-input", Input);
 export {
-  Input
+  Input as default
 };

package/dist/wj-item.js

@@ -57,7 +57,7 @@ class Item extends WJElement {
 		</div>`;
   }
 }
-customElements.get("wj-item") || window.customElements.define("wj-item", Item);
+WJElement.define("wj-item", Item);
 export {
-  Item
+  Item as default
 };

package/dist/wj-label.js

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

package/dist/wj-list.js

@@ -28,7 +28,7 @@ class List extends WJElement {
     this.classList.toggle("wj-inset", this.hasAttribute("inset"));
   }
 }
-customElements.get("wj-list") || window.customElements.define("wj-list", List);
+WJElement.define("wj-list", List);
 export {
-  List
+  List as default
 };

package/dist/wj-main.js

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