@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 5.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{r as registerInstance,h,g as getElement}from"./index-CElQfBOC.js";import{t as translate}from"./i18n-yBVLeHdv.js";import{t as KolHeadingTag,b as KolAlertWcTag,u as KolInputCheckboxTag,v as KolInputNumberTag,d as KolButtonWcTag,j as KolPopoverButtonWcTag}from"./component-names-CkE54Ym7.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-CoPFQEiC.js";import"./common-7RW_NFNf.js";import"./i18n-CjhRejiw.js";const KolTableSettings=class{constructor(t){registerInstance(this,t),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=translate("kol-table-settings"),this.translateTableSettingsCancel=translate("kol-table-settings-cancel"),this.translateTableSettingsApply=translate("kol-table-settings-apply"),this.translateErrorAllInvisible=translate("kol-table-settings-error-all-invisible"),this._tableSettings={columns:[]}}handleTableSettingsChange(t){this.tableSettings=Object.assign(Object.assign({},t),{columns:this.sortColumnsByPosition(t.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(t){return[...t].sort(((t,e)=>t.position-e.position))}moveColumn(t,e){const s=[...this.tableSettings.columns],a=s.findIndex((e=>e.key===t)),n="up"===e?a-1:a+1,l=s[a],i=s[n],o=s.map((t=>t.key===l.key?Object.assign(Object.assign({},t),{position:i.position}):t.key===i.key?Object.assign(Object.assign({},t),{position:l.position}):t));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(t,e){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===t?Object.assign(Object.assign({},s),{visible:Boolean(e)}):s))})}handleWidthChange(t,e){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===t?Object.assign(Object.assign({},s),{width:Number(e)}):s))})}handleCancel(){var t;null===(t=this.popoverRef)||void 0===t||t.hidePopover()}handleSubmit(t){var e;t.preventDefault();this.tableSettings.columns.some((t=>t.visible))?this.host&&(this.errorMessage=null,dispatchDomEvent(this.host,KolEvent.settingsChange,this.tableSettings),null===(e=this.popoverRef)||void 0===e||e.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const t=[...this.tableSettings.columns].sort(((t,e)=>t.position-e.position));return h(KolPopoverButtonWcTag,{key:"8d4db4f7d458bd1ed87a367f6254c268fe9d160c",ref:t=>this.popoverRef=t,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},h("div",{key:"5311a11dc9beec9ebb1b9afcec74d6fc69b106ec",class:"kol-table-settings__content"},h(KolHeadingTag,{key:"623b06fab8eb938ca7a96d6c59046e35b026ac8b",_label:this.translateTableSettings,_level:0}),this.errorMessage&&h(KolAlertWcTag,{key:"299262a0842783fe746c427498cf48a462e608d7",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),h("form",{key:"70f2731f3a31e0e61f49e335f179965f96ca6dc9",onSubmit:this.handleSubmit.bind(this)},h("div",{key:"a42564c9d6603c574dfd6c83d71bb67118d6a68d",class:"kol-table-settings__columns-container"},h("div",{key:"220fcd4e67cd50e527d353b0f5618d4186068218",class:"kol-table-settings__columns"},t.map(((e,s)=>h("div",{key:e.key,class:"kol-table-settings__column"},h(KolInputCheckboxTag,{_checked:e.visible,_label:translate("kol-table-settings-show-column",{placeholders:{column:e.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(t,s)=>this.handleVisibilityChange(e.key,s)}}),h("span",null,e.label),h(KolInputNumberTag,{_hideLabel:!0,_value:e.width,_label:translate("kol-table-settings-column-width",{placeholders:{column:e.label}}),_min:1,_on:{onInput:(t,s)=>this.handleWidthChange(e.key,s)}}),h(KolButtonWcTag,{_icons:"codicon codicon-arrow-up",_label:translate("kol-table-settings-move-up",{placeholders:{column:e.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(e.key,"up")},_disabled:0===s,"data-testid":"table-settings-move-up"}),h(KolButtonWcTag,{_icons:"codicon codicon-arrow-down",_label:translate("kol-table-settings-move-down",{placeholders:{column:e.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(e.key,"down")},_disabled:s===t.length-1,"data-testid":"table-settings-move-down"})))))),h("div",{key:"ab18e657b9e5cf7e964f2107e1ceaec2ebc6cddd",class:"kol-table-settings__actions"},h(KolButtonWcTag,{key:"aedcc655384dedb3feebb28444ac7f488b672ead",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),h(KolButtonWcTag,{key:"2b6a09294353fde7d9bff9a8fcc07be76b18fee1",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return getElement(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{KolTableSettings as kol_table_settings_wc};