wj-elements 0.1.48 → 0.1.49

package/dist/wje-file-upload.js

@@ -0,0 +1,297 @@
+var v = Object.defineProperty;
+var w = (s, r, e) => r in s ? v(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var h = (s, r, e) => (w(s, typeof r != "symbol" ? r + "" : r, e), e);
+import x from "./wje-element.js";
+import { Localizer as z } from "./localize.js";
+import A from "./wje-button.js";
+function L() {
+  return [
+    {
+      type: ["jpg", "jpeg", "png", "gif", "bpm", "tiff", "svg"],
+      name: "photo"
+    },
+    {
+      type: ["zip", "rar", "cab", "jar", "tar", "gzip", "uue", "bz2", "scorm", "war"],
+      name: "file-type-zip"
+    },
+    {
+      type: ["mov", "mp4", "avi", "flv"],
+      name: "video"
+    },
+    {
+      type: ["m4a", "mp3", "wav"],
+      name: "audio"
+    },
+    {
+      type: ["html", "html"],
+      name: "file-type-html"
+    },
+    {
+      type: ["css"],
+      name: "code"
+    },
+    {
+      type: ["txt"],
+      name: "file-type-txt"
+    },
+    {
+      type: ["doc", "docx"],
+      name: "file-type-doc"
+    },
+    {
+      type: ["xls", "xlsx"],
+      name: "file-type-xls"
+    },
+    {
+      type: ["pdf"],
+      name: "file-type-pdf"
+    },
+    {
+      type: ["ppt", "pptx", "odp"],
+      name: "file-type-ppt"
+    }
+  ];
+}
+function E(s) {
+  let r;
+  return s.toLowerCase() !== "folder" ? L().forEach((e) => {
+    e.type.includes(s.toLowerCase()) && (r = e.name);
+  }) : r = "folder", r;
+}
+function j(s, r) {
+  const e = s.type.split("/")[0];
+  let t = Array.isArray(r) ? r : r.split(",");
+  if (t.length === 0)
+    throw new Error("acceptedFileTypes is empty");
+  for (let i of t)
+    if (i.includes(e + "/*") || i.includes(s.type) || i.includes(s.type.split("/")[1]))
+      return !0;
+  return !1;
+}
+function F(s, r, e) {
+  let t = 0;
+  const i = new Array(Math.ceil(s.size / r)).fill(0), n = (a, p) => {
+    const l = new FileReader(), u = a / r, d = s.slice(a, p);
+    l.onload = (c) => {
+      const o = new XMLHttpRequest();
+      o.open("POST", "/upload", !0), o.setRequestHeader("Content-Range", `${a}-${p}/${s.size}`), o.upload.onprogress = (m) => {
+        if (m.lengthComputable) {
+          const g = m.loaded / m.total * 100;
+          i[u] = g, i.reduce((b, y) => b + y, 0) / i.length;
+        }
+      }, o.onload = () => {
+        o.status == 200 || o.status == 201 ? (i[u] = 100, a += r, a < s.size ? (e.setAttribute("uploaded", a), n(a, Math.min(a + r, s.size))) : e.setAttribute("uploaded", a)) : console.error("Error during upload: ", o.statusText);
+      }, o.send(c.target.result);
+    }, l.readAsArrayBuffer(d);
+  };
+  n(t, Math.min(t + r, s.size));
+}
+const C = ':host{width:100%}.native-file-upload{width:100%}.file-label{background:var(--wje-color-contrast-0);border:1px dashed var(--wje-border-color);border-radius:var(--wje-border-radius-medium);align-items:center;justify-content:center;display:flex;padding:1rem;margin-bottom:.5rem;flex-direction:column}.file-preview{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 0;grid-template-areas:"image name name" "image size size" "progress progress progress"}.file-image{grid-area:image;align-items:center;display:flex}.file-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{grid-area:size;display:flex}.file-progress{grid-area:progress}wje-icon{margin-right:.25rem}wje-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wje-slider{flex-basis:100%;margin-top:.5rem}:is()::-webkit-slider-thumb{visibility:hidden}:is()::-moz-range-thumb{visibility:hidden}:is()::-ms-thumb{visibility:hidden}wje-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}';
+class f extends x {
+  /**
+   * Constructor for FileUpload.
+   * Initializes a new instance of the Localizer.
+   */
+  constructor() {
+    super();
+    /**
+     * Dependencies
+     * @type {Object}
+     */
+    h(this, "depandencies", {
+      "wje-button": A
+    });
+    h(this, "className", "FileUpload");
+    /**
+     * Method to handle file drop event.
+     * @param {Event} event - The file drop event.
+     */
+    h(this, "handleDrop", (e) => {
+      const t = e.dataTransfer.files;
+      this.resetFormState(), this.uploadFiles(t);
+    });
+    /**
+     * Method to handle file input change event.
+     * @param {Event} event - The file input change event.
+     */
+    h(this, "handleInputChange", (e) => {
+      this.resetFormState();
+      try {
+        this.handleSubmit(e);
+      } catch {
+        return;
+      }
+    });
+    this.localizer = new z(this);
+  }
+  /**
+   * Setter for acceptedTypes attribute.
+   * @param {string} value - The accepted file types.
+   */
+  set acceptedTypes(e) {
+    this.setAttribute("accepted-types", e);
+  }
+  /**
+   * Getter for acceptedTypes attribute.
+   * @returns {string} The accepted file types.
+   */
+  get acceptedTypes() {
+    const e = this.getAttribute("accepted-types");
+    return this.hasAttribute("accepted-types") ? e : "";
+  }
+  /**
+   * Setter for chunkSize attribute.
+   * @param {number} value - The chunk size for file upload.
+   */
+  set chunkSize(e) {
+    this.setAttribute("chunk-size", e);
+  }
+  /**
+   * Getter for chunkSize attribute.
+   * @returns {number} The chunk size for file upload.
+   */
+  get chunkSize() {
+    const e = this.getAttribute("chunk-size");
+    return this.hasAttribute("chunk-size") ? e : 1024 * 1024;
+  }
+  /**
+   * Setter for maxFileSize attribute.
+   * @param {number} value - The maximum file size for upload.
+   */
+  set maxFileSize(e) {
+    this.setAttribute("max-file-size", e);
+  }
+  /**
+   * Getter for maxFileSize attribute.
+   * @returns {number} The maximum file size for upload.
+   */
+  get maxFileSize() {
+    const e = this.getAttribute("max-file-size");
+    return this.hasAttribute("max-file-size") ? e * 1024 * 1024 : 1024 * 1024;
+  }
+  /**
+   * Getter for cssStyleSheet.
+   * @returns {string} The CSS styles for the component.
+   */
+  static get cssStyleSheet() {
+    return C;
+  }
+  /**
+   * Getter for observedAttributes.
+   * @returns {Array} An empty array as no attributes are observed.
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Method to setup attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Method to draw the component.
+   * @param {Object} context - The context of the component.
+   * @param {Object} store - The store of the component.
+   * @param {Object} params - The parameters for the component.
+   * @returns {DocumentFragment} The fragment containing the component.
+   */
+  draw(e, t, i) {
+    let n = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("native-file-upload"), a.setAttribute("part", "native");
+    let p = document.createElement("div");
+    p.classList.add("file-label");
+    let l = document.createElement("wje-button");
+    l.innerText = this.label || this.localizer.translate("wj.file.upload.button");
+    let u = document.createElement("slot"), d = document.createElement("input");
+    d.setAttribute("type", "file"), d.setAttribute("multiple", ""), d.setAttribute("style", "display:none;"), l.appendChild(u), l.appendChild(d), this.fileInput = d;
+    let c = document.createElement("div");
+    return c.classList.add("file-list"), p.appendChild(u), p.appendChild(l), a.appendChild(d), a.appendChild(p), a.appendChild(c), n.appendChild(a), this.native = a, this.fileList = c, this.button = l, n;
+  }
+  /**
+   * Method to perform actions after the component is drawn.
+   */
+  afterDraw() {
+    this.button.addEventListener("click", () => {
+      this.fileInput.click();
+    }), this.fileInput.addEventListener("change", this.handleInputChange), this.native.addEventListener("drop", this.handleDrop);
+    let e = 0;
+    this.native.addEventListener("dragenter", (t) => {
+      t.preventDefault(), e === 0 && this.native.classList.add("highlight"), e += 1;
+    }), this.native.addEventListener("dragover", (t) => {
+      t.preventDefault(), e === 0 && (e = 1);
+    }), this.native.addEventListener("dragleave", (t) => {
+      t.preventDefault(), e -= 1, e <= 0 && (e = 0, this.native.classList.remove("highlight"));
+    }), this.native.addEventListener("drop", (t) => {
+      t.preventDefault(), e = 0, this.native.classList.remove("highlight");
+    });
+  }
+  /**
+   * Method to handle form submission.
+   * @param {Event} event - The form submission event.
+   */
+  handleSubmit(e) {
+    e.preventDefault(), this.uploadFiles(this.fileInput.files);
+  }
+  /**
+   * Method to upload files.
+   * @param {FileList} files - The files to be uploaded.
+   */
+  uploadFiles(e) {
+    e.length !== 0 && Array.from(e).forEach((t) => {
+      this.assertFilesValid(t);
+      let i, n = new FileReader();
+      n.onload = (a) => {
+        i = this.createPreview(t, n), this.fileList.appendChild(i), F(t, this.chunkSize, i);
+      }, n.readAsDataURL(t);
+    });
+  }
+  /**
+   * Method to create a preview for the file.
+   * @param {File} file - The file for which the preview is to be created.
+   * @param {FileReader} reader - The FileReader instance to read the file.
+   * @returns {HTMLElement} The created preview.
+   */
+  createPreview(e, t) {
+    let i = document.createElement("wje-file-upload-item");
+    return i.setAttribute("name", e.name), i.setAttribute("size", e.size), i.setAttribute("uploaded", "0"), i.setAttribute("progress", "0"), i.innerHTML = `<wje-icon slot="img" name="${E(e.type.split("/")[1])}" size="large"></wje-icon>`, i;
+  }
+  /**
+   * Method to create a thumbnail for the file.
+   * @param {File} file - The file for which the thumbnail is to be created.
+   * @param {FileReader} reader - The FileReader instance to read the file.
+   * @returns {HTMLElement} The created thumbnail.
+   */
+  createThumbnail(e, t) {
+    let i = document.createElement("img");
+    return i.setAttribute("src", t.result), i;
+  }
+  /**
+   * Method to validate the files.
+   * @param {File} file - The file to be validated.
+   * TODO: alowed types a size limit by malo byt cez attributy
+   */
+  assertFilesValid(e) {
+    const { name: t, size: i } = e;
+    if (!j(e, this.acceptedTypes))
+      throw new Error(`❌ FILE: "${t}" Valid file types are: "${this.acceptedTypes}"`);
+    if (i > this.maxFileSize)
+      throw new Error(`❌ File "${t}" could not be uploaded. Only images up to ${this.maxFileSize} MB are allowed. Nie je to ${i}`);
+  }
+  /**
+   * Method to update the status message.
+   * @param {string} text - The status message.
+   */
+  updateStatusMessage(e) {
+  }
+  /**
+   * Method to reset the form state.
+   */
+  resetFormState() {
+    this.fileList.textContent = "", this.updateStatusMessage("🤷‍♂ Nothing's uploaded");
+  }
+}
+f.define("wje-file-upload", f);
+export {
+  f as default
+};

package/dist/wje-footer.js

@@ -0,0 +1,56 @@
+var c = Object.defineProperty;
+var i = (t, e, o) => e in t ? c(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var s = (t, e, o) => (i(t, typeof e != "symbol" ? e + "" : e, o), o);
+import l from "./wje-element.js";
+const d = ":host{--wje-footer-height: 60px;padding:0 20px;flex-shrink:0;height:var(--wje-footer-height);display:block}";
+class n extends l {
+  /**
+   * Creates an instance of Footer.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    s(this, "className", "Footer");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return d;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(o, h, m) {
+    let r = document.createDocumentFragment(), a = document.createElement("slot");
+    return r.appendChild(a), r;
+  }
+}
+n.define("wje-footer", n);
+export {
+  n as default
+};

package/dist/wje-form.js

@@ -0,0 +1,28 @@
+var m = Object.defineProperty;
+var c = (e, t, r) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var o = (e, t, r) => (c(e, typeof t != "symbol" ? t + "" : t, r), r);
+import l from "./wje-element.js";
+const u = ":host{width:100%}";
+class n extends l {
+  constructor() {
+    super();
+    o(this, "className", "Form");
+  }
+  static get cssStyleSheet() {
+    return u;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(r, d, i) {
+    let s = document.createDocumentFragment(), a = document.createElement("slot");
+    return s.appendChild(a), s;
+  }
+}
+n.define("wje-form", n);
+export {
+  n as default
+};

package/dist/wje-format-digital.js

@@ -0,0 +1,85 @@
+var d = Object.defineProperty;
+var h = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var m = (i, t, e) => (h(i, typeof t != "symbol" ? t + "" : t, e), e);
+import p from "./wje-element.js";
+import { Localizer as f } from "./localize.js";
+const g = ".native-format-digital{white-space:nowrap}";
+class c extends p {
+  /**
+   * Creates an instance of FormatDigital.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    m(this, "className", "FormatDigital");
+    this.localizer = new f(this);
+  }
+  /**
+   * Returns the unit of the digital format.
+   *
+   * @returns {string}
+   */
+  get unit() {
+    return this.hasAttribute("unit") ? this.getAttribute("unit") : "byte";
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return g;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["value"];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Prepares the component before drawing.
+   */
+  beforeDraw() {
+    if (this.value < 0)
+      return;
+    const e = ["", "kilo", "mega", "giga", "tera"], o = ["", "kilo", "mega", "giga", "tera", "peta"], n = this.unit === "bit" ? e : o, r = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), n.length - 1)), a = n[r] + this.unit, s = parseFloat((this.value / Math.pow(1e3, r)).toPrecision(3));
+    this.formattedValue = this.localizer.formatNumber(s, {
+      style: "unit",
+      unit: a,
+      unitDisplay: this.unitDisplay || "short"
+    });
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, o, n) {
+    let r = document.createDocumentFragment(), a = document.createElement("div");
+    a.setAttribute("part", "native"), a.classList.add("native-format-digital");
+    let s = document.createElement("span");
+    s.setAttribute("part", "formatted"), s.innerText = this.formattedValue;
+    let l = document.createElement("slot");
+    l.setAttribute("name", "start");
+    let u = document.createElement("slot");
+    return u.setAttribute("name", "end"), a.appendChild(l), a.appendChild(s), a.appendChild(u), r.appendChild(a), r;
+  }
+}
+c.define("wje-format-digital", c);
+export {
+  c as default
+};

package/dist/wje-grid.js

@@ -0,0 +1,28 @@
+var w = Object.defineProperty;
+var u = (g, e, t) => e in g ? w(g, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[e] = t;
+var x = (g, e, t) => (u(g, typeof e != "symbol" ? e + "" : e, t), t);
+import j from "./wje-element.js";
+const y = ":host{width:100%;flex-grow:0}wje-row{display:flex;flex-wrap:wrap}wje-row{--wje-gutter-x: 1.5rem;--wje-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(var(--wje-gutter-y) * -1);margin-right:calc(var(--wje-gutter-x) * -.5);margin-left:calc(var(--wje-gutter-x) * -.5)}.g-0,.gx-0{--wje-gutter-x: 0}.g-0,.gy-0{--wje-gutter-y: 0}.g-1,.gx-1{--wje-gutter-x: .25rem}.g-1,.gy-1{--wje-gutter-y: .25rem}.g-2,.gx-2{--wje-gutter-x: .5rem}.g-2,.gy-2{--wje-gutter-y: .5rem}.g-3,.gx-3{--wje-gutter-x: 1rem}.g-3,.gy-3{--wje-gutter-y: 1rem}.g-4,.gx-4{--wje-gutter-x: 1.5rem}.g-4,.gy-4{--wje-gutter-y: 1.5rem}.g-5,.gx-5{--wje-gutter-x: 3rem}.g-5,.gy-5{--wje-gutter-y: 3rem}@media (min-width: 576px){.g-sm-0,.gx-sm-0{--wje-gutter-x: 0}.g-sm-0,.gy-sm-0{--wje-gutter-y: 0}.g-sm-1,.gx-sm-1{--wje-gutter-x: .25rem}.g-sm-1,.gy-sm-1{--wje-gutter-y: .25rem}.g-sm-2,.gx-sm-2{--wje-gutter-x: .5rem}.g-sm-2,.gy-sm-2{--wje-gutter-y: .5rem}.g-sm-3,.gx-sm-3{--wje-gutter-x: 1rem}.g-sm-3,.gy-sm-3{--wje-gutter-y: 1rem}.g-sm-4,.gx-sm-4{--wje-gutter-x: 1.5rem}.g-sm-4,.gy-sm-4{--wje-gutter-y: 1.5rem}.g-sm-5,.gx-sm-5{--wje-gutter-x: 3rem}.g-sm-5,.gy-sm-5{--wje-gutter-y: 3rem}}@media (min-width: 768px){.g-md-0,.gx-md-0{--wje-gutter-x: 0}.g-md-0,.gy-md-0{--wje-gutter-y: 0}.g-md-1,.gx-md-1{--wje-gutter-x: .25rem}.g-md-1,.gy-md-1{--wje-gutter-y: .25rem}.g-md-2,.gx-md-2{--wje-gutter-x: .5rem}.g-md-2,.gy-md-2{--wje-gutter-y: .5rem}.g-md-3,.gx-md-3{--wje-gutter-x: 1rem}.g-md-3,.gy-md-3{--wje-gutter-y: 1rem}.g-md-4,.gx-md-4{--wje-gutter-x: 1.5rem}.g-md-4,.gy-md-4{--wje-gutter-y: 1.5rem}.g-md-5,.gx-md-5{--wje-gutter-x: 3rem}.g-md-5,.gy-md-5{--wje-gutter-y: 3rem}}@media (min-width: 992px){.g-lg-0,.gx-lg-0{--wje-gutter-x: 0}.g-lg-0,.gy-lg-0{--wje-gutter-y: 0}.g-lg-1,.gx-lg-1{--wje-gutter-x: .25rem}.g-lg-1,.gy-lg-1{--wje-gutter-y: .25rem}.g-lg-2,.gx-lg-2{--wje-gutter-x: .5rem}.g-lg-2,.gy-lg-2{--wje-gutter-y: .5rem}.g-lg-3,.gx-lg-3{--wje-gutter-x: 1rem}.g-lg-3,.gy-lg-3{--wje-gutter-y: 1rem}.g-lg-4,.gx-lg-4{--wje-gutter-x: 1.5rem}.g-lg-4,.gy-lg-4{--wje-gutter-y: 1.5rem}.g-lg-5,.gx-lg-5{--wje-gutter-x: 3rem}.g-lg-5,.gy-lg-5{--wje-gutter-y: 3rem}}@media (min-width: 1200px){.g-xl-0,.gx-xl-0{--wje-gutter-x: 0}.g-xl-0,.gy-xl-0{--wje-gutter-y: 0}.g-xl-1,.gx-xl-1{--wje-gutter-x: .25rem}.g-xl-1,.gy-xl-1{--wje-gutter-y: .25rem}.g-xl-2,.gx-xl-2{--wje-gutter-x: .5rem}.g-xl-2,.gy-xl-2{--wje-gutter-y: .5rem}.g-xl-3,.gx-xl-3{--wje-gutter-x: 1rem}.g-xl-3,.gy-xl-3{--wje-gutter-y: 1rem}.g-xl-4,.gx-xl-4{--wje-gutter-x: 1.5rem}.g-xl-4,.gy-xl-4{--wje-gutter-y: 1.5rem}.g-xl-5,.gx-xl-5{--wje-gutter-x: 3rem}.g-xl-5,.gy-xl-5{--wje-gutter-y: 3rem}}@media (min-width: 1400px){.g-xxl-0,.gx-xxl-0{--wje-gutter-x: 0}.g-xxl-0,.gy-xxl-0{--wje-gutter-y: 0}.g-xxl-1,.gx-xxl-1{--wje-gutter-x: .25rem}.g-xxl-1,.gy-xxl-1{--wje-gutter-y: .25rem}.g-xxl-2,.gx-xxl-2{--wje-gutter-x: .5rem}.g-xxl-2,.gy-xxl-2{--wje-gutter-y: .5rem}.g-xxl-3,.gx-xxl-3{--wje-gutter-x: 1rem}.g-xxl-3,.gy-xxl-3{--wje-gutter-y: 1rem}.g-xxl-4,.gx-xxl-4{--wje-gutter-x: 1.5rem}.g-xxl-4,.gy-xxl-4{--wje-gutter-y: 1.5rem}.g-xxl-5,.gx-xxl-5{--wje-gutter-x: 3rem}.g-xxl-5,.gy-xxl-5{--wje-gutter-y: 3rem}}";
+class m extends j {
+  constructor() {
+    super();
+    x(this, "className", "Grid");
+  }
+  static get cssStyleSheet() {
+    return y;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, s, d) {
+    let r = document.createDocumentFragment(), l = document.createElement("slot");
+    return this.color && this.classList.add("wje-color-" + this.color, "wje-color"), r.appendChild(l), r;
+  }
+}
+m.define("wje-grid", m);
+export {
+  m as default
+};

package/dist/wje-header.js

@@ -0,0 +1,58 @@
+var i = Object.defineProperty;
+var n = (r, e, t) => e in r ? i(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => (n(r, typeof e != "symbol" ? e + "" : e, t), t);
+import l from "./wje-element.js";
+const c = ":host{--wje-header-background: var(--wje-background);--wje-header-border-color: var(--wje-border-color);--wje-header-border-width: 0 0 1px 0;--wje-header-border-style: solid;--wje-header-top: 0;--wje-header-height: 60px;display:block;height:var(--wje-header-height);width:100%;background:var(--wje-header-background);border-width:var(--wje-header-border-width);border-style:var(--wje-header-border-style);border-color:var(--wje-header-border-color)}:host .native-header{display:flex;padding-inline:1rem}:host([sticky]){position:sticky;top:var(--wje-header-top);z-index:999}";
+class s extends l {
+  /**
+   * Creates an instance of Header.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    o(this, "className", "Header");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return c;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(t, w, p) {
+    let d = document.createDocumentFragment(), a = document.createElement("header");
+    a.classList.add("native-header"), a.setAttribute("part", "native");
+    let h = document.createElement("slot");
+    return a.appendChild(h), d.appendChild(a), d;
+  }
+}
+s.define("wje-header", s);
+export {
+  s as default
+};