0
# Professional Components
1

2
Professional components are advanced commercial offerings requiring a Vaadin Pro subscription. These components provide enterprise-grade functionality for complex business applications.
3

4
## Capabilities
5

6
### Grid Pro
7

8
Professional data grid with inline editing capabilities and advanced features.
9

10
```typescript { .api }
11
/**
12
 * Professional grid component with inline editing
13
 * Extends Grid with advanced editing capabilities
14
 */
15
interface GridPro extends Grid {
16
  /** Enable editing on single click instead of double-click */
17
  editOnClick: boolean;
18
  /** Currently edited item and column */
19
  editedItem: object | null;
20
  /** Enter edit mode preventing navigation */
21
  enterNextRow: boolean;
22
  /** Enter edit mode moving to next column */
23
  enterNextColumn: boolean;
24

25
  /** Start editing specific item and column */
26
  startEdit(item: object, column: GridProEditColumn): void;
27
  /** Stop editing with optional cancel */
28
  stopEdit(cancel?: boolean): void;
29
}
30

31
/**
32
 * Editable column for GridPro
33
 */
34
interface GridProEditColumn extends GridColumn {
35
  /** Edit mode renderer */
36
  editModeRenderer: (root: HTMLElement, column: GridProEditColumn, model: GridItemModel) => void;
37
  /** Editor type (text, select, checkbox, custom) */
38
  editorType: string;
39
  /** Editor options for select type */
40
  editorOptions: string[];
41
}
42
```
43

44
### Rich Text Editor
45

46
WYSIWYG text editor with comprehensive formatting tools.
47

48
```typescript { .api }
49
/**
50
 * Rich text editor with WYSIWYG capabilities
51
 * Based on Quill.js with Vaadin theming
52
 */
53
interface RichTextEditor extends HTMLElement {
54
  /** Editor content in Delta format */
55
  value: string;
56
  /** Editor content as HTML */
57
  htmlValue: string;
58
  /** Editor is read-only */
59
  readonly: boolean;
60
  /** Editor theme variant */
61
  theme: string;
62
  /** Maximum content length */
63
  maxLength: number;
64
  /** Minimum content length */
65
  minLength: number;
66

67
  /** Focus the editor */
68
  focus(): void;
69
  /** Get text content without formatting */
70
  getTextContent(): string;
71
  /** Insert content at current selection */
72
  insertText(text: string): void;
73
  /** Format current selection */
74
  format(format: string, value: any): void;
75
}
76
```
77

78
### Charts
79

80
Interactive charts component powered by Highcharts.
81

82
```typescript { .api }
83
/**
84
 * Interactive charts component using Highcharts
85
 */
86
interface Chart extends HTMLElement {
87
  /** Chart configuration options */
88
  options: HighchartsOptions;
89
  /** Chart type shortcut */
90
  type: string;
91
  /** Chart title */
92
  title: string;
93
  /** Chart subtitle */
94
  subtitle: string;
95
  /** X-axis categories */
96
  categories: string[];
97
  /** Chart is currently loading */
98
  loading: boolean;
99

100
  /** Update chart with new options */
101
  update(): void;
102
  /** Show loading indicator */
103
  showLoading(): void;
104
  /** Hide loading indicator */
105
  hideLoading(): void;
106
  /** Export chart as image */
107
  exportChart(type: 'png' | 'jpeg' | 'pdf' | 'svg'): void;
108
}
109
```
110

111
### CRUD
112

113
Complete Create, Read, Update, Delete interface component.
114

115
```typescript { .api }
116
/**
117
 * Complete CRUD interface with grid and form
118
 */
119
interface Crud extends HTMLElement {
120
  /** Data items for CRUD operations */
121
  items: object[];
122
  /** Fields to include in forms */
123
  include: string;
124
  /** Fields to exclude from forms */
125
  exclude: string;
126
  /** Size of the CRUD component */
127
  size: 'small' | 'medium' | 'large';
128
  /** Editor position */
129
  editorPosition: 'bottom' | 'aside';
130
  /** Disable delete functionality */
131
  noDelete: boolean;
132
  /** Disable edit functionality */
133
  noEdit: boolean;
134

135
  /** Edit specific item */
136
  editItem(item: object): void;
137
  /** Delete specific item */
138
  deleteItem(item: object): void;
139
  /** Create new item */
140
  newItem(): void;
141
  /** Save current changes */
142
  save(): void;
143
  /** Cancel current operation */
144
  cancel(): void;
145
}
146
```
147

148
### Board
149

150
Responsive dashboard layout component.
151

152
```typescript { .api }
153
/**
154
 * Responsive dashboard board layout
155
 */
156
interface Board extends HTMLElement {
157
  /** Enable board editing mode */
158
  editable: boolean;
159
}
160

161
/**
162
 * Board row container
163
 */
164
interface BoardRow extends HTMLElement {
165
  /** Row content items */
166
  items: BoardRowItem[];
167
}
168
```
169

170
### Dashboard
171

172
Interactive dashboard with drag-and-drop widget management.
173

174
```typescript { .api }
175
/**
176
 * Interactive dashboard with widget management
177
 */
178
interface Dashboard extends HTMLElement {
179
  /** Dashboard items/widgets */
180
  items: DashboardItem[];
181
  /** Dashboard is in edit mode */
182
  editable: boolean;
183
  /** Minimum column width */
184
  minItemWidth: number;
185
  /** Maximum columns */
186
  maxColumns: number;
187
  /** Gap between items */
188
  gap: string;
189

190
  /** Add new widget */
191
  addItem(item: DashboardItem): void;
192
  /** Remove widget */
193
  removeItem(item: DashboardItem): void;
194
  /** Update widget */
195
  updateItem(item: DashboardItem): void;
196
}
197

198
/**
199
 * Dashboard widget item
200
 */
201
interface DashboardItem {
202
  /** Unique item identifier */
203
  id: string;
204
  /** Item title */
205
  title: string;
206
  /** Item column span */
207
  colspan: number;
208
  /** Item row span */
209
  rowspan: number;
210
  /** Item content component */
211
  component: string;
212
}
213
```
214

215
### Cookie Consent
216

217
GDPR-compliant cookie consent banner.
218

219
```typescript { .api }
220
/**
221
 * GDPR cookie consent banner
222
 */
223
interface CookieConsent extends HTMLElement {
224
  /** Cookie name for storing consent */
225
  cookieName: string;
226
  /** Consent message text */
227
  message: string;
228
  /** Dismiss button text */
229
  dismiss: string;
230
  /** Learn more link text */
231
  learnMore: string;
232
  /** Learn more link URL */
233
  learnMoreLink: string;
234
  /** Banner position */
235
  position: 'bottom' | 'top';
236
}
237
```
238

239
### Map
240

241
Interactive map component based on OpenLayers.
242

243
```typescript { .api }
244
/**
245
 * Interactive map component using OpenLayers
246
 */
247
interface Map extends HTMLElement {
248
  /** Map center coordinates [longitude, latitude] */
249
  center: [number, number];
250
  /** Map zoom level */
251
  zoom: number;
252
  /** Map projection */
253
  projection: string;
254

255
  /** Set map center */
256
  setCenter(coordinates: [number, number]): void;
257
  /** Set zoom level */
258
  setZoom(level: number): void;
259
  /** Add marker to map */
260
  addMarker(coordinates: [number, number], options?: MarkerOptions): void;
261
}
262
```
263

264
**Note**: Professional components require a valid Vaadin Pro subscription and license for production use.
265

266
For complete API details and usage examples, see the main documentation.