@public-ui/components/dist/components/kol-table-settings-wc.js

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{_ as __rest}from"./tslib.es6.js";import{k as KolPopoverButtonWcTag,n as KolHeadingTag,b as KolAlertWcTag,o as KolInputCheckboxTag,p as KolInputNumberTag,d as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const KolTableSettings=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),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.translateColumnNotHidable=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:l,visible:a}=e,n=__rest(e,["hidable","resizable","sortable","visible"]);return Object.assign(Object.assign({},n),{hidable:!1!==t,resizable:!1!==s,sortable:!1!==l,visible:!1!==a})})}moveColumn(e,t){const s=[...this.tableSettings.columns],l=s.findIndex(t=>t.key===e),a=s[l],n="up"===t?l-1:l+1,i=s[n];if(l<0||n<0||n>=s.length||!1===(null==a?void 0:a.sortable)||!1===(null==i?void 0:i.sortable))return;const[o]=s.splice(l,1);s.splice(n,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,dispatchDomEvent(this.host,KolEvent.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.tableSettings.columns;return h(KolPopoverButtonWcTag,{key:"77db05412c9011fe8e0e2dfc7499dbcadede5521",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},h("div",{key:"1ad57a28bceee8b4c10c8c818b4fd6f0001809c4",class:"kol-table-settings__content"},h(KolHeadingTag,{key:"d019a6cbe836283c6c2ccdf319c92090802382be",_label:this.translateTableSettings,_level:0}),this.errorMessage&&h(KolAlertWcTag,{key:"3c53e407297bd21a00bb94ac9cec1e913728f246",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),h("form",{key:"14e649882dc3c590ab1431837ca1e9223e332ebc",onSubmit:this.handleSubmit.bind(this)},h("div",{key:"3546aca5566c7148effa4ac3b6c6c6c80df499c4",class:"kol-table-settings__columns-container"},h("div",{key:"e5ba799f10556c2ff15321984bf06d26474162d1",class:"kol-table-settings__columns"},e.map((t,s)=>{var l,a;return h("div",{key:t.key,class:"kol-table-settings__column"},h(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}`}),h("span",{class:"kol-table-settings__column-label"},t.label),h(KolInputNumberTag,{_hideLabel:!0,_value:t.width,_label: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)}}),h(KolButtonWcTag,{_icons:"codicon codicon-arrow-up",_label: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===(l=e[s-1])||void 0===l?void 0:l.sortable),"data-testid":"table-settings-move-up"}),h(KolButtonWcTag,{_icons:"codicon codicon-arrow-down",_label: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"}))}))),h("div",{key:"b31183c5e2b855b21944864e0897c632c30bd55e",class:"kol-table-settings__actions"},h(KolButtonWcTag,{key:"9a741d4fe161684a31a335877ed81bd1e200848a",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),h(KolButtonWcTag,{key:"67ebec227e4a82cec363431b1b755d757974f50c",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return this}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}},[256,"kol-table-settings-wc",{_tableSettings:[16],tableSettings:[32],errorMessage:[32]},void 0,{_tableSettings:["handleTableSettingsChange"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table-settings-wc"].forEach(e=>{if("kol-table-settings-wc"===e)customElements.get(e)||customElements.define(e,KolTableSettings)})}const KolTableSettingsWc=KolTableSettings,defineCustomElement=defineCustomElement$1;export{KolTableSettingsWc,defineCustomElement};