var __decorate=this&&this.__decorate||function(t,e,i,o){var r,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var d=t.length-1;d>=0;d--)(r=t[d])&&(a=(s<3?r(a):s>3?r(e,i,a):r(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a};import{css,customElement,html,internalProperty,LitElement,property}from"lit-element";import"./lit-grid-item";import{condenseLayout}from"./util/condense-layout";import{debounce}from"./util/debounce";import{findLayoutBottom}from"./util/find-layout-bottom";import{fireEvent}from"./util/fire-event";import{fixLayoutBounds}from"./util/fix-layout-bounds";import{getMasonryLayout}from"./util/get-masonry-layout";import{installResizeObserver}from"./util/install-resize-observer";import{moveItem}from"./util/move-item";let LitGridLayout=class extends LitElement{constructor(){super(...arguments),this.sortStyle="masonry",this.items=[],this.margin=[10,10],this.containerPadding=[20,20],this.rowHeight=30,this.columns=12,this.dragDisabled=!1,this.resizeDisabled=!1,this.resizing=!1,this.dragging=!1,this._width=0,this._layout=[],this._layoutObject={}}get _childrenElements(){return this.items.concat(...Array.prototype.filter.call(this.children,t=>t.classList.contains("grid-item")))}get _layoutHeight(){const t=findLayoutBottom(this._layout);return t*this.rowHeight+(t-1)*this.margin[1]+2*this.containerPadding[1]}disconnectedCallback(){this._resizeObserver&&this._resizeObserver.disconnect()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>this._attachObserver())}updated(t){super.updated(t),t.has("layout")&&this._setupLayout(),t.has("columns")&&this._updateLayout(this._layout),this.style.height=`${this._layoutHeight}px`}render(){var t;return(null===(t=this._layout)||void 0===t?void 0:t.length)?html`
${this._childrenElements.map(t=>{const e=this._layoutObject[t.key];return e?html`
${t}
`:html``})}
${this._renderPlaceHolder()}
`:html``}_setupLayout(){const t=[];for(const e of this._childrenElements){let i=this.layout.find(t=>t.key===e.key);if(!i){const o=e.grid||{width:1,height:1,posX:0,posY:findLayoutBottom(t)};i=Object.assign(Object.assign({},o),{key:e.key})}t.push(i)}this._updateLayout(t,!0),fireEvent(this,"layout-changed",{layout:this._layout})}_updateLayout(t,e=!1,i=this.sortStyle){if("masonry"===i)this._layout=getMasonryLayout(t,this.columns);else{const i=e?fixLayoutBounds(t,this.columns):t;this._layout=condenseLayout(i)}this._layoutObject={};for(const t of this._layout)this._layoutObject[t.key]=t}_itemResizeStart(t){this._oldItemIndex=this._layout.findIndex(e=>e.key===t.currentTarget.key),this._placeholder=this._layout[this._oldItemIndex],this._oldItemLayout=this._layout[this._oldItemIndex]}_itemResize(t){if(!this._oldItemLayout||void 0===this._oldItemIndex)return;const{newWidth:e,newHeight:i}=t.detail,o=Object.assign(Object.assign({},this._oldItemLayout),{width:e,height:i});this._layout[this._oldItemIndex]=o,this._placeholder=o,this._updateLayout(this._layout,!1,"default")}_itemResizeEnd(){fireEvent(this,"item-changed",{item:this._placeholder,layout:this._layout}),this._placeholder=void 0,this._oldItemLayout=void 0,this._oldItemIndex=void 0}_itemDragStart(t){const e=this._layout.findIndex(e=>e.key===t.currentTarget.key);this._placeholder=this._layout[e],this._oldItemLayout=this._layout[e]}_itemDrag(t){if(!this._oldItemLayout)return;t.stopPropagation(),t.preventDefault();const{newPosX:e,newPosY:i}=t.detail,o=moveItem([...this._layout],this._oldItemLayout,e,i,this.columns,!0);this._updateLayout(o,!1,"default"),this._oldItemLayout=this._layout.find(t=>t.key===this._oldItemLayout.key),this._placeholder=this._oldItemLayout}_itemDragEnd(){fireEvent(this,"item-changed",{item:this._placeholder,layout:this._layout}),this._placeholder=void 0,this._oldItemLayout=void 0,this._oldItemIndex=void 0}_renderPlaceHolder(){return this._placeholder?html`
`:html``}async _attachObserver(){this._resizeObserver||(await installResizeObserver(),this._resizeObserver=new ResizeObserver(debounce(()=>this._measureLayoutWidth(),250,!1))),this._resizeObserver.observe(this)}_measureLayoutWidth(){this.offsetParent&&(this._width=this.offsetParent.clientWidth)}static get styles(){return css`
:host {
display: block;
position: relative;
}
:host([dragging]),
:host([resizing]),
:host([dragging]) lit-grid-item,
:host([resizing]) lit-grid-item {
user-select: none;
touch-action: none;
}
`}};__decorate([property({type:Array})],LitGridLayout.prototype,"layout",void 0),__decorate([property()],LitGridLayout.prototype,"sortStyle",void 0),__decorate([property({type:Array})],LitGridLayout.prototype,"items",void 0),__decorate([property({type:Array})],LitGridLayout.prototype,"margin",void 0),__decorate([property({type:Array})],LitGridLayout.prototype,"containerPadding",void 0),__decorate([property({type:Number})],LitGridLayout.prototype,"rowHeight",void 0),__decorate([property({type:Number})],LitGridLayout.prototype,"columns",void 0),__decorate([property({type:Boolean})],LitGridLayout.prototype,"dragDisabled",void 0),__decorate([property({type:Boolean})],LitGridLayout.prototype,"resizeDisabled",void 0),__decorate([property({attribute:!1})],LitGridLayout.prototype,"resizeHandle",void 0),__decorate([property({attribute:!1})],LitGridLayout.prototype,"dragHandle",void 0),__decorate([property({type:Boolean,attribute:!0,reflect:!0})],LitGridLayout.prototype,"resizing",void 0),__decorate([property({type:Boolean,attribute:!0,reflect:!0})],LitGridLayout.prototype,"dragging",void 0),__decorate([internalProperty()],LitGridLayout.prototype,"_width",void 0),__decorate([internalProperty()],LitGridLayout.prototype,"_layout",void 0),__decorate([internalProperty()],LitGridLayout.prototype,"_layoutObject",void 0),__decorate([internalProperty()],LitGridLayout.prototype,"_placeholder",void 0),LitGridLayout=__decorate([customElement("lit-grid-layout")],LitGridLayout);export{LitGridLayout};