var OrDataViewer_1,__decorate=this&&this.__decorate||function(e,t,r,i){var a,o=arguments.length,n=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,i);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(n=(o<3?a(n):o>3?a(t,r,n):a(t,r))||n);return o>3&&n&&Object.defineProperty(t,r,n),n};import{html as e,LitElement as t}from"lit";import{customElement as r,property as i}from"lit/decorators.js";import"@openremote/or-chart";import"@openremote/or-translate";import"@openremote/or-components/or-panel";import{OrChartEvent as a}from"@openremote/or-chart";import{style as o}from"./style";import{i18next as n,translate as l}from"@openremote/or-translate";import{styleMap as s}from"lit/directives/style-map.js";import{classMap as p}from"lit/directives/class-map.js";import"@openremote/or-attribute-card";import d from"@openremote/core";export class OrDataViewerRenderCompleteEvent extends CustomEvent{constructor(){super(OrDataViewerRenderCompleteEvent.NAME,{bubbles:!0,composed:!0})}}OrDataViewerRenderCompleteEvent.NAME="or-data-viewer-render-complete-event";export class OrDataViewerConfigInvalidEvent extends CustomEvent{constructor(){super(OrDataViewerConfigInvalidEvent.NAME,{bubbles:!0,composed:!0})}}OrDataViewerConfigInvalidEvent.NAME="or-data-viewer-config-invalid-event";let OrDataViewer=OrDataViewer_1=class extends l(n)(t){static get styles(){return[o]}static generateGrid(e){if(e){let t=e.querySelector("#container");if(t){let r=parseInt(window.getComputedStyle(t).getPropertyValue("grid-auto-rows"),10),i=parseInt(window.getComputedStyle(t).getPropertyValue("grid-row-gap"),10),a=e.querySelectorAll(".panel");a&&a.forEach(e=>{let t=e.querySelector(".panel-content-wrapper");if(t){let a=Math.ceil((t.getBoundingClientRect().height+i)/(r+i));e.style.gridRowEnd="span "+a}})}}}constructor(){super(),this._loading=!1,this._resizeHandler=()=>{OrDataViewer_1.generateGrid(this.shadowRoot)},this.addEventListener(a.NAME,()=>OrDataViewer_1.generateGrid(this.shadowRoot))}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._resizeHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._resizeHandler)}refresh(){this.realm=d.displayRealm}getPanel(t,r){let i=this.getPanelContent(t,r);return i?e`
            <div class=${p({panel:!0,mobileHidden:!0===r.hideOnMobile})} id="${t}-panel" style="${r&&r.panelStyles?s(r.panelStyles):""}">
                <div class="panel-content-wrapper">
                    ${r&&"chart"===r.type?e`
                        <div class="panel-title">
                            <or-translate value="${t}"></or-translate>
                        </div>
                    `:""}
                   
                    <div class="panel-content">
                        ${i}
                    </div>
                </div>
            </div>
        `:e``}getPanelContent(t,r){let i;if(!r.hide&&this.config)return this.realm=d.displayRealm,r&&"chart"===r.type&&(i=e`<or-chart id="chart" panelName="${t}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-chart>`),r&&"kpi"===r.type&&(i=e`
                <or-attribute-card panelName="${t}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-attribute-card>
            `),i}render(){return this._loading?e`
                <div class="msg"><or-translate value="loading"></or-translate></div>
            `:(this.config||(this.config=Object.assign({},OrDataViewer_1.DEFAULT_CONFIG)),e`
            <div id="wrapper">
                <div id="container" style="${this.config.viewerStyles?s(this.config.viewerStyles):""}">
                    ${this.renderConfig()}
                </div>
            </div>
        `)}renderConfig(){let e=this.config?this.config:OrDataViewer_1.DEFAULT_CONFIG;try{return Object.entries(e.panels).map(([e,t])=>this.getPanel(e,t))}catch(t){return console.warn("OR data viewer config is invalid"),this.config=void 0,this.dispatchEvent(new OrDataViewerConfigInvalidEvent),Object.entries((e=OrDataViewer_1.DEFAULT_CONFIG).panels).map(([e,t])=>this.getPanel(e,t))}}updated(e){super.updated(e),e.has("realm")&&this.refresh(),this.updateComplete.then(()=>{this.dispatchEvent(new OrDataViewerRenderCompleteEvent),OrDataViewer_1.generateGrid(this.shadowRoot)})}};OrDataViewer.DEFAULT_PANEL_TYPE="chart",OrDataViewer.DEFAULT_CONFIG={viewerStyles:{},panels:{chart:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}},kpi1:{type:"kpi",hideOnMobile:!1},kpi2:{type:"kpi",hideOnMobile:!1},kpi3:{type:"kpi",hideOnMobile:!1},kpi4:{type:"kpi",hideOnMobile:!1},kpi5:{type:"kpi",hideOnMobile:!1},kpi6:{type:"kpi",hideOnMobile:!1},kpi7:{type:"kpi",hideOnMobile:!1},kpi8:{type:"kpi",hideOnMobile:!1},chart2:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}},chart3:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}}}},__decorate([i()],OrDataViewer.prototype,"config",void 0),__decorate([i({type:Array,attribute:!1})],OrDataViewer.prototype,"_assets",void 0),__decorate([i()],OrDataViewer.prototype,"_loading",void 0),__decorate([i()],OrDataViewer.prototype,"realm",void 0),OrDataViewer=OrDataViewer_1=__decorate([r("or-data-viewer")],OrDataViewer);export{OrDataViewer};