var __decorate=this&&this.__decorate||function(e,t,i,a){var n,s=arguments.length,r=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(r=(s<3?n(r):s>3?n(t,i,r):n(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import{css as e,html as t}from"lit";import{customElement as i}from"lit/decorators.js";import{AssetWidgetSettings as a}from"../util/or-asset-widget";import{i18next as n}from"@openremote/or-translate";import{InputType as s}from"@openremote/or-mwc-components/or-mwc-input";let styling=e`
  .switchMwcInputContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
`,KpiSettings=class extends a{static get styles(){return[...super.styles,styling]}render(){return t`
            <div>
                <!-- Attribute selector -->
                <settings-panel displayName="attributes" expanded="${!0}">
                    <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" onlyDataAttrs="${!1}" .attributeFilter="${e=>["positiveInteger","positiveNumber","number","long","integer","bigInteger","negativeInteger","negativeNumber","bigNumber","integerByte","direction"].includes(e.type)}" style="padding-bottom: 12px;"
                                      @attribute-select="${e=>this.onAttributesSelect(e)}"
                    ></attributes-panel>
                </settings-panel>

                <!-- Display settings -->
                <settings-panel displayName="display" expanded="${!0}">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <or-vaadin-select .items=${["year","month","week","day","hour"].map(e=>({value:e,label:n.t(e)}))}
                                          value=${this.widgetConfig.period} @change=${e=>this.onTimeframeSelect(e)}>
                            <or-translate slot="label" value="timeframe"></or-translate>
                        </or-vaadin-select>
                        <div class="switchMwcInputContainer">
                            <span><or-translate value="dashboard.allowTimerangeSelect"></or-translate></span>
                            <or-mwc-input .type="${s.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showTimestampControls}"
                                          @or-mwc-input-changed="${e=>this.onTimeframeToggle(e)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>

                <settings-panel displayName="values" expanded="${!0}">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <or-vaadin-select .items=${["absolute","percentage"].map(e=>({value:e,label:n.t(e)}))}
                                          value=${this.widgetConfig.deltaFormat} @change=${e=>this.onDeltaFormatSelect(e)}>
                            <or-translate slot="label" value="dashboard.showValueAs"></or-translate>
                        </or-vaadin-select>
                        <or-vaadin-number-field value=${this.widgetConfig.decimals} min="0"
                                                @change=${e=>this.onDecimalsChange(e)}>
                            <or-translate slot="label" value="decimals"></or-translate>
                        </or-vaadin-number-field>
                    </div>
                </settings-panel>

                <!-- -->
            </div>
        `}onAttributesSelect(e){if(this.widgetConfig.attributeRefs=e.detail.attributeRefs,1===e.detail.attributeRefs.length){let t=e.detail.attributeRefs[0],i=e.detail.assets.find(e=>e.id===t.id);this.setDisplayName(i?`${i.name} - ${t.name}`:`${t.name}`)}this.notifyConfigUpdate()}onTimeframeSelect(e){this.widgetConfig.period=e.currentTarget.value,this.notifyConfigUpdate()}onTimeframeToggle(e){this.widgetConfig.showTimestampControls=e.detail.value,this.notifyConfigUpdate()}onDeltaFormatSelect(e){this.widgetConfig.deltaFormat=e.currentTarget.value,this.notifyConfigUpdate()}onDecimalsChange(e){let t=e.currentTarget;t.checkValidity()&&(this.widgetConfig.decimals=Number(t.value),this.notifyConfigUpdate())}};KpiSettings=__decorate([i("kpi-settings")],KpiSettings);export{KpiSettings};