import{LitElement as e,html as t,css as i}from"../../lit/index.js";import{ResizeObserver as s}from"../../@juggle/resize-observer/lib/exports/resize-observer.js";globalThis.ResponsiveUtility={},globalThis.ResponsiveUtility.instance=null;class ResponsiveUtility extends e{render(){return t` <slot></slot> `}static get tag(){return"responsive-utility"}responiveElementEvent(e){let t={element:e.detail.element,attribute:e.detail.attribute||"responsive-size",sm:e.detail.sm||900,md:e.detail.md||1200,lg:e.detail.lg||1500,xl:e.detail.xl||1800,custom:e.detail.custom||"responsive-width"};t.observer=this._getObserver(t),t.observer.observe(t.element),this.details.push(t),globalThis.ResponsiveUtility.setSize(t)}_getObserver(e){return new s((t=>t.forEach((t=>globalThis.ResponsiveUtility.setSize(e,t.contentBoxSize||t.borderBoxSize||t.contentRect||t.target?t.target.offsetWidth:0)))))}deleteResponiveElementEvent(e){this.details=this.details.filter((t=>e.detail!==t))}constructor(){super(),this.details=[],globalThis.addEventListener("responsive-element",this.responiveElementEvent.bind(this)),globalThis.addEventListener("delete-responsive-element",this.deleteResponiveElementEvent.bind(this)),null==globalThis.ResponsiveUtility.instance&&(globalThis.ResponsiveUtility.instance=this)}}customElements.define(ResponsiveUtility.tag,ResponsiveUtility);export{ResponsiveUtility};globalThis.ResponsiveUtility.requestAvailability=()=>(null==globalThis.ResponsiveUtility.instance&&globalThis.document&&globalThis.document.body&&(globalThis.ResponsiveUtility.instance=globalThis.document.createElement("responsive-utility"),globalThis.document.body.appendChild(globalThis.ResponsiveUtility.instance)),globalThis.ResponsiveUtility.instance),globalThis.ResponsiveUtility.setSize=(e,t=0)=>{let i,s=e.element,l=e.attribute,n=e.custom;i=t<e.sm?"xs":t<e.md?"sm":t<e.lg?"md":t<e.xl?"lg":"xl",s.getAttribute(n)&&t===s.getAttribute(n)||s.setAttribute(n,t),s.getAttribute(l)&&i===s.getAttribute(l)||s.setAttribute(l,i)};