wj-elements 0.0.11 → 0.0.13

package/dist/wj-fetchAndParseCSS.js

@@ -1,43 +1,60 @@
-let o = [];
-function f(n) {
-  const t = /@keyframes\s+([\w-]+)\s*{([\s\S]+?})\s*}/g;
-  let e, s = [];
-  for (; (e = t.exec(n)) !== null; ) {
-    let r = e[1], a = e[2].trim(), i = l(a);
-    s.push({ name: r, keyframes: i });
+let animations = [];
+function parseCSS(css) {
+  const keyframesRegex = /@keyframes\s+([\w-]+)\s*{([\s\S]+?})\s*}/g;
+  let match;
+  let localAnimations = [];
+  while ((match = keyframesRegex.exec(css)) !== null) {
+    let name = match[1];
+    let frames = match[2].trim();
+    let keyframes = parseKeyframes(frames);
+    localAnimations.push({ name, keyframes });
   }
-  return s;
+  return localAnimations;
 }
-function l(n) {
-  const t = /([\d%]+)\s*{([\s\S]+?)}/g;
-  let e, s = [];
-  for (; (e = t.exec(n)) !== null; ) {
-    let r = parseFloat(e[1]) / 100, a = c(e[2]), i = {
-      offset: r,
-      ...a
+function parseKeyframes(frames) {
+  const frameRegex = /([\d%]+)\s*{([\s\S]+?)}/g;
+  let match;
+  let keyframes = [];
+  while ((match = frameRegex.exec(frames)) !== null) {
+    let offset = parseFloat(match[1]) / 100;
+    let properties = parseProperties(match[2]);
+    let keyframeObject = {
+      offset,
+      ...properties
     };
-    s.push(i);
+    keyframes.push(keyframeObject);
   }
-  return s.sort((r, a) => r.offset - a.offset), s;
+  keyframes.sort((a, b) => a.offset - b.offset);
+  return keyframes;
 }
-function c(n) {
-  const t = {};
-  return n.split(";").forEach((e) => {
-    const [s, r] = e.split(":").map((a) => a.trim());
-    s && r && (s === "animation-timing-function" ? t.easing = r : t[s] = r);
-  }), t;
+function parseProperties(propertiesString) {
+  const properties = {};
+  propertiesString.split(";").forEach((property) => {
+    const [key, value] = property.split(":").map((part) => part.trim());
+    if (key && value) {
+      if (key === "animation-timing-function") {
+        properties["easing"] = value;
+      } else {
+        properties[key] = value;
+      }
+    }
+  });
+  return properties;
 }
-async function m(n) {
+async function fetchAndParseCSS(url) {
   try {
-    if (o.length > 0)
-      return o;
-    const e = await (await fetch(n)).text();
-    return o = f(e), o;
-  } catch (t) {
-    console.error("Error:", t);
+    if (animations.length > 0) {
+      return animations;
+    }
+    const response = await fetch(url);
+    const cssText = await response.text();
+    animations = parseCSS(cssText);
+    return animations;
+  } catch (error) {
+    console.error("Error:", error);
   }
 }
 export {
-  o as animations,
-  m as fetchAndParseCSS
+  animations,
+  fetchAndParseCSS
 };

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

@@ -1,63 +1,89 @@
-var h = Object.defineProperty;
-var g = (a, t, e) => t in a ? h(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var c = (a, t, e) => (g(a, typeof t != "symbol" ? t + "" : t, e), e);
-import w from "./wj-element.js";
-import { L as b } from "./localize-762a9f0f.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
+import { L as Localizer } from "./localize-20081fd1.js";
 import "./wj-store.js";
-const f = `:host{width:100%}.native-file-upload-item{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 .5rem;grid-template-areas:"image name actions" "image size actions" "progress progress progress";padding:.5rem;border:1px solid var(--wj-border-color);border-radius:var(--wj-border-radius-medium)}.image{grid-area:image;align-items:center;display:flex}::slotted([slot=img]){--wj-img-border-radius: var(--wj-border-radius-medium) !important}.name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.size{grid-area:size;display:flex}.actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end}.file-progress{grid-area:progress}wj-icon{margin-right:.25rem}wj-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wj-slider{flex-basis:100%;margin-top:.5rem}::part(slider)::-webkit-slider-thumb{visibility:hidden}::part(slider)::-moz-range-thumb{visibility:hidden}::part(slider)::-ms-thumb{visibility:hidden}wj-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wj-border-color);border-radius:var(--wj-border-radius-medium)}
-`;
-class v extends w {
+const styles = '/*\n[ WJ File Upload Item ]\n*/\n:host {\n  width: 100%;\n}\n\n.native-file-upload-item {\n  display: grid;\n  grid-template-columns: auto 1fr 1fr;\n  grid-template-rows: auto auto auto;\n  gap: 0 0.5rem;\n  grid-template-areas: "image name actions" "image size actions" "progress progress progress";\n  padding: 0.5rem;\n  border: 1px solid var(--wj-border-color);\n  border-radius: var(--wj-border-radius-medium);\n}\n\n.image {\n  grid-area: image;\n  align-items: center;\n  display: flex;\n}\n\n::slotted([slot=img]) {\n  --wj-img-border-radius: var(--wj-border-radius-medium) !important;\n}\n\n.name {\n  grid-area: name;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: bold;\n}\n\n.size {\n  grid-area: size;\n  display: flex;\n}\n\n.actions {\n  grid-area: actions;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\n.file-progress {\n  grid-area: progress;\n}\n\nwj-icon {\n  margin-right: 0.25rem;\n}\n\nwj-img {\n  margin-right: 0.25rem;\n}\n\n.file-info > span {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nwj-slider {\n  flex-basis: 100%;\n  margin-top: 0.5rem;\n}\n\n::part(slider)::-webkit-slider-thumb {\n  visibility: hidden;\n}\n::part(slider)::-moz-range-thumb {\n  visibility: hidden;\n}\n::part(slider)::-ms-thumb {\n  visibility: hidden;\n}\n\nwj-img {\n  width: 50px;\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0.25rem;\n  border: 1px solid var(--wj-border-color);\n  border-radius: var(--wj-border-radius-medium);\n}';
+class FileUploadItem extends WJElement {
   constructor() {
     super();
-    c(this, "className", "FileUploadItem");
-    c(this, "onDelete", () => {
+    __publicField(this, "className", "FileUploadItem");
+    __publicField(this, "onDelete", () => {
       this.remove();
     });
-    this.localizer = new b(this);
+    this.localizer = new Localizer(this);
   }
   static get cssStyleSheet() {
-    return f;
+    return styles;
   }
   static get observedAttributes() {
     return ["uploaded"];
   }
-  attributeChangedCallback(e, i, m) {
-    if (e === "uploaded" && this.drawingStatus === "AFTER") {
+  attributeChangedCallback(name, old, newName) {
+    if (name === "uploaded" && this.drawingStatus === "AFTER") {
       this.uploadedEl.setAttribute("value", this.uploaded);
-      let r = +this.uploaded / +this.size * 100 || 0;
-      this.sliderEl.setAttribute("value", Math.round(r, 0));
+      let progress = +this.uploaded / +this.size * 100 || 0;
+      this.sliderEl.setAttribute("value", Math.round(progress, 0));
     }
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   draw() {
-    let e = document.createDocumentFragment(), i = document.createElement("div");
-    i.classList.add("native-file-upload-item");
-    let m = document.createElement("slot");
-    m.setAttribute("name", "img");
-    let r = document.createElement("div");
-    r.classList.add("image");
-    let p = document.createElement("span");
-    p.classList.add("name"), p.innerText = this.name;
-    let d = document.createElement("slot");
-    d.classList.add("actions"), d.setAttribute("name", "action");
-    let l = document.createElement("wj-button");
-    l.setAttribute("fill", "link"), l.setAttribute("size", "small"), l.innerHTML = '<wj-icon name="x" size="small"></wj-icon>';
-    let o = document.createElement("span");
-    o.classList.add("size");
-    let n = document.createElement("wj-format-digital");
-    n.setAttribute("value", this.uploaded || 0), n.innerHTML = `<span slot="start">${this.localizer.translate("wj.file.upload.uploaded")}</span>`;
-    let u = document.createElement("wj-format-digital");
-    u.setAttribute("value", this.size || 0), u.innerHTML = `<span slot="start">&nbsp;${this.localizer.translate("wj.file.upload.from")} </span>`;
-    let s = document.createElement("wj-slider");
-    return s.classList.add("file-progress"), s.setAttribute("id", "id-" + this.lastModified), s.setAttribute("value", this.progress || 0), s.setAttribute("color", "success"), r.appendChild(m), d.appendChild(l), o.appendChild(n), o.appendChild(u), i.appendChild(r), i.appendChild(p), i.appendChild(o), i.appendChild(d), i.appendChild(s), e.appendChild(i), this.button = l, this.uploadedEl = n, this.sliderEl = s, e;
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-file-upload-item");
+    let slot = document.createElement("slot");
+    slot.setAttribute("name", "img");
+    let image = document.createElement("div");
+    image.classList.add("image");
+    let name = document.createElement("span");
+    name.classList.add("name");
+    name.innerText = this.name;
+    let actions = document.createElement("slot");
+    actions.classList.add("actions");
+    actions.setAttribute("name", "action");
+    let button = document.createElement("wj-button");
+    button.setAttribute("fill", "link");
+    button.setAttribute("size", "small");
+    button.innerHTML = `<wj-icon name="x" size="small"></wj-icon>`;
+    let sizeWrapper = document.createElement("span");
+    sizeWrapper.classList.add("size");
+    let uploaded = document.createElement("wj-format-digital");
+    uploaded.setAttribute("value", this.uploaded || 0);
+    uploaded.innerHTML = `<span slot="start">${this.localizer.translate("wj.file.upload.uploaded")}</span>`;
+    let size = document.createElement("wj-format-digital");
+    size.setAttribute("value", this.size || 0);
+    size.innerHTML = `<span slot="start">&nbsp;${this.localizer.translate("wj.file.upload.from")} </span>`;
+    let slider = document.createElement("wj-slider");
+    slider.classList.add("file-progress");
+    slider.setAttribute("id", "id-" + this.lastModified);
+    slider.setAttribute("value", this.progress || 0);
+    slider.setAttribute("color", "success");
+    image.appendChild(slot);
+    actions.appendChild(button);
+    sizeWrapper.appendChild(uploaded);
+    sizeWrapper.appendChild(size);
+    native.appendChild(image);
+    native.appendChild(name);
+    native.appendChild(sizeWrapper);
+    native.appendChild(actions);
+    native.appendChild(slider);
+    fragment.appendChild(native);
+    this.button = button;
+    this.uploadedEl = uploaded;
+    this.sliderEl = slider;
+    return fragment;
   }
   afterDraw() {
     this.button.addEventListener("wj:button-click", this.onDelete);
   }
 }
-customElements.get("wj-file-upload-item") || window.customElements.define("wj-file-upload-item", v);
+customElements.get("wj-file-upload-item") || window.customElements.define("wj-file-upload-item", FileUploadItem);
 export {
-  v as FileUploadItem
+  FileUploadItem
 };