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

                <!-- Display settings -->
                <settings-panel displayName="display" expanded="${!0}">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <or-mwc-input .type="${s.SELECT}" style="width: 100%;"
                                      .options="${["year","month","week","day","hour"]}"
                                      .value="${this.widgetConfig.period}" label="${a.t("timeframe")}"
                                      @or-mwc-input-changed="${t=>this.onTimeframeSelect(t)}"
                        ></or-mwc-input>
                        <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="${t=>this.onTimeframeToggle(t)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>

                <settings-panel displayName="values" expanded="${!0}">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <or-mwc-input .type="${s.SELECT}" style="width: 100%;" .options="${["absolute","percentage"]}" .value="${this.widgetConfig.deltaFormat}"
                                      label="${a.t("dashboard.showValueAs")}"
                                      @or-mwc-input-changed="${t=>this.onDeltaFormatSelect(t)}"
                        ></or-mwc-input>
                        <or-mwc-input .type="${s.NUMBER}" style="width: 100%;" .value="${this.widgetConfig.decimals}" label="${a.t("decimals")}"
                                      @or-mwc-input-changed="${t=>this.onDecimalsChange(t)}"
                        ></or-mwc-input>
                    </div>
                </settings-panel>

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