var TableSettings_1,__decorate=this&&this.__decorate||function(t,e,s,i){var a,n=arguments.length,l=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,s,i);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(l=(n<3?a(l):n>3?a(e,s,l):a(e,s))||l);return n>3&&l&&Object.defineProperty(e,s,l),l};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";let styling=t`
  .customMwcInputContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
`,TableSettings=TableSettings_1=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="${TableSettings_1._config}"
                                          .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-vaadin-select .items=${["10","25","100"].map(t=>({value:t,label:t}))}
                                              value=${this.widgetConfig.tableSize} @change=${t=>this.onTableSizeSelect(t)}>
                            </or-vaadin-select>
                        </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=Number(t.currentTarget.value||10);this.widgetConfig.tableSize=e,10!==e?this.widgetConfig.tableOptions=[e]:this.widgetConfig.tableOptions=[10,25,100],this.notifyConfigUpdate()}};TableSettings._config={assets:{enabled:!0,multi:!0,allOfTypeOption:!0},attributes:{enabled:!0,multi:!0}},TableSettings=TableSettings_1=__decorate([s("table-settings")],TableSettings);export{TableSettings};