@everymatrix/cashier-page 1.77.5 → 1.77.6

package/stencil/ui-image-2ff23cd5-DCLQ0SIO.js

@@ -1,86 +0,0 @@
-import { r as n, h as t, H as r, g as a } from "./index-242ac81a-BqeIndhr.js";
-const h = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}", o = h, d = class {
-  constructor(e) {
-    n(this, e), this.hasStarted = !1, this.src = void 0, this.width = void 0, this.height = void 0, this.alt = void 0, this.styles = void 0, this.detectDistance = "200px", this.loading = "lazy", this.imgLoaded = !1;
-  }
-  onSrcChange() {
-    this.loading !== "eager" && (this.imgLoaded = !1, this.hasStarted = !1, (typeof window == "undefined" || !("IntersectionObserver" in window)) && this.beginLoad());
-  }
-  onLoadingChange(e, i) {
-    e !== i && (this.cleanupObserver(), this.detachImgHandlers(), e === "eager" ? (this.imgEl && this.src && (this.imgEl.src = this.src), this.hasStarted = !0) : (this.imgLoaded = !1, this.hasStarted = !1, this.setupObserver()));
-  }
-  componentDidLoad() {
-    this.loading !== "eager" && this.setupObserver();
-  }
-  disconnectedCallback() {
-    this.cleanupObserver(), this.detachImgHandlers();
-  }
-  canUseIO() {
-    return typeof window != "undefined" && "IntersectionObserver" in window;
-  }
-  setupObserver() {
-    if (this.loading !== "eager") {
-      if (!this.canUseIO()) {
-        this.beginLoad();
-        return;
-      }
-      this.io = new IntersectionObserver((e) => {
-        var i;
-        for (const s of e)
-          if (s.isIntersecting) {
-            this.beginLoad(), (i = this.io) === null || i === void 0 || i.unobserve(s.target), this.cleanupObserver();
-            break;
-          }
-      }, { root: null, rootMargin: this.detectDistance, threshold: 0 }), this.io.observe(this.el);
-    }
-  }
-  cleanupObserver() {
-    var e;
-    (e = this.io) === null || e === void 0 || e.disconnect(), this.io = void 0;
-  }
-  wireOnceHandlers() {
-    this.imgEl && (this.detachImgHandlers(), this._onLoad = () => {
-      var e;
-      this.currentSrc && (!((e = this.imgEl) === null || e === void 0) && e.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc) || (this.imgLoaded = !0);
-    }, this._onError = () => {
-      console.error("Load image failed:", this.src);
-    }, this.imgEl.addEventListener("load", this._onLoad, { once: !0 }), this.imgEl.addEventListener("error", this._onError, { once: !0 }));
-  }
-  detachImgHandlers() {
-    this.imgEl && (this._onLoad && this.imgEl.removeEventListener("load", this._onLoad), this._onError && this.imgEl.removeEventListener("error", this._onError), this._onLoad = void 0, this._onError = void 0);
-  }
-  beginLoad() {
-    if (!this.hasStarted && this.imgEl && this.src) {
-      if (this.hasStarted = !0, this.wireOnceHandlers(), this.imgEl.complete && this.imgEl.naturalWidth > 0) {
-        this.imgLoaded = !0;
-        return;
-      }
-      this.currentSrc = this.src, this.imgEl.src = this.src, this.imgEl.complete && this.imgEl.naturalWidth > 0 && (this.imgLoaded = !0);
-    }
-  }
-  get showSkeleton() {
-    return this.loading !== "eager" && !this.imgLoaded;
-  }
-  renderEager() {
-    return t(r, { class: "HostContainer" }, t("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" }));
-  }
-  renderLazy() {
-    return t(r, { class: "HostContainer", "aria-busy": this.imgLoaded ? "false" : "true" }, this.showSkeleton && t("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" }), t("img", { ref: (e) => this.imgEl = e, src: void 0, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? "Visible" : "Hidden"}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
-  }
-  render() {
-    return this.loading === "eager" ? this.renderEager() : this.renderLazy();
-  }
-  get el() {
-    return a(this);
-  }
-  static get watchers() {
-    return {
-      src: ["onSrcChange"],
-      loading: ["onLoadingChange"]
-    };
-  }
-};
-d.style = o;
-export {
-  d as U
-};