wj-elements 0.1.16 → 0.1.17

package/dist/wje-store.js

@@ -0,0 +1,192 @@
+var h = Object.defineProperty;
+var o = (u, r, e) => r in u ? h(u, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[r] = e;
+var n = (u, r, e) => (o(u, typeof r != "symbol" ? r + "" : r, e), e);
+class d {
+  constructor() {
+    this.events = {};
+  }
+  /**
+   * Either create a new event instance for passed `event` name
+   * or push a new callback into the existing collection
+   *
+   * @param {string} event
+   * @param {function} callback
+   * @returns {number} A count of callbacks for this event
+   * @memberof PubSub
+   */
+  subscribe(r, e) {
+    let t = this;
+    return t.events.hasOwnProperty(r) || (t.events[r] = []), t.events[r].push(e) - 1, {
+      unsubscribe() {
+        t.events[r].splice(t.events[r].indexOf(e), 1);
+      }
+    };
+  }
+  /**
+   * If the passed event has callbacks attached to it, loop through each one
+   * and call it
+   *
+   * @param {string} event
+   * @param {object} [data={}]
+   * @returns {array} The callbacks for this event, or an empty array if no event exits
+   * @memberof PubSub
+   */
+  publish(r, e = {}, t) {
+    let s = this;
+    return s.events.hasOwnProperty(r) ? s.events[r].map((i) => i(e, t)) : [];
+  }
+}
+const c = (u) => (r) => ({
+  type: `${u}/ADD`,
+  payload: r
+}), p = (u) => (r) => ({
+  type: `${u}/ADD_MANY`,
+  payload: r
+}), l = (u) => (r) => ({
+  type: `${u}/UPDATE`,
+  payload: r
+}), a = (u) => (r) => ({
+  type: `${u}/DELETE`,
+  payload: r
+}), f = (u) => (r) => ({
+  type: `${u}/LOAD`,
+  payload: r
+}), y = {
+  addAction: c,
+  deleteAction: a,
+  loadAction: f,
+  updateAction: l,
+  addManyAction: p
+};
+class A {
+  constructor(r = {}) {
+    n(this, "_state");
+    n(this, "_reducer");
+    n(this, "events");
+    n(this, "status");
+    this._isPause = !1, this._state = {}, this._reducer = function(t = {}, s) {
+      return {};
+    }, this.status = "resting", this.events = new d(), r != null && r.hasOwnProperty("reducer") && (this._reducer = r.reducer), this.refreshProxy(r == null ? void 0 : r.state);
+  }
+  /**
+   * A dispatcher for actions that looks in the actions 
+   * collection and runs the action if it can find it
+   *
+   * @param {string} actionKey
+   * @param {mixed} payload
+   * @returns {boolean}
+   * @memberof Store
+   */
+  dispatch(r) {
+    this.status = "action";
+    let e = this._reducer(this._state, r);
+    return this.status = "mutation", this._state = Object.assign(this._state, e), !0;
+  }
+  getState() {
+    return JSON.parse(JSON.stringify(this._state));
+  }
+  subscribe(r, e) {
+    return this.events.subscribe(r, e);
+  }
+  unsubscribe(r) {
+    delete this.events[r];
+  }
+  pause() {
+    return this._isPause = !0, this;
+  }
+  play(r) {
+    return this._isPause = !1, this;
+  }
+  mergeReducers(r, e) {
+    let t = this._reducer;
+    this._reducer = (s, i) => ({
+      ...t(s, i),
+      [r]: e(s[r], i)
+    });
+  }
+  makeEveryArrayEntryAsStoreState(r, e = [], t = "id") {
+    e.forEach((s) => {
+      this.getState().hasOwnProperty(`${r}-${s[t]}`) ? this.dispatch(y.updateAction(`${r}-${s[t]}`)(s)) : this.define(`${r}-${s.id || s.source || s[t]}`, s, null, t);
+    });
+  }
+  define(r, e, t, s = "id") {
+    if (this._state.hasOwnProperty(r)) {
+      console.warn(`STATE už obsahuje premennú ${r},ktorú sa pokúšate pridať`);
+      return;
+    }
+    t instanceof Function ? this.mergeReducers(r, t) : e instanceof Array ? this.mergeReducers(r, this.createArrayReducer(r, s)) : this.mergeReducers(r, this.createObjectReducer(r, s)), this.refreshProxy({
+      ...this._state,
+      [r]: e
+    });
+  }
+  refreshProxy(r) {
+    this._state = new Proxy(r || {}, {
+      set: (e, t, s) => {
+        if (JSON.stringify(e[t]) === JSON.stringify(s))
+          return !0;
+        let i = e[t];
+        return e[t] = s, this._isPause || this.events.publish(t, this._state, i), this.status !== "mutation" && console.warn(`You should use a mutation to set ${t}`), this.status = "resting", !0;
+      }
+    });
+  }
+  createObjectReducer(r) {
+    return (e = {}, t) => {
+      switch (t.type) {
+        case `${r}/ADD`:
+          return {
+            ...t.payload
+          };
+        case `${r}/UPDATE`:
+          return {
+            ...e,
+            ...t.payload
+          };
+        case `${r}/DELETE`:
+          return {};
+        default:
+          return e;
+      }
+    };
+  }
+  createArrayReducer(r, e) {
+    return (t = [], s) => {
+      switch (s.type) {
+        case `${r}/ADD`:
+          return Array.isArray(s.payload) ? [
+            ...t,
+            ...s.payload
+          ] : [
+            ...t,
+            s.payload
+          ];
+        case `${r}/ADD_MANY`:
+          return [
+            ...t,
+            ...s.payload
+          ];
+        case `${r}/UPDATE`:
+          return t.some((i) => i[e] == s.payload[e]) ? [
+            ...t.map((i) => i[e] == s.payload[e] ? s.payload : i)
+          ] : [
+            ...t,
+            s.payload
+          ];
+        case `${r}/DELETE`:
+          return [
+            ...t.filter((i) => i.hasOwnProperty(e) && i[e] != s.payload[e] || !i.hasOwnProperty(e) && i != s.payload)
+          ];
+        case `${r}/LOAD`:
+          return [
+            ...s.payload
+          ];
+        default:
+          return t;
+      }
+    };
+  }
+}
+let D = new A();
+export {
+  y as defaultStoreActions,
+  D as store
+};

package/dist/wje-tab-group.js

@@ -0,0 +1,105 @@
+var u = Object.defineProperty;
+var m = (a, e, t) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var v = (a, e, t) => (m(a, typeof e != "symbol" ? e + "" : e, t), t);
+import h from "./wje-element.js";
+const g = ":host{--wje-tab-top: 0;--wje-tab-start: 0;--wje-tab-end: 0;--wje-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]){--wje-tab-top: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant=top]) .native-tab-group{flex-direction:column}:host([variant=top]) nav{border-bottom:1px solid var(--wje-border-color)}:host([variant=start]){--wje-tab-start: auto !important;--wje-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(--wje-border-color)}:host([variant=end]){--wje-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(--wje-border-color)}:host([variant=bottom]){--wje-tab-bottom: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant=bottom]) .native-tab-group{flex-direction:column-reverse}:host([variant=bottom]) nav{border-top:1px solid var(--wje-border-color)}";
+class b extends h {
+  /**
+   * Creates an instance of TabGroup.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    v(this, "className", "TabGroup");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return g;
+  }
+  /**
+   * 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, n, o) {
+    let l = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-tab-group");
+    let i = document.createElement("header");
+    i.classList.add("scroll-snap-x");
+    let s = document.createElement("nav"), c = document.createElement("section"), p = document.createElement("slot"), d = document.createElement("slot");
+    return d.setAttribute("name", "nav"), i.appendChild(s), s.appendChild(d), c.appendChild(p), r.appendChild(i), r.appendChild(c), l.appendChild(r), l;
+  }
+  /**
+   * Sets up the event listeners after the component is drawn.
+   */
+  afterDraw() {
+    let t = this.getActiveTab(), n = t ? t[0].name : this.getTabAll()[0].panel;
+    this.setActiveTab(n), this.addEventListener("wje:tab-change", (o) => {
+      if (o.detail.context.hasAttribute("disabled"))
+        return !1;
+      this.setActiveTab(o.detail.context.panel);
+    });
+  }
+  /**
+   * Removes the active attribute from all tabs and panels.
+   */
+  removeActiveTab() {
+    this.getPanelAll().forEach((t) => {
+      t.removeAttribute("active");
+    }), this.getTabAll().forEach((t) => {
+      t.removeAttribute("active");
+    });
+  }
+  /**
+   * Sets the active tab and panel.
+   *
+   * @param {string} tab - The name of the tab to set as active.
+   */
+  setActiveTab(t) {
+    this.removeActiveTab(), this.querySelector(`[panel="${t}"]`).setAttribute("active", ""), this.querySelector(`[name="${t}"]`).setAttribute("active", "");
+  }
+  /**
+   * Returns the currently active tab.
+   *
+   * @returns {Element|null} The active tab, or null if no tab is active.
+   */
+  getActiveTab() {
+    let t = Array.from(this.context.querySelectorAll("[active]"));
+    return t.length > 0 ? t[0] : null;
+  }
+  /**
+   * Returns all tabs.
+   *
+   * @returns {Array<Element>} An array of all tabs.
+   */
+  getTabAll() {
+    return this.context.querySelector('[name="nav"]').assignedElements();
+  }
+  /**
+   * Returns all panels.
+   *
+   * @returns {Array<Element>} An array of all panels.
+   */
+  getPanelAll() {
+    return Array.from(this.querySelectorAll("wje-tab-panel"));
+  }
+}
+b.define("wje-tab-group", b);
+export {
+  b as default
+};

package/dist/wje-tab-panel.js

@@ -0,0 +1,52 @@
+var o = Object.defineProperty;
+var c = (t, e, a) => e in t ? o(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
+var n = (t, e, a) => (c(t, typeof e != "symbol" ? e + "" : e, a), a);
+import m from "./wje-element.js";
+const p = ":host{display:none;flex-wrap:wrap;align-items:center;padding:1rem}:host([active]){display:block}";
+class r extends m {
+  /**
+   * Creates an instance of TabPanel.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Returns the class name of the tab panel.
+     *
+     * @returns {string} The class name of the tab panel.
+     */
+    n(this, "className", "TabPanel");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return p;
+  }
+  /**
+   * 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(a, d, i) {
+    let s = document.createDocumentFragment(), l = document.createElement("slot");
+    return s.appendChild(l), s;
+  }
+}
+r.define("wje-tab-panel", r);
+export {
+  r as default
+};

package/dist/wje-tab.js

@@ -0,0 +1,59 @@
+var l = Object.defineProperty;
+var d = (e, t, a) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var n = (e, t, a) => (d(e, typeof t != "symbol" ? t + "" : t, a), a);
+import c, { event as p } from "./wje-element.js";
+const b = ':host{display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wje-font-family-secondary);font-size:var(--wje-font-size-small);letter-spacing:var(--wje-tab-letter-spacing);text-transform:var(--wje-tab-text-transfrom);font-weight:var(--wje-tab-font-weight);text-decoration:none;padding-inline:var(--wje-tab-padding-inline);padding-top:var(--wje-tab-padding-top);padding-bottom:var(--wje-tab-padding-bottom);color:var(--wje-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wje-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wje-tab-writing-mode);background:var(--wje-tab-color-active);position:absolute;bottom:var(--wje-tab-bottom);left:var(--wje-tab-start);right:var(--wje-tab-end);top:var(--wje-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 s extends c {
+  /**
+   * Creates an instance of Tab.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Returns the class name of the tab.
+     *
+     * @returns {string} The class name of the tab.
+     */
+    n(this, "className", "Tab");
+    this.last = !1;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return b;
+  }
+  /**
+   * 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(a, w, h) {
+    let r = document.createDocumentFragment(), i = document.createElement("slot"), o = document.createElement("a");
+    return o.setAttribute("href", "#" + this.panel), o.appendChild(i), r.appendChild(o), r;
+  }
+  /**
+   * Sets up the event listeners after the component is drawn.
+   */
+  afterDraw() {
+    p.addListener(this, "click", "wje:tab-change");
+  }
+}
+s.define("wje-tab", s);
+export {
+  s as default
+};

package/dist/wje-textarea.js

@@ -0,0 +1,116 @@
+var p = Object.defineProperty;
+var b = (i, a, t) => a in i ? p(i, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[a] = t;
+var d = (i, a, t) => (b(i, typeof a != "symbol" ? a + "" : a, t), t);
+import x, { event as h } from "./wje-element.js";
+const v = ':host{width:100%;margin-bottom:var(--wje-textarea-margin-bottom);display:block}:host .wrapper{display:flex;width:100%;border-width:var(--wje-textarea-border-width);border-style:var(--wje-textarea-border-style);border-color:var(--wje-textarea-border-color);border-radius:var(--wje-textarea-border-radius)}:host textarea{font-family:var(--wje-textarea-font-family);color:var(--wje-textarea-color);font-size:14px;border:0 none;padding:0 var(--wje-textarea-padding)}:host textarea:focus{outline:none}:host([resize="auto"]) textarea,:host([resize="none"]) textarea{resize:none}.native-textarea .input-wrapper{width:100%;line-height:normal}.native-textarea.default{background-color:var(--wje-textarea-background-color);font-family:var(--wje-textarea-font-family);position:relative;padding-inline:0;padding-top:0;transition:background-color .2s ease;cursor:text}.native-textarea.default.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}.native-textarea.default textarea{border:none;padding-top:0;background:none;box-shadow:none;width:calc(100% - var(--wje-textarea-padding) * 2);max-width:calc(100% - var(--wje-textarea-padding) * 2);min-width:calc(100% - var(--wje-textarea-padding) * 2)}.native-textarea.default label{padding:0 var(--wje-textarea-padding);display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-line-height);padding-top:.25rem}.native-textarea.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-textarea.default ::slotted([slot="start"]){border-left:none;border-top:none;border-bottom:none}.native-textarea.default ::slotted([slot="end"]){border-right:none;border-top:none;border-bottom:none}.native-textarea.standard{background-color:var(--wje-textarea-background-color);font-family:var(--wje-textarea-font-family);position:relative;border-radius:var(--wje-textarea-border-radius);padding:0;transition:background-color .2s ease;cursor:text}.native-textarea.standard.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.standard textarea{display:block;min-height:32px;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wje-textarea-border-radius)}.native-textarea.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-line-height)}.native-textarea.standard ::slotted([slot="start"]){border-right:none;border-radius:var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius)}.native-textarea.standard ::slotted([slot="end"]){border-left:none;border-radius:0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0}.native-textarea.standard.has-start textarea{border-top-left-radius:0;border-bottom-left-radius:0}.native-textarea.standard.has-end textarea{border-top-right-radius:0;border-bottom-right-radius:0}.native-textarea.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-textarea-color-invalid);font-size:12px;line-height:normal}.counter{float:right}';
+class u extends x {
+  /**
+   * Creates an instance of Textarea.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    d(this, "className", "Textarea");
+    /**
+     * Sets the height of the textarea.
+     */
+    d(this, "setTextareaHeight", () => {
+      this.getAttribute("resize") === "auto" && (this.input.style.height = "auto", this.input.style.height = this.input.scrollHeight + "px");
+    });
+    /**
+     * Updates the counter for the textarea.
+     *
+     * @param {Event} e - The event object.
+     */
+    d(this, "counter", (t) => {
+      this.counterElement.innerText = t.target.value.length + "/" + this.input.maxLength;
+    });
+    this._checked = !1;
+  }
+  /**
+   * Sets the checked state of the textarea.
+   *
+   * @param {boolean} value - The checked state.
+   */
+  set checked(t) {
+    this._checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  /**
+   * Returns the checked state of the textarea.
+   *
+   * @returns {boolean} The checked state.
+   */
+  get checked() {
+    return this._checked;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return v;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["checked"];
+  }
+  /**
+   * 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, m, f) {
+    let l = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-textarea", this.variant || "default"), r.setAttribute("part", "native"), this.hasAttribute("invalid") && r.classList.add("has-error");
+    let c = document.createElement("div");
+    c.classList.add("wrapper");
+    let o = document.createElement("div");
+    o.classList.add("input-wrapper");
+    let n = document.createElement("label");
+    n.htmlFor = "textarea", n.innerHTML = this.label || "";
+    let e = document.createElement("textarea");
+    if (e.id = "textarea", e.name = this.name, e.disabled = this.hasAttribute("disabled"), e.innerText = this.innerText, e.classList.add("form-control"), e.setAttribute("part", "input"), e.setAttribute("rows", this.rows || 3), e.setAttribute("spellcheck", !1), this.resize === "auto" && e.addEventListener("input", this.setTextareaHeight), this.variant === "standard" ? this.label && r.appendChild(n) : o.appendChild(n), o.appendChild(e), c.appendChild(o), r.appendChild(c), l.appendChild(r), this.hasAttribute("counter")) {
+      e.maxLength = this.maxLength || 1e3, e.addEventListener("input", this.counter);
+      let s = document.createElement("div");
+      s.classList.add("counter"), s.innerText = `${e.value.length}/${e.maxLength}`, this.counterElement = s, l.appendChild(s);
+    }
+    return this.native = r, this.labelElement = n, this.input = e, l;
+  }
+  /**
+   * Sets up the event listeners after the component is drawn.
+   */
+  afterDraw() {
+    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight), this.hasAttribute("disabled") || (h.addListener(this, "click", "wje:textarea:change"), h.addListener(this, "click", "wje:textarea:input")), this.input.addEventListener("focus", (t) => {
+      this.labelElement.classList.add("fade"), this.native.classList.add("focused");
+    }), this.input.addEventListener("blur", (t) => {
+      this.native.classList.remove("focused"), t.target.value || this.labelElement.classList.remove("fade");
+    });
+  }
+  /**
+   * Disconnects the component.
+   */
+  disconnectedCallback() {
+    this.resizeObserver.unobserve(this.input);
+  }
+}
+u.define("wje-textarea", u);
+export {
+  u as default
+};

package/dist/wje-thumbnail.js

@@ -0,0 +1,64 @@
+var l = Object.defineProperty;
+var u = (r, e, t) => e in r ? l(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var a = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
+import h from "./wje-element.js";
+const m = ":host{width:var(--wje-thumbnail-width);height:var(--wje-thumbnail-height);display:block;border-radius:var(--wje-border-radius)}:host([circle]) ::slotted(img){border-radius:50%}::slotted(wje-img),::slotted(img){border-radius:var(--wje-thumbnail-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}";
+class o extends h {
+  /**
+   * Thumbnail constructor
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Class name
+     * @type {string}
+     */
+    a(this, "className", "Thumbnail");
+  }
+  /**
+   * Get CSS stylesheet
+   * @static
+   * @returns {Object} styles
+   */
+  static get cssStyleSheet() {
+    return m;
+  }
+  /**
+   * Get observed attributes
+   * @static
+   * @returns {Array} An empty array
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Setup attributes
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Before draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   */
+  beforeDraw(t, i, d) {
+  }
+  /**
+   * Draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   * @returns {Object} Document fragment
+   */
+  draw(t, i, d) {
+    let s = document.createDocumentFragment(), n = document.createElement("slot");
+    return s.appendChild(n), s;
+  }
+}
+o.define("wje-thumbnail", o);
+export {
+  o as default
+};

package/dist/wje-toast.js

@@ -0,0 +1,76 @@
+var c = Object.defineProperty;
+var m = (e, t, i) => t in e ? c(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var p = (e, t, i) => (m(e, typeof t != "symbol" ? t + "" : t, i), i);
+import f from "./wje-element.js";
+const l = (e, t, i) => {
+  e.classList.add("pgn-simple"), t.innerHTML = "<div>" + i.message + "</div>", t.appendChild(a());
+}, b = (e, t, i) => {
+  e.classList.add("pgn-flip"), t.innerHTML = "<span>" + i.message + "</span>", t.appendChild(a());
+}, g = (e, t, i) => {
+  e.classList.add("pgn-circle");
+  let r = "", n = "";
+  i.title && (r = `<p><b>${i.title}</b></p>`), i.message && (n = `<p>${i.message}</p>`), t.innerHTML = `<wje-avatar>
+      <img alt="Silhouette of a person's head" src="/assets/img/avatar.svg" />
+    </wje-avatar>
+    <div>
+      ${r + n}
+  </div>`, t.appendChild(a());
+}, w = (e, t, i) => {
+  e.classList.add("pgn-bar"), t.classList.add("alert-" + i.type), t.innerHTML = "<div>" + i.message + "</div>", t.appendChild(a());
+}, a = () => {
+  let e = document.createElement("wje-icon");
+  e.setAttribute("name", "x"), e.setAttribute("slot", "icon-only");
+  let t = document.createElement("wje-button");
+  return t.setAttribute("fill", "link"), t.setAttribute("size", "small"), t.classList.add("close"), t.appendChild(e), t;
+}, h = ':host{position:fixed;z-index:999}:host([data-position$="-left"]){left:0}:host([data-position$="-right"]){right:0}:host([data-position^="top-"]){top:0}:host([data-position^="bottom-"]){bottom:0}:host([data-position="top"]){top:0;left:0;right:0}:host([data-position="bottom"]){bottom:0;left:0;right:0}.pgn{position:relative;margin:10px}.pgn .alert{margin:0 0 4px}.pgn-simple .alert{padding-top:13px;padding-bottom:13px;max-width:500px;animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;max-height:250px;overflow:hidden}.pgn-bar{overflow:hidden;margin:0}.pgn-bar .alert{border-radius:0;padding-top:13px;padding-bottom:13px;max-height:91px}:host([data-position="top"]) .pgn-bar .alert{animation:slideInFromTop .5s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:slideInFromTop .5s cubic-bezier(.05,.74,.27,.99) forwards;transform-origin:top left;-webkit-transform-origin:top left}:host([data-position="bottom"]) .pgn-bar .alert{animation:slideInFromBottom .5s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:slideInFromBottom .5s cubic-bezier(.05,.74,.27,.99) forwards;transform-origin:bottom left;-webkit-transform-origin:bottom left}.pgn-bar .alert span{opacity:0;animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards}@keyframes slideInFromTop{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@-webkit-keyframes slideInFromTop{0%{-webkit-transform:translateY(-100%)}to{-webkit-transform:translateY(0)}}@keyframes slideInFromBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideInFromBottom{0%{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}.pgn-circle .alert{margin-bottom:10px;border-radius:300px;animation:fadeInCircle .3s ease forwards,resizeCircle .3s .4s cubic-bezier(.25,.25,.4,1.6) forwards;-webkit-animation:fadeInCircle .3s ease forwards,resizeCircle .3s .4s cubic-bezier(.25,.25,.4,1.6) forwards;height:48px;overflow:hidden;padding:6px 55px 6px 6px;-webkit-transform:translateZ(0);position:relative;display:flex}:host[data-position$=-right] .pgn-circle .alert{float:right}:host[data-position$=-left] .pgn-circle .alert{float:left}:host[data-position^=bottom-] .pgn-circle .alert{margin-bottom:20px}wje-avatar:first-child{margin-right:8px}.pgn-circle .alert .close{margin-top:-12px;position:absolute;right:18px;top:50%;opacity:0;animation:fadeIn .3s .5s ease forwards;-webkit-animation:fadeIn .3s .5s ease forwards}.pgn-circle .alert p{margin:0}.pgn-circle .alert>div{display:flex;flex-direction:column;justify-content:center}.pgn-circle .alert>div>div{display:table-cell;vertical-align:middle}@keyframes fadeInCircle{0%{opacity:0;width:60px}to{opacity:1;width:60px}}@-webkit-keyframes fadeInCircle{0%{opacity:0;width:60px}to{opacity:1;width:60px}}@keyframes resizeCircle{0%{width:60px}to{width:300px}}@-webkit-keyframes resizeCircle{0%{width:60px}to{width:300px}}:host[data-position^=bottom-] .pgn-flip .alert{-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.pgn-flip .alert{-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-animation-name:flipInX;animation-name:flipInX;-webkit-animation-duration:.8s;animation-duration:.8s;border-radius:0;padding:25px 35px;max-width:500px;max-height:250px;overflow:hidden}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-90deg);-webkit-transition-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,20deg);-webkit-transition-timing-function:ease-out}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-10deg);-webkit-transition-timing-function:ease-in;opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,5deg);-webkit-transition-timing-function:ease-out}to{-webkit-transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-90deg);transform:perspective(400px) rotateX(-90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,20deg);transform:perspective(400px) rotateX(20deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-10deg);transform:perspective(400px) rotateX(-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,5deg);transform:perspective(400px) rotateX(5deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host([data-position="top"]){top:60px;left:0}:host([data-position="bottom"]){left:0}:host([data-position$="-left"]){left:0;right:auto}:host([data-position^="top-"]){bottom:auto}:host{z-index:999}@media (max-width: 979px){body .pgn-wrapper[data-position=top],body .pgn-wrapper[data-position=bottom]{left:0!important}}@media (max-width: 767px){body .pgn-wrapper[data-position$=-left],body .pgn-wrapper[data-position$=-right]{left:10px!important;right:10px!important}body .pgn-wrapper[data-position$=-right] .alert,body .pgn-wrapper[data-position$=-left] .alert{max-width:100%;width:100%}}.alert{background-image:none;box-shadow:none;text-shadow:none;padding:9px 19px 9px 15px;border-radius:3px;font-size:13px;border-width:0;transition:all .2s linear 0s;display:flex;align-items:center}.alert.bordered{border-width:1px}.alert .link{color:#ce8f22;font-weight:700}.alert .alert-heading{color:#ce8f22!important;margin-bottom:5px;font-weight:600}.alert .btn-small{position:relative;top:-3.5px}.alert .button-set .btn{position:relative;top:8px}.alert-danger,.alert-error,.alert-danger.btn,.alert-error.btn{background-color:var(--wje-color-primary-2)!important;color:var(--wje-color-primary-11)!important;border-color:var(--wje-color-primary-9)!important}.alert-danger .close,.alert-error .close,.alert-danger.btn .close,.alert-error.btn .close{background-position:-95px -10px!important}.alert-warning{background-color:var(--wje-color-warning-2)!important;color:var(--wje-color-warning-11)!important;border-color:var(--wje-color-warning-9)!important}.alert-info{background-color:var(--wje-color-complete-2)!important;color:var(--wje-color-complete-11)!important;border-color:var(--wje-color-complete-9)!important}.alert-info .close{background-position:-67px -10px!important}.alert-success,.alert-success.btn{background-color:var(--wje-color-success-2)!important;color:var(--wje-color-success-11)!important;border-color:var(--wje-color-success-9)!important}.alert-success .close,.alert-success.btn .close{background-position:-38px -10px!important}.alert-default{background-color:var(--wje-color-contrast-2)!important;color:var(--wje-color-contrast-11)!important;border-color:var(--wje-color-contrast-9)!important}.alert-default .close{background-position:-67px -10px!important}';
+class d extends f {
+  /**
+   * Toast constructor
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Class name
+     * @type {string}
+     */
+    p(this, "className", "Toast");
+  }
+  /**
+   * Get CSS stylesheet
+   * @static
+   * @returns {Object} styles
+   */
+  static get cssStyleSheet() {
+    return h;
+  }
+  /**
+   * Setup attributes
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   * @returns {Object} Document fragment
+   */
+  draw(i, r, n) {
+    let s = document.createDocumentFragment(), o = {
+      message: "Záznam bol úspešne uložený.",
+      position: this.position,
+      showClose: !0,
+      style: this.design || "simple",
+      timeout: this.duration || 4e3,
+      type: this.type || "success",
+      title: this.title || "John Doe"
+    };
+    return this.container = document.querySelector("body"), this.notification = document.createElement("div"), this.notification.classList.add("pgn", "push-on-sidebar-open"), this.classList.add("pgn-wrapper"), this.setAttribute("data-position", o.position), this.alert = document.createElement("div"), this.alert.classList.add("alert"), this.alert.classList.add("alert-" + o.type), o.style == "bar" ? w(this.notification, this.alert, o) : o.style == "flip" ? b(this.notification, this.alert, o) : o.style == "circle" ? g(this.notification, this.alert, o) : o.style == "simple" ? l(this.notification, this.alert, o) : l(this.notification, this.alert, o), this.notification.appendChild(this.alert), s.appendChild(this.notification), s;
+  }
+}
+d.define("wje-toast", d);
+export {
+  d as default
+};