@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
120 lines (116 loc) • 8.56 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { r as registerInstance, h, g as getElement } from './index-BQlHOxik.js';
import { a as __rest } from './tslib.es6-QNbPBOk5.js';
import { p as KolHeadingTag, a as KolAlertWcTag, q as KolInputCheckboxTag, r as KolInputNumberTag, b as KolButtonWcTag, h as KolPopoverButtonWcTag } from './component-names-Dy77vq43.js';
import { t as translate } from './i18n-Br16IAnY.js';
import { d as dispatchDomEvent, K as KolEvent } from './events-VVvk1win.js';
import './common-Cx_AGO_M.js';
import './i18n-B2d_exHc.js';
const parseColumnWidth = (width) => {
return Number.isFinite(width) && width !== undefined && width > 0 ? width : undefined;
};
const KolTableSettings = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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(newValue) {
this.headerCells = newValue.map((row) => [...row]);
this.editingHeaderCells = newValue.map((row) => row.map((cell) => (Object.assign({}, cell))));
}
componentWillLoad() {
this.handleHeaderCellsChange(this._horizontalHeaderCells);
}
getPrimaryRow() {
var _a;
return (_a = this.editingHeaderCells[this.editingHeaderCells.length - 1]) !== null && _a !== void 0 ? _a : [];
}
updatePrimaryRow(newRow) {
this.editingHeaderCells = this.editingHeaderCells.map((row, index, arr) => (index === arr.length - 1 ? newRow : row));
}
moveColumn(columnId, direction) {
const row = [...this.getPrimaryRow()];
const sourceIndex = row.findIndex((col) => col.key === columnId);
if (sourceIndex === -1)
return;
let targetIndex;
if (direction === 'up') {
if (sourceIndex === 0)
return;
targetIndex = sourceIndex - 1;
}
else {
if (sourceIndex === row.length - 1)
return;
targetIndex = sourceIndex + 1;
}
const [source] = row.splice(sourceIndex, 1);
row.splice(targetIndex, 0, source);
this.updatePrimaryRow(row);
}
handleVisibilityChange(key, visible) {
const row = this.getPrimaryRow().map((col) => (col.key === key && col.hidable !== false ? Object.assign(Object.assign({}, col), { visible: Boolean(visible) }) : col));
this.updatePrimaryRow(row);
}
handleWidthChange(key, width) {
const row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? Object.assign(Object.assign({}, col), { width: Number(width) }) : col));
this.updatePrimaryRow(row);
}
handleCancel() {
var _a;
this.editingHeaderCells = this.headerCells.map((row) => [...row]);
this.errorMessage = null;
void ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
}
handleSubmit(event) {
var _a;
event.preventDefault();
const primaryRow = this.getPrimaryRow();
const hasVisibleColumn = primaryRow.some((column) => column.visible !== false);
if (!hasVisibleColumn) {
this.errorMessage = this.translateErrorAllInvisible;
return;
}
else if (this.host) {
this.errorMessage = null;
this.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => (Object.assign({}, cell))));
const sanitizedHeaderCells = this.editingHeaderCells.map((row) => row.map((column) => {
const _a = column, { hidable, resizable, sortable, visible, width } = _a, rest = __rest(_a, ["hidable", "resizable", "sortable", "visible", "width"]);
const cell = Object.assign({}, rest);
if (visible !== undefined)
cell.visible = visible;
if (hidable !== undefined)
cell.hidable = hidable;
if (sortable !== undefined)
cell.sortable = sortable;
if (resizable !== undefined)
cell.resizable = resizable;
if (width !== undefined && width !== null)
cell.width = width;
return cell;
}));
dispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);
void ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
}
}
render() {
const columns = this.getPrimaryRow();
return (h(KolPopoverButtonWcTag, { key: '47831336493b2b1455a9fb3033a7cfd2c0326bc8', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, h("div", { key: '211428e2280c4277f22457101db760f291ea3b3c', class: "kol-table-settings__content" }, h(KolHeadingTag, { key: '1944bb47d22317f1957fafe9838dcca62f677040', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && h(KolAlertWcTag, { key: '1bf58753eee563a299905c0438e406dd69fbba1a', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), h("form", { key: 'f0789d72f4f2a784a2d5171f7b29633c367b5878', onSubmit: this.handleSubmit.bind(this) }, h("div", { key: 'aa906b2c0d984c0cf4cdd3a27df0754cf36485b0', class: "kol-table-settings__columns-container" }, h("div", { key: 'edb6a15875d74f7828c8fdb8a271c4cf65a728c8', class: "kol-table-settings__columns" }, columns.map((column, index) => (h("div", { key: column.key, class: "kol-table-settings__column" }, h(KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h("span", { class: "kol-table-settings__column-label" }, column.label), h(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), h(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" })))))), h("div", { key: '95e16a238529a4cc22351c50153f0fd105321dd5', class: "kol-table-settings__actions" }, h(KolButtonWcTag, { key: 'b67cae11ce5ee0d1d3ad3cfe09a6bcbd273d99c9', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), h(KolButtonWcTag, { key: '3b119117b1303290c78297c981738696042c5fa4', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
}
get host() { return getElement(this); }
static get watchers() { return {
"_horizontalHeaderCells": ["handleHeaderCellsChange"]
}; }
};
export { KolTableSettings as kol_table_settings_wc };
//# sourceMappingURL=kol-table-settings-wc.entry.js.map