var __decorate=this&&this.__decorate||function(t,e,s,i){var n,a=arguments.length,o=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(o=(a<3?n(o):a>3?n(e,s,o):n(e,s))||o);return a>3&&o&&Object.defineProperty(e,s,o),o};import{css as t,html as e}from"lit";import{customElement as s}from"lit/decorators.js";import{AssetWidgetSettings as i}from"../util/or-asset-widget";import{InputType as n}from"@openremote/or-mwc-components/or-mwc-input";let styling=t`
  .customMwcInputContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
`,TableSettings=class extends i{static get styles(){return[...super.styles,styling]}render(){return e`
            <div>
                <!-- Asset type, assets, and attribute picker -->
                <settings-panel displayName="attributes" expanded="${!0}">
                    <div style="padding-bottom: 12px;">
                        <assettypes-panel .assetType="${this.widgetConfig.assetType}" .config="${{assets:{enabled:!0,multi:!0,allOfTypeOption:!0},attributes:{enabled:!0,multi:!0}}}"
                                          .assetIds="${this.widgetConfig.assetIds}" .attributeNames="${this.widgetConfig.attributeNames}"
                                          .allOfType="${this.widgetConfig.allOfType}"
                                          @assettype-select="${t=>this.onAssetTypeSelect(t)}"
                                          @alloftype-switch="${t=>this.onAssetAllOfTypeSwitch(t)}"
                                          @assetids-select="${t=>this.onAssetIdsSelect(t)}"
                                          @attributenames-select="${t=>this.onAttributesSelect(t)}"
                        ></assettypes-panel>
                    </div>
                </settings-panel>
                
                <!-- Table settings like amount of rows -->
                <settings-panel displayName="dashboard.tableSettings" expanded="${!0}">
                    <div style="padding-bottom: 12px;">
                        <div class="customMwcInputContainer">
                            <span style="min-width: 180px"><or-translate value="dashboard.numberOfRows"></or-translate></span>
                            <or-mwc-input type="${n.SELECT}" .options="${[10,25,100]}" .value="${this.widgetConfig.tableSize}"
                                          @or-mwc-input-changed="${t=>this.onTableSizeSelect(t)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>
            </div>
        `}onAssetTypeSelect(t){this.widgetConfig.assetType=t.detail,this.widgetConfig.assetIds=[],this.widgetConfig.attributeNames=[],this.notifyConfigUpdate()}onAssetAllOfTypeSwitch(t){this.widgetConfig.allOfType=t.detail,this.notifyConfigUpdate()}onAssetIdsSelect(t){this.widgetConfig.assetIds=t.detail,this.notifyConfigUpdate()}onAttributesSelect(t){this.widgetConfig.attributeNames=t.detail,this.notifyConfigUpdate()}onTableSizeSelect(t){let e=t.detail.value||10;this.widgetConfig.tableSize=e,10!==e?this.widgetConfig.tableOptions=[e]:this.widgetConfig.tableOptions=[10,25,100],this.notifyConfigUpdate()}};TableSettings=__decorate([s("table-settings")],TableSettings);export{TableSettings};