@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{l as KolPopoverButtonWcTag,o as KolHeadingTag,b as KolAlertWcTag,p as KolInputCheckboxTag,q 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 parseColumnWidth=e=>Number.isFinite(e)&&void 0!==e&&e>0?e:void 0,KolTableSettings=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.headerCells=[],this.editingHeaderCells=[],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._horizontalHeaderCells=[]}handleHeaderCellsChange(e){this.headerCells=e.map(e=>[...e]),this.editingHeaderCells=e.map(e=>e.map(e=>Object.assign({},e)))}componentWillLoad(){this.handleHeaderCellsChange(this._horizontalHeaderCells)}getPrimaryRow(){var e;return null!==(e=this.editingHeaderCells[this.editingHeaderCells.length-1])&&void 0!==e?e:[]}updatePrimaryRow(e){this.editingHeaderCells=this.editingHeaderCells.map((t,l,a)=>l===a.length-1?e:t)}moveColumn(e,t){const l=[...this.getPrimaryRow()],a=l.findIndex(t=>t.key===e);if(-1===a)return;let s;if("up"===t){if(0===a)return;s=a-1}else{if(a===l.length-1)return;s=a+1}const[i]=l.splice(a,1);l.splice(s,0,i),this.updatePrimaryRow(l)}handleVisibilityChange(e,t){const l=this.getPrimaryRow().map(l=>l.key===e&&!1!==l.hidable?Object.assign(Object.assign({},l),{visible:Boolean(t)}):l);this.updatePrimaryRow(l)}handleWidthChange(e,t){const l=this.getPrimaryRow().map(l=>l.key===e&&!1!==l.resizable?Object.assign(Object.assign({},l),{width:Number(t)}):l);this.updatePrimaryRow(l)}handleCancel(){var e;this.editingHeaderCells=this.headerCells.map(e=>[...e]),this.errorMessage=null,null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();if(this.getPrimaryRow().some(e=>!1!==e.visible)){if(this.host){this.errorMessage=null,this.headerCells=this.editingHeaderCells.map(e=>e.map(e=>Object.assign({},e)));const e=this.editingHeaderCells.map(e=>e.map(e=>{const t=e,{hidable:l,resizable:a,sortable:s,visible:i,width:n}=t,o=__rest(t,["hidable","resizable","sortable","visible","width"]),r=Object.assign({},o);return void 0!==i&&(r.visible=i),void 0!==l&&(r.hidable=l),void 0!==s&&(r.sortable=s),void 0!==a&&(r.resizable=a),null!=n&&(r.width=n),r}));dispatchDomEvent(this.host,KolEvent.changeHeaderCells,e),null===(t=this.popoverRef)||void 0===t||t.hidePopover()}}else this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.getPrimaryRow();return h(KolPopoverButtonWcTag,{key:"65b350799d5422b6500b3ae983f9c7f3c925f3b0",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"kolicon-settings",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},h("div",{key:"450200fa5d74f6ceb99c0ea589e12aefbfcdc23d",class:"kol-table-settings__content"},h(KolHeadingTag,{key:"8bd0456ba046beb7a819c978d32dd8e64c294be0",_label:this.translateTableSettings,_level:0}),this.errorMessage&&h(KolAlertWcTag,{key:"e0d517d57e57c8e889997e18da3fb3badd0bcebe",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),h("form",{key:"34785b3e839f8fcc59d7930c6d8bc1ca82e8d5a7",onSubmit:this.handleSubmit.bind(this)},h("div",{key:"a28b130172a530644430aa4c9f52d6afa913522a",class:"kol-table-settings__columns-container"},h("div",{key:"d18e531412556d173f9441c462bd3361f829d205",class:"kol-table-settings__columns"},e.map((t,l)=>h("div",{key:t.key,class:"kol-table-settings__column"},h(KolInputCheckboxTag,{_checked:!1!==t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,l)=>{var a;return this.handleVisibilityChange(null!==(a=t.key)&&void 0!==a?a:"",l)}}}),h("span",{class:"kol-table-settings__column-label"},t.label),h(KolInputNumberTag,{_hideLabel:!0,_value:parseColumnWidth(t.width),_label:translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,l)=>{var a;return this.handleWidthChange(null!==(a=t.key)&&void 0!==a?a:"",l)}}}),h(KolButtonWcTag,{_icons:"kolicon-chevron-up",_label:translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","up")}},_disabled:!1===t.sortable||0===l,"data-testid":"table-settings-move-up"}),h(KolButtonWcTag,{_icons:"kolicon-chevron-down",_label:translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","down")}},_disabled:!1===t.sortable||l===e.length-1,"data-testid":"table-settings-move-down"}))))),h("div",{key:"1fb081b1dfe3a3afdb1a046b5ce7576d292c0da7",class:"kol-table-settings__actions"},h(KolButtonWcTag,{key:"0b8631652bc292bf61549a64418de4f82947f97d",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),h(KolButtonWcTag,{key:"0d29c2f7f2a36370552276a9a1ec843d2518ed66",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return this}static get watchers(){return{_horizontalHeaderCells:["handleHeaderCellsChange"]}}},[256,"kol-table-settings-wc",{_horizontalHeaderCells:[16],headerCells:[32],editingHeaderCells:[32],errorMessage:[32]},void 0,{_horizontalHeaderCells:["handleHeaderCellsChange"]}]);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};