@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
361 lines (360 loc) • 25.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Box, Flex } from '../../../components/Flex';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { Tag } from '../../../components/Tag';
import { CheckBox } from '../../../components/CheckBox';
import SimpleButton from '../../../components/SimpleButton';
import { ButtonNew } from '../../Components/Buttons/ButtonNew';
import { SingleSelect } from '../../../components/NewSelect';
import { NumberInput } from '../../../components/Input/NumberInput';
import Input from '../../../components/Input';
import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
import { IconSelectorPanel } from '../../../components/IconSelector';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { useAdaptable } from '../../AdaptableContext';
import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
import { ICON_STYLE_PRESET_DESCRIPTIONS, ICON_STYLE_PRESET_LABELS, getIconStylePresetMappings, } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
import { resolveEffectiveIconStyleMappings, resolveIconStyleMappingsForSummaryPreview } from '../../../agGrid/cellRenderers/IconRenderer';
import { Card } from '../../../components/Card';
import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
import { wizardSelectionSimpleButtonProps } from '../../../Utilities/wizardSelection';
const STYLE_FORM_SIZES = ['200px', '1fr'];
const detectIconKind = (spec) => {
if (typeof spec === 'string')
return 'Emoji';
if (spec && typeof spec.name === 'string')
return 'System';
if (spec && typeof spec.src === 'string')
return 'Url';
return 'Emoji';
};
const previewIcon = (spec) => {
if (!spec) {
return _jsx("span", { className: "twa:opacity-50", children: "\u2014" });
}
if (typeof spec === 'string') {
return _jsx("span", { style: { fontSize: 18, lineHeight: 1 }, children: spec });
}
return _jsx(AdaptableIconComponent, { icon: spec });
};
const ICON_MAPPINGS_PREVIEW_CHIP_LIMIT = 6;
const previewMapping = (mapping, index) => {
return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:px-1.5 twa:py-0.5 twa:rounded twa:bg-[var(--ab-color-primary)] twa:text-[var(--ab-color-primarytext)]", children: [_jsx(Box, { children: previewIcon(mapping.Icon) }), _jsx(Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, `${String(mapping.Key)}-${index}`));
};
const renderMappingsPreview = (mappings) => {
if (!mappings || mappings.length === 0) {
return _jsx(Tag, { children: "No mappings" });
}
const previewItems = mappings.slice(0, ICON_MAPPINGS_PREVIEW_CHIP_LIMIT).map((m, i) => previewMapping(m, i));
const remaining = mappings.length - previewItems.length;
return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: [previewItems, remaining > 0 && _jsxs(Box, { className: "twa:text-xs twa:opacity-60", children: ["+", remaining, " more"] })] }));
};
const formatIconCellTextSummary = (cellText) => cellText
?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Description'))
.join(' + ') ?? '';
const formatIconToolTipSummary = (toolTipText) => toolTipText
?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Description'))
.join(' + ') ?? '';
export const getStyledColumnIconMappingsViewValues = (data) => {
const ic = data.IconStyle;
if (!ic) {
return [];
}
const effectiveMappings = resolveEffectiveIconStyleMappings(ic);
const items = [`Mappings: ${effectiveMappings.length}`];
if (ic.Preset) {
items.push(`Preset: ${ICON_STYLE_PRESET_LABELS[ic.Preset]}`);
}
const customCount = ic.Mappings?.length ?? 0;
if (customCount > 0) {
items.push(`Custom Mappings: ${customCount}`);
}
if (ic.MatchMode && ic.MatchMode !== 'Exact') {
items.push(`Match Mode: ${ic.MatchMode}`);
}
const fallbackMode = ic.FallbackProperties?.Mode;
if (fallbackMode && fallbackMode !== 'Hide') {
items.push(`Fallback: ${fallbackMode}`);
}
return items;
};
const buildStyledColumnIconStyleSummaryStrings = (ic, options) => {
const items = [];
if (ic.Size != null) {
items.push(`Icon Size: ${ic.Size}px`);
}
if (ic.Gap != null) {
items.push(`Gap: ${ic.Gap}px`);
}
const ctp = ic.CellTextProperties;
if (ctp?.CellText?.length) {
items.push(`Cell Text: ${formatIconCellTextSummary(ctp.CellText)}`);
items.push(`Cell Text Position: ${ctp.CellTextPosition ?? 'After'}`);
}
else if (options.includeEmptyCellText) {
items.push('Cell Text: None');
}
getCellFontStyleSummaryItems(ic.Font).forEach(({ label, value }) => {
items.push(`${label}: ${value}`);
});
getCellBoxStyleSummaryItems(ic.Cell).forEach(({ label, value }) => {
items.push(`${label}: ${value}`);
});
if (ic.ToolTipText?.length) {
items.push(`Tooltip: ${formatIconToolTipSummary(ic.ToolTipText)}`);
}
else if (options.includeEmptyTooltip) {
items.push('Tooltip: No Tooltip');
}
return items;
};
export const getStyledColumnIconStyleViewValues = (data) => {
const ic = data.IconStyle;
if (!ic) {
return [];
}
return buildStyledColumnIconStyleSummaryStrings(ic, {
includeEmptyCellText: false,
includeEmptyTooltip: false,
});
};
export const renderStyledColumnIconMappingsSummary = (data) => {
const ic = data.IconStyle;
if (!ic) {
return _jsx(Tag, { children: "No Icon Style defined" });
}
const tagItems = getStyledColumnIconMappingsViewValues(data);
const previewMappings = resolveIconStyleMappingsForSummaryPreview(ic);
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), renderMappingsPreview(previewMappings)] }));
};
export const StyledColumnIconMappingsView = ({ data }) => renderStyledColumnIconMappingsSummary(data);
export const renderStyledColumnIconStyleSummary = (data) => {
const ic = data.IconStyle;
if (!ic) {
return _jsx(Tag, { children: "No Icon Style defined" });
}
const items = buildStyledColumnIconStyleSummaryStrings(ic, {
includeEmptyCellText: true,
includeEmptyTooltip: true,
});
if (!items.length) {
return _jsx(Tag, { children: "No Style Defined" });
}
return renderSummaryStringTags(items);
};
export const renderStyledColumnIconSummary = (data) => {
const ic = data.IconStyle;
if (!ic) {
return _jsx(Tag, { children: "No Icon Style defined" });
}
return renderStyledColumnIconMappingsSummary(data);
};
export const isValidIconStyleMappings = (data) => {
const ic = data.IconStyle;
if (!ic)
return 'Select a Mapping or Preset';
const hasPreset = !!ic.Preset;
const hasCustom = (ic.Mappings?.length ?? 0) > 0;
if (!hasPreset && !hasCustom) {
return 'Apply a preset or add at least one custom mapping';
}
return true;
};
export const StyledColumnWizardIconSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const iconStyle = data.IconStyle ?? {};
const mappings = iconStyle.Mappings ?? [];
const disabled = !data.ColumnId;
const [autoOpenPickerIndex, setAutoOpenPickerIndex] = React.useState(null);
const update = (patch) => {
props.onChange({
...data,
IconStyle: {
...iconStyle,
...patch,
},
});
};
const onFontChange = (next) => {
if (next) {
update({ Font: next });
}
else {
const { Font: _f, ...rest } = iconStyle;
props.onChange({ ...data, IconStyle: rest });
}
};
const onCellChange = (next) => {
if (next) {
update({ Cell: next });
}
else {
const { Cell: _c, ...rest } = iconStyle;
props.onChange({ ...data, IconStyle: rest });
}
};
const applyPreset = (preset) => {
update({
Preset: preset,
MatchMode: preset === 'Flags' || preset === 'Status'
? 'CaseInsensitive'
: iconStyle.MatchMode ?? 'Exact',
});
};
const clearPreset = () => {
update({ Preset: undefined });
};
const setMappings = (next) => {
update({ Mappings: next });
};
const updateMapping = (index, patch) => {
const next = mappings.map((m, i) => (i === index ? { ...m, ...patch } : m));
setMappings(next);
};
const removeMapping = (index) => {
setMappings(mappings.filter((_, i) => i !== index));
setAutoOpenPickerIndex(null);
};
const addMapping = () => {
const next = [
...mappings,
{
Key: '',
Icon: '⭐',
},
];
setMappings(next);
setAutoOpenPickerIndex(next.length - 1);
};
const updateCellTextProperties = (patch) => {
const merged = {
...iconStyle.CellTextProperties,
...patch,
};
const isEmpty = !merged.CellText?.length && merged.CellTextPosition == undefined;
update({ CellTextProperties: isEmpty ? undefined : merged });
};
const toggleCellText = (token, checked) => {
const current = iconStyle.CellTextProperties?.CellText ?? [];
const next = checked
? Array.from(new Set([...current, token]))
: current.filter((t) => t !== token);
updateCellTextProperties({ CellText: next });
};
const updateFallbackProperties = (patch) => {
const merged = {
...iconStyle.FallbackProperties,
...patch,
};
const isEmpty = (merged.Mode == undefined || merged.Mode === 'Hide') && merged.Icon == undefined;
update({ FallbackProperties: isEmpty ? undefined : merged });
};
const toggleToolTipText = (token, checked) => {
const current = iconStyle.ToolTipText ?? [];
const next = checked
? Array.from(new Set([...current, token]))
: current.filter((t) => t !== token);
update({ ToolTipText: next });
};
if (props.variant === 'mappings') {
const presetMappingsPreview = iconStyle.Preset
? getIconStylePresetMappings(iconStyle.Preset)
: [];
return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Contains most commonly used values; add anything missing in", ' ', _jsx("strong", { children: "Custom mappings" }), " below"] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Select Preset:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [['Flags', 'Currencies', 'Trend', 'Status'].map((p) => (_jsx(SimpleButton, { ...wizardSelectionSimpleButtonProps(iconStyle.Preset === p), onClick: () => applyPreset(p), children: ICON_STYLE_PRESET_LABELS[p] }, p))), iconStyle.Preset && (_jsx(SimpleButton, { variant: "text", icon: "undo", tooltip: "Stop using this preset (custom mappings are kept)", onClick: clearPreset, children: "Clear preset" }))] }) }), iconStyle.Preset && (_jsx(FormRow, { label: "Active:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[640px]", children: [_jsxs(Box, { className: "twa:text-xs twa:opacity-70", children: [ICON_STYLE_PRESET_DESCRIPTIONS[iconStyle.Preset], " \u2014", ' ', presetMappingsPreview.length, " mappings shipped with the preset."] }), renderMappingsPreview(presetMappingsPreview)] }) }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Mappings" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: iconStyle.Preset
? 'Add any mappings that are not present in the selected preset'
: 'Add custom mappings entries (icon, key and description)' })] }), _jsxs(Card.Body, { children: [mappings.length === 0 ? (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px] twa:mb-2", children: iconStyle.Preset
? 'No custom mappings — the preset above is being used as-is'
: 'No mappings applied - select a preset above or click "Add Mapping" to define your own' })) : (_jsxs(Box, { className: "twa:max-w-[720px]", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:text-xs twa:opacity-60", children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Key" }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: "Description" }), _jsx(Box, { className: "twa:w-8 twa:shrink-0" })] }), mappings.map((m, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:px-2 twa:py-1 twa:rounded twa:hover:bg-[var(--ab-color-primarylight)]", children: [_jsx(Box, { className: "twa:w-[44px] twa:shrink-0 twa:flex twa:justify-center", children: _jsx(IconPickerButton, { value: m.Icon, defaultOpen: autoOpenPickerIndex === i, onOpenChange: (open) => {
if (!open && autoOpenPickerIndex === i) {
setAutoOpenPickerIndex(null);
}
}, onChange: (next) => updateMapping(i, { Icon: next }) }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: String(m.Key ?? ''), onChange: (e) => updateMapping(i, { Key: e.target.value }), placeholder: "Cell value" }) }), _jsx(Box, { className: "twa:min-w-0 twa:flex-1", children: _jsx(Input, { className: "twa:w-full", value: m.Description ?? '', onChange: (e) => updateMapping(i, {
Description: e.target.value || undefined,
}), placeholder: "Tooltip label (optional)" }) }), _jsx(Box, { className: "twa:w-8 twa:shrink-0 twa:flex twa:justify-center", children: _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Remove mapping", onClick: () => removeMapping(i) }) })] }, i)))] })), _jsx(Box, { className: "twa:mt-2", children: _jsx(ButtonNew, { onClick: addMapping, children: "Add Mapping" }) })] })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How keys are compared to cell values, and what to render when no mapping matches" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Match Mode:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.MatchMode ?? 'Exact', onValueChange: (v) => update({ MatchMode: v }), items: [
{ value: 'Exact', label: 'Exact Match Required' },
{ value: 'CaseInsensitive', label: 'Case-insensitive (strings)' },
] }) }) }), _jsx(FormRow, { label: "Fallback:", children: _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.FallbackProperties?.Mode ?? 'Hide', onValueChange: (v) => updateFallbackProperties({ Mode: v }), items: [
{ value: 'Hide', label: 'Show No Value' },
{ value: 'ShowText', label: 'Show Raw Value' },
{ value: 'Icon', label: 'Show Fallback Icon' },
] }) }) }), iconStyle.FallbackProperties?.Mode === 'Icon' && (_jsx(FormRow, { label: "Fallback Icon:", children: _jsx(IconPickerButton, { value: iconStyle.FallbackProperties?.Icon, onChange: (next) => updateFallbackProperties({ Icon: next }) }) }))] }) })] })] }));
}
const cellText = iconStyle.CellTextProperties?.CellText ?? [];
const toolTipText = iconStyle.ToolTipText ?? [];
const cellTextDisabled = cellText.length === 0;
return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Sizing" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Icon Size (px):", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(Input, { type: "number", min: 8, step: 1, value: iconStyle.Size ?? '', placeholder: "18", className: "twa:w-full", onChange: (event) => {
const raw = event.target.value;
if (raw === '' || raw == null) {
update({ Size: undefined });
return;
}
const parsed = Number(raw);
update({
Size: Number.isFinite(parsed) && parsed >= 8 ? parsed : undefined,
});
} }) }) }), _jsx(FormRow, { label: "Gap (px):", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(NumberInput, { value: iconStyle.Gap ?? '', placeholder: "4", min: 0, step: 1, onChange: (value) => update({ Gap: typeof value === 'number' ? value : undefined }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optionally show the raw value or the matched description alongside the icon (e.g. flag plus label)." })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { checked: cellText.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: cellText.includes('IconDescription'), onChange: (checked) => toggleCellText('IconDescription', checked), children: "Description" })] }), _jsx(FormRow, { label: "Position:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: iconStyle.CellTextProperties?.CellTextPosition ?? 'After', onValueChange: (v) => updateCellTextProperties({
CellTextPosition: v,
}), items: [
{ value: 'Before', label: 'Before' },
{ value: 'After', label: 'After' },
{ value: 'Above', label: 'Above' },
{ value: 'Below', label: 'Below' },
] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
};
const ICON_KIND_OPTIONS = [
{ value: 'Emoji', label: 'Emoji' },
{ value: 'System', label: 'Built-in' },
{ value: 'Url', label: 'Image URL' },
];
const IconPickerButton = (props) => {
const [open, setOpen] = React.useState(props.defaultOpen ?? false);
React.useEffect(() => {
if (props.defaultOpen) {
setOpen(true);
}
}, [props.defaultOpen]);
const handleOpenChange = (next) => {
setOpen(next);
props.onOpenChange?.(next);
};
return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { nativeButton: true, render: _jsx(SimpleButton, { type: "button", tooltip: "Choose icon", ...wizardSelectionSimpleButtonProps(open, 'twa:!min-w-[40px] twa:!w-10 twa:!h-10 twa:!p-0 twa:justify-center twa:items-center'), children: previewIcon(props.value) }) }), _jsx(PopoverContent, { align: "start", side: "bottom", sideOffset: 8, className: "twa:!w-[300px] twa:max-w-[300px] twa:p-3 twa:gap-0", children: _jsx(IconSpecEditorFields, { value: props.value, onChange: props.onChange, onSystemIconSelected: () => handleOpenChange(false) }) })] }));
};
const IconSpecEditorFields = (props) => {
const adaptable = useAdaptable();
const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
const kind = detectIconKind(props.value);
const [pendingKind, setPendingKind] = React.useState(null);
const prevValueRef = React.useRef(props.value);
React.useEffect(() => {
if (prevValueRef.current !== props.value) {
setPendingKind(null);
prevValueRef.current = props.value;
}
}, [props.value]);
const effectiveKind = pendingKind ?? kind;
const onKindChange = (next) => {
setPendingKind(next);
if (next === 'Emoji') {
props.onChange(typeof props.value === 'string' ? props.value : '');
}
else if (next === 'System') {
props.onChange(kind === 'System' ? props.value : { name: 'flag' });
}
else if (next === 'Url') {
props.onChange(kind === 'Url' ? props.value : { src: '' });
}
};
const isObject = typeof props.value === 'object' && props.value !== null;
const systemName = isObject && 'name' in props.value
? props.value.name
: undefined;
const urlSrc = isObject && 'src' in props.value ? props.value.src : '';
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:w-full", children: [_jsx(Box, { className: "twa:grid twa:grid-cols-3 twa:gap-1 twa:w-full", role: "tablist", "aria-label": "Icon type", children: ICON_KIND_OPTIONS.map((option) => (_jsx(SimpleButton, { type: "button", role: "tab", "aria-selected": effectiveKind === option.value, ...wizardSelectionSimpleButtonProps(effectiveKind === option.value, 'twa:w-full twa:min-h-[32px] twa:h-8 twa:px-1 twa:text-xs twa:leading-tight'), onClick: () => onKindChange(option.value), children: option.label }, option.value))) }), effectiveKind === 'Emoji' && (_jsx(Input, { className: "twa:w-full", value: typeof props.value === 'string' ? props.value : '', onChange: (e) => props.onChange(e.target.value), placeholder: "\uD83C\uDDFA\uD83C\uDDF8 $ \u2B06" })), effectiveKind === 'System' && (_jsx(IconSelectorPanel, { className: "twa:p-0", showTitle: false, customIcons: customIcons, value: systemName, onChange: (iconName) => {
if (iconName) {
props.onChange({ name: iconName });
props.onSystemIconSelected?.();
}
} })), effectiveKind === 'Url' && (_jsx(Input, { className: "twa:w-full", value: urlSrc, onChange: (e) => props.onChange({ src: e.target.value }), placeholder: "https://\u2026" }))] }));
};