wj-elements 0.1.48 → 0.1.49

package/dist/wje-tab-group.js

@@ -0,0 +1,107 @@
+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, l, i) {
+    let s = document.createDocumentFragment(), r = document.createElement("div");
+    r.setAttribute("part", "native"), r.classList.add("native-tab-group");
+    let o = document.createElement("header");
+    o.setAttribute("part", "tabs"), o.classList.add("scroll-snap-x");
+    let c = document.createElement("nav"), n = document.createElement("section");
+    n.setAttribute("part", "panels");
+    let p = document.createElement("slot"), d = document.createElement("slot");
+    return d.setAttribute("name", "nav"), o.appendChild(c), c.appendChild(d), n.appendChild(p), r.appendChild(o), r.appendChild(n), s.appendChild(r), s;
+  }
+  /**
+   * Sets up the event listeners after the component is drawn.
+   */
+  afterDraw() {
+    let t = this.getActiveTab(), l = t ? t[0].name : this.getTabAll()[0].panel;
+    this.setActiveTab(l), this.addEventListener("wje:tab-change", (i) => {
+      if (i.detail.context.hasAttribute("disabled"))
+        return !1;
+      this.setActiveTab(i.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 b, { event as c } from "./wje-element.js";
+const p = ':host{display:block;position:relative}:host .native-tab{display:flex;align-items:center;white-space:nowrap;font-family:var(--wje-tab-font-family);font-size:var(--wje-tab-font-size);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);border-radius:var(--wje-tab-border-radius);color:var(--wje-color);line-height:var(--wje-tab-line-height)}:host .native-tab>svg{inline-size:1.5em;pointer-events:none}:host .native-tab:hover{background:var(--wje-tab-color-hover)}:host .native-tab:hover:after{display:block}:host .native-tab: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 i extends b {
+  /**
+   * 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 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, v, h) {
+    let r = document.createDocumentFragment(), s = document.createElement("slot"), o = document.createElement("a");
+    return o.setAttribute("href", "#" + this.panel), o.setAttribute("part", "native"), o.classList.add("native-tab"), o.appendChild(s), r.appendChild(o), r;
+  }
+  /**
+   * Sets up the event listeners after the component is drawn.
+   */
+  afterDraw() {
+    c.addListener(this, "click", "wje:tab-change");
+  }
+}
+i.define("wje-tab", i);
+export {
+  i 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
+};

package/dist/wje-toggle.js

@@ -0,0 +1,94 @@
+var h = Object.defineProperty;
+var g = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var c = (r, t, e) => (g(r, typeof t != "symbol" ? t + "" : t, e), e);
+import b, { event as d } from "./wje-element.js";
+const u = ':host{--wje-toggle-color-base: var(--wje-color-contrast-3);--wje-toggle-width: 30px;--wje-toggle-height: 18px;--wje-toggle-border-radius: 50px;--wje-toggle-handle-width: 13px;--wje-toggle-handle-height: 13px;--wje-toggle-handle-border-radius: 9px;--wje-toggle-handle-color: #fff;--wje-toggle-handle-shadow: 1px 0 1px .5px rgba(0,0,0,.12), 2px 4px 6px rgba(0,0,0,.2);--wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,.08), -3px 3px 6px rgba(0,0,0,.3);--wje-toggle-duration: .25s;--wje-toggle-curve: cubic-bezier(.4,0,.2,1)}:host([color=primary]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-primary-9) !important}:host([color=complete]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-complete-9)}:host([color=success]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-success-9) !important}:host([color=warning]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-warning-9)}:host([color=danger]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-danger-9)}:host([color=info]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-info-9)}.native-toggle{display:flex}label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}label .label-wrapper{width:var(--wje-toggle-width)!important;min-width:var(--wje-toggle-width);height:var(--wje-toggle-height);position:relative;display:flex;align-items:center}label .label-wrapper:before{content:"";position:absolute;cursor:pointer;width:100%;height:100%;top:auto;left:0;background:var(--wje-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wje-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * .24)),box-shadow var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wje-toggle-handle-color);width:var(--wje-toggle-handle-width);height:var(--wje-toggle-handle-height);border-radius:var(--wje-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wje-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.58}input[type=checkbox][disabled]+label:before{cursor:not-allowed!important}input[type=checkbox]{position:absolute;z-index:-1;opacity:0}input[type=checkbox]:checked+label .label-wrapper:before{background-position:left;box-shadow:inset 0 0 0 1px #0000001f}input[type=checkbox]:checked+label .label-wrapper:after{transform:translate(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));box-shadow:var(--wje-toggle-handle-shadow-checked)}input[type=checkbox]:focus+label .label-wrapper:before{outline:none!important;box-shadow:inset 0 0 0 1px #0000001f,0 0 #78c8fe}input[type=checkbox][disabled]:active+label .label-wrapper:after{transform:scaleX(1.1);transform-origin:center left;transition:transform step-start}input[type=checkbox]:checked[disabled]:active+label .label-wrapper:after{transform:translate(calc(100% - 6px)) scaleX(1.1);transform-origin:center right}input[type=checkbox]:hover:active+label .label-wrapper:before{background-color:transparent}:host .text{margin-inline:.5rem 0}:host([placement=end]) label{width:100%}:host([placement=end]) .text{margin-inline:0 .5rem;width:100%}slot{display:flex;align-items:center;width:100%}';
+class p extends b {
+  /**
+   * @constructor
+   * @summary Toggle constructor
+   */
+  constructor() {
+    super();
+    /**
+     * @summary Class name
+     * @type {string}
+     */
+    c(this, "className", "Toggle");
+  }
+  /**
+   * @summary Set checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  /**
+   * @summary Get disabled attribute
+   * @returns {boolean} true if the toggle is disabled, false otherwise
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * @summary Set checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  set checked(e) {
+    e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  /**
+   * @summary Get checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  /**
+   * @summary Get CSS stylesheet
+   * @static
+   * @returns {Object} styles
+   */
+  static get cssStyleSheet() {
+    return u;
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled"];
+  }
+  /**
+   * @summary Setup attributes
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * @summary Draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   * @returns {Object} Document fragment
+   */
+  draw(e, w, m) {
+    let s = document.createDocumentFragment(), o = document.createElement("div");
+    o.setAttribute("part", "native"), o.classList.add("native-toggle");
+    let a = document.createElement("input");
+    a.setAttribute("part", "input"), a.setAttribute("type", "checkbox"), a.setAttribute("name", this.name), a.setAttribute("id", "input"), a.checked = this.hasAttribute("checked"), a.disabled = this.hasAttribute("disabled");
+    let l = document.createElement("label");
+    l.setAttribute("for", "input");
+    let i = document.createElement("div");
+    i.setAttribute("part", "toggle"), i.classList.add("label-wrapper");
+    let n = document.createElement("div");
+    return n.classList.add("text"), n.innerHTML = "<slot></slot>", this.color && this.classList.add("wje-color-" + this.color, "wje-color"), o.appendChild(a), o.appendChild(l), this.placement === "end" ? (o.classList.add("end"), l.appendChild(n), l.appendChild(i)) : (l.appendChild(i), l.appendChild(n)), s.appendChild(o), this.input = a, s;
+  }
+  afterDraw() {
+    this.disabled || (this.input.addEventListener("input", (e) => {
+      this.checked = e.target.checked, d.dispatchCustomEvent(this, "wje-toggle:input");
+    }), this.input.addEventListener("change", (e) => {
+      this.checked = e.target.checked, d.dispatchCustomEvent(this, "wje-toggle:change");
+    }));
+  }
+}
+p.define("wje-toggle", p);
+export {
+  p as default
+};

package/dist/wje-toolbar-action.js

@@ -0,0 +1,63 @@
+var d = Object.defineProperty;
+var m = (e, t, o) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var r = (e, t, o) => (m(e, typeof t != "symbol" ? t + "" : t, o), o);
+import u from "./wje-element.js";
+const p = ":host .native-toolbar-action{display:flex}";
+class l extends u {
+  /**
+   * @constructor
+   * @summary ToolbarAction constructor
+   */
+  constructor() {
+    super();
+    /**
+     * @summary Class name
+     * @type {string}
+     */
+    r(this, "className", "ToolbarAction");
+  }
+  /**
+   * @summary Get CSS stylesheet
+   * @static
+   * @returns {Object} styles
+   */
+  static get cssStyleSheet() {
+    return p;
+  }
+  /**
+   * @summary Get observed attributes
+   * @static
+   * @returns {Array} An empty array
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * @summary Setup attributes
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * @summary Draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   * @returns {Object} Document fragment
+   */
+  draw(o, h, b) {
+    let a = document.createDocumentFragment(), n = +this.maxItems || 0, c = this.getActions(), i = document.createElement("slot"), s = document.createElement("div");
+    return s.setAttribute("part", "native"), s.classList.add("native-toolbar-action"), n !== 0 && c.length > n && (s = document.createElement("wje-dropdown")), s.appendChild(i), a.appendChild(s), a;
+  }
+  /**
+   * @summary Get actions
+   * @returns {Array} An array of wje-button elements
+   */
+  getActions() {
+    return Array.from(this.querySelectorAll("wje-button"));
+  }
+}
+l.define("wje-toolbar-action", l);
+export {
+  l as default
+};