wj-elements 0.0.5 → 0.0.7

package/dist/wj-master.js

@@ -1,76 +1,108 @@
-var j = Object.defineProperty;
-var A = (s, i, t) => i in s ? j(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var d = (s, i, t) => (A(s, typeof i != "symbol" ? i + "" : i, t), t);
-import u, { WjElementUtils as E, event as v } from "./wj-element.js";
-import { defaultStoreActions as V, store as _ } from "./wj-store.js";
-import { b as U, w as K } from "./router-links-e0087f84.js";
-import { Aside as X } from "./wj-aside.js";
-import { Avatar as Z } from "./wj-avatar.js";
-import { Badge as et } from "./wj-badge.js";
-import { Breadcrumb as ot } from "./wj-breadcrumb.js";
-import { Breadcrumbs as it } from "./wj-breadcrumbs.js";
-import { Button as nt } from "./wj-button.js";
-import { ButtonGroup as ct } from "./wj-button-group.js";
-import { Card as pt } from "./wj-card.js";
-import { CardContent as ut } from "./wj-card-content.js";
-import { CardControls as bt } from "./wj-card-controls.js";
-import { CardHeader as gt } from "./wj-card-header.js";
-import { CardSubtitle as ft } from "./wj-card-subtitle.js";
-import { CardTitle as jt } from "./wj-card-title.js";
-import { Checkbox as Et } from "./wj-checkbox.js";
-import { Chip as Ct } from "./wj-chip.js";
-import { Col as Tt } from "./wj-col.js";
-import { ColorPicker as Lt } from "./wj-color-picker.js";
-import { Container as Dt } from "./wj-container.js";
-import { CopyButton as Nt } from "./wj-copy-button.js";
-import { Dialog as Mt } from "./wj-dialog.js";
-import { Divider as Ht } from "./wj-divider.js";
-import { Dropdown as Bt } from "./wj-dropdown.js";
-import { Footer as It } from "./wj-footer.js";
-import { Grid as Gt } from "./wj-grid.js";
-import { Header as Vt } from "./wj-header.js";
-import { Icon as Jt } from "./wj-icon.js";
-import { IconPicker as Kt } from "./wj-icon-picker.js";
-import { Img as Xt } from "./wj-img.js";
-import { ImgComparer as Zt } from "./wj-img-comparer.js";
-import { InfiniteScroll as ee } from "./wj-infinite-scroll.js";
-import { Input as oe } from "./wj-input.js";
-import { Item as ie } from "./wj-item.js";
-import { Label as ne } from "./wj-label.js";
-import { List as ce } from "./wj-list.js";
-import { Main as pe } from "./wj-main.js";
-import { Menu as ue } from "./wj-menu.js";
-import { MenuButton as be } from "./wj-menu-button.js";
-import { MenuItem as ge } from "./wj-menu-item.js";
-import { MenuLabel as fe } from "./wj-menu-label.js";
-import { Popup as je } from "./wj-popup.js";
-import { ProgressBar as Ee } from "./wj-progress-bar.js";
-import { Radio as Ce } from "./wj-radio.js";
-import { RadioGroup as Te } from "./wj-radio-group.js";
-import { Route as Le } from "./wj-route.js";
-import { Routerx as De } from "./wj-routerx.js";
-import { RouterLink as Ne } from "./wj-router-link.js";
+var A = Object.defineProperty;
+var y = (s, i, t) => i in s ? A(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var c = (s, i, t) => (y(s, typeof i != "symbol" ? i + "" : i, t), t);
+import u, { WjElementUtils as E, event as f } from "./wj-element.js";
+import { defaultStoreActions as J, store as K } from "./wj-store.js";
+import { b as X, w as Y } from "./router-links-e0087f84.js";
+import { fetchAndParseCSS as tt } from "./wj-fetchAndParseCSS.js";
+import { L as x } from "./localize-762a9f0f.js";
+import { Aside as rt } from "./wj-aside.js";
+import { Animation as at } from "./wj-animation.js";
+import { Avatar as st } from "./wj-avatar.js";
+import { Badge as lt } from "./wj-badge.js";
+import { Breadcrumb as ct } from "./wj-breadcrumb.js";
+import { Breadcrumbs as mt } from "./wj-breadcrumbs.js";
+import { Button as ht } from "./wj-button.js";
+import { ButtonGroup as wt } from "./wj-button-group.js";
+import { Card as ft } from "./wj-card.js";
+import { CardContent as xt } from "./wj-card-content.js";
+import { CardControls as At } from "./wj-card-controls.js";
+import { CardHeader as Et } from "./wj-card-header.js";
+import { CardSubtitle as St } from "./wj-card-subtitle.js";
+import { CardTitle as kt } from "./wj-card-title.js";
+import { Carousel as Ot } from "./wj-carousel.js";
+import { CarouselItem as Rt } from "./wj-carousel-item.js";
+import { Checkbox as Ft } from "./wj-checkbox.js";
+import { Chip as Nt } from "./wj-chip.js";
+import { Col as It } from "./wj-col.js";
+import { ColorPicker as Bt } from "./wj-color-picker.js";
+import { Container as Wt } from "./wj-container.js";
+import { CopyButton as Gt } from "./wj-copy-button.js";
+import { Dialog as Ut } from "./wj-dialog.js";
+import { Divider as Jt } from "./wj-divider.js";
+import { Dropdown as Qt } from "./wj-dropdown.js";
+import { FileUpload as Yt } from "./wj-file-upload.js";
+import { FileUploadItem as te } from "./wj-file-upload-item.js";
+import { Footer as re } from "./wj-footer.js";
+import { FormatDigital as ae } from "./wj-format-digital.js";
+import { Grid as se } from "./wj-grid.js";
+import { Header as le } from "./wj-header.js";
+import { Icon as ce } from "./wj-icon.js";
+import { IconPicker as me } from "./wj-icon-picker.js";
+import { Img as he } from "./wj-img.js";
+import { ImgComparer as we } from "./wj-img-comparer.js";
+import { InfiniteScroll as fe } from "./wj-infinite-scroll.js";
+import { Input as xe } from "./wj-input.js";
+import { InputFile as Ae } from "./wj-input-file.js";
+import { Item as Ee } from "./wj-item.js";
+import { Label as Se } from "./wj-label.js";
+import { List as ke } from "./wj-list.js";
+import { Main as Oe } from "./wj-main.js";
+import { Masonry as Re } from "./wj-masonry.js";
+import { Menu as Fe } from "./wj-menu.js";
+import { MenuButton as Ne } from "./wj-menu-button.js";
+import { MenuItem as Ie } from "./wj-menu-item.js";
+import { MenuLabel as Be } from "./wj-menu-label.js";
+import { Popup as We } from "./wj-popup.js";
+import { ProgressBar as Ge } from "./wj-progress-bar.js";
+import { Radio as Ue } from "./wj-radio.js";
+import { RadioGroup as Je } from "./wj-radio-group.js";
+import { Rate as Qe } from "./wj-rate.js";
+import { RelativeTime as Ye } from "./wj-relative-time.js";
+import { Route as tr } from "./wj-route.js";
+import { Routerx as rr } from "./wj-routerx.js";
+import { RouterLink as ar } from "./wj-router-link.js";
 import "./wj-router-outlet.js";
-import { Row as Me } from "./wj-row.js";
-import { Slider as He } from "./wj-slider.js";
-import { SplitView as Be } from "./wj-split-view.js";
-import { Textarea as Ie } from "./wj-textarea.js";
-import { Thumbnail as Ge } from "./wj-thumbnail.js";
-import { Toast as Ve } from "./wj-toast.js";
-import { Toggle as Je } from "./wj-toggle.js";
-import { Toolbar as Ke } from "./wj-toolbar.js";
-import { ToolbarAction as Xe } from "./wj-toolbar-action.js";
-import { Tooltip as Ze } from "./wj-tooltip.js";
-import { VisuallyHidden as er } from "./wj-visually-hidden.js";
-const y = `:host{color:red}
+import { Row as sr } from "./wj-row.js";
+import { Slider as lr } from "./wj-slider.js";
+import { SplitView as cr } from "./wj-split-view.js";
+import { Textarea as mr } from "./wj-textarea.js";
+import { Thumbnail as hr } from "./wj-thumbnail.js";
+import { Toast as wr } from "./wj-toast.js";
+import { Toggle as fr } from "./wj-toggle.js";
+import { Toolbar as xr } from "./wj-toolbar.js";
+import { ToolbarAction as Ar } from "./wj-toolbar-action.js";
+import { Tooltip as Er } from "./wj-tooltip.js";
+import { VisuallyHidden as Sr } from "./wj-visually-hidden.js";
+const C = {
+  code: "sk",
+  name: "Slovak",
+  dir: "ltr",
+  welcome: "Vitajte",
+  "wj.file.upload.button": "Vybrať súbor",
+  "wj.file.upload.uploaded": "Nahraných: ",
+  "wj.file.upload.from": "z"
+};
+x.registerTranslation(C);
+const S = {
+  code: "en",
+  name: "English",
+  dir: "ltr",
+  welcome: "Welcome",
+  "wj.file.upload.button": "Browse files",
+  "wj.file.upload.uploaded": "Uploaded: ",
+  "wj.file.upload.from": "from"
+};
+x.registerTranslation(S);
+const T = `:host{color:red}
 `;
-class C extends u {
+class k extends u {
   constructor() {
     super();
-    d(this, "className", "ExampleElement");
+    c(this, "className", "ExampleElement");
   }
   static get cssStyleSheet() {
-    return y;
+    return T;
   }
   static get observedAttributes() {
     return [];
@@ -80,29 +112,29 @@ class C extends u {
       test: "test"
     });
   }
-  beforeDraw(t, e, o) {
+  beforeDraw(t, e, a) {
   }
-  draw(t, e, o) {
-    console.log(t, e, o);
-    let a = document.createDocumentFragment(), r = document.createElement("div");
-    return r.innerHTML = o.text, a.appendChild(r), a;
+  draw(t, e, a) {
+    console.log(t, e, a);
+    let o = document.createDocumentFragment(), r = document.createElement("div");
+    return r.innerHTML = a.text, o.appendChild(r), o;
   }
-  afterDraw(t, e, o) {
+  afterDraw(t, e, a) {
     console.log("afterDraw", this.params);
   }
 }
-customElements.get("wj-example-element") || window.customElements.define("wj-example-element", C);
-const S = `/*!
+customElements.get("wj-example-element") || window.customElements.define("wj-example-element", k);
+const L = `/*!
 * direction.scss
 */:host{display:inline-block}:host .native-button-group{display:flex;flex-wrap:nowrap;line-height:1}:host slot{display:contents}::slotted(wj-button){margin:0}
 `;
-class T extends u {
+class O extends u {
   constructor() {
     super();
-    d(this, "className", "ButtonGroup");
+    c(this, "className", "ButtonGroup");
   }
   static get cssStyleSheet() {
-    return S;
+    return L;
   }
   static get observedAttributes() {
     return [];
@@ -110,26 +142,30 @@ class T extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, o) {
-    let a = document.createDocumentFragment(), r = document.createElement("div");
-    return r.classList.add("native-button-group"), r.setAttribute("part", "native"), this.slotElement = document.createElement("slot"), r.appendChild(this.slotElement), a.appendChild(r), a;
+  draw(t, e, a) {
+    let o = document.createDocumentFragment(), r = document.createElement("div");
+    return r.classList.add("native-button-group"), r.setAttribute("part", "native"), this.slotElement = document.createElement("slot"), r.appendChild(this.slotElement), o.appendChild(r), o;
   }
 }
-customElements.get("wj-button-group") || window.customElements.define("wj-button-group", T);
-const k = `/*!
-* direction.scss
-*/:host{--wj-option-padding-top: .5rem;--wj-option-padding-bottom: .5rem;--wj-option-highlighted: #f4f4f4;display:block}:host wj-icon{visibility:hidden;margin-inline:.5rem}:host([selected]) wj-icon{visibility:visible}.native-option{display:flex;align-items:center;padding-top:var(--wj-option-padding-top);padding-bottom:var(--wj-option-padding-bottom)}.native-option:hover{background-color:var(--wj-option-highlighted)}::slotted([slot=start]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot=end]){flex:0 0 auto;display:flex;align-items:center;margin-inline:auto .5rem}
+customElements.get("wj-button-group") || window.customElements.define("wj-button-group", O);
+const D = `:host{--wj-option-padding-top: .5rem;--wj-option-padding-bottom: .5rem;--wj-option-highlighted: var(--wj-color-contrast-3);display:block}:host wj-icon{visibility:hidden;margin-inline:.5rem}:host([selected]) wj-icon{visibility:visible}.native-option{display:flex;align-items:center;padding-top:var(--wj-option-padding-top);padding-bottom:var(--wj-option-padding-bottom)}.native-option:hover{background-color:var(--wj-option-highlighted)}::slotted([slot=start]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot=end]){flex:0 0 auto;display:flex;align-items:center;margin-inline:auto .5rem}
 `;
-class L extends u {
+class R extends u {
   constructor() {
     super();
-    d(this, "className", "Option");
+    c(this, "className", "Option");
   }
   set selected(t) {
     return t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
   }
+  set value(t) {
+    this.setAttribute("value", t);
+  }
+  set text(t) {
+    this.innerText = t;
+  }
   static get cssStyleSheet() {
-    return k;
+    return D;
   }
   static get observedAttributes() {
     return [];
@@ -137,32 +173,28 @@ class L extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, o) {
-    let a = document.createDocumentFragment(), r = document.createElement("div");
+  draw(t, e, a) {
+    let o = document.createDocumentFragment(), r = document.createElement("div");
     r.classList.add("native-option"), r.setAttribute("part", "native");
     let n = document.createElement("wj-icon");
     n.setAttribute("name", "check");
     let p = document.createElement("slot");
     p.setAttribute("name", "start");
-    let c = document.createElement("slot"), l = document.createElement("slot");
-    return l.setAttribute("name", "end"), r.appendChild(n), r.appendChild(p), r.appendChild(c), r.appendChild(l), a.appendChild(r), a;
+    let d = document.createElement("slot"), l = document.createElement("slot");
+    return l.setAttribute("name", "end"), r.appendChild(n), r.appendChild(p), r.appendChild(d), r.appendChild(l), o.appendChild(r), o;
   }
   afterDraw() {
-    v.addListener(this, "click", "wj:option-change");
+    f.addListener(this, "click", "wj:option-change");
   }
 }
-customElements.get("wj-option") || window.customElements.define("wj-option", L);
-const O = `/*!
-* direction.scss
-*/
-`;
-class D extends u {
+customElements.get("wj-option") || window.customElements.define("wj-option", R);
+class z extends u {
   constructor() {
     super();
-    d(this, "className", "Options");
+    c(this, "className", "Options");
   }
   static get cssStyleSheet() {
-    return O;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -173,10 +205,10 @@ class D extends u {
   async beforeDraw() {
     this.response = await this.getPages();
     let t = document.createDocumentFragment();
-    this.response.forEach((e, o) => {
-      let a = document.createElement("wj-option");
-      a.setAttribute("value", e[this.itemValue] || e.value), a.innerText = e[this.itemText] || e.text, t.appendChild(a);
-    }), this.parentElement.appendChild(t), v.dispatchCustomEvent(this, "wj:options-load", {});
+    this.response.forEach((e, a) => {
+      let o = document.createElement("wj-option");
+      o.setAttribute("value", e[this.itemValue] || e.value), o.innerText = e[this.itemText] || e.text, t.appendChild(o);
+    }), this.parentElement.appendChild(t), f.dispatchCustomEvent(this, "wj:options-load", {});
   }
   async getPages(t) {
     const e = await fetch(this.url);
@@ -185,22 +217,20 @@ class D extends u {
     return await e.json();
   }
 }
-customElements.get("wj-options") || window.customElements.define("wj-options", D);
-const R = `/*!
-* direction.scss
-*/:host{--wj-select-border-width: 1px;--wj-select-border-style: solid;--wj-select-border-color: var(--wj-border-color);--wj-select-options-border-width: 1px;--wj-select-options-border-style: solid;--wj-select-options-border-color: var(--wj-border-color);--wj-select-background-color: #fff;--wj-select-line-height: 20px;--wj-select-color: #212121;--wj-select-border-radius: 4px;width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wj-select-border-width);border-style:var(--wj-select-border-style);border-color:var(--wj-select-border-color);border-radius:var(--wj-select-border-radius);padding-inline:.5rem;padding-top:.25rem;padding-bottom:.25rem}.native-select.default .input-wrapper{padding:0;min-height:25px;margin-top:-4px}.native-select.default.focused wj-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wj-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wj-select-line-height)}.native-select.default wj-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .input-wrapper{border-width:var(--wj-select-border-width);border-style:var(--wj-select-border-style);border-color:var(--wj-select-border-color);border-radius:var(--wj-select-border-radius);width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wj-select-background-color);min-height:28px;color:var(--wj-select-color);line-height:var(--wj-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px;font-weight:400;vertical-align:middle}input{border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0}::placeholder{opacity:1}:host [active] .input-wrapper{border-radius:var(--wj-select-border-radius) var(--wj-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.option-wrapper{border-width:var(--wj-select-options-border-width);border-style:var(--wj-select-options-border-style);border-color:var(--wj-select-options-border-color);border-radius:0 0 var(--wj-select-border-radius) var(--wj-select-border-radius);margin-top:-1px;background:var(--wj-select-background-color);overflow:auto}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wj-chip{--wj-chip-margin: 0 .25rem 0 0}wj-button{--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem;--wj-button-margin-inline: 0 .25rem}
+customElements.get("wj-options") || window.customElements.define("wj-options", z);
+const F = `:host{--wj-select-border-width: 1px;--wj-select-border-style: solid;--wj-select-border-color: var(--wj-border-color);--wj-select-options-border-width: 1px;--wj-select-options-border-style: var(--wj-border-style);--wj-select-options-border-color: var(--wj-border-color);--wj-select-background: var(--wj-background);--wj-select-line-height: 20px;--wj-select-color: var(--wj-color);--wj-select-border-radius: var(--wj-border-radius-medium);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wj-select-border-width);border-style:var(--wj-select-border-style);border-color:var(--wj-select-border-color);border-radius:var(--wj-select-border-radius);padding-inline:.5rem;padding-top:.25rem;padding-bottom:.25rem}.native-select.default .input-wrapper{padding:0;min-height:25px;margin-top:-4px}.native-select.default.focused wj-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wj-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wj-select-line-height)}.native-select.default wj-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .input-wrapper{border-width:var(--wj-select-border-width);border-style:var(--wj-select-border-style);border-color:var(--wj-select-border-color);border-radius:var(--wj-select-border-radius);width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wj-select-background);min-height:28px;color:var(--wj-select-color);line-height:var(--wj-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px;font-weight:400;vertical-align:middle}input{border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0}::placeholder{opacity:1}:host [active] .input-wrapper{border-radius:var(--wj-select-border-radius) var(--wj-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.option-wrapper{border-width:var(--wj-select-options-border-width);border-style:var(--wj-select-options-border-style);border-color:var(--wj-select-options-border-color);border-radius:0 0 var(--wj-select-border-radius) var(--wj-select-border-radius);margin-top:-1px;background:var(--wj-select-background);overflow:auto}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wj-chip{--wj-chip-margin: 0 .25rem 0 0}wj-button{--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem;--wj-button-margin-inline: 0 .25rem}
 `;
-class N extends u {
+class M extends u {
   constructor() {
     super();
-    d(this, "className", "Select");
-    d(this, "optionChange", (t) => {
+    c(this, "className", "Select");
+    c(this, "optionChange", (t) => {
       let e = this.getAllOptions();
-      this.hasAttribute("multiple") || (e.forEach((o) => {
-        o.selected = !1, o.removeAttribute("selected");
+      this.hasAttribute("multiple") || (e.forEach((a) => {
+        a.selected = !1, a.removeAttribute("selected");
       }), this.popup.removeAttribute("active")), t.target.selected = !t.target.hasAttribute("selected"), this.selections(t.target);
     });
-    d(this, "removeChip", (t) => {
+    c(this, "removeChip", (t) => {
       let e = t.target.option;
       e.selected = !1, e.removeAttribute("selected"), t.target.parentNode.removeChild(t.target), this.selections(null, 0);
     });
@@ -219,7 +249,7 @@ class N extends u {
     return this.getAttribute("trigger") || "click";
   }
   static get cssStyleSheet() {
-    return R;
+    return F;
   }
   static get observedAttributes() {
     return ["active", "value"];
@@ -227,8 +257,8 @@ class N extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, o) {
-    let a = document.createDocumentFragment();
+  draw(t, e, a) {
+    let o = document.createDocumentFragment();
     this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
     let r = document.createElement("div");
     r.setAttribute("part", "native"), r.classList.add("native-select", this.variant || "default");
@@ -236,8 +266,8 @@ class N extends u {
     n.classList.add("wrapper"), n.setAttribute("slot", "anchor");
     let p = document.createElement("wj-label");
     p.innerText = this.label || "";
-    let c = document.createElement("div");
-    c.classList.add("input-wrapper");
+    let d = document.createElement("div");
+    d.classList.add("input-wrapper");
     let l = document.createElement("input");
     l.setAttribute("type", "text"), l.setAttribute("part", "input"), l.setAttribute("autocomplete", "off"), l.setAttribute("readonly", ""), l.setAttribute("placeholder", this.placeholder || "");
     let h = document.createElement("wj-icon");
@@ -246,23 +276,23 @@ class N extends u {
     g.classList.add("chips"), g.innerText = this.placeholder || "";
     let b = document.createElement("div");
     b.classList.add("option-wrapper"), b.style.setProperty("height", this.maxHeight || "auto");
-    let x = document.createElement("slot"), w = document.createElement("wj-button");
-    w.setAttribute("variant", "link"), w.setAttribute("part", "clear");
-    let f = document.createElement("wj-icon");
-    f.setAttribute("name", "x"), w.appendChild(f);
+    let j = document.createElement("slot"), w = document.createElement("wj-button");
+    w.setAttribute("fill", "link"), w.setAttribute("part", "clear");
+    let v = document.createElement("wj-icon");
+    v.setAttribute("name", "x"), w.appendChild(v);
     let m = document.createElement("wj-popup");
-    return m.setAttribute("placement", "bottom-start"), m.setAttribute("manual", ""), m.setAttribute("size", ""), this.hasAttribute("disabled") && m.setAttribute("disabled", ""), this.variant === "standard" ? this.hasAttribute("label") && r.appendChild(p) : n.appendChild(p), c.appendChild(l), this.hasAttribute("multiple") && c.appendChild(g), this.hasAttribute("clearable") && c.appendChild(w), c.appendChild(h), b.appendChild(x), n.appendChild(c), m.appendChild(n), m.appendChild(b), this.trigger === "click" && m.setAttribute("manual", ""), r.appendChild(m), this.native = r, this.popup = m, this.labelElement = p, this.input = l, this.optionsWrapper = b, this.chips = g, this.clear = w, a.appendChild(r), a;
+    return m.setAttribute("placement", "bottom-start"), m.setAttribute("manual", ""), m.setAttribute("size", ""), this.hasAttribute("disabled") && m.setAttribute("disabled", ""), this.variant === "standard" ? this.hasAttribute("label") && r.appendChild(p) : n.appendChild(p), d.appendChild(l), this.hasAttribute("multiple") && d.appendChild(g), this.hasAttribute("clearable") && d.appendChild(w), d.appendChild(h), b.appendChild(j), n.appendChild(d), m.appendChild(n), m.appendChild(b), this.trigger === "click" && m.setAttribute("manual", ""), r.appendChild(m), this.native = r, this.popup = m, this.labelElement = p, this.input = l, this.optionsWrapper = b, this.chips = g, this.clear = w, o.appendChild(r), o;
   }
-  afterDraw(t, e, o) {
-    this.input.addEventListener("focus", (a) => {
+  afterDraw(t, e, a) {
+    this.input.addEventListener("focus", (o) => {
       this.labelElement.classList.add("fade"), this.native.classList.add("focused");
-    }), this.input.addEventListener("blur", (a) => {
-      this.native.classList.remove("focused"), a.target.value || this.labelElement.classList.remove("fade");
-    }), this.addEventListener("wj:option-change", this.optionChange), this.clear.addEventListener("wj:button-click", (a) => {
+    }), this.input.addEventListener("blur", (o) => {
+      this.native.classList.remove("focused"), o.target.value || this.labelElement.classList.remove("fade");
+    }), this.addEventListener("wj:option-change", this.optionChange), this.clear.addEventListener("wj:button-click", (o) => {
       this.getAllOptions().forEach((r) => {
         r.selected = !1, r.removeAttribute("selected");
-      }), this.selections(), a.stopPropagation();
-    }), this.selections(), this.optionsWrapper.addEventListener("wj:options-load", (a) => {
+      }), this.selections(), o.stopPropagation();
+    }), this.selections(), this.optionsWrapper.addEventListener("wj:options-load", (o) => {
       this.optionsWrapper.scrollTo(0, 0);
     });
   }
@@ -274,23 +304,23 @@ class N extends u {
   }
   getSelected(t) {
     let e = this.getSelectedOptions();
-    return e = Array.isArray(e) ? e : Array.from(e), e = e.map((o) => ({
-      value: o.value,
-      text: o.textContent.trim()
+    return e = Array.isArray(e) ? e : Array.from(e), e = e.map((a) => ({
+      value: a.value,
+      text: a.textContent.trim()
     })), e;
   }
   selectionChanged(t = null, e = 0) {
     if (this.hasAttribute("multiple"))
-      this.value = this.selectedOptions.map((o) => o).reverse(), this.placeholder && e === 0 ? (this.chips.innerHTML = this.placeholder, this.input.value = "") : this.counterEl instanceof HTMLElement || e > +this.maxOptions ? this.counter() : t != null && this.chips.appendChild(this.getChip(t));
+      this.value = this.selectedOptions.map((a) => a).reverse(), this.placeholder && e === 0 ? (this.chips.innerHTML = this.placeholder, this.input.value = "") : this.counterEl instanceof HTMLElement || e > +this.maxOptions ? this.counter() : t != null && this.chips.appendChild(this.getChip(t));
     else {
-      let o = (t == null ? void 0 : t.textContent.trim()) || "";
-      this.value = o, this.input.value = o;
+      let a = (t == null ? void 0 : t.textContent.trim()) || "";
+      this.value = a, this.input.value = a;
     }
   }
   selections(t) {
     let e = this.getSelectedOptions();
-    this.selectedOptions = Array.isArray(e) ? e : Array.from(e), this.selectedOptions.length >= +this.maxOptions && (this.counterEl = null), this.chips.innerHTML = "", this.selectedOptions.length > 0 ? this.selectedOptions.forEach((o, a) => {
-      this.selectionChanged(o, ++a);
+    this.selectedOptions = Array.isArray(e) ? e : Array.from(e), this.selectedOptions.length >= +this.maxOptions && (this.counterEl = null), this.chips.innerHTML = "", this.selectedOptions.length > 0 ? this.selectedOptions.forEach((a, o) => {
+      this.selectionChanged(a, ++o);
     }) : this.selectionChanged();
   }
   counter() {
@@ -302,67 +332,62 @@ class N extends u {
   }
   getChip(t) {
     let e = document.createElement("wj-chip");
-    e.setAttribute("removable", ""), e.setAttribute("color", "menu"), e.addEventListener("wj:chip-remove", this.removeChip), e.option = t;
-    let o = document.createElement("wj-label");
-    return o.innerText = t.textContent.trim(), e.appendChild(o), e;
+    e.setAttribute("removable", ""), e.addEventListener("wj:chip-remove", this.removeChip), e.option = t;
+    let a = document.createElement("wj-label");
+    return a.innerText = t.textContent.trim(), e.appendChild(a), e;
   }
 }
-customElements.get("wj-select") || window.customElements.define("wj-select", N);
-const z = `/*!
-* direction.scss
-*/:host{--wj-font-size: 10px;--wj-tab-text-transfrom: uppercase;--wj-tab-font-weight: 500;--wj-tab-letter-spacing: .06em;--wj-tab-padding-inline: 1rem;--wj-tab-padding-top: .75rem;--wj-tab-padding-bottom: .75rem;--wj-tab-color-active: rgba(114, 82, 211, 1);--wj-tab-color-hover: rgba(114, 82, 211, .05);display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wj-font-family-secondary);font-size:var(--wj-font-size);letter-spacing:var(--wj-tab-letter-spacing);text-transform:var(--wj-tab-text-transfrom);font-weight:var(--wj-tab-font-weight);text-decoration:none;padding-inline:var(--wj-tab-padding-inline);padding-top:var(--wj-tab-padding-top);padding-bottom:var(--wj-tab-padding-bottom);color:var(--wj-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wj-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wj-tab-writing-mode);background:var(--wj-tab-color-active);position:absolute;bottom:var(--wj-tab-bottom);left:var(--wj-tab-start);right:var(--wj-tab-end);top:var(--wj-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}
+customElements.get("wj-select") || window.customElements.define("wj-select", M);
+const N = `:host{--wj-font-size: 10px;--wj-tab-text-transfrom: uppercase;--wj-tab-font-weight: 500;--wj-tab-letter-spacing: .06em;--wj-tab-padding-inline: 1rem;--wj-tab-padding-top: .75rem;--wj-tab-padding-bottom: .75rem;--wj-tab-color-active: var(--wj-color-primary-11);--wj-tab-color-hover: var(--wj-color-primary-1);display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wj-font-family-secondary);font-size:var(--wj-font-size);letter-spacing:var(--wj-tab-letter-spacing);text-transform:var(--wj-tab-text-transfrom);font-weight:var(--wj-tab-font-weight);text-decoration:none;padding-inline:var(--wj-tab-padding-inline);padding-top:var(--wj-tab-padding-top);padding-bottom:var(--wj-tab-padding-bottom);color:var(--wj-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wj-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wj-tab-writing-mode);background:var(--wj-tab-color-active);position:absolute;bottom:var(--wj-tab-bottom);left:var(--wj-tab-start);right:var(--wj-tab-end);top:var(--wj-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}
 `;
-class M extends u {
+class P extends u {
   constructor() {
     super();
-    d(this, "className", "Tab");
+    c(this, "className", "Tab");
     this.last = !1;
   }
   static get cssStyleSheet() {
-    return z;
+    return N;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, o) {
-    let a = document.createDocumentFragment(), r = document.createElement("a");
-    return r.setAttribute("href", "#" + this.panel), r.innerHTML = this.innerHTML, a.appendChild(r), a;
+  draw(t, e, a) {
+    let o = document.createDocumentFragment(), r = document.createElement("a");
+    return r.setAttribute("href", "#" + this.panel), r.innerHTML = this.innerHTML, o.appendChild(r), o;
   }
   afterDraw() {
-    v.addListener(this, "click", "wj:tab-change");
+    f.addListener(this, "click", "wj:tab-change");
   }
 }
-customElements.get("wj-tab") || window.customElements.define("wj-tab", M);
-const P = `/*!
-* direction.scss
-*/:host{--wj-tab-top: 0;--wj-tab-start: 0;--wj-tab-end: 0;--wj-tab-bottom: 0}.native-tab-group{display:flex;flex-direction:column;overflow:hidden;position:relative}.native-tab-group>header{display:flex;flex-direction:column}.native-tab-group>header>nav{display:flex}.native-tab-group>section{width:100%}.native-tab-group>section>article{scroll-snap-align:start;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--space-2) var(--space-3)}:host([variant=top]){--wj-tab-top: auto !important;--wj-tab-writing-mode: horizontal-tb}:host([variant=top]) .native-tab-group{flex-direction:column}:host([variant=top]) nav{border-bottom:1px solid rgba(0,0,0,.1)}:host([variant=start]){--wj-tab-start: auto !important;--wj-tab-writing-mode: vertical-rl}:host([variant=start]) .native-tab-group{flex-direction:row}:host([variant=start]) nav{flex-direction:column;border-right:1px solid rgba(0,0,0,.1)}:host([variant=end]){--wj-tab-writing-mode: vertical-rl}:host([variant=end]) .native-tab-group{flex-direction:row-reverse}:host([variant=end]) nav{flex-direction:column;border-left:1px solid rgba(0,0,0,.1)}:host([variant=bottom]){--wj-tab-bottom: auto !important;--wj-tab-writing-mode: horizontal-tb}:host([variant=bottom]) .native-tab-group{flex-direction:column-reverse}:host([variant=bottom]) nav{border-top:1px solid rgba(0,0,0,.1)}
+customElements.get("wj-tab") || window.customElements.define("wj-tab", P);
+const I = `:host{--wj-tab-top: 0;--wj-tab-start: 0;--wj-tab-end: 0;--wj-tab-bottom: 0}.native-tab-group{display:flex;flex-direction:column;overflow:hidden;position:relative}.native-tab-group>header{display:flex;flex-direction:column}.native-tab-group>header>nav{display:flex}.native-tab-group>section{width:100%}.native-tab-group>section>article{scroll-snap-align:start;overflow-y:auto;overscroll-behavior-y:contain}:host([variant=top]){--wj-tab-top: auto !important;--wj-tab-writing-mode: horizontal-tb}:host([variant=top]) .native-tab-group{flex-direction:column}:host([variant=top]) nav{border-bottom:1px solid var(--wj-border-color)}:host([variant=start]){--wj-tab-start: auto !important;--wj-tab-writing-mode: vertical-rl}:host([variant=start]) .native-tab-group{flex-direction:row}:host([variant=start]) nav{flex-direction:column;border-right:1px solid var(--wj-border-color)}:host([variant=end]){--wj-tab-writing-mode: vertical-rl}:host([variant=end]) .native-tab-group{flex-direction:row-reverse}:host([variant=end]) nav{flex-direction:column;border-left:1px solid var(--wj-border-color)}:host([variant=bottom]){--wj-tab-bottom: auto !important;--wj-tab-writing-mode: horizontal-tb}:host([variant=bottom]) .native-tab-group{flex-direction:column-reverse}:host([variant=bottom]) nav{border-top:1px solid var(--wj-border-color)}
 `;
-class H extends u {
+class $ extends u {
   constructor() {
     super();
-    d(this, "className", "TabGroup");
+    c(this, "className", "TabGroup");
   }
   static get cssStyleSheet() {
-    return P;
+    return I;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, o) {
-    let a = document.createDocumentFragment(), r = document.createElement("div");
+  draw(t, e, a) {
+    let o = document.createDocumentFragment(), r = document.createElement("div");
     r.classList.add("native-tab-group");
     let n = document.createElement("header");
     n.classList.add("scroll-snap-x");
-    let p = document.createElement("nav"), c = document.createElement("section"), l = document.createElement("slot"), h = document.createElement("slot");
-    return h.setAttribute("name", "nav"), n.appendChild(p), p.appendChild(h), c.appendChild(l), r.appendChild(n), r.appendChild(c), a.appendChild(r), a;
+    let p = document.createElement("nav"), d = document.createElement("section"), l = document.createElement("slot"), h = document.createElement("slot");
+    return h.setAttribute("name", "nav"), n.appendChild(p), p.appendChild(h), d.appendChild(l), r.appendChild(n), r.appendChild(d), o.appendChild(r), o;
   }
   afterDraw() {
-    console.log(this.context.querySelectorAll("[active]"));
     let t = this.getActiveTab(), e = t ? t[0].name : this.getTabAll()[0].panel;
-    console.log("NAME:", t, e, this.getTabAll()), this.setActiveTab(e), this.addEventListener("wj:tab-change", (o) => {
-      if (console.log("TAB CHANGE", o.detail.context.hasAttribute("disabled")), o.detail.context.hasAttribute("disabled"))
+    this.setActiveTab(e), this.addEventListener("wj:tab-change", (a) => {
+      if (a.detail.context.hasAttribute("disabled"))
         return !1;
-      this.setActiveTab(o.detail.context.panel);
+      this.setActiveTab(a.detail.context.panel);
     });
   }
   removeActiveTab() {
@@ -386,97 +411,107 @@ class H extends u {
     return Array.from(this.querySelectorAll("wj-tab-panel"));
   }
 }
-customElements.get("wj-tab-group") || window.customElements.define("wj-tab-group", H);
-const $ = `/*!
-* direction.scss
-*/:host{display:none;flex-wrap:wrap;align-items:center;padding:1rem}:host([active]){display:block}
+customElements.get("wj-tab-group") || window.customElements.define("wj-tab-group", $);
+const B = `:host{display:none;flex-wrap:wrap;align-items:center;padding:1rem}:host([active]){display:block}
 `;
-class B extends u {
+class H extends u {
   constructor() {
     super();
-    d(this, "className", "TabPanel");
+    c(this, "className", "TabPanel");
   }
   static get cssStyleSheet() {
-    return $;
+    return B;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, e, o) {
-    let a = document.createDocumentFragment(), r = document.createElement("slot");
-    return a.appendChild(r), a;
+  draw(t, e, a) {
+    let o = document.createDocumentFragment(), r = document.createElement("slot");
+    return o.appendChild(r), o;
   }
 }
-customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", B);
+customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", H);
 export {
-  X as Aside,
-  Z as Avatar,
-  et as Badge,
-  ot as Breadcrumb,
-  it as Breadcrumbs,
-  nt as Button,
-  ct as ButtonGroup,
-  pt as Card,
-  ut as CardContent,
-  bt as CardControls,
-  gt as CardHeader,
-  ft as CardSubtitle,
-  jt as CardTitle,
-  Et as Checkbox,
-  Ct as Chip,
-  Tt as Col,
-  Lt as ColorPicker,
-  Dt as Container,
-  Nt as CopyButton,
-  Mt as Dialog,
-  Ht as Divider,
-  Bt as Dropdown,
-  C as ExampleElement,
-  It as Footer,
-  Gt as Grid,
-  Vt as Header,
-  Jt as Icon,
-  Kt as IconPicker,
-  Xt as Img,
-  Zt as ImgComparer,
-  ee as InfiniteScroll,
-  oe as Input,
-  ie as Item,
-  ne as Label,
-  ce as List,
-  pe as Main,
-  ue as Menu,
-  be as MenuButton,
-  ge as MenuItem,
-  fe as MenuLabel,
-  T as NavMenu,
-  L as Option,
-  D as Options,
-  je as Popup,
-  Ee as ProgressBar,
-  Ce as Radio,
-  Te as RadioGroup,
-  Le as Route,
-  Ne as RouterLink,
-  De as Routerx,
-  Me as Row,
-  N as Select,
-  He as Slider,
-  Be as SplitView,
-  M as Tab,
-  H as TabGroup,
-  B as TabPanel,
-  Ie as Textarea,
-  Ge as Thumbnail,
-  Ve as Toast,
-  Je as Toggle,
-  Ke as Toolbar,
-  Xe as ToolbarAction,
-  Ze as Tooltip,
-  er as VisuallyHidden,
+  at as Animation,
+  rt as Aside,
+  st as Avatar,
+  lt as Badge,
+  ct as Breadcrumb,
+  mt as Breadcrumbs,
+  ht as Button,
+  wt as ButtonGroup,
+  ft as Card,
+  xt as CardContent,
+  At as CardControls,
+  Et as CardHeader,
+  St as CardSubtitle,
+  kt as CardTitle,
+  Ot as Carousel,
+  Rt as CarouselItem,
+  Ft as Checkbox,
+  Nt as Chip,
+  It as Col,
+  Bt as ColorPicker,
+  Wt as Container,
+  Gt as CopyButton,
+  Ut as Dialog,
+  Jt as Divider,
+  Qt as Dropdown,
+  k as ExampleElement,
+  Yt as FileUpload,
+  te as FileUploadItem,
+  re as Footer,
+  ae as FormatDigital,
+  se as Grid,
+  le as Header,
+  ce as Icon,
+  me as IconPicker,
+  he as Img,
+  we as ImgComparer,
+  fe as InfiniteScroll,
+  xe as Input,
+  Ae as InputFile,
+  Ee as Item,
+  Se as Label,
+  ke as List,
+  x as Localizer,
+  Oe as Main,
+  Re as Masonry,
+  Fe as Menu,
+  Ne as MenuButton,
+  Ie as MenuItem,
+  Be as MenuLabel,
+  O as NavMenu,
+  R as Option,
+  z as Options,
+  We as Popup,
+  Ge as ProgressBar,
+  Ue as Radio,
+  Je as RadioGroup,
+  Qe as Rate,
+  Ye as RelativeTime,
+  tr as Route,
+  ar as RouterLink,
+  rr as Routerx,
+  sr as Row,
+  M as Select,
+  lr as Slider,
+  cr as SplitView,
+  P as Tab,
+  $ as TabGroup,
+  H as TabPanel,
+  mr as Textarea,
+  hr as Thumbnail,
+  wr as Toast,
+  fr as Toggle,
+  xr as Toolbar,
+  Ar as ToolbarAction,
+  Er as Tooltip,
+  Sr as VisuallyHidden,
   u as WJElement,
-  U as bindRouterLinks,
-  V as defaultStoreActions,
-  _ as store,
-  K as withRouterLinks
+  X as bindRouterLinks,
+  J as defaultStoreActions,
+  tt as fetchAndParseCSS,
+  K as store,
+  Y as withRouterLinks
 };