wj-elements 0.0.5 → 0.0.6

package/dist/wj-master.js

@@ -1,76 +1,107 @@
-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 p = (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 { A as tt, f as et } from "./animation-2266bd6e.js";
+import { L as x } from "./localize-762a9f0f.js";
+import { Aside as ot } from "./wj-aside.js";
+import { Avatar as it } from "./wj-avatar.js";
+import { Badge as nt } from "./wj-badge.js";
+import { Breadcrumb as dt } from "./wj-breadcrumb.js";
+import { Breadcrumbs as ct } from "./wj-breadcrumbs.js";
+import { Button as ut } from "./wj-button.js";
+import { ButtonGroup as bt } from "./wj-button-group.js";
+import { Card as gt } from "./wj-card.js";
+import { CardContent as vt } from "./wj-card-content.js";
+import { CardControls as jt } from "./wj-card-controls.js";
+import { CardHeader as yt } from "./wj-card-header.js";
+import { CardSubtitle as Ct } from "./wj-card-subtitle.js";
+import { CardTitle as Tt } from "./wj-card-title.js";
+import { Carousel as Lt } from "./wj-carousel.js";
+import { CarouselItem as Dt } from "./wj-carousel-item.js";
+import { Checkbox as zt } from "./wj-checkbox.js";
+import { Chip as Mt } from "./wj-chip.js";
+import { Col as Pt } from "./wj-col.js";
+import { ColorPicker as $t } from "./wj-color-picker.js";
+import { Container as Ht } from "./wj-container.js";
+import { CopyButton as qt } from "./wj-copy-button.js";
+import { Dialog as Vt } from "./wj-dialog.js";
+import { Divider as _t } from "./wj-divider.js";
+import { Dropdown as Kt } from "./wj-dropdown.js";
+import { FileUpload as Xt } from "./wj-file-upload.js";
+import { FileUploadItem as Zt } from "./wj-file-upload-item.js";
+import { Footer as ee } from "./wj-footer.js";
+import { FormatDigital as oe } from "./wj-format-digital.js";
+import { Grid as ie } from "./wj-grid.js";
+import { Header as ne } from "./wj-header.js";
+import { Icon as de } from "./wj-icon.js";
+import { IconPicker as ce } from "./wj-icon-picker.js";
+import { Img as ue } from "./wj-img.js";
+import { ImgComparer as be } from "./wj-img-comparer.js";
+import { InfiniteScroll as ge } from "./wj-infinite-scroll.js";
+import { Input as ve } from "./wj-input.js";
+import { InputFile as je } from "./wj-input-file.js";
+import { Item as ye } from "./wj-item.js";
+import { Label as Ce } from "./wj-label.js";
+import { List as Te } from "./wj-list.js";
+import { Main as Le } from "./wj-main.js";
+import { Masonry as De } from "./wj-masonry.js";
+import { Menu as ze } from "./wj-menu.js";
+import { MenuButton as Me } from "./wj-menu-button.js";
+import { MenuItem as Pe } from "./wj-menu-item.js";
+import { MenuLabel as $e } from "./wj-menu-label.js";
+import { Popup as He } from "./wj-popup.js";
+import { ProgressBar as qe } from "./wj-progress-bar.js";
+import { Radio as Ve } from "./wj-radio.js";
+import { RadioGroup as _e } from "./wj-radio-group.js";
+import { Rate as Ke } from "./wj-rate.js";
+import { RelativeTime as Xe } from "./wj-relative-time.js";
+import { Route as Ze } from "./wj-route.js";
+import { Routerx as er } from "./wj-routerx.js";
+import { RouterLink as or } 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 ir } from "./wj-row.js";
+import { Slider as nr } from "./wj-slider.js";
+import { SplitView as dr } from "./wj-split-view.js";
+import { Textarea as cr } from "./wj-textarea.js";
+import { Thumbnail as ur } from "./wj-thumbnail.js";
+import { Toast as br } from "./wj-toast.js";
+import { Toggle as gr } from "./wj-toggle.js";
+import { Toolbar as vr } from "./wj-toolbar.js";
+import { ToolbarAction as jr } from "./wj-toolbar-action.js";
+import { Tooltip as yr } from "./wj-tooltip.js";
+import { VisuallyHidden as Cr } 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");
+    p(this, "className", "ExampleElement");
   }
   static get cssStyleSheet() {
-    return y;
+    return T;
   }
   static get observedAttributes() {
     return [];
@@ -80,29 +111,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");
+    p(this, "className", "ButtonGroup");
   }
   static get cssStyleSheet() {
-    return S;
+    return L;
   }
   static get observedAttributes() {
     return [];
@@ -110,26 +141,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");
+    p(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 +172,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 c = document.createElement("slot");
+    c.setAttribute("name", "start");
+    let d = document.createElement("slot"), l = document.createElement("slot");
+    return l.setAttribute("name", "end"), r.appendChild(n), r.appendChild(c), 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");
+    p(this, "className", "Options");
   }
   static get cssStyleSheet() {
-    return O;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -173,10 +204,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 +216,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) => {
+    p(this, "className", "Select");
+    p(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) => {
+    p(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 +248,7 @@ class N extends u {
     return this.getAttribute("trigger") || "click";
   }
   static get cssStyleSheet() {
-    return R;
+    return F;
   }
   static get observedAttributes() {
     return ["active", "value"];
@@ -227,17 +256,17 @@ 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");
     let n = document.createElement("div");
     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 c = document.createElement("wj-label");
+    c.innerText = this.label || "";
+    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 +275,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(c) : n.appendChild(c), 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 = c, 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 +303,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 +331,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");
+    p(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");
+    p(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 c = document.createElement("nav"), d = document.createElement("section"), l = document.createElement("slot"), h = document.createElement("slot");
+    return h.setAttribute("name", "nav"), n.appendChild(c), c.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 +410,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");
+    p(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,
+  tt as Animation,
+  ot as Aside,
+  it as Avatar,
+  nt as Badge,
+  dt as Breadcrumb,
+  ct as Breadcrumbs,
+  ut as Button,
+  bt as ButtonGroup,
+  gt as Card,
+  vt as CardContent,
+  jt as CardControls,
+  yt as CardHeader,
+  Ct as CardSubtitle,
+  Tt as CardTitle,
+  Lt as Carousel,
+  Dt as CarouselItem,
+  zt as Checkbox,
+  Mt as Chip,
+  Pt as Col,
+  $t as ColorPicker,
+  Ht as Container,
+  qt as CopyButton,
+  Vt as Dialog,
+  _t as Divider,
+  Kt as Dropdown,
+  k as ExampleElement,
+  Xt as FileUpload,
+  Zt as FileUploadItem,
+  ee as Footer,
+  oe as FormatDigital,
+  ie as Grid,
+  ne as Header,
+  de as Icon,
+  ce as IconPicker,
+  ue as Img,
+  be as ImgComparer,
+  ge as InfiniteScroll,
+  ve as Input,
+  je as InputFile,
+  ye as Item,
+  Ce as Label,
+  Te as List,
+  x as Localizer,
+  Le as Main,
+  De as Masonry,
+  ze as Menu,
+  Me as MenuButton,
+  Pe as MenuItem,
+  $e as MenuLabel,
+  O as NavMenu,
+  R as Option,
+  z as Options,
+  He as Popup,
+  qe as ProgressBar,
+  Ve as Radio,
+  _e as RadioGroup,
+  Ke as Rate,
+  Xe as RelativeTime,
+  Ze as Route,
+  or as RouterLink,
+  er as Routerx,
+  ir as Row,
+  M as Select,
+  nr as Slider,
+  dr as SplitView,
+  P as Tab,
+  $ as TabGroup,
+  H as TabPanel,
+  cr as Textarea,
+  ur as Thumbnail,
+  br as Toast,
+  gr as Toggle,
+  vr as Toolbar,
+  jr as ToolbarAction,
+  yr as Tooltip,
+  Cr as VisuallyHidden,
   u as WJElement,
-  U as bindRouterLinks,
-  V as defaultStoreActions,
-  _ as store,
-  K as withRouterLinks
+  X as bindRouterLinks,
+  J as defaultStoreActions,
+  et as fetchAndParseCSS,
+  K as store,
+  Y as withRouterLinks
 };