class InforDraggable extends HTMLElement{static callbacks={};constructor(){super();this.grabbed_item=null;this.grabbed_copy=null;this.offset_x=0;this.offset_y=0;this.container=null;this.previous_items_length=0;this.appendStyle();this.onMouseDown=this.onMouseDown.bind(this);this.onMouseMove=this.onMouseMove.bind(this);this.onMouseUp=this.onMouseUp.bind(this)}
static get observedAttributes(){return['id','wire:onchange']}
connectedCallback(){this.addEventListener('mousedown',this.onMouseDown)}
disconnectedCallback(){this.removeEventListener('mousedown',this.onMouseDown)}
onMouseDown(event){if(event.button!==0){return}
const item=event.target.closest('infor-draggable-item');if(!item){return}
const parent=item.parentElement;if(parent.tagName!=='INFOR-DRAGGABLE'||parent!==this){return}
event.preventDefault();event.stopPropagation();const container=parent
const rect=item.getBoundingClientRect();this.offset_x=event.clientX-rect.left;this.offset_y=event.clientY-rect.top;this.container=container;this.grabbed_item=item;document.addEventListener('mousemove',this.onMouseMove);document.addEventListener('mouseup',this.onMouseUp);this.current_values=this.values;this.createDraggableCopy()
this.updateDraggableCopyPosition(event)}
onMouseMove(event){this.updateDraggableCopyPosition(event);this.placeItemIntoBestPosition()}
onMouseUp(){document.removeEventListener('mousemove',this.onMouseMove);document.removeEventListener('mouseup',this.onMouseUp);this.destroyDraggableCopy();if(this.valuesChanged()){this.callback(this.values);this.livewireCallback(this.values)}}
appendStyle(){if(InforDraggable.style_appended){return}
InforDraggable.style_appended=!0;const style=document.createElement('style');style.textContent=`
            infor-draggable{
                position: relative;
                display: flex;
                flex-direction: column;
                gap: .5rem;
            }
            infor-draggable-item{
                display: block;
                cursor: grab;
            }
        `;document.head.appendChild(style)}
get values(){return this.items.map(el=>el.value)}
get items(){return Array.from(this.children).filter(el=>{return el.tagName==='INFOR-DRAGGABLE-ITEM'&&!el.hasAttribute('data-copy')})}
set current_values(values){this._current_values=values}
get current_values(){return this._current_values}
valuesChanged(){return JSON.stringify(this.current_values)!==JSON.stringify(this.values)}
get id(){return this.getAttribute('id')}
get callback(){return InforDraggable.callbacks[this.id]||((values)=>{})}
get livewireCallback(){const onchange=this.getAttribute('wire:onchange');if(!window.Livewire||!onchange){return(values)=>{}}
return(values)=>{window.Livewire.emit(onchange,values,this.id)}}
createDraggableCopy(){const copy=this.grabbed_item.cloneNode(!0);const rect=this.grabbed_item.getBoundingClientRect();const width=rect.width;const height=rect.height;copy.style.position='absolute';copy.style.width=`${width}px`;copy.style.height=`${height}px`;copy.style.cursor='grabbing';copy.setAttribute('data-copy','true');this.container.appendChild(copy);this.grabbed_copy=copy;this.grabbed_item.style.opacity='0'}
destroyDraggableCopy(){this.grabbed_copy.remove();this.grabbed_copy=null;this.grabbed_item.style.opacity='1'}
updateDraggableCopyPosition(event){const container_rect=this.container.getBoundingClientRect();const container_left=container_rect.left+window.scrollX;const container_top=container_rect.top+window.scrollY;const container_width=this.container.clientWidth;const container_height=this.container.clientHeight;const container_style=getComputedStyle(this.container);const container_padding_left=parseFloat(container_style.paddingLeft);const container_padding_top=parseFloat(container_style.paddingTop);const item_rect=this.grabbed_item.getBoundingClientRect();const item_width=item_rect.width;const item_height=item_rect.height;let x=event.pageX-container_left-this.offset_x;let y=event.pageY-container_top-this.offset_y;if(x+item_width>container_width+container_padding_left){x=container_width-item_width+container_padding_left}else if(x<container_padding_left){x=container_padding_left}
if(y+item_height>container_height+container_padding_top){y=container_height-item_height+container_padding_top}else if(y<container_padding_top){y=container_padding_top}
this.grabbed_copy.style.position='absolute';this.grabbed_copy.style.left=`${x}px`;this.grabbed_copy.style.top=`${y}px`}
placeItemIntoBestPosition(){if(!this.grabbed_item||!this.grabbed_copy){return}
const items=Array.from(this.container.children).filter(el=>el!==this.grabbed_copy);const copy_bounding_rect=this.grabbed_copy.getBoundingClientRect();const center_y=copy_bounding_rect.top+(copy_bounding_rect.height/2);items.forEach((item,index)=>{const item_bounding_rect=item.getBoundingClientRect();if(center_y>item_bounding_rect.top){item.after(this.grabbed_item)}
const top_distance=Math.abs(copy_bounding_rect.top-item_bounding_rect.top);if(index===0&&top_distance<copy_bounding_rect.height/2){item.before(this.grabbed_item)}})}
static onChange(id,callback){InforDraggable.callbacks[id]=callback}}
class InforDraggableItem extends HTMLElement{constructor(){super()}
static get observedAttributes(){return['value']}
get value(){return this.getAttribute('value')}
set value(val){this.setAttribute('value',val)}}
customElements.define('infor-draggable',InforDraggable);customElements.define('infor-draggable-item',InforDraggableItem)