UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

4 lines 5.25 kB
/*! * KoliBri - The accessible HTML-Standard */ import{r as e,h as t,g as s}from"./index-Biu4X4Y_.js";import{_ as l}from"./tslib.es6-CxX45GIN.js";import{t as i,b as a,u as o,v as n,d as c,j as b}from"./component-names-C3fyby67.js";import{t as d}from"./i18n-LBpyQ66X.js";import{d as r,K as h}from"./events-9-skLO0f.js";import"./common-Dd0zJQbD.js";import"./i18n-CfLoIZ8T.js";const u=class{constructor(t){e(this,t),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=d("kol-table-settings"),this.translateTableSettingsCancel=d("kol-table-settings-cancel"),this.translateTableSettingsApply=d("kol-table-settings-apply"),this.translateErrorAllInvisible=d("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=d("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:a,visible:i}=e,n=l(e,["hidable","resizable","sortable","visible"]);return Object.assign(Object.assign({},n),{hidable:!1!==t,resizable:!1!==s,sortable:!1!==a,visible:!1!==i})})}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex(t=>t.key===e),l=s[a],i="up"===t?a-1:a+1,n=s[i];if(a<0||i<0||i>=s.length||!1===(null==l?void 0:l.sortable)||!1===(null==n?void 0:n.sortable))return;const[o]=s.splice(a,1);s.splice(i,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();const s=this.tableSettings.columns.some(e=>e.visible);s?this.host&&(this.errorMessage=null,r(this.host,h.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.tableSettings.columns;return t(b,{key:"77db05412c9011fe8e0e2dfc7499dbcadede5521",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},t("div",{key:"1ad57a28bceee8b4c10c8c818b4fd6f0001809c4",class:"kol-table-settings__content"},t(i,{key:"d019a6cbe836283c6c2ccdf319c92090802382be",_label:this.translateTableSettings,_level:0}),this.errorMessage&&t(a,{key:"3c53e407297bd21a00bb94ac9cec1e913728f246",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),t("form",{key:"14e649882dc3c590ab1431837ca1e9223e332ebc",onSubmit:this.handleSubmit.bind(this)},t("div",{key:"3546aca5566c7148effa4ac3b6c6c6c80df499c4",class:"kol-table-settings__columns-container"},t("div",{key:"e5ba799f10556c2ff15321984bf06d26474162d1",class:"kol-table-settings__columns"},e.map((s,a)=>{var l,i;return t("div",{key:s.key,class:"kol-table-settings__column"},t(o,{_checked:s.visible,_label:`${s.label}${!1===s.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===s.hidable,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)},"data-testid":`table-settings-visible-${s.key}`}),t("span",{class:"kol-table-settings__column-label"},s.label),t(n,{_hideLabel:!0,_value:s.width,_label:d("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_disabled:!1===s.resizable,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),t(c,{_icons:"codicon codicon-arrow-up",_label:d("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===a||!1===s.sortable||!1===(null===(l=e[a-1])||void 0===l?void 0:l.sortable),"data-testid":"table-settings-move-up"}),t(c,{_icons:"codicon codicon-arrow-down",_label:d("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:a===e.length-1||!1===s.sortable||!1===(null===(i=e[a+1])||void 0===i?void 0:i.sortable),"data-testid":"table-settings-move-down"}))}))),t("div",{key:"b31183c5e2b855b21944864e0897c632c30bd55e",class:"kol-table-settings__actions"},t(c,{key:"9a741d4fe161684a31a335877ed81bd1e200848a",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),t(c,{key:"67ebec227e4a82cec363431b1b755d757974f50c",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{u as kol_table_settings_wc};