var __decorate=this&&this.__decorate||function(t,i,e,r){var s,o=arguments.length,h=o<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,i,e,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(h=(o<3?s(h):o>3?s(i,e,h):s(i,e))||h);return o>3&&h&&Object.defineProperty(i,e,h),h};import{css,customElement,html,internalProperty,LitElement,property,query}from"lit-element";import{classMap}from"lit-html/directives/class-map";import"./lit-draggable";import"./lit-resizable";import{fireEvent}from"./util/fire-event";let LitGridItem=class extends LitElement{constructor(){super(...arguments),this.minWidth=1,this.minHeight=1,this.isDraggable=!0,this.isResizable=!0,this._isDragging=!1,this._isResizing=!1,this._firstLayoutFinished=!1}updated(t){if(t.has("parentWidth")||t.has("margin")||t.has("columns")||t.has("containerPadding")||t.has("minHeight")||t.has("minWidth")||t.has("maxWidth")||t.has("maxHeight")||t.has("rowHeight")||t.has("posX")||t.has("_isDragging")&&!this._isDragging){this._columnWidth=(this.parentWidth-this.margin[0]*(this.columns-1)-2*this.containerPadding[0])/this.columns,this._fullColumnWidth=this._columnWidth+this.margin[0],this._fullRowHeight=this.rowHeight+this.margin[1],this._minWidthPX=this._fullColumnWidth*this.minWidth-this.margin[0];const t=void 0!==this.maxWidth?Math.min(this.maxWidth,this.columns-this.posX):this.columns-this.posX;this._maxWidthPX=this._fullColumnWidth*t-this.margin[0],this._minHeightPX=this._fullRowHeight*this.minHeight-this.margin[1],this._maxHeightPX=this._fullRowHeight*(this.maxHeight||1/0)-this.margin[1]}this._isDragging||(this._itemLeftPX=Math.round(this.posX*this._fullColumnWidth+this.containerPadding[0]),this._itemTopPX=this.parentWidth?Math.round(this.posY*this._fullRowHeight+this.containerPadding[1]):0,this._isResizing||(this._itemWidthPX=this.width*this._columnWidth+Math.max(0,this.width-1)*this.margin[0],this._itemHeightPX=this.height*this.rowHeight+Math.max(0,this.height-1)*this.margin[1],!this._firstLayoutFinished&&this.parentWidth>0&&setTimeout(()=>this._firstLayoutFinished=!0,200)))}render(){var t;let i=html``;if(this.isDraggable&&(i=html`
${i}
`),this.isResizable){i=html`
${i}
`}return html`
${i}
`}_resizeStart(){this.isDraggable=!1,this._isResizing=!0,this._isDragging=!1,fireEvent(this,"resizeStart")}_resize(t){if(!this._isResizing)return;let{width:i,height:e}=t.detail;i=Math.max(this._minWidthPX,i),i=Math.min(this._maxWidthPX,i),e=Math.max(this._minHeightPX,e),e=Math.min(this._maxHeightPX,e),this._itemWidthPX=i,this._itemHeightPX=e;const r=Math.round((i+this.margin[0])/this._fullColumnWidth),s=Math.round((e+this.margin[1])/this._fullRowHeight);r===this.width&&s===this.height||fireEvent(this,"resize",{newWidth:r,newHeight:s})}_resizeEnd(){this.isDraggable=!0,this._isResizing=!1,fireEvent(this,"resizeEnd")}_dragStart(){if(!this.isDraggable)return;const t=this.gridItem.getBoundingClientRect(),i=this.offsetParent.getBoundingClientRect();this._startLeft=t.left-i.left,this._startTop=t.top-i.top,this._startPosX=this.posX,this._startPosY=this.posY,this._isDragging=!0,fireEvent(this,"dragStart")}_drag(t){if(void 0===this._startPosX||void 0===this._startPosY||void 0===this._startLeft||void 0===this._startTop||!this.isDraggable)return;const{deltaX:i,deltaY:e}=t.detail;this._itemLeftPX=this._startLeft+i,this._itemTopPX=this._startTop+e;const r=Math.round(i/this._fullColumnWidth),s=Math.round(e/this._fullRowHeight);if(!s&&!r)return;let o=this._startPosX+r,h=this._startPosY+s;o=Math.max(0,o),h=Math.max(0,h),o=Math.min(this.columns-this.width,o),fireEvent(this,"dragging",{newPosX:o,newPosY:h})}_dragEnd(){this._isDragging=!1,this._startLeft=void 0,this._startTop=void 0,this._startPosX=void 0,this._startPosY=void 0,fireEvent(this,"dragEnd")}static get styles(){return css`
.grid-item-wrapper {
position: absolute;
transition: var(--grid-item-transition, all 200ms);
z-index: 2;
opacity: 0;
}
.grid-item-wrapper.dragging {
transition: none;
z-index: 3;
opacity: var(--grid-item-dragging-opacity, 0.8) !important;
}
.grid-item-wrapper.resizing {
transition-property: transform;
z-index: 3;
opacity: var(--grid-item-resizing-opacity, 0.8) !important;
}
.grid-item-wrapper.finished {
opacity: 1;
}
:host([placeholder]) .grid-item-wrapper {
background-color: var(--placeholder-background-color, red);
opacity: var(--placeholder-background-opacity, 0.2);
z-index: 1;
}
lit-resizable {
width: 100%;
height: 100%;
}
`}};__decorate([property({type:Number})],LitGridItem.prototype,"width",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"height",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"posX",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"posY",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"rowHeight",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"columns",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"parentWidth",void 0),__decorate([property({type:Array})],LitGridItem.prototype,"margin",void 0),__decorate([property({type:Array})],LitGridItem.prototype,"containerPadding",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"minWidth",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"minHeight",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"maxWidth",void 0),__decorate([property({type:Number})],LitGridItem.prototype,"maxHeight",void 0),__decorate([property({type:Boolean})],LitGridItem.prototype,"isDraggable",void 0),__decorate([property({type:Boolean})],LitGridItem.prototype,"isResizable",void 0),__decorate([property({type:Boolean})],LitGridItem.prototype,"_isDragging",void 0),__decorate([property({type:Boolean})],LitGridItem.prototype,"_isResizing",void 0),__decorate([property({type:Boolean})],LitGridItem.prototype,"_firstLayoutFinished",void 0),__decorate([property({attribute:!1})],LitGridItem.prototype,"resizeHandle",void 0),__decorate([property({attribute:!1})],LitGridItem.prototype,"dragHandle",void 0),__decorate([property()],LitGridItem.prototype,"key",void 0),__decorate([query(".grid-item-wrapper")],LitGridItem.prototype,"gridItem",void 0),__decorate([internalProperty()],LitGridItem.prototype,"_itemTopPX",void 0),__decorate([internalProperty()],LitGridItem.prototype,"_itemLeftPX",void 0),__decorate([internalProperty()],LitGridItem.prototype,"_itemWidthPX",void 0),__decorate([internalProperty()],LitGridItem.prototype,"_itemHeightPX",void 0),LitGridItem=__decorate([customElement("lit-grid-item")],LitGridItem);export{LitGridItem};