@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
552 lines (551 loc) • 32.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
const tslib_1 = require("tslib");
const InfiniteTable_1 = require("../../../../components/InfiniteTable");
const React = tslib_1.__importStar(require("react"));
const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
const Tabs_1 = require("../../../../components/Tabs");
const AdaptableColumn_1 = require("../../../../AdaptableState/Common/AdaptableColumn");
const AdaptableContext_1 = require("../../../AdaptableContext");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const Utilities_1 = require("./Utilities");
const icons_1 = require("../../../../components/icons");
const CheckBox_1 = require("../../../../components/CheckBox");
const Helper_1 = require("../../../../Utilities/Helpers/Helper");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
const ReorderDraggable_1 = require("../../../Components/ReorderDraggable");
const AdaptableFormControlTextClear_1 = require("../../../Components/Forms/AdaptableFormControlTextClear");
const sortColumnIdsByOrder_1 = require("../../../../layout-manager/src/sortColumnIdsByOrder");
const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
const Flex_1 = require("../../../../components/Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
const PropertyOrderText = (props) => (React.createElement(Flex_1.Box, { className: "twa:font-bold twa:text-2" }, props.children));
// we want to make sure tailwind generates this class
// as for now it's not used anywhere yet
const _cls = 'twa:text-text-on-defaultbackground';
const columnTypes = {
default: {
defaultFlex: 1,
},
};
const ColumnsSectionSummary = () => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const rowHeight = 40;
const headerHeight = 40;
const ColumnIds = layout.TableColumns || layout.PivotColumns || [];
const tableHeight = headerHeight + (0, Helper_1.clamp)(rowHeight * ColumnIds.length, 100, 360);
const data = React.useMemo(() => {
return ColumnIds.map((columnId) => {
if (adaptable.api.columnApi.isPivotResultColumn(columnId) ||
adaptable.api.columnApi.isAutoRowGroupColumn(columnId) ||
adaptable.api.columnApi.isSelectionColumn(columnId)) {
return null;
}
const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout);
const header = layout.ColumnHeaders?.[columnId] ?? '';
const columnWidth = layout.ColumnSizing?.[columnId]?.Width;
const columnPinning = layout.ColumnPinning?.[columnId];
let agg = (layout.TableAggregationColumns || []).find((agg) => agg.ColumnId === columnId)?.AggFunc;
agg = typeof agg === 'object' ? agg.type : agg;
const sortIndex = (layout?.ColumnSorts ?? []).findIndex((sort) => sort.ColumnId === columnId);
const sortOrder = sortIndex != -1
? {
index: sortIndex + 1,
sort: layout.ColumnSorts[sortIndex]?.SortOrder ?? null,
}
: {};
let grouping = layout.RowGroupedColumns?.indexOf?.(columnId);
grouping = grouping != -1 ? grouping + 1 : null;
const filter = layout.ColumnFilters?.find((colFilter) => colFilter.ColumnId === columnId);
return {
columnId,
agg,
friendlyName,
header,
columnWidth,
columnPinning,
sortOrder,
grouping,
filter,
};
}).filter(Boolean);
}, [layout]);
const columns = React.useMemo(() => {
return {
name: { header: 'Name', field: 'friendlyName', minWidth: 100 },
header: { header: 'Header', field: 'header', minWidth: 120 },
colId: { header: 'ID', field: 'columnId' },
agg: { header: 'Agg', field: 'agg', minWidth: 70 },
width: { header: 'Width', field: 'columnWidth', minWidth: 70 },
pin: { header: 'Pin', field: 'columnPinning', minWidth: 80 },
sort: {
header: 'Sort',
field: 'sortOrder',
minWidth: 50,
align: 'center',
render: (params) => {
if (!params.data?.sortOrder?.sort) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(Flex_1.Flex, null,
React.createElement(icons_1.Icon, { name: params.data?.sortOrder?.sort === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
' ',
React.createElement(PropertyOrderText, null, params.data?.sortOrder?.index ?? '')));
},
},
filter: {
header: 'Filter',
field: 'filter',
align: 'center',
minWidth: 50,
render: (params) => {
if (!params.data?.filter) {
return React.createElement(React.Fragment, null);
}
return React.createElement(CheckBox_1.CheckBox, { checked: true });
},
},
group: {
header: 'Group',
minWidth: 50,
field: 'columnGroupping',
align: 'center',
render: (params) => {
if (!params.data.grouping) {
return React.createElement(React.Fragment, null);
}
return (React.createElement(Flex_1.Flex, null,
React.createElement(CheckBox_1.CheckBox, { className: "twa:m-0 twa:mr-1", checked: true }),
React.createElement(PropertyOrderText, null, params.data?.grouping)));
},
},
};
}, []);
const tableDOMProps = {
style: {
height: '100%',
minWidth: '10rem',
minHeight: tableHeight,
},
};
return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId" },
React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
};
exports.ColumnsSectionSummary = ColumnsSectionSummary;
const isColumnVisible = (options) => {
const { columnId, layout } = options;
const isRowGroupColumn = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(columnId);
const visible = (!(0, isPivotLayout_1.isPivotLayout)(layout) &&
layout.TableColumns.includes(columnId) &&
layout.ColumnVisibility?.[columnId] !== false) ||
isRowGroupColumn;
return visible;
};
const ColumnRow = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
const isRowGroupColumn = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(props.column.columnId);
const { column } = props;
const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
return (React.createElement(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
React.createElement(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
React.createElement(CheckBox_1.CheckBox, { "data-name": column.columnId, onChange: (checked) => {
props.onColumnVisibilityChange(column.columnId, checked);
}, disabled: column.hideable === false || isRowGroupColumn, onClick: (event) => {
event.stopPropagation();
}, checked: visible }),
React.createElement(Flex_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
"Column Group: ",
props.column.columnGroup.friendlyName)) : null)));
};
const ColumnsSection = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const [searchInputValue, setSearchInputValue] = React.useState('');
const [selectedColumnId, setSelectedColumnId] = React.useState(null);
let hasSelectionColumn = false;
const allColumns = adaptable.api.columnApi
.getUIAvailableColumns()
.filter((col) => {
// since the "Row Groups" section of the editor can determine a change
// which is not reflected into AG Grid until we hit finish
// so we only rely on non-generated columns, which are the same
return !col.isGeneratedRowGroupColumn;
})
// if the current Layout is a PivotLayout, then we also filter out current Pivot Result Columns
.filter((col) => !col.isGeneratedPivotResultColumn)
// also we need to filter out selection column
.filter((col) => {
const result = !col.isGeneratedSelectionColumn;
if (!result) {
hasSelectionColumn = true;
}
return result;
});
const onChange = (data) => {
if (hasSelectionColumn &&
Array.isArray(data.TableColumns) &&
!data.TableColumns.includes(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
data.TableColumns.unshift(GeneralConstants_1.AG_GRID_SELECTION_COLUMN);
}
props.onChange(data);
};
// however, changes in RowGroupedColumns done in the previous step
// are reflected into the layout, so we use the latest layout.RowGroupedColumns
// to create new columns
if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
if (layout.RowGroupDisplayType === 'single') {
allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
}
else {
[...layout.RowGroupedColumns].reverse().forEach((col) => {
const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
allColumns.unshift(groupCol);
});
}
}
if (adaptable.api.gridApi.isTreeDataGrid() &&
!allColumns.find((col) => col.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
}
const colIdToCol = allColumns.reduce((acc, col) => {
if (col) {
acc[col.columnId] = col;
}
return acc;
}, {});
const TableColumns = layout.TableColumns;
const ColumnOrderAllColumns = ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
const currentOrder = searchInputValue
? ColumnOrderAllColumns.filter((col) => {
return (0, Utilities_1.columnFilter)(col, searchInputValue);
})
: ColumnOrderAllColumns;
const currentOrderIds = currentOrder.map((col) => col.columnId);
const handleColumnsChange = (newColumns) => {
if (searchInputValue) {
// there's a search in-place
// so the current `newColumns` does not actually contain all the columns
// so we need to recompute it
const newOrder = (0, sortColumnIdsByOrder_1.sortColumnIdsByOrder)(
// given those are all the columns
ColumnOrderAllColumns.map((col) => col.columnId),
// we want to sort them to have this new order
// - this sorting will leave all ids not found in this new order untouched
newColumns.map((col) => col.columnId));
// so basically we now have the correct order, with all columns
newColumns = newOrder.map((colId) => colIdToCol[colId]);
}
const oldColumns = ColumnOrderAllColumns;
const columnIds = newColumns.map((col) => col.columnId);
if (!(0, AdaptableColumn_1.isValidOrderForColumnGroups)({ oldColumns, newColumns })) {
return;
}
const ColumnVisibility = { ...layout.ColumnVisibility };
const columnOrderSet = new Set(TableColumns);
columnIds.forEach((colId) => {
if (!columnOrderSet.has(colId)) {
ColumnVisibility[colId] = false;
}
});
onChange({
...layout,
TableColumns: columnIds,
ColumnVisibility,
});
};
const handleColumnVisibilityChange = (columnId, visible) => {
const columnIdArray = Array.isArray(columnId) ? columnId : [columnId];
const columnIdSet = new Set(columnIdArray);
const ColumnVisibility = { ...layout.ColumnVisibility };
let TableColumns = [...layout.TableColumns];
if (visible) {
columnIdArray.forEach((colId) => {
delete ColumnVisibility[colId];
});
}
else {
columnIdArray.forEach((colId) => {
ColumnVisibility[colId] = false;
});
}
const columnIds = ColumnOrderAllColumns.map((col) => col.columnId);
const idsToIndexes = new Map(columnIds.map((colId, index) => [colId, index]));
const columnOrderSet = new Set(TableColumns);
const currentColumnIdsAreIncluded = columnIdArray.every((colId) => columnOrderSet.has(colId));
if (!currentColumnIdsAreIncluded) {
const biggestIndex = Math.max(...columnIdArray.map((colId) => idsToIndexes.get(colId)));
TableColumns = columnIds.filter((colId) => {
const isCurrent = columnOrderSet.has(colId);
if (isCurrent) {
return true;
}
// include all columns past the current column order
// that reach until the index of the currently checked column
const shouldInclude = idsToIndexes.get(colId) <= biggestIndex;
if (shouldInclude) {
if (!columnIdSet.has(colId) && visible) {
// this is a column that's between the current column order limit
// and the currently checked column
// so we need to include it in order
// but make it invisible
ColumnVisibility[colId] = false;
}
}
return shouldInclude;
});
}
onChange({
...layout,
TableColumns: TableColumns,
ColumnVisibility,
});
};
const handlePinChange = (columnId, pinning) => {
onChange({
...layout,
ColumnPinning: {
...layout.ColumnPinning,
[columnId]: pinning,
},
});
};
const handleColumnNameChange = (columnId, headerName) => {
onChange({
...layout,
ColumnHeaders: {
...layout.ColumnHeaders,
[columnId]: headerName,
},
});
};
const handleColumnWidthChange = (columnId, width) => {
const ColumnSizing = { ...layout.ColumnSizing };
const colSizingForCol = { ...ColumnSizing[columnId] };
delete colSizingForCol.Flex;
colSizingForCol.Width = width;
ColumnSizing[columnId] = colSizingForCol;
onChange({
...layout,
ColumnSizing,
});
};
const handleColumnFlexChange = (columnId, flex) => {
const ColumnSizing = { ...layout.ColumnSizing };
const colSizingForCol = { ...ColumnSizing[columnId] };
delete colSizingForCol.Width;
colSizingForCol.Flex = flex;
ColumnSizing[columnId] = colSizingForCol;
onChange({
...layout,
ColumnSizing,
});
};
const handleColumnMinWidthChange = (columnId, minWidth) => {
const ColumnSizing = { ...layout.ColumnSizing };
const colSizingForCol = { ...ColumnSizing[columnId] };
colSizingForCol.MinWidth = minWidth;
ColumnSizing[columnId] = colSizingForCol;
onChange({
...layout,
ColumnSizing,
});
};
const handleColumnMaxWidthChange = (columnId, maxWidth) => {
const ColumnSizing = { ...layout.ColumnSizing };
const colSizingForCol = { ...ColumnSizing[columnId] };
colSizingForCol.MaxWidth = maxWidth;
ColumnSizing[columnId] = colSizingForCol;
onChange({
...layout,
ColumnSizing,
});
};
const visibleIds = layout.TableColumns.filter((colId) => {
return (layout.ColumnVisibility?.[colId] !== false &&
adaptable.api.columnApi.isSelectionColumn(colId) === false &&
!adaptable.api.columnApi.internalApi.isColumnUIHidden(colId));
});
const currentlyDisplayedColumnIds = searchInputValue
? currentOrder
.filter((col) => currentOrderIds.includes(col.columnId))
.map((col) => col.columnId)
: currentOrder.map((col) => col.columnId);
const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
return (React.createElement(Tabs_1.Tabs, null,
React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
React.createElement(Tabs_1.Tabs.Content, { className: "twa:overflow-hidden" },
React.createElement(Flex_1.Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2 twa:focus:outline-none", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
if (event.key === 'ArrowDown') {
event.preventDefault();
event.stopPropagation();
const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
if (index === -1) {
return;
}
const nextColumnId = currentlyDisplayedColumnIds[index + 1];
const nextColumn = colIdToCol[nextColumnId];
if (nextColumn) {
setSelectedColumnId(nextColumn.columnId);
}
}
if (event.key === 'ArrowUp') {
event.preventDefault();
event.stopPropagation();
const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
if (index === -1) {
return;
}
const previousColumnId = currentlyDisplayedColumnIds[index - 1];
const previousColumn = colIdToCol[previousColumnId];
if (previousColumn) {
setSelectedColumnId(previousColumn.columnId);
}
}
if (event.key === ' ') {
event.preventDefault();
event.stopPropagation();
const selectedColumn = colIdToCol[selectedColumnId];
if (!selectedColumn) {
return;
}
const visible = isColumnVisible({ columnId: selectedColumnId, layout });
handleColumnVisibilityChange(selectedColumnId, !visible);
}
} },
React.createElement(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2" },
React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
React.createElement(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
? true
: visibleIdsCurrentlyDisplayed.length
? null
: false
: false, onChange: (checked) => {
handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
} }, "Select All")),
React.createElement(ReorderDraggable_1.ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
return option.moveable;
}, optionClassName: (option) => {
const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
if (selectedColumnId !== option.columnId) {
return baseCls;
}
return (0, clsx_1.default)(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
}, order: currentOrder, onOptionClick: (option, event) => {
if (event.ctrlKey || option.columnId === selectedColumnId) {
setSelectedColumnId(null);
}
else {
setSelectedColumnId(option.columnId);
}
}, renderOption: (option) => {
return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
}, onChange: handleColumnsChange })),
currentOrderIds.length ? (React.createElement(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
? colIdToCol[selectedColumnId] ?? null
: null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null))));
};
exports.ColumnsSection = ColumnsSection;
const hr = React.createElement("hr", { className: "twa:my-2 twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" });
const ColumnPropertiesEditor = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
if (!props.column) {
return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'twa:border-inputborder twa:grid twa:place-items-center twa:border-dashed twa:border-2') },
React.createElement(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center" },
React.createElement(Flex_1.Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon" },
React.createElement(icons_1.NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } })),
React.createElement(Flex_1.Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title" }, "No Column Selected"),
React.createElement(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description" }, "Select a Column to view and edit its properties"))));
}
const { column } = props;
const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
const columnFlex = props.layout.ColumnSizing?.[column.columnId]?.Flex;
const minWidth = props.layout.ColumnSizing?.[column.columnId]?.MinWidth;
const maxWidth = props.layout.ColumnSizing?.[column.columnId]?.MaxWidth;
const resizable = column.resizable !== false;
// column pinning
const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md twa:p-4') },
React.createElement(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
"Column Settings: ",
column.friendlyName),
React.createElement(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
"Column ID:",
' ',
React.createElement(Flex_1.Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard" }, column.columnId)),
props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
"Column Group: ",
props.column.columnGroup.friendlyName)) : null,
hr,
React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3" },
React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1" },
"Header",
React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
props.onColumnNameChange(props.column.columnId, event.target.value);
}, value: customHeader })),
React.createElement(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
React.createElement(Flex_1.Box, null, "Width:"),
" ",
React.createElement(Flex_1.Box, null, "Flex:"),
React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
let value = parseFloat(event.target.value);
value = typeof value === 'number' && !isNaN(value) ? value : void 0;
props.onColumnWidthChange(props.column.columnId, value);
}, value: columnWidth ?? '' }),
React.createElement(Input_1.default, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
let value = parseFloat(event.target.value);
value = typeof value === 'number' && !isNaN(value) ? value : void 0;
props.onColumnFlexChange(props.column.columnId, value);
}, value: columnFlex ?? '' }),
React.createElement(Flex_1.Box, null, "Min Width:"),
React.createElement(Flex_1.Box, null, "Max Width:"),
React.createElement(Input_1.default, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
let value = parseFloat(event.target.value);
value = typeof value === 'number' && !isNaN(value) ? value : void 0;
props.onColumnMinWidthChange(props.column.columnId, value);
}, value: minWidth ?? '' }),
React.createElement(Input_1.default, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
let value = parseFloat(event.target.value);
value = typeof value === 'number' && !isNaN(value) ? value : void 0;
props.onColumnMaxWidthChange(props.column.columnId, value);
}, value: maxWidth ?? '' })),
"Pinning:",
React.createElement(Radio_1.RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
} },
React.createElement(Radio_1.default, { value: "left" }, "Left"),
React.createElement(Radio_1.default, { value: "None" }, "None"),
React.createElement(Radio_1.default, { value: "right" }, "Right"))),
React.createElement(Flex_1.Box, { className: "twa:mt-5" }),
hr,
React.createElement(Flex_1.Box, null,
React.createElement(Flex_1.Box, { className: "twa:my-3" }, "Column Attributes"),
React.createElement(Flex_1.Box, { className: (0, clsx_1.default)({
'twa:bg-primarylight': 'the bg color',
'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
'twa:p-5 twa:rounded-standard': true,
}) }, [
{ label: 'Aggregatable', checked: props.column.aggregatable },
{ label: 'Filterable', checked: props.column.filterable },
{ label: 'Groupable', checked: props.column.groupable },
{ label: 'Moveable', checked: props.column.moveable },
{ label: 'Pivotable', checked: props.column.pivotable },
{ label: 'Sortable', checked: props.column.sortable },
].map(({ label, checked }) => (React.createElement(Flex_1.Flex, { alignItems: "center", className: (0, clsx_1.default)({
'twa:rounded-standard twa:gap-2': true,
}) },
React.createElement(Flex_1.Box, { className: "twa:size-5" }, checked ? (React.createElement(icons_1.Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(icons_1.Icon, { name: "close", className: "twa:text-error" }))),
label)))))));
};