wj-elements 0.1.6 → 0.1.7

package/dist/wje-card-content.js

@@ -0,0 +1,48 @@
+var s = Object.defineProperty;
+var i = (e, t, o) => t in e ? s(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 r from "./wje-element.js";
+const p = ":host{--wje-card-padding: 0 1rem 1rem;display:block;padding:var(--wje-card-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 m extends r {
+  /**
+   * 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, l, c) {
+    let n = document.createDocumentFragment(), d = document.createElement("slot");
+    return n.appendChild(d), n;
+  }
+}
+r.define("wje-card-content", m);
+export {
+  m as default
+};

package/dist/wje-card-controls.js

@@ -0,0 +1,48 @@
+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 n = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
+import a from "./wje-element.js";
+const c = ":host{--wje-card-controls-font-size: 11px;--wje-card-controls-font-family: var(--wje-font-family-secondary);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 d extends a {
+  /**
+   * CardControls constructor
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Class name
+     * @type {string}
+     */
+    n(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, m, f) {
+    let r = document.createDocumentFragment(), s = document.createElement("slot");
+    return r.appendChild(s), r;
+  }
+}
+a.define("wje-card-controls", d);
+export {
+  d as default
+};

package/dist/wje-card-header.js

@@ -0,0 +1,47 @@
+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 d from "./wje-element.js";
+const c = ':host{--wje-card-header-padding: 1rem 1rem .5rem;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 m extends d {
+  /**
+   * 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, l) {
+    let a = document.createDocumentFragment(), o = document.createElement("slot");
+    return this.hasAttribute("separator") && this.classList.add("wje-separator"), a.appendChild(o), a;
+  }
+}
+d.define("wje-card-header", m);
+export {
+  m as default
+};

package/dist/wje-card-subtitle.js

@@ -0,0 +1,55 @@
+var l = Object.defineProperty;
+var o = (e, t, a) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var s = (e, t, a) => (o(e, typeof t != "symbol" ? t + "" : t, a), a);
+import i from "./wje-element.js";
+const d = ":host{--wje-card-subtitle-font-size: 11px;--wje-card-subtitle-font-family: var(--wje-font-family-secondary);--wje-card-subtitle-padding: 0;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 c 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 d;
+  }
+  /**
+   * 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, u, f) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
+  }
+}
+i.define("wje-card-subtitle", c);
+export {
+  c as default
+};

package/dist/wje-card-title.js

@@ -0,0 +1,55 @@
+var d = Object.defineProperty;
+var s = (e, t, i) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var a = (e, t, i) => (s(e, typeof t != "symbol" ? t + "" : t, i), i);
+import n from "./wje-element.js";
+const o = ":host{--wje-card-title-font-size: 24px;--wje-card-title-font-weight: 500;--wje-card-title-margin: 0;--wje-card-title-padding: 0;--wje-card-title-line-height: 1.2;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}
+     */
+    a(this, "className", "CardTitle");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {Object} The styles object.
+   * @static
+   */
+  static get cssStyleSheet() {
+    return o;
+  }
+  /**
+   * 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(i, g, w) {
+    let r = document.createDocumentFragment(), l = document.createElement("slot");
+    return r.appendChild(l), r;
+  }
+}
+n.define("wje-card-title", c);
+export {
+  c as default
+};

package/dist/wje-card.js

@@ -0,0 +1,48 @@
+var n = Object.defineProperty;
+var d = (r, o, e) => o in r ? n(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e;
+var t = (r, o, e) => (d(r, typeof o != "symbol" ? o + "" : o, e), e);
+import l from "./wje-element.js";
+const i = ":host{--wje-card-margin-top: 0;--wje-card-margin-bottom: 1rem;--wje-card-margin-inline: 0;--wje-card-border-color: transparent}:host(.wje-color-primary){--wje-card-background: var(--wje-color-primary)}:host(.wje-color-complete){--wje-card-background: var(--wje-color-complete)}:host(.wje-color-success){--wje-card-background: var(--wje-color-success)}:host(.wje-color-warning){--wje-card-background: var(--wje-color-warning)}:host(.wje-color-danger){--wje-card-background: var(--wje-color-danger)}:host(.wje-color-info){--wje-card-background: var(--wje-color-info)}:host(.wje-color-menu){--wje-card-background: var(--wje-color-menu)}:host(.wje-color-primary){--wje-card-color: var(--wje-color-white)}:host(.wje-color-complete){--wje-card-color: var(--wje-color-white)}:host(.wje-color-success){--wje-card-color: var(--wje-color-white)}:host(.wje-color-warning){--wje-card-color: var(--wje-color)}:host(.wje-color-danger){--wje-card-color: var(--wje-color-white)}:host(.wje-color-info){--wje-card-color: var(--wje-color-white)}:host(.wje-color-menu){--wje-card-color: var(--wje-color-white) !important}:host{background-color:var(--wje-card-background);color:var(--wje-card-color)!important;margin-top:var(--wje-card-margin-top);margin-bottom:var(--wje-card-margin-bottom);margin-inline:var(--wje-card-margin-inline);box-shadow:var(--wje-box-shadow-large);border-color:var(--wje-border-color);border-style:var(--wje-border-style);border-width:var(--wje-border-size);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}:host(.wje-color){background-color:var(--wje-card-background, #fff);color:var(--wje-card-color)}";
+class s extends l {
+  /**
+   * Card constructor
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Class name
+     * @type {string}
+     */
+    t(this, "className", "Card");
+  }
+  /**
+   * Get CSS stylesheet
+   * @static
+   * @returns {Object} styles - The CSS styles
+   */
+  static get cssStyleSheet() {
+    return i;
+  }
+  /**
+   * 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, a) {
+    let c = document.createDocumentFragment(), w = document.createElement("slot");
+    return a.color && this.classList.add("wje-color-" + a.color, "wje-color"), c.appendChild(w), c;
+  }
+}
+l.define("wje-card", s);
+export {
+  s as default
+};

package/dist/wje-carousel-item.js

@@ -0,0 +1,33 @@
+var o = Object.defineProperty;
+var c = (e, t, a) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var r = (e, t, a) => (c(e, typeof t != "symbol" ? t + "" : t, a), a);
+import n, { event as d } from "./wje-element.js";
+const m = ":host{--aspect-ratio: inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;width:var(--wje-carousel-size, 100%);max-height:100%;aspect-ratio:var(--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 n {
+  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 l = document.createElement("slot");
+    return s.appendChild(l), i.appendChild(s), i;
+  }
+  afterDraw() {
+    d.addListener(this, "click", "wje-carousel-item:click");
+  }
+}
+n.define("wje-carousel-item", u);
+export {
+  u as default
+};

package/dist/wje-carousel.js

@@ -0,0 +1,177 @@
+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 = ":host{--wje-scroll-hint: 0px;--wje-carousel-width: 100%;--wje-carousel-height: auto;--wje-carousel-size: 100% }.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

@@ -0,0 +1,104 @@
+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{--wje-grey-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-white-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wje-checkbox-margin-top: 0;--wje-checkbox-margin-bottom: .5rem;--wje-checkbox-margin-inline: 0;--wje-checkbox-width: 16px;--wje-checkbox-height: 16px;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-highest)}.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-highest)}.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-high);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-high);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

@@ -0,0 +1,32 @@
+var h = Object.defineProperty;
+var w = (o, e, t) => e in o ? h(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var n = (o, e, t) => (w(o, typeof e != "symbol" ? e + "" : e, t), t);
+import s, { event as d } from "./wje-element.js";
+const p = ":host{--wje-chip-border-radius: 100px;--wje-chip-background: var(--wje-color-contrast-2);--wje-chip-color: var(--wje-color-contrast-6);--wje-chip-margin: 0;margin:var(--wje-chip-margin)}:host(.wje-color-primary){--wje-chip-background: var(--wje-color-primary)}:host(.wje-color-complete){--wje-chip-background: var(--wje-color-complete)}:host(.wje-color-success){--wje-chip-background: var(--wje-color-success)}:host(.wje-color-warning){--wje-chip-background: var(--wje-color-warning)}:host(.wje-color-danger){--wje-chip-background: var(--wje-color-danger)}:host(.wje-color-info){--wje-chip-background: var(--wje-color-info)}:host(.wje-color-menu){--wje-chip-background: var(--wje-color-menu)}:host(.wje-color-primary){--wje-chip-color: var(--wje-color-white)}:host(.wje-color-complete){--wje-chip-color: var(--wje-color-white)}:host(.wje-color-success){--wje-chip-color: var(--wje-color-white)}:host(.wje-color-warning){--wje-chip-color: var(--wje-color)}:host(.wje-color-danger){--wje-chip-color: var(--wje-color-white)}:host(.wje-color-info){--wje-chip-color: var(--wje-color-white)}:host(.wje-color-menu){--wje-chip-color: var(--wje-color-white) !important}.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:var(--wje-chip-background);color:var(--wje-chip-color);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-chip-border-radius);overflow:hidden;vertical-align:middle;box-sizing:border-box}:host(.focus){box-shadow:none}:host(:hover:not(.wje-active)) .native-chip{background:var(--wje-color-contrast-3);color:var(--wje-color)}:host(.wje-active) .native-chip{border:1px solid var(--wje-color-primary-11)}: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}:host .native-chip{background-color:var(--wje-chip-background, #fff);color:var(--wje-chip-color)}::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 j extends s {
+  constructor() {
+    super();
+    n(this, "className", "Chip");
+  }
+  static get cssStyleSheet() {
+    return p;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, m, u) {
+    let a = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-chip");
+    let l = 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 && this.classList.add("wje-color-" + this.color, "wje-color"), this.disabled && this.classList.add("wje-disabled"), this.outline && this.classList.add("wje-outline"), r.appendChild(l), r.appendChild(c), this.hasAttribute("removable") && r.appendChild(i), a.appendChild(r), this.remove = i, a;
+  }
+  afterDraw() {
+    d.addListener(this.remove, "click", "wje:chip-remove", null, { stopPropagation: !0 });
+  }
+}
+s.define("wje-chip", j);
+export {
+  j as default
+};