@finos/legend-data-cube
Version:
284 lines • 45.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
import { observer } from 'mobx-react-lite';
import { FormBadge_Advanced, FormCheckbox, FormColorPickerButton, FormDropdownMenu, FormDropdownMenuItem, FormDropdownMenuItemSeparator, FormDropdownMenuTrigger, FormNumberInput, FormTextInput, FormDocumentation, FormButton, } from '../../core/DataCubeFormUtils.js';
import { DataCubeQueryClientSideAggregateOperator, DataCubeColumnDataType, DataCubeColumnKind, DataCubeColumnPinPlacement, DataCubeFont, DataCubeFontCase, DataCubeFontFormatUnderlineVariant, DataCubeFontTextAlignment, DataCubeNumberScale, DEFAULT_COLUMN_MAX_WIDTH, DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_COLUMN_WIDTH, DEFAULT_URL_LABEL_QUERY_PARAM, EMPTY_VALUE_PLACEHOLDER, } from '../../../stores/core/DataCubeQueryEngine.js';
import { DataCubeDocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
import { _findCol, _sortByColName, } from '../../../stores/core/model/DataCubeColumn.js';
export const DataCubeEditorColumnPropertiesPanel = observer((props) => {
const { view } = props;
const editor = view.editor;
const panel = editor.columnProperties;
const gridConfiguration = view.editor.generalProperties.configuration;
const selectedColumn = panel.selectedColumn;
const [openColumnDropdown, closeColumnDropdown, columnDropdownProps, columnDropdownPropsOpen,] = useDropdownMenu();
const [openKindDropdown, closeKindDropdown, kindDropdownProps, kindDropdownPropsOpen,] = useDropdownMenu();
const [openAggregationOperationDropdown, closeAggregationOperationDropdown, aggregationOperationDropdownProps, aggregationOperationDropdownPropsOpen,] = useDropdownMenu();
const [openNumberScaleDropdown, closeNumberScaleDropdown, numberScaleDropdownProps, numberScaleDropdownPropsOpen,] = useDropdownMenu();
const [openColumnPinDropdown, closeColumnPinDropdown, columnPinDropdownProps, columnPinDropdownPropsOpen,] = useDropdownMenu();
const [openFontFamilyDropdown, closeFontFamilyDropdown, fontFamilyDropdownProps, fontFamilyDropdownPropsOpen,] = useDropdownMenu();
const [openFontSizeDropdown, closeFontSizeDropdown, openFontSizeDropdownProps, openFontSizeDropdownPropsOpen,] = useDropdownMenu();
const [openFontFormatUnderlineVariantDropdown, closeFontFormatUnderlineVariantDropdown, fontFormatUnderlineVariantDropdownProps,] = useDropdownMenu();
const [openFontCaseDropdown, closeFontCaseDropdown, fontCaseDropdownProps] = useDropdownMenu();
return (_jsxs("div", { className: "h-full w-full select-none p-2", children: [_jsxs("div", { className: "flex h-6 justify-between", children: [_jsxs("div", { className: "flex h-full", children: [_jsxs("div", { className: "relative flex h-6 items-center text-xl font-medium", children: [_jsx(DataCubeIcon.TableColumn, {}), _jsx(DataCubeIcon.TableColumnOptions__Settings, { className: "absolute bottom-1 right-0 bg-white text-xs" })] }), _jsx("div", { className: "ml-1 flex h-6 items-center text-xl font-medium", children: "Column Properties" })] }), _jsxs("div", { className: "flex h-full items-center pr-2", children: [_jsx(FormCheckbox, { label: "Show advanced settings?", checked: panel.showAdvancedSettings, onChange: () => panel.setShowAdvancedSettings(!panel.showAdvancedSettings) }), _jsx(FormBadge_Advanced, {})] })] }), _jsx("div", { className: "flex h-[calc(100%_-_24px)] w-full", children: _jsxs("div", { className: "h-full w-full py-2", children: [_jsxs("div", { className: "flex h-6 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Choose Column:" }), _jsx(FormDropdownMenuTrigger, { className: "w-80", onClick: openColumnDropdown, open: columnDropdownPropsOpen, children: _jsxs("div", { className: "flex h-full w-full items-center", children: [_jsx("div", { className: "overflow-hidden overflow-ellipsis whitespace-nowrap", children: selectedColumn?.name ?? EMPTY_VALUE_PLACEHOLDER }), selectedColumn && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600", children: selectedColumn.dataType }), Boolean(_findCol(editor.leafExtendColumns, selectedColumn.name)) && (_jsx("div", { className: "mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600", children: `Extended (Leaf Level)` })), Boolean(_findCol(editor.groupExtendColumns, selectedColumn.name)) && (_jsx("div", { className: "mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600", children: `Extended (Group Level)` }))] }))] }) }), _jsx(FormDropdownMenu, { className: "w-80", ...columnDropdownProps, children: panel.columns.toSorted(_sortByColName).map((column) => (_jsxs(FormDropdownMenuItem, { onClick: () => {
panel.setSelectedColumnName(column.name);
closeColumnDropdown();
}, autoFocus: column.name === selectedColumn?.name, children: [_jsx("div", { className: "overflow-hidden overflow-ellipsis whitespace-nowrap", children: column.name }), _jsx("div", { className: "ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600", children: column.dataType }), Boolean(_findCol(editor.leafExtendColumns, column.name)) && (_jsx("div", { className: "mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600", children: `Extended (Leaf Level)` })), Boolean(_findCol(editor.groupExtendColumns, column.name)) && (_jsx("div", { className: "mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600", children: `Extended (Group Level)` }))] }, column.name))) }), panel.showAdvancedSettings && selectedColumn && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mx-2 h-[1px] w-4 flex-shrink-0 bg-neutral-400" }), _jsxs("div", { className: "flex h-6 items-center", children: [_jsxs("div", { className: "flex h-full flex-shrink-0 items-center text-sm", children: ["Column Kind:", _jsx(FormDocumentation, { className: "ml-1", documentationKey: DataCubeDocumentationKey.COLUMN_CONFIGURATION_KIND })] }), _jsx(FormDropdownMenuTrigger, { className: "ml-1.5 w-20", onClick: openKindDropdown, open: kindDropdownPropsOpen,
// disallow changing the column kind if the column is being used as pivot column
disabled: Boolean(_findCol(editor.verticalPivots.selector.selectedColumns, selectedColumn.name) ??
_findCol(editor.horizontalPivots.selector.selectedColumns, selectedColumn.name)), title: Boolean(_findCol(editor.verticalPivots.selector.selectedColumns, selectedColumn.name) ??
_findCol(editor.horizontalPivots.selector.selectedColumns, selectedColumn.name))
? 'Column kind cannot be changed while the column is used in pivot'
: undefined, children: selectedColumn.kind }), _jsx(FormDropdownMenu, { className: "w-20", ...kindDropdownProps, children: [
DataCubeColumnKind.DIMENSION,
DataCubeColumnKind.MEASURE,
].map((kind) => (_jsx(FormDropdownMenuItem, { onClick: () => {
if (kind !== selectedColumn.kind) {
selectedColumn.setKind(kind);
selectedColumn.setExcludedFromPivot(kind === DataCubeColumnKind.DIMENSION);
selectedColumn.setPivotStatisticColumnFunction(kind === DataCubeColumnKind.DIMENSION
? undefined
: DataCubeQueryClientSideAggregateOperator.SUM);
}
closeKindDropdown();
}, autoFocus: kind === selectedColumn.kind, children: kind }, kind))) }), _jsx(FormBadge_Advanced, {})] })] }))] }), _jsx("div", { className: "mb-2 ml-2 mt-3 h-[1px] w-[calc(100%_-_16px)] bg-neutral-200" }), selectedColumn && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Display Name:" }), _jsx(FormTextInput, { className: "w-80", value: selectedColumn.displayName ?? '', onChange: (event) => {
const value = event.target.value;
selectedColumn.setDisplayName(value !== '' ? value : undefined);
} })] }), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Aggregation:" }), _jsx(FormDropdownMenuTrigger, { className: "w-32", onClick: openAggregationOperationDropdown, disabled: selectedColumn.kind === DataCubeColumnKind.DIMENSION, open: aggregationOperationDropdownPropsOpen, children: selectedColumn.aggregateOperation.operator }), _jsx(FormDropdownMenu, { className: "w-32", ...aggregationOperationDropdownProps, children: view.engine.aggregateOperations
.filter((op) => op.isCompatibleWithColumn(selectedColumn))
.map((op) => (_jsx(FormDropdownMenuItem, { onClick: () => {
if (op !== selectedColumn.aggregateOperation) {
selectedColumn.setAggregateOperation(op);
selectedColumn.setAggregationParameters(op.generateDefaultParameterValues(selectedColumn));
}
closeAggregationOperationDropdown();
}, autoFocus: op === selectedColumn.aggregateOperation, children: op.label }, op.operator))) }), _jsx(FormCheckbox, { className: "ml-3", label: "Exclude from horizontal pivot", checked: selectedColumn.excludedFromPivot, onChange: () => selectedColumn.setExcludedFromPivot(!selectedColumn.excludedFromPivot), disabled: selectedColumn.kind === DataCubeColumnKind.DIMENSION })] }), selectedColumn.dataType === DataCubeColumnDataType.NUMBER && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Number Format:" }), _jsx(FormNumberInput, { className: "w-16 text-sm", min: 0, step: 1, value: selectedColumn.decimals ?? 0, setValue: (value) => {
selectedColumn.setDecimals(value);
} }), _jsx("div", { className: "ml-1 flex-shrink-0 text-sm", children: "decimal places" }), _jsx(FormCheckbox, { className: "ml-3", label: "Display commas", checked: selectedColumn.displayCommas, onChange: () => selectedColumn.setDisplayCommas(!selectedColumn.displayCommas) }), _jsx(FormCheckbox, { className: "ml-3", label: "Negative number in parens", checked: selectedColumn.negativeNumberInParens, onChange: () => selectedColumn.setNegativeNumberInParens(!selectedColumn.negativeNumberInParens) })] }), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm" }), _jsx("div", { className: "mr-1 flex h-full flex-shrink-0 items-center text-sm", children: "Scale:" }), _jsx(FormDropdownMenuTrigger, { className: "w-32", onClick: openNumberScaleDropdown, open: numberScaleDropdownPropsOpen, showAsPlaceholder: selectedColumn.numberScale === undefined, children: selectedColumn.numberScale ?? EMPTY_VALUE_PLACEHOLDER }), _jsx(FormDropdownMenu, { className: "w-32", ...numberScaleDropdownProps, children: [
undefined,
DataCubeNumberScale.PERCENT,
DataCubeNumberScale.BASIS_POINT,
DataCubeNumberScale.THOUSANDS,
DataCubeNumberScale.MILLIONS,
DataCubeNumberScale.BILLIONS,
DataCubeNumberScale.TRILLIONS,
DataCubeNumberScale.AUTO,
].map((scale) => (_jsx(FormDropdownMenuItem, { onClick: () => {
selectedColumn.setNumberScale(scale);
closeNumberScaleDropdown();
}, autoFocus: scale === selectedColumn.numberScale, children: scale ?? EMPTY_VALUE_PLACEHOLDER }, scale ?? ''))) }), _jsxs("div", { className: "ml-3 mr-1 flex h-full flex-shrink-0 items-center text-sm", children: ["Unit:", _jsx(FormDocumentation, { className: "ml-1", documentationKey: DataCubeDocumentationKey.COLUMN_CONFIGURATION_UNIT })] }), _jsx(FormTextInput, { className: "w-16", value: selectedColumn.unit ?? '', onChange: (event) => {
const value = event.target.value.trim();
selectedColumn.setUnit(value.trim() !== '' ? value : undefined);
}, placeholder: EMPTY_VALUE_PLACEHOLDER })] })] })), selectedColumn.dataType === DataCubeColumnDataType.TEXT && (_jsx(_Fragment, { children: _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsxs("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: ["Dislay as Link?", _jsx(FormDocumentation, { className: "ml-1", documentationKey: DataCubeDocumentationKey.COLUMN_CONFIGURATION_DISPLAY_AS_LINK })] }), _jsx(FormCheckbox, { checked: selectedColumn.displayAsLink, onChange: () => selectedColumn.setDisplayAsLink(!selectedColumn.displayAsLink) }), _jsx("div", { className: "ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" }), _jsx("div", { className: "ml-2 mr-1.5 flex h-full flex-shrink-0 items-center text-sm", children: "Use parameter in link as label:" }), _jsx(FormTextInput, { className: "w-48", placeholder: DEFAULT_URL_LABEL_QUERY_PARAM, value: selectedColumn.linkLabelParameter ?? '', onChange: (event) => {
const value = event.target.value.trim();
selectedColumn.setLinkLabelParameter(value !== '' ? value : undefined);
} })] }) })), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsxs("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: ["Missing Value Format:", _jsx(FormDocumentation, { className: "ml-1", documentationKey: DataCubeDocumentationKey.COLUMN_CONFIGURATION_MISSING_VALUE_FORMAT })] }), _jsx(FormTextInput, { className: "w-16", value: selectedColumn.missingValueDisplayText ?? '', onChange: (event) => {
const value = event.target.value;
selectedColumn.setMissingValueDisplayText(value !== '' ? value : undefined);
}, placeholder: EMPTY_VALUE_PLACEHOLDER })] }), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Visibility:" }), _jsx(FormCheckbox, { label: "Blur content", checked: selectedColumn.blur, onChange: () => selectedColumn.setBlur(!selectedColumn.blur), disabled: selectedColumn.hideFromView }), _jsx(FormCheckbox, { className: "ml-3", label: "Hide from view", checked: selectedColumn.hideFromView, onChange: () => selectedColumn.setHideFromView(!selectedColumn.hideFromView) })] }), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Pin:" }), _jsx(FormDropdownMenuTrigger, { className: "w-16", onClick: openColumnPinDropdown, open: columnPinDropdownPropsOpen, showAsPlaceholder: selectedColumn.pinned === undefined, children: selectedColumn.pinned ?? EMPTY_VALUE_PLACEHOLDER }), _jsx(FormDropdownMenu, { className: "w-16", ...columnPinDropdownProps, children: [
undefined,
DataCubeColumnPinPlacement.LEFT,
DataCubeColumnPinPlacement.RIGHT,
].map((placement) => (_jsx(FormDropdownMenuItem, { onClick: () => {
selectedColumn.setPinned(placement);
closeColumnPinDropdown();
}, autoFocus: placement === selectedColumn.pinned, children: placement ?? EMPTY_VALUE_PLACEHOLDER }, placement ?? ''))) })] }), _jsxs("div", { className: "mt-1.5 flex h-6 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Width:" }), _jsx(FormCheckbox, { label: "(Any)", checked: selectedColumn.fixedWidth === undefined &&
selectedColumn.minWidth === undefined &&
selectedColumn.maxWidth === undefined, onChange: () => {
if (selectedColumn.fixedWidth === undefined &&
selectedColumn.minWidth === undefined &&
selectedColumn.maxWidth === undefined) {
selectedColumn.setFixedWidth(DEFAULT_COLUMN_WIDTH);
selectedColumn.setMinWidth(undefined);
selectedColumn.setMaxWidth(undefined);
}
else {
selectedColumn.setFixedWidth(undefined);
selectedColumn.setMinWidth(undefined);
selectedColumn.setMaxWidth(undefined);
}
} }), _jsx(FormCheckbox, { className: "ml-3", label: "Fixed", checked: selectedColumn.fixedWidth !== undefined, onChange: () => {
selectedColumn.setFixedWidth(selectedColumn.fixedWidth !== undefined
? undefined
: DEFAULT_COLUMN_WIDTH);
selectedColumn.setMinWidth(undefined);
selectedColumn.setMaxWidth(undefined);
} }), _jsx("div", { className: "ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" }), _jsx(FormNumberInput, { className: "ml-1 w-16 text-sm", min: 0, step: 50, defaultValue: undefined, isValid: (value) => value !== undefined && value > 0, value: selectedColumn.fixedWidth, setValue: (value) => {
selectedColumn.setFixedWidth(value);
}, disabled: selectedColumn.minWidth !== undefined ||
selectedColumn.maxWidth !== undefined }), _jsx(FormCheckbox, { className: "ml-3", label: "In range", checked: selectedColumn.minWidth !== undefined ||
selectedColumn.maxWidth !== undefined, onChange: () => {
if (selectedColumn.minWidth === undefined &&
selectedColumn.maxWidth === undefined) {
selectedColumn.setMinWidth(DEFAULT_COLUMN_MIN_WIDTH);
selectedColumn.setMaxWidth(DEFAULT_COLUMN_MAX_WIDTH);
selectedColumn.setFixedWidth(undefined);
}
else {
selectedColumn.setMinWidth(undefined);
selectedColumn.setMaxWidth(undefined);
selectedColumn.setFixedWidth(undefined);
}
} }), _jsx("div", { className: "ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" }), _jsx(FormNumberInput, { className: "ml-1 w-16 text-sm", min: 0, step: 50, defaultValue: undefined, isValid: (value) => value !== undefined && value > 0, value: selectedColumn.minWidth, setValue: (value) => {
selectedColumn.setMinWidth(value);
}, disabled: selectedColumn.fixedWidth !== undefined }), _jsx("div", { className: "ml-1 h-[1px] w-1 flex-shrink-0 bg-neutral-400" }), _jsx(FormNumberInput, { className: "ml-1 w-16 text-sm", min: selectedColumn.minWidth ?? 0, step: 50, defaultValue: undefined, isValid: (value) => value !== undefined &&
value >= (selectedColumn.minWidth ?? 0), value: selectedColumn.maxWidth, setValue: (value) => {
selectedColumn.setMaxWidth(value);
}, disabled: selectedColumn.fixedWidth !== undefined })] }), _jsx("div", { className: "my-2 h-[1px] w-full bg-neutral-200" }), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-32 flex-shrink-0 items-center text-sm", children: "Font:" }), _jsx(FormDropdownMenuTrigger, { className: "w-28", onClick: openFontFamilyDropdown, open: fontFamilyDropdownPropsOpen, children: selectedColumn.fontFamily ?? gridConfiguration.fontFamily }), _jsxs(FormDropdownMenu, { className: "w-28", ...fontFamilyDropdownProps, children: [[
DataCubeFont.ARIAL,
DataCubeFont.ROBOTO,
DataCubeFont.ROBOTO_CONDENSED,
].map((font) => (_jsx(FormDropdownMenuItem, { onClick: () => {
selectedColumn.setFontFamily(font);
closeFontFamilyDropdown();
}, autoFocus: font ===
(selectedColumn.fontFamily ??
gridConfiguration.fontFamily), children: font }, font))), _jsx(FormDropdownMenuItemSeparator, {}), [
DataCubeFont.GEORGIA,
DataCubeFont.ROBOTO_SERIF,
DataCubeFont.TIMES_NEW_ROMAN,
].map((font) => (_jsx(FormDropdownMenuItem, { onClick: () => {
selectedColumn.setFontFamily(font);
closeFontFamilyDropdown();
}, autoFocus: font ===
(selectedColumn.fontFamily ??
gridConfiguration.fontFamily), children: font }, font))), _jsx(FormDropdownMenuItemSeparator, {}), [
DataCubeFont.JERBRAINS_MONO,
DataCubeFont.ROBOTO_MONO,
DataCubeFont.UBUNTU_MONO,
].map((font) => (_jsx(FormDropdownMenuItem, { onClick: () => {
selectedColumn.setFontFamily(font);
closeFontFamilyDropdown();
}, autoFocus: font ===
(selectedColumn.fontFamily ??
gridConfiguration.fontFamily), children: font }, font)))] }), _jsx(FormDropdownMenuTrigger, { className: "ml-1 w-10", onClick: openFontSizeDropdown, open: openFontSizeDropdownPropsOpen, children: selectedColumn.fontSize ?? gridConfiguration.fontSize }), _jsx(FormDropdownMenu, { className: "w-10", ...openFontSizeDropdownProps, children: [
4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26,
28, 32, 36, 48, 72,
].map((size) => (_jsx(FormDropdownMenuItem, { onClick: () => {
selectedColumn.setFontSize(size);
closeFontSizeDropdown();
}, autoFocus: size ===
(selectedColumn.fontSize ??
gridConfiguration.fontSize), children: size }, size))) }), _jsxs("div", { className: "relative ml-2 flex h-5", children: [_jsx("button", { title: "Bold", className: cn('relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': selectedColumn.fontBold ??
gridConfiguration.fontBold,
}), onClick: () => selectedColumn.setFontBold(!(selectedColumn.fontBold ??
gridConfiguration.fontBold)), children: _jsx(DataCubeIcon.FontBold, {}) }), _jsx("button", { title: "Italic", className: cn('relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': selectedColumn.fontItalic ??
gridConfiguration.fontItalic,
}), onClick: () => selectedColumn.setFontItalic(!(selectedColumn.fontItalic ??
gridConfiguration.fontItalic)), children: _jsx(DataCubeIcon.FontItalic, {}) }), _jsx("button", { title: `Underline${(selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline) ? ` (${selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline})` : ''}`, className: cn('relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': (selectedColumn.fontUnderline ??
gridConfiguration.fontUnderline) !== undefined,
}), onClick: () => {
if ((selectedColumn.fontUnderline ??
gridConfiguration.fontUnderline) === undefined) {
selectedColumn.setFontUnderline(DataCubeFontFormatUnderlineVariant.SOLID);
selectedColumn.setFontStrikethrough(false);
}
else {
selectedColumn.setFontUnderline(undefined);
}
}, children: _jsx(DataCubeIcon.FontUnderline, {}) }), _jsxs("button", { className: "text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus:z-[1]", onClick: openFontFormatUnderlineVariantDropdown, children: [_jsx("div", { className: cn('h-4 w-[0.5px] bg-neutral-200', {
'opacity-0': (selectedColumn.fontUnderline ??
gridConfiguration.fontUnderline) !== undefined,
}) }), _jsx(DataCubeIcon.CaretDown, {})] }), _jsx(FormDropdownMenu, { className: "w-14", ...fontFormatUnderlineVariantDropdownProps, children: [
DataCubeFontFormatUnderlineVariant.SOLID,
DataCubeFontFormatUnderlineVariant.DASHED,
DataCubeFontFormatUnderlineVariant.DOTTED,
DataCubeFontFormatUnderlineVariant.DOUBLE,
DataCubeFontFormatUnderlineVariant.WAVY,
].map((variant) => (_jsx(FormDropdownMenuItem, { className: "relative", onClick: () => {
selectedColumn.setFontUnderline(variant);
selectedColumn.setFontStrikethrough(false);
closeFontFormatUnderlineVariantDropdown();
}, autoFocus: variant ===
(selectedColumn.fontUnderline ??
gridConfiguration.fontUnderline), children: _jsx("div", { className: cn('!hover:underline absolute top-0 !underline', {
'!hover:decoration-solid !decoration-solid': variant ===
DataCubeFontFormatUnderlineVariant.SOLID,
'!hover:decoration-dashed !decoration-dashed': variant ===
DataCubeFontFormatUnderlineVariant.DASHED,
'!hover:decoration-dotted !decoration-dotted': variant ===
DataCubeFontFormatUnderlineVariant.DOTTED,
'!hover:decoration-double !decoration-double': variant ===
DataCubeFontFormatUnderlineVariant.DOUBLE,
'!hover:decoration-wavy !decoration-wavy': variant ===
DataCubeFontFormatUnderlineVariant.WAVY,
}), children: "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0" }) }, variant))) }), _jsx("button", { title: "Strikethrough", className: cn('relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': selectedColumn.fontStrikethrough ??
gridConfiguration.fontStrikethrough,
}), onClick: () => {
if (selectedColumn.fontStrikethrough ??
gridConfiguration.fontStrikethrough) {
selectedColumn.setFontStrikethrough(false);
}
else {
selectedColumn.setFontStrikethrough(true);
selectedColumn.setFontUnderline(undefined);
}
}, children: _jsx(DataCubeIcon.FontStrikethrough, {}) }), _jsx("button", { title: `Case${(selectedColumn.fontCase ?? gridConfiguration.fontCase) ? ` (${selectedColumn.fontCase ?? gridConfiguration.fontCase})` : ''}`, className: cn('relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': (selectedColumn.fontCase ??
gridConfiguration.fontCase) !== undefined,
}), onClick: () => {
if ((selectedColumn.fontCase ??
gridConfiguration.fontCase) === undefined) {
selectedColumn.setFontCase(DataCubeFontCase.UPPERCASE);
}
else {
selectedColumn.setFontCase(undefined);
}
}, children: _jsx(DataCubeIcon.FontCase, { className: "stroke-[0.5px]" }) }), _jsxs("button", { className: "text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center rounded-br-sm rounded-tr-sm border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus:z-[1]", onClick: openFontCaseDropdown, children: [_jsx("div", { className: cn('h-4 w-[0.5px] bg-neutral-200', {
'opacity-0': (selectedColumn.fontCase ??
gridConfiguration.fontCase) !== undefined,
}) }), _jsx(DataCubeIcon.CaretDown, {})] }), _jsx(FormDropdownMenu, { className: "w-20", ...fontCaseDropdownProps, children: [
DataCubeFontCase.LOWERCASE,
DataCubeFontCase.UPPERCASE,
DataCubeFontCase.CAPITALIZE,
].map((fontCase) => (_jsx(FormDropdownMenuItem, { onClick: () => {
selectedColumn.setFontCase(fontCase);
closeFontCaseDropdown();
}, autoFocus: fontCase ===
(selectedColumn.fontCase ??
gridConfiguration.fontCase), children: _jsx("div", { className: cn({
lowercase: fontCase === DataCubeFontCase.LOWERCASE,
uppercase: fontCase === DataCubeFontCase.UPPERCASE,
capitalize: fontCase === DataCubeFontCase.CAPITALIZE,
}), children: fontCase }) }, fontCase))) })] }), _jsxs("div", { className: "relative ml-2 flex h-5", children: [_jsx("button", { title: "Align Left", className: cn('relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': (selectedColumn.textAlign ??
gridConfiguration.textAlign) ===
DataCubeFontTextAlignment.LEFT,
}), onClick: () => selectedColumn.setTextAlign(DataCubeFontTextAlignment.LEFT), children: _jsx(DataCubeIcon.TextAlignLeft, {}) }), _jsx("button", { title: "Align Center", className: cn('relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': (selectedColumn.textAlign ??
gridConfiguration.textAlign) ===
DataCubeFontTextAlignment.CENTER,
}), onClick: () => selectedColumn.setTextAlign(DataCubeFontTextAlignment.CENTER), children: _jsx(DataCubeIcon.TextAlignCenter, {}) }), _jsx("button", { title: "Align Right", className: cn('relative -ml-[1px] flex h-5 w-5 items-center justify-center rounded-br-sm rounded-tr-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]', {
'bg-neutral-200': (selectedColumn.textAlign ??
gridConfiguration.textAlign) ===
DataCubeFontTextAlignment.RIGHT,
}), onClick: () => selectedColumn.setTextAlign(DataCubeFontTextAlignment.RIGHT), children: _jsx(DataCubeIcon.TextAlignRight, {}) })] })] }), _jsxs("div", { className: "mt-2 flex w-full", children: [_jsx("div", { className: "flex h-6 w-32 flex-shrink-0 items-center text-sm", children: "Colors:" }), _jsxs("div", { className: "h-18", children: [_jsxs("div", { className: "flex h-6", children: [_jsx("div", { className: "w-16 flex-shrink-0" }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center text-sm", children: "Normal" }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center text-sm", children: "Negative" }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center text-sm", children: "Zero" }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center text-sm", children: "Error" })] }), _jsxs("div", { className: "flex h-6", children: [_jsx("div", { className: "flex h-full w-16 flex-shrink-0 items-center text-sm", children: "Foreground:" }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.normalForegroundColor ??
gridConfiguration.normalForegroundColor, defaultColor: gridConfiguration.normalForegroundColor, onChange: (value) => selectedColumn.setNormalForegroundColor(value) }) }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.negativeForegroundColor ??
gridConfiguration.negativeForegroundColor, defaultColor: gridConfiguration.negativeForegroundColor, onChange: (value) => selectedColumn.setNegativeForegroundColor(value) }) }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.zeroForegroundColor ??
gridConfiguration.zeroForegroundColor, defaultColor: gridConfiguration.zeroForegroundColor, onChange: (value) => selectedColumn.setZeroForegroundColor(value) }) }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.errorForegroundColor ??
gridConfiguration.errorForegroundColor, defaultColor: gridConfiguration.errorForegroundColor, onChange: (value) => selectedColumn.setErrorForegroundColor(value) }) })] }), _jsxs("div", { className: "flex h-6", children: [_jsx("div", { className: "flex h-full w-16 flex-shrink-0 items-center text-sm", children: "Background:" }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.normalBackgroundColor ??
gridConfiguration.normalBackgroundColor, defaultColor: gridConfiguration.normalBackgroundColor, onChange: (value) => selectedColumn.setNormalBackgroundColor(value) }) }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.negativeBackgroundColor ??
gridConfiguration.negativeBackgroundColor, defaultColor: gridConfiguration.negativeBackgroundColor, onChange: (value) => selectedColumn.setNegativeBackgroundColor(value) }) }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.zeroBackgroundColor ??
gridConfiguration.zeroBackgroundColor, defaultColor: gridConfiguration.zeroBackgroundColor, onChange: (value) => selectedColumn.setZeroBackgroundColor(value) }) }), _jsx("div", { className: "flex h-full w-12 flex-shrink-0 items-center justify-center", children: _jsx(FormColorPickerButton, { color: selectedColumn.errorBackgroundColor ??
gridConfiguration.errorBackgroundColor, defaultColor: gridConfiguration.errorBackgroundColor, onChange: (value) => selectedColumn.setErrorBackgroundColor(value) }) })] })] })] }), _jsxs("div", { className: "mt-2 flex w-full", children: [_jsx("div", { className: "flex h-6 w-32 flex-shrink-0 items-center text-sm" }), _jsxs("div", { className: "w-80", children: [_jsx("div", { className: "mb-2 h-[1px] w-full bg-neutral-200" }), _jsx(FormButton, { compact: true, disabled: selectedColumn.isUsingDefaultStyling, onClick: () => selectedColumn.useDefaultStyling(), children: "Use Default Styling" })] })] })] }))] }) })] }));
});
//# sourceMappingURL=DataCubeEditorColumnPropertiesPanel.js.map