wj-elements 0.0.6 → 0.0.8

package/dist/wj-master.js

@@ -1,78 +1,79 @@
 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);
+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 { A as tt, f as et } from "./animation-2266bd6e.js";
+import { fetchAndParseCSS as tt } from "./wj-fetchAndParseCSS.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 { 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 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";
+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",
@@ -98,7 +99,7 @@ const T = `:host{color:red}
 class k extends u {
   constructor() {
     super();
-    p(this, "className", "ExampleElement");
+    c(this, "className", "ExampleElement");
   }
   static get cssStyleSheet() {
     return T;
@@ -130,7 +131,7 @@ const L = `/*!
 class O extends u {
   constructor() {
     super();
-    p(this, "className", "ButtonGroup");
+    c(this, "className", "ButtonGroup");
   }
   static get cssStyleSheet() {
     return L;
@@ -152,7 +153,7 @@ const D = `:host{--wj-option-padding-top: .5rem;--wj-option-padding-bottom: .5re
 class R extends u {
   constructor() {
     super();
-    p(this, "className", "Option");
+    c(this, "className", "Option");
   }
   set selected(t) {
     return t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
@@ -177,10 +178,10 @@ class R extends u {
     r.classList.add("native-option"), r.setAttribute("part", "native");
     let n = document.createElement("wj-icon");
     n.setAttribute("name", "check");
-    let c = document.createElement("slot");
-    c.setAttribute("name", "start");
+    let p = document.createElement("slot");
+    p.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;
+    return l.setAttribute("name", "end"), r.appendChild(n), r.appendChild(p), r.appendChild(d), r.appendChild(l), o.appendChild(r), o;
   }
   afterDraw() {
     f.addListener(this, "click", "wj:option-change");
@@ -190,7 +191,7 @@ customElements.get("wj-option") || window.customElements.define("wj-option", R);
 class z extends u {
   constructor() {
     super();
-    p(this, "className", "Options");
+    c(this, "className", "Options");
   }
   static get cssStyleSheet() {
     return styles;
@@ -222,14 +223,14 @@ const F = `:host{--wj-select-border-width: 1px;--wj-select-border-style: solid;-
 class M extends u {
   constructor() {
     super();
-    p(this, "className", "Select");
-    p(this, "optionChange", (t) => {
+    c(this, "className", "Select");
+    c(this, "optionChange", (t) => {
       let e = this.getAllOptions();
       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);
     });
-    p(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);
     });
@@ -263,8 +264,8 @@ class M extends u {
     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 c = document.createElement("wj-label");
-    c.innerText = this.label || "";
+    let p = document.createElement("wj-label");
+    p.innerText = this.label || "";
     let d = document.createElement("div");
     d.classList.add("input-wrapper");
     let l = document.createElement("input");
@@ -280,7 +281,7 @@ class M extends u {
     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(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;
+    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, a) {
     this.input.addEventListener("focus", (o) => {
@@ -342,7 +343,7 @@ const N = `:host{--wj-font-size: 10px;--wj-tab-text-transfrom: uppercase;--wj-ta
 class P extends u {
   constructor() {
     super();
-    p(this, "className", "Tab");
+    c(this, "className", "Tab");
     this.last = !1;
   }
   static get cssStyleSheet() {
@@ -365,7 +366,7 @@ const I = `:host{--wj-tab-top: 0;--wj-tab-start: 0;--wj-tab-end: 0;--wj-tab-bott
 class $ extends u {
   constructor() {
     super();
-    p(this, "className", "TabGroup");
+    c(this, "className", "TabGroup");
   }
   static get cssStyleSheet() {
     return I;
@@ -378,8 +379,8 @@ class $ extends u {
     r.classList.add("native-tab-group");
     let n = document.createElement("header");
     n.classList.add("scroll-snap-x");
-    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;
+    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() {
     let t = this.getActiveTab(), e = t ? t[0].name : this.getTabAll()[0].panel;
@@ -416,7 +417,7 @@ const B = `:host{display:none;flex-wrap:wrap;align-items:center;padding:1rem}:ho
 class H extends u {
   constructor() {
     super();
-    p(this, "className", "TabPanel");
+    c(this, "className", "TabPanel");
   }
   static get cssStyleSheet() {
     return B;
@@ -431,86 +432,86 @@ class H extends u {
 }
 customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", H);
 export {
-  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,
+  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,
-  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,
+  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,
-  Le as Main,
-  De as Masonry,
-  ze as Menu,
-  Me as MenuButton,
-  Pe as MenuItem,
-  $e as MenuLabel,
+  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,
-  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,
+  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,
-  nr as Slider,
-  dr as SplitView,
+  lr as Slider,
+  cr 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,
+  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,
   X as bindRouterLinks,
   J as defaultStoreActions,
-  et as fetchAndParseCSS,
+  tt as fetchAndParseCSS,
   K as store,
   Y as withRouterLinks
 };

package/package.json

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

package/dist/animation-2266bd6e.js

@@ -1,103 +0,0 @@
-var l = Object.defineProperty;
-var c = (s, e, t) => e in s ? l(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var m = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
-import f from "./wj-element.js";
-let o = [];
-function h(s) {
-  const e = /@keyframes\s+([\w-]+)\s*{([\s\S]+?})\s*}/g;
-  let t, n = [];
-  for (; (t = e.exec(s)) !== null; ) {
-    let i = t[1], a = t[2].trim(), r = u(a);
-    n.push({ name: i, keyframes: r });
-  }
-  return n;
-}
-function u(s) {
-  const e = /([\d%]+)\s*{([\s\S]+?)}/g;
-  let t, n = [];
-  for (; (t = e.exec(s)) !== null; ) {
-    let i = parseFloat(t[1]) / 100, a = d(t[2]), r = {
-      offset: i,
-      ...a
-    };
-    n.push(r);
-  }
-  return n.sort((i, a) => i.offset - a.offset), n;
-}
-function d(s) {
-  const e = {};
-  return s.split(";").forEach((t) => {
-    const [n, i] = t.split(":").map((a) => a.trim());
-    n && i && (n === "animation-timing-function" ? e.easing = i : e[n] = i);
-  }), e;
-}
-async function p(s) {
-  try {
-    if (o.length > 0)
-      return o;
-    const t = await (await fetch(s)).text();
-    return o = h(t), o;
-  } catch (e) {
-    console.error("Error:", e);
-  }
-}
-const y = "";
-class g extends f {
-  constructor() {
-    super();
-    m(this, "className", "Animation");
-    this._animations = [];
-  }
-  set animations(t) {
-    this._animations = t;
-  }
-  get animations() {
-    return this._animations;
-  }
-  static get cssStyleSheet() {
-    return y;
-  }
-  static get observedAttributes() {
-    return ["name"];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(t, n, i) {
-    let a = document.createDocumentFragment(), r = document.createElement("slot");
-    return a.appendChild(r), this.slotEl = r, a;
-  }
-  async afterDraw() {
-    this.destroyAnimation(), this.animations = await this.getAnimationsArray();
-    const t = this.animations.find((i) => i.name === this.name), n = this.slotEl.assignedElements()[0];
-    this.animation = n.animate(t.keyframes, {
-      delay: +this.delay || 0,
-      // zdrzanie pred zacatim animacie
-      endDelay: +this.endDelay || 0,
-      // zdrzanie po skoncení animacie
-      fill: this.fill || "auto",
-      // vyplnenie animace (pred a po animacii)
-      duration: +this.duration || 1e3,
-      // doba trvania animacie v milisekundách
-      iterationStart: +this.iterationStart || 0,
-      // počet opakování animacie
-      iterations: this.iterations || 1 / 0,
-      // počet opakování animacie
-      direction: this.direction || "normal",
-      // smer animaciee (zpat a dopredu)
-      easing: this.easing || "linear"
-      // typ spomalenia (rychlost zmen v čase)
-    }), this.animation.play();
-  }
-  destroyAnimation() {
-    this.animation && this.animation.cancel();
-  }
-  async getAnimationsArray() {
-    return await p("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
-  }
-}
-customElements.get("wj-animation") || window.customElements.define("wj-animation", g);
-export {
-  g as A,
-  p as f
-};