import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './chunks/23e44913.js';
import { O as Option } from './chunks/a02c5734.js';
import './chunks/d76d6172.js';
import './kun-icon.js';
import { u as useStylesheet } from './chunks/e5702756.js';

function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r);}}function e(t){return (e=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return (n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function r(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return !1}}function o(t,e,i){return (o=r()?Reflect.construct:function(t,e,r){var o=[null];o.push.apply(o,e);var i=new(Function.bind.apply(t,o));return r&&n(i,r.prototype),i}).apply(null,arguments)}function i(t){var r="function"==typeof Map?new Map:void 0;return (i=function(t){if(null===t||-1===Function.toString.call(t).indexOf("[native code]"))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==r){if(r.has(t))return r.get(t);r.set(t,i);}function i(){return o(t,arguments,e(this).constructor)}return i.prototype=Object.create(t.prototype,{constructor:{value:i,enumerable:!1,writable:!0,configurable:!0}}),n(i,t)})(t)}var c=function(e){var n,r;function o(){var t;return (t=e.call(this)||this).original=null,t.intersectionObserver=null,t.original=t.currentSrc||t.src,t.src=o.FALLBACK_IMAGE,t.onIntersect=t.onIntersect.bind(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)),t}r=e,(n=o).prototype=Object.create(r.prototype),n.prototype.constructor=n,n.__proto__=r;var i,c,u,s=o.prototype;return s.connectedCallback=function(){this.observe();},s.disconnectedCallback=function(){this.unobserve();},s.observe=function(){this.observer.observe(this);},s.unobserve=function(){this.observer.unobserve(this),this.observer.disconnect();},s.onIntersect=function(t){var e=this;0!==t.length&&(t[0].intersectionRatio<=0||(this.addEventListener("load",function(){e.unobserve();}),this.addEventListener("error",function(){e.src=o.FALLBACK_IMAGE,e.unobserve();}),this.src=this.original));},s.attributeChangedCallback=function(t,e,n){null!==this.observer&&(this.unobserve(),this.observe());},i=o,u=[{key:"FALLBACK_IMAGE",get:function(){return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg=="}},{key:"observedAttributes",get:function(){return ["offset"]}}],(c=[{key:"offset",get:function(){return this.getAttribute("offset")},set:function(t){this.setAttribute("offset",t);}},{key:"observer",get:function(){return this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(this.onIntersect,{rootMargin:this.offset})),this.intersectionObserver}}])&&t(i.prototype,c),u&&t(i,u),o}(i(HTMLImageElement));

const KunImage = () => {
  const [url] = useProp("url");
  const [heightP] = useProp("height");
  const [widthP] = useProp("width");
  const [className] = useProp("cls");
  const height = Option.of(heightP).map(str1 => `${str1}px`).getOrElse("100%");
  const width = Option.of(widthP).map(str1 => `${str1}px`).getOrElse("100%");
  const style1 = `
    .kun-image-avatar {
      --lazy-image-border-radius: 50%;
    }
    
    .kun-custom-image1 {
      width: ${width};
      height: ${height};
      object-fit: fill;
      --lazy-image-fit: fill;
    }
    img[aria-hidden="true"] {
      display: none;
    }
  `;
  useStylesheet(style1);
  return h("host", {
    shadowDom: true
  }, h("div", {
    class: "w-full h-full"
  }, url == null && h("kun-icon", {
    slot: "placeholder",
    iconType: "preload-image",
    iconWidth: widthP,
    iconHeight: heightP
  }), url != null && h("lazy-image", {
    className: `${className} kun-custom-image1`,
    src: url,
    "lazy-image-width": width,
    "lazy-image-height": height,
    lazyImageWidth: width,
    lazyImageHeight: height
  }, h("kun-icon", {
    slot: "placeholder",
    iconType: "preload-image",
    iconWidth: widthP,
    iconHeight: heightP
  }))));
};

KunImage.props = {
  height: {
    type: Number
  },
  cls: {
    type: String
  },
  width: {
    type: Number
  },
  url: {
    type: String,
    reflect: true
  }
};
var kunImage = getComponentOrDefine("kun-image", KunImage);

export default kunImage;
//# sourceMappingURL=kun-image.js.map
