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

                <!-- Other settings -->
                <settings-panel displayName="settings" expanded="${!0}">
                    <div>
                        <!-- Toggle readonly -->
                        <div class="switch-container">
                            <span><or-translate value="dashboard.userCanEdit"></or-translate></span>
                            <or-mwc-input .type="${n.SWITCH}" style="margin: 0 -10px;" .value="${!this.widgetConfig.readonly}"
                                          @or-mwc-input-changed="${t=>this.onReadonlyToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <!-- Toggle helper text -->
                        <div class="switch-container">
                            <span><or-translate value="dashboard.showHelperText"></or-translate></span>
                            <or-mwc-input .type="${n.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showHelperText}"
                                          @or-mwc-input-changed="${t=>this.onHelperTextToggle(t)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>
            </div>
        `}onAttributesSelect(t){if(this.widgetConfig.attributeRefs=t.detail.attributeRefs,1===t.detail.attributeRefs.length){let e=t.detail.assets.find(e=>e.id===t.detail.attributeRefs[0].id);e&&this.setDisplayName(e.name)}this.notifyConfigUpdate()}onReadonlyToggle(t){this.widgetConfig.readonly=!t.detail.value,this.notifyConfigUpdate()}onHelperTextToggle(t){this.widgetConfig.showHelperText=t.detail.value,this.notifyConfigUpdate()}};AttributeInputSettings=__decorate([i("attribute-input-settings")],AttributeInputSettings);export{AttributeInputSettings};