& { title?: string }>\n}\n\nconst horizontalAlignmentRow: Alignment[] = [\n { property: 'justifyContent', value: 'flex-start', label: 'Left', IconComponent: HorizontallyLeftIcon },\n { property: 'justifyContent', value: 'center', label: 'Center', IconComponent: HorizontallyCenterIcon },\n { property: 'justifyContent', value: 'space-between', label: 'Justify', IconComponent: HorizontallyJustifyIcon },\n { property: 'justifyContent', value: 'space-evenly', label: 'Distribute', IconComponent: HorizontallyDistributeIcon },\n { property: 'justifyContent', value: 'stretch', label: 'Stretch', IconComponent: HorizontallyStretchIcon },\n { property: 'justifyContent', value: 'flex-end', label: 'Right', IconComponent: HorizontallyRightIcon }\n]\n\nconst verticalAlignmentRow: Alignment[] = [\n { property: 'alignItems', value: 'flex-start', label: 'Top', IconComponent: VerticallyTopIcon },\n { property: 'alignItems', value: 'center', label: 'Center', IconComponent: VerticallyCenterIcon },\n { property: 'alignItems', value: 'stretch', label: 'Stretch', IconComponent: VerticallyStretchIcon },\n { property: 'alignItems', value: 'flex-end', label: 'Bottom', IconComponent: VerticallyBottomIcon }\n]\n\nconst horizontalAlignmentColumn: Alignment[] = [\n { property: 'alignItems', value: 'flex-start', label: 'Left', IconComponent: HorizontallyLeftIcon },\n { property: 'alignItems', value: 'center', label: 'Center', IconComponent: HorizontallyCenterIcon },\n { property: 'alignItems', value: 'stretch', label: 'Stretch', IconComponent: HorizontallyStretchIcon },\n { property: 'alignItems', value: 'flex-end', label: 'Right', IconComponent: HorizontallyRightIcon }\n]\n\nconst verticalAlignmentColumn: Alignment[] = [\n { property: 'justifyContent', value: 'flex-start', label: 'Top', IconComponent: VerticallyTopIcon },\n { property: 'justifyContent', value: 'center', label: 'Center', IconComponent: VerticallyCenterIcon },\n { property: 'justifyContent', value: 'space-between', label: 'Justify', IconComponent: VerticallyJustify },\n { property: 'justifyContent', value: 'stretch', label: 'Stretch', IconComponent: VerticallyStretchIcon },\n { property: 'justifyContent', value: 'flex-end', label: 'Bottom', IconComponent: VerticallyBottomIcon }\n]\n\nfunction getDefaultOption(options: Alignment[]) {\n return (\n options.find((v) => v.value == 'stretch') ||\n options.find((v) => v.value == 'center') ||\n options.find((v) => v.value == 'space-between')\n )\n}\n\nconst boxesCss = css`\n .top {\n position: absolute;\n top: 4px;\n opacity: 0;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n }\n .bottom {\n position: absolute;\n bottom: 4px;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n }\n .box {\n position: relative;\n border-radius: 4px;\n flex-grow: 1;\n border: 1px dashed var(--chakra-colors-blackAlpha-800);\n height: 92px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n &:hover {\n .top {\n opacity: 1;\n }\n }\n`\n\nexport default function DialogLayout({ customRules, rules, context, onChange }: DialogStyleProps) {\n const style =\n Style.Set.getContextElementAspect(rules, context, 'layout', customRules) || Style.Rule({ type: 'layout' })\n\n const verticalOptions = style.props.columnCount == 1 ? verticalAlignmentColumn : verticalAlignmentRow\n const horizontalOptions = style.props.columnCount == 1 ? horizontalAlignmentColumn : horizontalAlignmentRow\n\n const vertical = verticalOptions.find((v) => style.props[v.property] == v.value)\n const horizontal = horizontalOptions.find((h) => style.props[h.property] == h.value)\n\n function setLayoutProperty['props']>(\n property: P,\n value: Style.Rule<'layout'>['props'][P]\n ) {\n var props: Partial = {\n [property]: value\n }\n if ((property as string) == 'columnCount') {\n props.weights = new Array(value as number).fill(1)\n\n // swap horizontal/vertical\n if (value == 1 || style.props.columnCount == 1) {\n const nextVerticalOptions = value == 1 ? verticalAlignmentColumn : verticalAlignmentRow\n const nextHorizontalOptions = value == 1 ? horizontalAlignmentColumn : horizontalAlignmentRow\n\n // going from 1 to X - force stretch layout\n // going from X to 1 - reset stretch to top\n const nextV =\n style.props.columnCount == 1\n ? nextVerticalOptions.find((v) => v.value == 'stretch')\n : value == 1 && vertical.value == 'stretch'\n ? nextVerticalOptions.find((v) => v.value == 'flex-start')\n : nextVerticalOptions.find((v) => v.value == vertical.value) || getDefaultOption(nextVerticalOptions)\n const nextH =\n style.props.columnCount == 1\n ? nextHorizontalOptions.find((v) => v.value == 'flex-start')\n : value == 1\n ? nextHorizontalOptions.find((v) => v.value == 'stretch')\n : nextHorizontalOptions.find((h) => h.value == horizontal.value) || getDefaultOption(nextHorizontalOptions)\n\n // @ts-ignore FIXME\n props[nextV.property] = nextV.value\n // @ts-ignore FIXME\n props[nextH.property] = nextH.value\n }\n }\n onChange(\n mergeDeep(style, {\n props: props\n })\n )\n }\n\n const weights = style.props.weights || [1]\n const sum = weights.reduce((s, v) => s + v, 0)\n const children = Array.from((context as CK.ModelElement).getChildren())\n const columns = weights.map((v, index) => {\n const child = children[index] as CK.ModelElement\n return child ? Style.Set.getContextElementAspect(rules, child, 'dimensions', customRules)?.props : null\n })\n const hasLimits = columns.some((c) => c?.maxWidth != null)\n const boxes = weights.map((v, index) => {\n const plus = hasLimits && style.props.columnCount != 1 && horizontal.value == 'stretch' ? '+' : ''\n const width = `${Math.floor((v / sum) * 100)}${plus}%`\n const minWidth = Style.stringifyLength(columns[index]?.minWidth, null)\n const maxWidth = Style.stringifyLength(columns[index]?.maxWidth, null)\n const isFixedWidth = minWidth == maxWidth && minWidth\n\n return (\n \n \n {isFixedWidth && minWidth ? minWidth : width}\n \n {!isFixedWidth && (minWidth || maxWidth) && (\n \n {minWidth && min: {minWidth}}\n {maxWidth && max: {maxWidth}}\n \n )}\n \n )\n })\n\n const divider = (\n \n )\n const spacer = (\n \n \n \n )\n\n return (\n <>\n {style.props.columnCount != null && (\n \n {boxes\n .map((box, index) => {\n return [\n // first\n index == 0 &&\n (horizontal.value == 'flex-start' ||\n horizontal.value == 'stretch' ||\n horizontal.value == 'space-between'\n ? divider\n : spacer),\n\n // between\n index != 0 &&\n (horizontal.value == 'space-between' || horizontal.value == 'space-evenly' ? spacer : divider),\n\n box,\n\n // last\n index == boxes.length - 1 &&\n (horizontal.value == 'flex-end' ||\n horizontal.value == 'stretch' ||\n horizontal.value == 'space-between'\n ? divider\n : spacer)\n ]\n })\n .filter(Boolean)\n .flat()}\n \n )}\n \n \n Number of columns\n \n {\n if (c == null) {\n setLayoutProperty('columnCount', null)\n } else {\n setLayoutProperty('columnCount', c + 1)\n }\n }}\n value={style.props.columnCount == null ? null : style.props.columnCount - 1}\n >\n \n \n \n \n \n \n \n \n \n \n ) => {\n setLayoutProperty('flexWrap', e.target.checked)\n }}\n />\n Allow wrapping{' '}\n \n \n \n \n \n \n \n\n {columns.length > 1 && (\n \n \n Column proportions\n \n \n {weights.map((weight, index) => (\n \n Column {index + 1}\n \n \n \n \n }\n onClick={() =>\n setLayoutProperty('weights', Object.assign(weights.slice(), { [index]: Math.max(1, weight - 1) }))\n }\n bg='white'\n variant='secondary'\n size='xs'\n aria-label='Decrease weight'\n isDisabled={weight <= 1}\n />\n \n {weight}\n \n \n \n \n }\n variant='secondary'\n onClick={() =>\n setLayoutProperty('weights', Object.assign(weights.slice(), { [index]: weight + 1 }))\n }\n bg='white'\n size='xs'\n aria-label='Increase weight'\n />\n \n \n ))}\n \n \n )}\n \n \n \n Alignment\n \n \n Horizontally{' '}\n \n \n \n \n \n \n \n {horizontalOptions.map(({ label, IconComponent, property, value }, index) => (\n svg {\n background: var(--chakra-colors-blackAlpha-50);\n ${horizontal.value === value\n ? 'background: var(--chakra-colors-primary-100);' +\n 'border-radius: 2px;' +\n 'outline: 2px solid var(--chakra-colors-primary-600);' +\n '> rect {' +\n 'border-radius: 2px;' +\n 'outline: 1px solid var(--chakra-colors-primary-300);' +\n '}'\n : '&:hover {' + 'background: var(--chakra-colors-blackAlpha-200);' + '}'}\n }\n `}\n onClick={() => {\n setLayoutProperty(property, value as any)\n }}\n >\n \n \n {label}\n \n \n ))}\n \n \n Vertically{' '}\n \n \n \n \n \n \n \n {verticalOptions.map(({ label, IconComponent, property, value }, index) => (\n svg {\n background: var(--chakra-colors-blackAlpha-50);\n ${vertical.value === value\n ? 'background: var(--chakra-colors-primary-100);' +\n 'border-radius: 2px;' +\n 'outline: 2px solid var(--chakra-colors-primary-600);' +\n '> rect {' +\n 'border-radius: 2px;' +\n 'outline: 1px solid var(--chakra-colors-primary-300);' +\n '}'\n : ''}\n &:hover {\n background: var(--chakra-colors-blackAlpha-200);\n }\n }\n `}\n onClick={() => {\n setLayoutProperty(property, value as any)\n }}\n >\n \n \n {label}\n \n \n ))}{' '}\n \n \n \n )\n}\n","import { Flex, FormControl, FormLabel, Icon, IconButton } from '@chakra-ui/react'\nimport { mdiChevronUp, mdiPlus } from '@mdi/js'\nimport { isDeepEquals, Style } from '@sitecore-feaas/sdk'\nimport { FunctionComponent, ReactElement } from 'react'\n\ninterface Props {\n onChange: (value: [x: Style.Length, y: Style.Length]) => void\n value: [x: Style.Length, y: Style.Length]\n label?: string\n disabled?: boolean\n}\n\nconst AlignmentField: FunctionComponent = (props: Props): ReactElement => {\n const { onChange, value, label = 'Alignment', disabled } = props\n\n return (\n \n \n {label}\n\n \n onChange([Style.LengthOrPosition('left'), Style.LengthOrPosition('top')])}\n aria-label='Top left'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('center'), Style.LengthOrPosition('top')])}\n aria-label='Top'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('right'), Style.LengthOrPosition('top')])}\n aria-label='Top right'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('left'), Style.LengthOrPosition('center')])}\n aria-label='Left'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('center'), Style.LengthOrPosition('center')])}\n aria-label='Center'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('right'), Style.LengthOrPosition('center')])}\n aria-label='Right'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('left'), Style.LengthOrPosition('bottom')])}\n aria-label='Bottom left'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('center'), Style.LengthOrPosition('bottom')])}\n aria-label='Bottom'\n icon={\n \n \n \n }\n />\n onChange([Style.LengthOrPosition('right'), Style.LengthOrPosition('bottom')])}\n aria-label='Bottom right'\n icon={\n \n \n \n }\n />\n \n \n \n )\n}\n\nexport default AlignmentField\n","import { Box, Button, FormLabel, Switch, Text } from '@chakra-ui/react'\nimport type * as CK from '@sitecore-feaas/ckeditor5'\nimport { Style, isDeepEquals, mergeDeep } from '@sitecore-feaas/sdk'\nimport { ChangeEvent, useState } from 'react'\nimport ButtonGroupSwitch from '../../ButtonGroupSwitch.js'\nimport FieldsetField from '../../FieldsetField.js'\nimport { CreatableSelect } from '../../Select.js'\nimport AlignmentField from '../../styles/fields/AlignmentField.js'\nimport SizeField from '../../styles/fields/SizeField.js'\nimport type { DialogStyleProps } from './Dialog.js'\ninterface Props {\n editor: CK.Editor\n context: CK.ModelElement\n}\n\nexport default function DialogMediaSizing({ context, rules, customRules, onChange }: DialogStyleProps) {\n const style = Style.Set.getContextElementAspect(rules, context, 'media', customRules) || Style.Rule({ type: 'media' })\n\n const onObjectFitChange = (objectFit: Style.Media.Fit) => {\n setProperties({\n objectFit: objectFit\n })\n }\n\n function setProperties(props: Partial) {\n onChange(\n mergeDeep(style, {\n props: props\n })\n )\n }\n\n const [isCustomHeight, setCustomHeight] = useState(style.props.width == null)\n\n const [customSize, setCustomSize] = useState(style.props.height)\n const defaultSizeOptions = [\n { value: null, label: 'Intrinsic proportion' },\n { value: { value: 1, unit: 'ratio' } as Style.Length, label: 'Ratio 1:1' },\n { value: { value: 2 / 1, unit: 'ratio' } as Style.Length, label: 'Ratio 2:1' },\n { value: { value: 4 / 3, unit: 'ratio' } as Style.Length, label: 'Ratio 4:3' },\n { value: { value: 16 / 9, unit: 'ratio' } as Style.Length, label: 'Ratio 16:9' }\n ]\n const sizeOptions = [\n ...defaultSizeOptions,\n customSize != null &&\n !defaultSizeOptions.find((v) => isDeepEquals(v.value, style.props.height)) && {\n value: customSize,\n label:\n customSize?.unit == 'ratio'\n ? 'Ratio ' + parseFloat(customSize.value.toFixed(2)) + ':1'\n : Style.stringifyLength(customSize)\n }\n ].filter(Boolean)\n\n return (\n <>\n {Style.Context.getContextName(context) == 'media' && (\n <>\n \n {/*@ts-ignore */}\n \n \n Full\n \n ) => {\n if (e.target.checked) setProperties({ width: { value: 100, unit: '%' } })\n else setProperties({ width: null })\n }}\n />\n \n \n {\n if (style.props.height == null) {\n setCustomHeight(false)\n }\n if (width == null) {\n setCustomHeight(true)\n }\n setProperties({ width })\n }}\n allowEmpty={true}\n />\n \n \n \n {/*@ts-ignore */}\n \n \n Proportional\n \n ) => {\n setCustomHeight(!e.target.checked)\n if (!e.target.checked) {\n if (style.props.height?.unit == 'ratio') setProperties({ height: null })\n } else {\n setProperties({ height: null })\n }\n }}\n />\n \n \n {!isCustomHeight && (\n isDeepEquals(v.value, style.props.height)) || sizeOptions[0]}\n onChange={({ value }: (typeof sizeOptions)[0]) => setProperties({ height: value })}\n onCreateOption={(value: any) => {\n // FIXME: Typing of argument doesnt work in TS.5\n const height = Style.Length(value)?.value != 0 ? Style.Length(value) : null\n setCustomSize(height)\n setProperties({ height })\n }}\n >\n )}\n {isCustomHeight && (\n setProperties({ height })}\n units={['px', 'rem', 'em']}\n />\n )}\n {isCustomHeight && style.props.width != null && (\n \n You can type in custom ratio (e.g. 3:4) or size (100% or 300px)\n \n )}\n \n \n \n )}\n \n \n Size fitting method\n \n \n \n \n \n \n \n \n {style.props.objectFit != 'fill' && (\n setProperties({ objectPositionX, objectPositionY })}\n />\n )}\n \n )\n}\n","import { Box, Button, FormLabel, HStack, Switch, Text } from '@chakra-ui/react'\nimport { Style, Unformatted, mergeDeep } from '@sitecore-feaas/sdk'\nimport { useState } from 'react'\nimport ButtonGroupSwitch from '../../ButtonGroupSwitch.js'\nimport FieldsetField from '../../FieldsetField.js'\nimport { Select } from '../../Select.js'\nimport { DialogStyleProps } from './Dialog.js'\n\nexport default function DialogSpacing({ context, customRules, rules, themeClassList, onChange }: DialogStyleProps) {\n const classList = Style.Context.getClassList(context)\n const elementStyle = Style.Set.getContextElement(rules, classList)\n const [allValues, setAllValues] = useState(false)\n const allowedInitialSpacingStyles = allValues\n ? Style.Set.filterByType(rules, 'spacing')\n : Style.Set.getContextAspectChoices(rules, context, 'spacing')\n\n // get currently active spacing rule\n const style =\n Style.Set.getContextElementAspect(rules, context, 'spacing', customRules) ||\n Style.Set.getContextComboAspect(rules, context, 'spacing', themeClassList) ||\n Style.Rule({ type: 'spacing' })\n\n const [index, setIndex] = useState(() => {\n const stringified: Unformatted = Object.keys(style.props).reduce(\n (obj, key: keyof typeof style.props) => {\n return Object.assign(obj, { [key]: Style.stringifyLength(style.props[key]) })\n },\n Style.Spacing.Props()\n )\n if (\n stringified.paddingTop == stringified.paddingBottom &&\n stringified.paddingTop == stringified.paddingLeft &&\n stringified.paddingTop == stringified.paddingRight &&\n stringified.columnGap == stringified.rowGap\n ) {\n return 0\n }\n if (stringified.paddingTop == stringified.paddingBottom && stringified.paddingLeft == stringified.paddingRight) {\n return 1\n }\n return 2\n })\n\n const setTabIndex = (nextIndex: number) => {\n const oldIndex = index\n setIndex(nextIndex)\n onChange(\n mergeDeep(style, {\n props: {\n paddingBottom: style.props.paddingTop,\n paddingLeft: oldIndex == 0 ? style.props.paddingTop : style.props.paddingLeft,\n paddingRight: oldIndex == 0 ? style.props.paddingTop : style.props.paddingLeft,\n columnGap: style.props.columnGap,\n rowGap: nextIndex == 0 ? style.props.columnGap : style.props.rowGap\n }\n })\n )\n }\n\n function aggregateValues(properties: (keyof Style.Rule<'spacing'>['props'])[], includeZero: boolean = false) {\n return properties\n .reduce((values, property) => {\n return values.concat(\n ...allowedInitialSpacingStyles.map((spacingStyle: Style.Rule<'spacing'>) => {\n return (spacingStyle.props[property] || []) as Style.Length[]\n })\n )\n }, [])\n .concat(includeZero ? { value: 0, unit: 'px' } : [])\n .map((value) => {\n return Style.stringifyLength(value)\n })\n .filter(Boolean)\n .filter((v, i, a) => a.indexOf(v) === i)\n .sort((a, b) => {\n return parseFloat(a) - parseFloat(b)\n })\n }\n\n function SelectFor(properties: (keyof Style.Rule<'spacing'>['props'])[]) {\n const options = aggregateValues(properties, !!properties[0].match('Gap')).map((value) => {\n return { label: value, value: value }\n })\n const current = Style.stringifyLength(style.props[properties[0]])\n var value = options.find((opt) => current == opt.value)\n if (value == null) {\n value = { value: current, label: current }\n options.push(value)\n }\n return (\n {\n onChange(\n mergeDeep(style, {\n props: Style.Spacing.Props(\n properties.reduce(\n (obj, key) => {\n return Object.assign(obj, { [key]: Style.stringifyLength(value) })\n },\n { ...style.props }\n )\n )\n })\n )\n }}\n />\n )\n }\n\n return (\n <>\n \n \n \n \n \n \n \n\n {elementStyle?.props && 'spacingIds' in elementStyle?.props && elementStyle.props.spacingIds.length > 0 && (\n \n setAllValues((v) => !v)} />\n Only values appropriate for element\n \n )}\n\n {index == 0 && (\n \n \n {SelectFor(['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'])}\n \n {SelectFor(['rowGap', 'columnGap'])}\n \n )}\n\n {index == 1 && (\n <>\n \n {SelectFor(['paddingTop', 'paddingBottom'])}\n {SelectFor(['rowGap'])}\n \n \n {SelectFor(['paddingLeft', 'paddingRight'])}\n {SelectFor(['columnGap'])}\n \n \n )}\n\n {index == 2 && (\n <>\n \n {SelectFor(['paddingTop'])}\n\n {SelectFor(['paddingBottom'])}\n \n \n {SelectFor(['paddingLeft'])}\n\n {SelectFor(['paddingRight'])}\n \n \n {SelectFor(['columnGap'])}\n\n {SelectFor(['rowGap'])}\n \n \n )}\n \n )\n}\n","import { Button, VStack } from '@chakra-ui/react'\nimport type * as CK from '@sitecore-feaas/ckeditor5'\nimport { Style, mergeDeep } from '@sitecore-feaas/sdk'\nimport ButtonGroupSwitch from '../../ButtonGroupSwitch.js'\nimport FieldsetField from '../../FieldsetField.js'\nimport { DialogAttributeGeneric, DialogStyleProps } from './Dialog.js'\n\ninterface Props {\n editor: CK.Editor\n onCommand?: (name: string, ...values: any[]) => void | (() => void)\n context: CK.ModelElement\n}\n\nexport default function DialogTextAlignment({ context, customRules, rules, onChange }: DialogStyleProps) {\n const style = Style.Set.getContextElementAspect(rules, context, 'lines', customRules) || Style.Rule({ type: 'lines' })\n\n function setProperties(props: Partial) {\n onChange(\n mergeDeep(style, {\n props: props\n })\n )\n }\n const definition = Style.Context.getDefinition(context)\n\n return (\n \n \n \n setProperties({\n textAlign\n })\n }\n >\n \n \n \n \n \n \n {definition.type == 'text' && (\n \n \n setProperties({\n lines,\n ellipsis: lines == 1\n })\n }\n >\n \n \n \n \n \n \n \n \n )}\n {definition.type == 'text' && style.props.lines == 1 && (\n \n \n setProperties({\n ellipsis\n })\n }\n >\n {/*@ts-ignore */}\n \n \n \n \n )}\n {definition.type == 'text' && style.props.lines != 1 && (\n \n \n setProperties({\n wordBreak\n })\n }\n >\n \n \n \n \n \n )}\n \n )\n}\n","import {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n Badge,\n Button,\n HStack,\n Icon,\n Switch,\n Text,\n Tooltip\n} from '@chakra-ui/react'\nimport {\n mdiArrowExpandAll,\n mdiArrowExpandHorizontal,\n mdiArrowUpLeft,\n mdiContentPaste,\n mdiDatabaseOutline,\n mdiEyeOutline,\n mdiFormatAlignLeft,\n mdiGhostOutline,\n mdiImageOutline,\n mdiImageSizeSelectLarge,\n mdiLinkVariant,\n mdiScriptOutline,\n mdiSync,\n mdiTextLong,\n mdiToyBrickOutline,\n mdiViewColumnOutline\n} from '@mdi/js'\nimport { DataPath } from '@sitecore-feaas/clientside/headless'\nimport { GroupBy, Style, getEmbedDefinition } from '@sitecore-feaas/sdk'\nimport { ChangeEvent, FunctionComponent } from 'react'\nimport { PickerProps } from '../../picker/Picker.js'\nimport DialogAttributeBadge from './DialogAttributeBadge.js'\nimport DialogAttributes from './DialogAttributes.js'\nimport DialogAttributesFallback from './DialogAttributesFallback.js'\nimport DialogStyleBadge from './DialogStyleBadge.js'\nimport DialogStyleElementBadge from './DialogStyleElementBadge.js'\nimport DialogStyleDimensions from './DialogStyleDimensions.js'\nimport DialogStyleGrid from './DialogStyleGrid.js'\nimport DialogStyleLayout from './DialogStyleLayout.js'\nimport DialogStyleMediaSizing from './DialogStyleMediaSizing.js'\nimport DialogStyleSpacing from './DialogStyleSpacing.js'\nimport DialogStyleTextAlignment from './DialogStyleTextAlignment.js'\nimport { singularize } from 'inflection'\n\n/** A single configurable aspect of context element. It consists of static and dynamic parts, the static are readonly and unchangable, while the dynamic ones are computed on each re-render */\nexport type ContextCallback = (context: Style.Context) => void\nexport type AttributeSetter = (context: Style.Context, attribute: string, value: unknown) => void\nexport type AttributeCallback = (attribute: string, value: unknown, context?: Style.Context) => void\nexport type AttributeGetter = (context: Style.Context, attribute: string) => unknown\nexport type RuleSetter = (context: Style.Context, rule: Style.Rule | Style.Empty) => void\nexport type RuleCallback = (rule: Style.Rule | Style.Empty, context?: Style.Context) => void\n\nexport interface DialogEnvironment {\n context: Style.Context\n parent?: Style.Context\n definition: Style.ElementDefinition\n getAttribute: AttributeGetter\n onAttributeChange: AttributeCallback\n onNavigate: (id: Dialog['id']) => void\n onSelect: (style: Style.Context) => void\n}\n\n/** The following types achieve two tasks:\n * 1. Define a generic DialogBase definition type that can be used to validate dialog definitions and as a unspecific type matching all dialogs\n * 2. And a specific Dialog/Dialog type, that infers all of its defined properties from constant definition. It helps typescript to do extra type checking and narrowing. E.g. `dialog.id == 'repeating' && [dialog.group, dialog.label]` will infer that [`attribute`, `Repeating collection`]`. It is important though that unlike typical const definitions it also includes the types for generic properties of a DialogBase type.\n *\n * I have to say it turned out to be a mess to implement. Main issue was that typescript has quite strict rules with function calls.\n */\n\nexport interface DialogBasics {\n readonly icon: string\n readonly label: string\n readonly ariaLabel?: string\n readonly id: string\n readonly tooltip?: string\n readonly isDisabled?: boolean\n readonly level?: number\n}\nexport interface DialogComponents {\n component?: FunctionComponent
\n badge?: FunctionComponent
\n preview?: FunctionComponent
\n below?: FunctionComponent
void; index: number }>\n above?: FunctionComponent
void; index: number }>\n}\nexport interface DialogBase<\n G extends DialogType | 'other' = DialogType,\n P = {},\n E extends Record = DialogEnvironment\n> extends DialogBasics,\n DialogComponents {\n readonly group: G\n readonly condition: (environment: E) => boolean\n readonly prepare?: (environment: E) => P\n}\n/** Map of types of configuration with extra runtime options */\nexport type DialogDefinitionTypeMap = {\n style: DialogBase<\n 'style',\n {\n onChange: (rule: Style.Rule | Style.Empty) => void\n },\n DialogEnvironment & {\n rules: Style.Rule[]\n customRules: Style.Rule[]\n themeClassList: string[]\n classList: string[]\n onRuleChange: RuleCallback\n }\n >\n attribute: DialogBase<\n 'attribute',\n {\n value: any\n type: 'url' | 'html' | 'image' | 'string' | 'boolean' | 'array' | 'object' | 'custom'\n jsonpath: string\n onChange: (value: any, attribute?: string) => void\n onConfigure?: (value: any, attribute?: string) => void\n onModeChange?: (mode?: PickerProps['mode'], dialog?: string) => void\n isNonNullable?: boolean\n labels: {\n none?: string\n static?: string\n mapped?: string\n }\n },\n DialogEnvironment & {\n contextVariable: Style.Context\n contextLink: Style.Context\n definition: Style.ElementDefinition\n //[name: string]: any\n }\n >\n}\n\n/** List of all dialog types types */\nexport type DialogType = keyof DialogDefinitionTypeMap\n\n/** Helper to Retrieve runtime props interface from configure definition */\nexport type DialogProps = T extends DialogBase ? P & E : never\n\n/** Definition + runtime properties in one interface */\nexport type DialogResolved = T & DialogProps\n\n/** Map of resolved dialogs by type */\nexport type DialogTypeMap = {\n [key in DialogType]: DialogResolved\n}\n\n/** Union of all definitions (const) */\nexport type DialogList = (typeof dialogs)[number]\n\n/** Dialog definitions by id */\nexport type DialogIdMap = GroupBy\n\n/* Combine generic type properties with properties inferred from const definitions */\nexport type DialogIdMapAugmented = {\n [key in keyof DialogIdMap]: Omit & DialogIdMap[key]\n}\n\n/** Union of all definitions */\nexport type DialogDefinition = DialogDefinitionTypeMap[DialogType]\nexport type DialogGeneric = DialogTypeMap[DialogType]\n\n/** Union of all resolved configurations, but with components of generic types to avoid typescript complications */\nexport type Dialog = DialogIdMapAugmented[Id] & DialogComponents