devexpress-reporting/designer/controls/metadata/properties/style.js

DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.

/**
* DevExpress HTML/JS Reporting (designer\controls\metadata\properties\style.js)
* Version:  24.2.6
* Build date: Mar 18, 2025
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* License: https://www.devexpress.com/Support/EULAs/universal.xml
*/
import { extend } from '@devexpress/analytics-core/analytics-internal';
import { colorFromString, colorToString, floatFromModel } from '@devexpress/analytics-core/analytics-utils';
import { editorTemplates } from '@devexpress/analytics-core/analytics-widgets';
import { designerEditorTemplates } from '../../../widgets/editorTemplates';
import { borderDashStyle, defaultTextPadding, font, name, paddingGroup, stylePrioritySerializationInfo, textAlignment } from './metadata';
const _backColor = { propertyName: '_backColor', modelName: '@BackColor', from: colorFromString, toJsonObject: colorToString };
const _foreColor = { propertyName: '_foreColor', modelName: '@ForeColor', from: colorFromString, toJsonObject: colorToString };
const _borderColor = { propertyName: '_borderColor', modelName: '@BorderColor', from: colorFromString, toJsonObject: colorToString };
export const styleSerializationInfo = [{ ...name }].concat(extend(true, [], [
    extend(true, {}, font, { localizable: false }), textAlignment,
    _foreColor,
    _backColor,
    _borderColor,
    { propertyName: 'backColor', displayName: 'Background Color', localizationId: 'DevExpress.XtraReports.UI.XRControlStyle.BackColor', editor: editorTemplates.getEditor('customColorEditor') },
    { propertyName: 'foreColor', displayName: 'Foreground Color', localizationId: 'DevExpress.XtraReports.UI.XRControlStyle.ForeColor', editor: editorTemplates.getEditor('customColorEditor') },
    { propertyName: 'borderColor', displayName: 'Border Color', localizationId: 'DevExpress.XtraReports.UI.XRControlStyle.BorderColor', editor: editorTemplates.getEditor('customColorEditor') },
    { propertyName: 'borders', modelName: '@Sides', displayName: 'Borders', localizationId: 'DevExpress.XtraReports.UI.XRControlStyle.Borders', editor: editorTemplates.getEditor('borders') },
    { propertyName: 'borderWidth', modelName: '@BorderWidthSerializable', displayName: 'Border Width', localizationId: 'DevExpress.XtraReports.UI.XRControlStyle.BorderWidth', from: floatFromModel, editor: editorTemplates.getEditor('numeric') }
])).concat([borderDashStyle], paddingGroup);
styleSerializationInfo.forEach((item) => { delete item.defaultVal; });
export const styleName = { propertyName: 'styleName', modelName: '@StyleName', editor: designerEditorTemplates.getEditor('style'), displayName: 'Style', localizationId: 'DevExpress.XtraReports.UI.ConditionFormatting.Style', defaultVal: null };
export const evenStyleName = { propertyName: 'evenStyleName', modelName: '@EvenStyleName', editor: designerEditorTemplates.getEditor('style'), displayName: 'Even Style', localizationId: 'DevExpress.XtraReports.UI.XRControl.XRControlStyles.EvenStyle', defaultVal: null };
export const oddStyleName = { propertyName: 'oddStyleName', modelName: '@OddStyleName', editor: designerEditorTemplates.getEditor('style'), displayName: 'Odd Style', localizationId: 'DevExpress.XtraReports.UI.XRControl.XRControlStyles.OddStyle', defaultVal: null };
export const stylePriority = { propertyName: 'stylePriority', modelName: 'StylePriority', info: stylePrioritySerializationInfo };
const cellStyleName = { propertyName: 'cellStyleName', modelName: '@CellStyleName', displayName: 'Cell', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.Cell', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, customTotalCellStyleName = { propertyName: 'customTotalCellStyleName', modelName: '@CustomTotalCellStyleName', displayName: 'Custom Total Cell', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.CustomTotalCell', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, fieldHeaderStyleName = { propertyName: 'fieldHeaderStyleName', modelName: '@FieldHeaderStyleName', displayName: 'Field Header', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.FieldHeader', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, fieldValueGrandTotalStyleName = { propertyName: 'fieldValueGrandTotalStyleName', modelName: '@FieldValueGrandTotalStyleName', displayName: 'Field Value Grand Total', localizationId: 'DevExpress.XtraPivotGrid.PivotGridAppearancesBase.FieldValueGrandTotal', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, fieldValueStyleName = { propertyName: 'fieldValueStyleName', modelName: '@FieldValueStyleName', displayName: 'Field Value', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.FieldValue', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, fieldValueTotalStyleName = { propertyName: 'fieldValueTotalStyleName', modelName: '@FieldValueTotalStyleName', displayName: 'Field Value Total', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.FieldValueTotal', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, filterSeparatorStyleName = { propertyName: 'filterSeparatorStyleName', modelName: '@FilterSeparatorStyleName', displayName: 'Filter Separator', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.FilterSeparator', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, grandTotalCellStyleName = { propertyName: 'grandTotalCellStyleName', modelName: '@GrandTotalCellStyleName', displayName: 'Grand Total Cell', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.GrandTotalCell', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, headerGroupLineStyleName = { propertyName: 'headerGroupLineStyleName', modelName: '@HeaderGroupLineStyleName', displayName: 'Header Group Line', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.HeaderGroupLine', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, linesStyleName = { propertyName: 'linesStyleName', modelName: '@LinesStyleName', displayName: 'Lines', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.Lines', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, totalCellStyleName = { propertyName: 'totalCellStyleName', modelName: '@TotalCellStyleName', displayName: 'Total Cell', localizationId: 'DevExpress.XtraReports.UI.PivotGrid.XRPivotGridAppearances.TotalCell', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, generalStyleName = { propertyName: 'generalStyleName', modelName: '@GeneralStyleName', displayName: 'General Style', localizationId: 'DevExpress.XtraReports.UI.XRCrossTab.GeneralStyleName', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, dataAreaStyleName = { propertyName: 'dataAreaStyleName', modelName: '@DataAreaStyleName', displayName: 'Data Area Style', localizationId: 'DevExpress.XtraReports.UI.XRCrossTab.DataAreaStyleName', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, headerAreaStyleName = { propertyName: 'headerAreaStyleName', modelName: '@HeaderAreaStyleName', displayName: 'Header Area Style', localizationId: 'DevExpress.XtraReports.UI.XRCrossTab.HeaderAreaStyleName', editor: designerEditorTemplates.getEditor('style'), defaultVal: null }, totalAreaStyleName = { propertyName: 'totalAreaStyleName', modelName: '@TotalAreaStyleName', displayName: 'Total Area Style', localizationId: 'DevExpress.XtraReports.UI.XRCrossTab.TotalAreaStyleName', editor: designerEditorTemplates.getEditor('style'), defaultVal: null };
export const pivotGridStyles = [cellStyleName, customTotalCellStyleName, fieldHeaderStyleName, fieldValueGrandTotalStyleName, fieldValueStyleName, fieldValueTotalStyleName, filterSeparatorStyleName,
    grandTotalCellStyleName, headerGroupLineStyleName, linesStyleName, totalCellStyleName];
export const crossTabStyles = [generalStyleName, headerAreaStyleName, dataAreaStyleName, totalAreaStyleName];
export const crossTabStylesDefaults = {
    generalStyleName: { '@Name': 'crossTabGeneralStyle', '@BorderStyle': 'Inset', '@Padding': defaultTextPadding, '@Font': 'Arial, 9.75pt', '@ForeColor': 'Black', '@BackColor': 'White', '@BorderColor': '255,160,160,160', '@Sides': 'All', '@StringFormat': 'Near;Near;0;None;Character;Default' },
    dataAreaStyleName: { '@Name': 'crossTabDataStyle', '@BorderStyle': 'Inset', '@StringFormat': 'Far;Center;0;None;Character;Default', '@TextAlignment': 'MiddleRight' },
    headerAreaStyleName: { '@Name': 'crossTabHeaderStyle', '@BorderStyle': 'Inset', '@BackColor': '255,240,240,240', '@StringFormat': 'Near;Center;0;None;Character;Default', '@TextAlignment': 'MiddleLeft' },
    totalAreaStyleName: { '@Name': 'crossTabTotalStyle', '@BorderStyle': 'Inset', '@StringFormat': 'Far;Center;0;None;Character;Default', '@TextAlignment': 'MiddleRight' }
};
export const stylesInfo = [evenStyleName, oddStyleName, styleName].concat(pivotGridStyles, crossTabStyles);
export const stylesObj = { propertyName: 'styleObj', displayName: 'Styles', editor: editorTemplates.getEditor('objecteditor'), localizationId: 'DevExpress.XtraReports.UI.XRPivotGrid.Styles' };