@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 5.79 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
"use strict";var index=require("./index-C4Loo2IH.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),componentNames=require("./component-names-CuI-0Pbo.js"),i18n=require("./i18n-DNWGj4j8.js"),events=require("./events-cX8h6I3p.js");require("./common-Cd2qH809.js"),require("./i18n-BnIFsVIa.js");const KolTableSettings=class{constructor(e){index.registerInstance(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=i18n.translate("kol-table-settings"),this.translateTableSettingsCancel=i18n.translate("kol-table-settings-cancel"),this.translateTableSettingsApply=i18n.translate("kol-table-settings-apply"),this.translateErrorAllInvisible=i18n.translate("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=i18n.translate("kol-table-settings-column-not-hidable"),this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.normalizeColumns(Array.isArray(e.columns)?e.columns:[])})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}normalizeColumns(e){return e.map(e=>{var{hidable:t,resizable:s,sortable:n,visible:a}=e,l=tslib_es6.__rest(e,["hidable","resizable","sortable","visible"]);return Object.assign(Object.assign({},l),{hidable:!1!==t,resizable:!1!==s,sortable:!1!==n,visible:!1!==a})})}moveColumn(e,t){const s=[...this.tableSettings.columns],n=s.findIndex(t=>t.key===e),a=s[n],l="up"===t?n-1:n+1,i=s[l];if(n<0||l<0||l>=s.length||!1===(null==a?void 0:a.sortable)||!1===(null==i?void 0:i.sortable))return;const[o]=s.splice(n,1);s.splice(l,0,o),this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:s})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e&&!1!==s.hidable?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s)})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e?!1===s.resizable?s:Object.assign(Object.assign({},s),{width:Number(t)}):s)})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();this.tableSettings.columns.some(e=>e.visible)?this.host&&(this.errorMessage=null,events.dispatchDomEvent(this.host,events.KolEvent.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.tableSettings.columns;return index.h(componentNames.KolPopoverButtonWcTag,{key:"77db05412c9011fe8e0e2dfc7499dbcadede5521",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},index.h("div",{key:"1ad57a28bceee8b4c10c8c818b4fd6f0001809c4",class:"kol-table-settings__content"},index.h(componentNames.KolHeadingTag,{key:"d019a6cbe836283c6c2ccdf319c92090802382be",_label:this.translateTableSettings,_level:0}),this.errorMessage&&index.h(componentNames.KolAlertWcTag,{key:"3c53e407297bd21a00bb94ac9cec1e913728f246",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),index.h("form",{key:"14e649882dc3c590ab1431837ca1e9223e332ebc",onSubmit:this.handleSubmit.bind(this)},index.h("div",{key:"3546aca5566c7148effa4ac3b6c6c6c80df499c4",class:"kol-table-settings__columns-container"},index.h("div",{key:"e5ba799f10556c2ff15321984bf06d26474162d1",class:"kol-table-settings__columns"},e.map((t,s)=>{var n,a;return index.h("div",{key:t.key,class:"kol-table-settings__column"},index.h(componentNames.KolInputCheckboxTag,{_checked:t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,s)=>this.handleVisibilityChange(t.key,s)},"data-testid":`table-settings-visible-${t.key}`}),index.h("span",{class:"kol-table-settings__column-label"},t.label),index.h(componentNames.KolInputNumberTag,{_hideLabel:!0,_value:t.width,_label:i18n.translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,s)=>this.handleWidthChange(t.key,s)}}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-up",_label:i18n.translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"up")},_disabled:0===s||!1===t.sortable||!1===(null===(n=e[s-1])||void 0===n?void 0:n.sortable),"data-testid":"table-settings-move-up"}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-down",_label:i18n.translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"down")},_disabled:s===e.length-1||!1===t.sortable||!1===(null===(a=e[s+1])||void 0===a?void 0:a.sortable),"data-testid":"table-settings-move-down"}))}))),index.h("div",{key:"b31183c5e2b855b21944864e0897c632c30bd55e",class:"kol-table-settings__actions"},index.h(componentNames.KolButtonWcTag,{key:"9a741d4fe161684a31a335877ed81bd1e200848a",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),index.h(componentNames.KolButtonWcTag,{key:"67ebec227e4a82cec363431b1b755d757974f50c",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return index.getElement(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};exports.kol_table_settings_wc=KolTableSettings;