wj-elements 0.1.14 → 0.1.16

package/dist/wje-card-content.js

@@ -1,48 +0,0 @@
-var d = Object.defineProperty;
-var i = (e, t, o) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var a = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
-import s from "./wje-element.js";
-const p = ":host{display:block;padding:var(--wje-card-content-padding)}:host.no-padding .row{margin-left:0;margin-right:0}:host.no-bottom-padding{padding-bottom:0}:host.no-top-padding{padding-top:0}:host .title{margin-top:0}:host.scrollable{margin-bottom:20px}:host h3{line-height:34px;font-size:26px}";
-class l extends s {
-  /**
-   * CardContent constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    a(this, "className", "CardContent");
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return p;
-  }
-  /**
-   * 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} fragment - The document fragment
-   */
-  draw(o, c, m) {
-    let n = document.createDocumentFragment(), r = document.createElement("slot");
-    return n.appendChild(r), n;
-  }
-}
-s.define("wje-card-content", l);
-export {
-  l as default
-};

package/dist/wje-card-controls.js

@@ -1,48 +0,0 @@
-var l = Object.defineProperty;
-var i = (e, t, o) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var s = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
-import n from "./wje-element.js";
-const c = ":host{font-family:var(--wje-card-controls-font-family);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-size:var(--wje-card-controls-font-size);font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40);transition:opacity .3s ease;position:absolute;right:1rem;top:.5rem}";
-class m extends n {
-  /**
-   * CardControls constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    s(this, "className", "CardControls");
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return c;
-  }
-  /**
-   * 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} fragment - The document fragment
-   */
-  draw(o, d, p) {
-    let r = document.createDocumentFragment(), a = document.createElement("slot");
-    return r.appendChild(a), r;
-  }
-}
-n.define("wje-card-controls", m);
-export {
-  m as default
-};

package/dist/wje-card-header.js

@@ -1,47 +0,0 @@
-var n = Object.defineProperty;
-var i = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var s = (t, e, r) => (i(t, typeof e != "symbol" ? e + "" : e, r), r);
-import o from "./wje-element.js";
-const c = ':host{background:transparent;border-radius:0;border-bottom:0;padding:var(--wje-card-header-padding);position:relative;display:flex;flex-direction:column}:host(.wje-separator):after{content:"";height:1px;background:#00000014;margin-top:.5rem}';
-class l extends o {
-  /**
-   * CardHeader constructor.
-   */
-  constructor() {
-    super();
-    /**
-     * Class name for the CardHeader.
-     * @type {string}
-     */
-    s(this, "className", "CardHeader");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {Object} The styles object.
-   * @static
-   */
-  static get cssStyleSheet() {
-    return c;
-  }
-  /**
-   * Sets up the attributes for the CardHeader.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the CardHeader.
-   * @param {Object} context - The context to draw in.
-   * @param {Object} store - The store to use.
-   * @param {Object} params - The parameters to use.
-   * @returns {DocumentFragment} The created document fragment.
-   */
-  draw(r, p, m) {
-    let a = document.createDocumentFragment(), d = document.createElement("slot");
-    return this.hasAttribute("separator") && this.classList.add("wje-separator"), a.appendChild(d), a;
-  }
-}
-o.define("wje-card-header", l);
-export {
-  l as default
-};

package/dist/wje-card-subtitle.js

@@ -1,55 +0,0 @@
-var o = Object.defineProperty;
-var l = (e, t, a) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var s = (e, t, a) => (l(e, typeof t != "symbol" ? t + "" : t, a), a);
-import i from "./wje-element.js";
-const c = ":host{transition:opacity .3s ease;font-family:var(--wje-card-subtitle-font-family);font-size:var(--wje-card-subtitle-font-size);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:var(--wje-card-subtitle-padding);line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}";
-class d extends i {
-  /**
-   * CardSubtitle constructor.
-   */
-  constructor() {
-    super();
-    /**
-     * Class name for the CardSubtitle.
-     * @type {string}
-     */
-    s(this, "className", "CardTitle");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {Object} The styles object.
-   * @static
-   */
-  static get cssStyleSheet() {
-    return c;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An empty array.
-   * @static
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the CardSubtitle.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the CardSubtitle.
-   * @param {Object} context - The context to draw in.
-   * @param {Object} store - The store to use.
-   * @param {Object} params - The parameters to use.
-   * @returns {DocumentFragment} The created document fragment.
-   */
-  draw(a, m, p) {
-    let r = document.createDocumentFragment(), n = document.createElement("slot");
-    return r.appendChild(n), r;
-  }
-}
-i.define("wje-card-subtitle", d);
-export {
-  d as default
-};

package/dist/wje-card-title.js

@@ -1,55 +0,0 @@
-var l = Object.defineProperty;
-var o = (e, t, r) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var i = (e, t, r) => (o(e, typeof t != "symbol" ? t + "" : t, r), r);
-import n from "./wje-element.js";
-const d = ":host{font-size:var(--wje-card-title-font-size);font-weight:var(--wje-card-title-font-weight);margin:var(--wje-card-title-margin);padding:var(--wje-card-title-padding);line-height:var(--wje-card-title-line-height);display:block;position:relative}";
-class c extends n {
-  /**
-   * CardTitle constructor.
-   */
-  constructor() {
-    super();
-    /**
-     * Class name for the CardTitle.
-     * @type {string}
-     */
-    i(this, "className", "CardTitle");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {Object} The styles object.
-   * @static
-   */
-  static get cssStyleSheet() {
-    return d;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An empty array.
-   * @static
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the CardTitle.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the CardTitle.
-   * @param {Object} context - The context to draw in.
-   * @param {Object} store - The store to use.
-   * @param {Object} params - The parameters to use.
-   * @returns {DocumentFragment} The created document fragment.
-   */
-  draw(r, m, g) {
-    let a = document.createDocumentFragment(), s = document.createElement("slot");
-    return a.appendChild(s), a;
-  }
-}
-n.define("wje-card-title", c);
-export {
-  c as default
-};

package/dist/wje-card.js

@@ -1,50 +0,0 @@
-var i = Object.defineProperty;
-var s = (o, r, e) => r in o ? i(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e;
-var n = (o, r, e) => (s(o, typeof r != "symbol" ? r + "" : r, e), e);
-import l from "./wje-element.js";
-const w = ":host{width:100%}.native-card{background-color:transparent;margin:0;box-shadow:var(--wje-box-shadow-large);border-color:var(--wje-border-color);border-style:var(--wje-border-style);border-width:var(--wje-border-width);border-radius:var(--wje-border-radius-medium);font-family:var(--wje-font-family);font-size:var(--wje-font-size);line-height:var(--wje-line-height);position:relative;width:100%;word-wrap:normal;display:flex;flex-direction:column;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.native-card.wje-color-primary{background:var(--wje-color-primary-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-complete{background:var(--wje-color-complete-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-success{background:var(--wje-color-success-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-warning{background:var(--wje-color-warning-11);color:var(--wje-color)}.native-card.wje-color-danger{background:var(--wje-color-danger-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-info{background:var(--wje-color-info-11);color:var(--wje-color-contrast-0)}.native-card.wje-color-menu{background:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0)}";
-class v extends l {
-  /**
-   * Card constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    n(this, "className", "Card");
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return w;
-  }
-  /**
-   * 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} fragment - The document fragment
-   */
-  draw(e, j, t) {
-    let c = document.createDocumentFragment(), a = document.createElement("div");
-    a.setAttribute("part", "native"), a.classList.add("native-card");
-    let d = document.createElement("slot");
-    return t.color && a.classList.add("wje-color-" + t.color), a.appendChild(d), c.appendChild(a), c;
-  }
-}
-l.define("wje-card", v);
-export {
-  v as default
-};

package/dist/wje-carousel-item.js

@@ -1,33 +0,0 @@
-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 r = (t, e, a) => (c(t, typeof e != "symbol" ? e + "" : e, a), a);
-import l, { event as d } from "./wje-element.js";
-const m = ":host{display:flex;align-items:center;justify-content:center;flex-direction:column;width:var(--wje-carousel-size, 100%);max-height:100%;aspect-ratio:var(--wje-carousel-item-aspect-ratio);scroll-snap-align:center;scroll-snap-stop:always}.native-carousel-item{width:100%;height:100%;display:flex}::slotted(wje-img){width:100%!important;height:100%!important;object-fit:contain;display:flex}";
-class u extends l {
-  constructor() {
-    super();
-    r(this, "className", "CarouselItem");
-  }
-  static get cssStyleSheet() {
-    return m;
-  }
-  static get observedAttributes() {
-    return [];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(a, p, h) {
-    let i = document.createDocumentFragment(), s = document.createElement("div");
-    s.classList.add("native-carousel-item"), s.setAttribute("part", "native");
-    let n = document.createElement("slot");
-    return s.appendChild(n), i.appendChild(s), i;
-  }
-  afterDraw() {
-    d.addListener(this, "click", "wje-carousel-item:click");
-  }
-}
-l.define("wje-carousel-item", u);
-export {
-  u as default
-};

package/dist/wje-carousel.js

@@ -1,177 +0,0 @@
-var v = Object.defineProperty;
-var p = (o, a, e) => a in o ? v(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
-var u = (o, a, e) => (p(o, typeof a != "symbol" ? a + "" : a, e), e);
-import m from "./wje-element.js";
-const b = ".native-carousel{position:relative;width:var(--wje-carousel-width, 100%);height:var(--wje-carousel-height, 300px);scroll-behavior:smooth}.carousel-slides{display:flex;transition:transform .5s ease;align-items:center;justify-items:center;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:var(--wje-aspect-ratio, 4 / 3);scroll-snap-type:x mandatory;scroll-padding-inline:0;overflow-y:hidden;padding-inline:var(--wje-spacing-inline, 0);gap:.5rem}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wje-carousel-item){flex:0 0 var(--wje-carousel-size);height:100%}wje-button{position:absolute;top:50%;border:none;cursor:pointer;z-index:2}.prev{left:-1rem;transform:translate(-100%,-50%)}.next{right:-1rem;transform:translate(100%,-50%)}.pagination{position:relative;bottom:-.5rem;left:50%;transform:translate(-50%,100%);display:flex;z-index:2;justify-content:center}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wje-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wje-color)}.thumbnails{display:flex;justify-content:center;align-items:center;overflow-x:auto;gap:.5rem;padding:0 .5rem;margin-top:.5rem;margin-bottom:.5rem;box-sizing:border-box;overflow-y:hidden}.thumbnails wje-thumbnail{--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wje-color-primary-11)}";
-class f extends m {
-  constructor() {
-    super();
-    u(this, "className", "Carousel");
-    this.slidePerPage = 1;
-  }
-  set activeSlide(e) {
-    this.setAttribute("active-slide", e);
-  }
-  get activeSlide() {
-    return +this.getAttribute("active-slide") || 0;
-  }
-  get pagination() {
-    return this.hasAttribute("pagination");
-  }
-  get navigation() {
-    return this.hasAttribute("navigation");
-  }
-  get thumbnails() {
-    return this.hasAttribute("thumbnails");
-  }
-  get loop() {
-    return this.hasAttribute("loop");
-  }
-  static get cssStyleSheet() {
-    return b;
-  }
-  static get observedAttributes() {
-    return ["active-slide"];
-  }
-  attributeChangedCallback(e, i, n) {
-    e === "active-slide" && (this.pagination && this.changePagination(), this.thumbnails && this.changeThumbnails());
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  beforeDraw(e, i, n) {
-    this.cloneFirstAndLastItems();
-  }
-  draw(e, i, n) {
-    let r = document.createDocumentFragment(), t = document.createElement("div");
-    t.classList.add("native-carousel");
-    let s = document.createElement("div");
-    s.classList.add("carousel-slides");
-    let l = document.createElement("slot");
-    return s.appendChild(l), t.appendChild(s), this.navigation && (this.prevButton = this.createPreviousButton(), this.nextButton = this.createNextButton(), t.appendChild(this.prevButton), t.appendChild(this.nextButton)), this.pagination && t.appendChild(this.createPagination()), this.thumbnails && t.appendChild(this.createThumbnails()), r.appendChild(t), this.slides = s, r;
-  }
-  afterDraw() {
-    this.setIntersectionObserver(), this.getSlidesWithClones().forEach((i, n) => {
-      this.intersectionObserver.observe(i);
-    }), this.slidePerPage = this.getAttribute("slide-per-page") || 1;
-    let e = 100 / +this.slidePerPage;
-    this.style.setProperty("--wje-carousel-size", e + "%"), this.goToSlide(this.activeSlide, "auto"), this.slides.addEventListener("scrollend", (i) => {
-      const n = this.getSlides(), t = [...this.entriesMap.values()].find((s) => s.isIntersecting);
-      if (t != null && t.target.classList.contains("clone")) {
-        const s = +t.target.getAttribute("clone-index");
-        this.goToSlide(s, "auto"), this.activeSlide = s;
-      } else if (t) {
-        let s = n.indexOf(t.target);
-        this.activeSlide = s;
-      }
-    });
-  }
-  setIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver((e) => {
-      e.forEach((i) => {
-        this.entriesMap.set(i.target, i);
-      });
-    }, {
-      root: this.context.querySelector(".carousel-slides"),
-      threshold: 0.5
-    }), this.entriesMap = /* @__PURE__ */ new Map(), this.records = this.intersectionObserver.takeRecords(), this.records.forEach((e) => {
-      this.entriesMap.set(e.target, e);
-    });
-  }
-  goToSlide(e, i = "smooth", n = !0) {
-    const r = this.getSlides(), t = this.getSlidesWithClones();
-    t.forEach((g, S) => {
-      g.classList.remove("active");
-    });
-    let s = this.loop ? (e + r.length) % r.length : Math.min(Math.max(e, 0), r.length - 1);
-    this.activeSlide = s;
-    const l = Math.min(Math.max(e + (this.loop ? this.slidePerPage : 0), 0), t.length - 1), c = this.getSlidesWithClones()[l];
-    c.classList.add("active");
-    let d = c.getBoundingClientRect(), h = this.slides.getBoundingClientRect();
-    this.slides.scrollTo({
-      left: d.left - h.left + this.slides.scrollLeft,
-      top: d.top - h.top + this.slides.scrollTop,
-      behavior: i === "smooth" ? "smooth" : "auto"
-    }), this.navigation && !this.loop && (this.nextButton.removeAttribute("disabled"), this.prevButton.removeAttribute("disabled"), this.activeSlide === r.length - 1 && this.nextButton.setAttribute("disabled", ""), this.activeSlide === 0 && this.prevButton.setAttribute("disabled", ""));
-  }
-  cloneFirstAndLastItems() {
-    const e = this.getSlides();
-    if (e.length && this.loop) {
-      const i = e[0].cloneNode(!0);
-      i.classList.add("clone"), i.setAttribute("clone-index", 0), this.appendChild(i);
-      const n = e[e.length - 1].cloneNode(!0);
-      n.classList.add("clone"), n.setAttribute("clone-index", e.length - 1), this.insertBefore(n, this.firstChild);
-    }
-  }
-  removeActiveSlide() {
-    this.getSlidesWithClones().forEach((e, i) => {
-      e.classList.remove("active");
-    }), this.pagination && this.context.querySelectorAll(".pagination-item").forEach((e) => {
-      e.classList.remove("active");
-    }), this.thumbnails && this.context.querySelectorAll("wje-thumbnail").forEach((e) => {
-      e.classList.remove("active");
-    });
-  }
-  changePagination() {
-    this.pagination && (this.removeActiveSlide(), this.context.querySelectorAll(".pagination-item").forEach((e, i) => {
-      i === this.activeSlide && e.classList.add("active");
-    }));
-  }
-  changeThumbnails() {
-    this.thumbnails && (this.removeActiveSlide(), this.context.querySelectorAll("wje-thumbnail").forEach((e, i) => {
-      i === this.activeSlide && e.classList.add("active");
-    }));
-  }
-  createNextButton() {
-    const e = document.createElement("wje-button");
-    return e.classList.add("next"), e.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
-      this.nextSlide();
-    }), e;
-  }
-  createPreviousButton() {
-    const e = document.createElement("wje-button");
-    return e.classList.add("prev"), e.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
-      this.previousSlide();
-    }), e;
-  }
-  createPagination() {
-    const e = document.createElement("div");
-    return e.classList.add("pagination"), this.getSlides().forEach((n, r) => {
-      const t = document.createElement("div");
-      t.classList.add("pagination-item"), t.addEventListener("click", (s) => {
-        this.removeActiveSlide(), s.target.classList.add("active"), this.goToSlide(r);
-      }), e.appendChild(t);
-    }), e;
-  }
-  createThumbnails() {
-    const e = document.createElement("div");
-    return e.classList.add("thumbnails"), this.getSlides().forEach((n, r) => {
-      const t = document.createElement("wje-thumbnail");
-      t.innerHTML = `<img src="${n.querySelector("wje-img").getAttribute("src")}"></img>`, t.addEventListener("click", (s) => {
-        this.removeActiveSlide(), s.target.closest("wje-thumbnail").classList.add("active"), this.goToSlide(r);
-      }), e.appendChild(t);
-    }), e;
-  }
-  nextSlide() {
-    this.goToSlide(this.activeSlide + this.slidePerPage);
-  }
-  previousSlide() {
-    this.goToSlide(this.activeSlide - this.slidePerPage);
-  }
-  getSlides() {
-    return Array.from(this.querySelectorAll("wje-carousel-item:not(.clone)"));
-  }
-  getSlidesWithClones() {
-    return Array.from(this.querySelectorAll("wje-carousel-item"));
-  }
-  canGoNext() {
-    return this.querySelector(".native-carousel").scrollLeft < this.querySelector(".native-carousel").scrollWidth;
-  }
-  canGoPrevious() {
-    return this.querySelector(".native-carousel").scrollLeft > 0;
-  }
-}
-m.define("wje-carousel", f);
-export {
-  f as default
-};

package/dist/wje-checkbox.js

@@ -1,104 +0,0 @@
-var s = Object.defineProperty;
-var h = (c, t, e) => t in c ? s(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var l = (c, t, e) => (h(c, typeof t != "symbol" ? t + "" : t, e), e);
-import b, { event as a } from "./wje-element.js";
-const d = ':host{display:block;margin-top:var(--wje-checkbox-margin-top);margin-bottom:var(--wje-checkbox-margin-bottom);margin-inline:var(--wje-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;min-width:var(--wje-checkbox-width);min-height:var(--wje-checkbox-height);margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wje-color-contrast-lowest);border:1px solid var(--wje-border-color)}.native-checkbox label{transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox label:hover{color:var(--wje-color-contrast-11)}.native-checkbox label:before{border-radius:3px;transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox input[type=checkbox]{position:absolute;margin:0;z-index:-1;width:16px;height:16px;opacity:0;display:none}.native-checkbox input[type=checkbox]+label:after{content:"";position:absolute;left:0;border-right:0 solid transparent;border-bottom:0 solid transparent;width:16px;height:16px;overflow:hidden}.native-checkbox.checkbox-circle label:after{border-radius:99px}.native-checkbox.checkbox-circle label:before{border-radius:99px}.native-checkbox input[type=checkbox]:checked+label:after{content:"";background:var(--wje-grey-check-icon);background-size:160px 16px;background-repeat:no-repeat;animation-name:checkbox-check;animation-duration:.32s;animation-timing-function:steps(9);animation-fill-mode:forwards;animation-iteration-count:1}.native-checkbox input[type=checkbox]:hover:active:not(:checked)+label:before{background-color:#00000014}.native-checkbox input[type=checkbox]:focus+label{color:var(--wje-color-contrast-11)}.native-checkbox input[type=checkbox]:focus+label:before{outline:none!important;box-shadow:#78c8fe 0 0}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-8);opacity:.58}.native-checkbox input[type=checkbox][disabled]+label:before{cursor:not-allowed!important;background:#ececec}.native-checkbox input[type=checkbox]:indeterminate+label:after{background:none;background-color:var(--wje-color-contrast-8);width:10px;height:2px;top:6px;margin:3px;border-radius:2px}.native-checkbox.right label{padding-left:0;padding-right:26px}.native-checkbox.right label:before{right:0;left:auto}.native-checkbox.right input[type=checkbox]:checked+label{position:relative}.native-checkbox.right input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}.success :is(input[type=checkbox]:checked+label):before,.success :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-success);background-color:var(--wje-color-success)}.primary :is(input[type=checkbox]:checked+label):before,.primary :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-primary);background-color:var(--wje-color-primary)}.complete :is(input[type=checkbox]:checked+label):before,.complete :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-complete);background-color:var(--wje-color-complete)}.warning :is(input[type=checkbox]:checked+label):before,.warning :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-warning);background-color:var(--wje-color-warning)}.danger :is(input[type=checkbox]:checked+label):before,.danger :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-danger);background-color:var(--wje-color-danger)}.info :is(input[type=checkbox]:checked+label):before,.info :is(input[type=checkbox]:indeterminate+label):before{border-color:var(--wje-color-info);background-color:var(--wje-color-info)}.info :is(input[type=checkbox]:checked+label):after,.danger :is(input[type=checkbox]:checked+label):after,.complete :is(input[type=checkbox]:checked+label):after,.primary :is(input[type=checkbox]:checked+label):after,.success :is(input[type=checkbox]:checked+label):after{background:var(--wje-white-check-icon)}.info :is(input[type=checkbox]:indeterminate+label):after,.danger :is(input[type=checkbox]:indeterminate+label):after,.complete :is(input[type=checkbox]:indeterminate+label):after,.primary :is(input[type=checkbox]:indeterminate+label):after,.success :is(input[type=checkbox]:indeterminate+label):after{background-color:var(--wje-color-contrast-lowest)}@keyframes shrink-bounce{0%{transform:scale(1)}33%{transform:scale(.85)}to{transform:scale(1)}}@keyframes checkbox-check{0%{background-position:0}to{background-position:-144px}}.js-focus-visible .native-checkbox input[type=checkbox]:focus:not(.focus-visible)+label:before{box-shadow:none}input[type=checkbox]{accent-color:var(--wje-color-primary)!important;font-size:50px}';
-class p extends b {
-  /**
-   * Checkbox constructor.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name.
-     */
-    l(this, "className", "Checkbox");
-  }
-  /**
-   * @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");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {string} The CSS stylesheet.
-   */
-  static get cssStyleSheet() {
-    return d;
-  }
-  static get observedAttributes() {
-    return ["checked", "disabled"];
-  }
-  /**
-   * Sets up the attributes for the checkbox.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the checkbox.
-   * @param {object} context - The context.
-   * @param {object} store - The store.
-   * @param {object} params - The parameters.
-   * @returns {DocumentFragment} The created fragment.
-   */
-  draw(e, k, u) {
-    let n = document.createDocumentFragment(), i = document.createElement("div");
-    i.classList.add("native-checkbox"), this.variant === "circle" && i.classList.add("checkbox-circle"), this.color && i.classList.add(this.color);
-    let o = document.createElement("input");
-    o.type = "checkbox", o.id = "checkbox", o.name = this.name = "checkbox", o.checked = this.hasAttribute("checked"), o.disabled = this.hasAttribute("disabled"), o.indeterminate = this.hasAttribute("indeterminate");
-    let r = document.createElement("label");
-    return r.htmlFor = "checkbox", r.innerHTML = "<slot></slot>", i.appendChild(o), i.appendChild(r), this.input = o, n.appendChild(i), n;
-  }
-  /**
-   * Adds an event listener after drawing the checkbox.
-   */
-  afterDraw() {
-    this.disabled || (this.input.addEventListener("input", (e) => {
-      this.checked = e.target.checked, a.dispatchCustomEvent(this, "wje-toggle:input");
-    }), this.input.addEventListener("change", (e) => {
-      this.checked = e.target.checked, a.dispatchCustomEvent(this, "wje-toggle:change");
-    }));
-  }
-  /**
-   * Handles the input event.
-   * @param {Event} e - The event.
-   */
-  // inputEvent = (e) => {
-  //     this.checked = this.input.checked;
-  //     event.dispatchCustomEvent(this, "wje-checkbox:change");
-  // }
-  /**
-   * Removes the event listener when the checkbox is disconnected.
-   */
-  disconnectedCallback() {
-    a.removeElement(this.input);
-  }
-}
-b.define("wje-checkbox", p);
-export {
-  p as default
-};

package/dist/wje-chip.js

@@ -1,32 +0,0 @@
-var d = Object.defineProperty;
-var p = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var n = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
-import l, { event as w } from "./wje-element.js";
-const h = ".native-chip{display:inline-flex;justify-content:center;align-items:center;font-size:14px;letter-spacing:-.006em;margin:0;padding:.5rem .75rem;text-align:center;cursor:pointer;white-space:nowrap;background-color:var(--wje-color-contrast-2, #fff);color:var(--wje-color-contrast-6);text-shadow:none;box-shadow:none;border:0 none;line-height:14px;min-height:28px;height:28px;width:100%;max-width:fit-content;min-width:28px;position:relative;transition:width .15s cubic-bezier(.4,0,.2,1);border-radius:var(--wje-border-radius-pill);overflow:hidden;vertical-align:middle;box-sizing:border-box}.native-chip.wje-color-primary{background-color:var(--wje-color-primary-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-complete{background-color:var(--wje-color-complete-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-success{background-color:var(--wje-color-success-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-warning{background-color:var(--wje-color-warning-11);color:var(--wje-color)}.native-chip.wje-color-danger{background-color:var(--wje-color-danger-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-info{background-color:var(--wje-color-info-11);color:var(--wje-color-contrast-0)}.native-chip.wje-color-menu{background-color:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0)}:host(.focus){box-shadow:none}:host(.wje-active) .native-chip{border:1px solid var(--wje-color-primary-11);background-color:var(--wje-color-contrast-3);color:var(--wje-color)}:host(:focus,:active:focus,.wje-active:focus){outline:none!important}.check{display:none}:host([active]) .check{display:block;margin-inline:4px 0}:host([disabled]){opacity:.5;border:0;pointer-events:none;cursor:not-allowed}::slotted(wje-avatar){width:22px;height:22px}::slotted(wje-avatar:first-child){margin-inline:-8px 8px;margin-top:-4px;margin-bottom:-4px}::slotted(wje-icon:first-child){margin:-4px 8px -4px -4px}::slotted(wje-icon:last-child){margin:-4px -4px -4px 8px}wje-button{--wje-button-border-radius: 50%;--wje-button-margin-inline: .25rem -.5rem;--wje-padding-top: .15rem;--wje-padding-start: .15rem;--wje-padding-end: .15rem;--wje-padding-bottom: .15rem}";
-class m extends l {
-  constructor() {
-    super();
-    n(this, "className", "Chip");
-  }
-  static get cssStyleSheet() {
-    return h;
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  draw(t, j, v) {
-    let a = document.createDocumentFragment(), r = document.createElement("div");
-    r.classList.add("native-chip");
-    let s = document.createElement("slot"), i = document.createElement("wje-button");
-    i.setAttribute("part", "remove"), i.setAttribute("fill", "link"), i.innerHTML = '<wje-icon name="x"></wje-icon>';
-    let c = document.createElement("wje-icon");
-    return c.setAttribute("name", "check"), c.classList.add("check"), this.color && r.classList.add("wje-color-" + this.color, "wje-color"), this.disabled && this.classList.add("wje-disabled"), this.outline && this.classList.add("wje-outline"), r.appendChild(s), r.appendChild(c), this.hasAttribute("removable") && r.appendChild(i), a.appendChild(r), this.remove = i, a;
-  }
-  afterDraw() {
-    w.addListener(this.remove, "click", "wje:chip-remove", null, { stopPropagation: !0 });
-  }
-}
-l.define("wje-chip", m);
-export {
-  m as default
-};