@dotcms/uve 0.0.1-beta.14 → 0.0.1-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,740 @@
1
+ import { DotCMSUVEAction, UVEEventType } from './types.esm.js';
2
+
3
+ /**
4
+ * Actions received from the dotcms editor
5
+ *
6
+ * @export
7
+ * @enum {number}
8
+ */
9
+ var __DOTCMS_UVE_EVENT__;
10
+ (function (__DOTCMS_UVE_EVENT__) {
11
+ /**
12
+ * Request to page to reload
13
+ */
14
+ __DOTCMS_UVE_EVENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
15
+ /**
16
+ * Request the bounds for the elements
17
+ */
18
+ __DOTCMS_UVE_EVENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
19
+ /**
20
+ * Received pong from the editor
21
+ */
22
+ __DOTCMS_UVE_EVENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
23
+ /**
24
+ * Received scroll event trigger from the editor
25
+ */
26
+ __DOTCMS_UVE_EVENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
27
+ /**
28
+ * TODO:
29
+ * Set the page data - This is used to catch the "changes" event.
30
+ * We must to re-check the name late.
31
+ */
32
+ __DOTCMS_UVE_EVENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
33
+ /**
34
+ * Copy contentlet inline editing success
35
+ */
36
+ __DOTCMS_UVE_EVENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
37
+ })(__DOTCMS_UVE_EVENT__ || (__DOTCMS_UVE_EVENT__ = {}));
38
+
39
+ /**
40
+ * Calculates the bounding information for each page element within the given containers.
41
+ *
42
+ * @export
43
+ * @param {HTMLDivElement[]} containers - An array of HTMLDivElement representing the containers.
44
+ * @return {DotCMSContainerBound[]} An array of objects containing the bounding information for each page element.
45
+ * @example
46
+ * ```ts
47
+ * const containers = document.querySelectorAll('.container');
48
+ * const bounds = getDotCMSPageBounds(containers);
49
+ * console.log(bounds);
50
+ * ```
51
+ */
52
+ function getDotCMSPageBounds(containers) {
53
+ return containers.map(container => {
54
+ const containerRect = container.getBoundingClientRect();
55
+ const contentlets = Array.from(container.querySelectorAll('[data-dot-object="contentlet"]'));
56
+ return {
57
+ x: containerRect.x,
58
+ y: containerRect.y,
59
+ width: containerRect.width,
60
+ height: containerRect.height,
61
+ payload: JSON.stringify({
62
+ container: getDotCMSContainerData(container)
63
+ }),
64
+ contentlets: getDotCMSContentletsBound(containerRect, contentlets)
65
+ };
66
+ });
67
+ }
68
+ /**
69
+ * Calculates the bounding information for each contentlet inside a container.
70
+ *
71
+ * @export
72
+ * @param {DOMRect} containerRect - The bounding rectangle of the container.
73
+ * @param {HTMLDivElement[]} contentlets - An array of HTMLDivElement representing the contentlets.
74
+ * @return {DotCMSContentletBound[]} An array of objects containing the bounding information for each contentlet.
75
+ * @example
76
+ * ```ts
77
+ * const containerRect = container.getBoundingClientRect();
78
+ * const contentlets = container.querySelectorAll('.contentlet');
79
+ * const bounds = getDotCMSContentletsBound(containerRect, contentlets);
80
+ * console.log(bounds); // Element bounds within the container
81
+ * ```
82
+ */
83
+ function getDotCMSContentletsBound(containerRect, contentlets) {
84
+ return contentlets.map(contentlet => {
85
+ const contentletRect = contentlet.getBoundingClientRect();
86
+ return {
87
+ x: 0,
88
+ y: contentletRect.y - containerRect.y,
89
+ width: contentletRect.width,
90
+ height: contentletRect.height,
91
+ payload: JSON.stringify({
92
+ container: contentlet.dataset?.['dotContainer'] ? JSON.parse(contentlet.dataset?.['dotContainer']) : getClosestDotCMSContainerData(contentlet),
93
+ contentlet: {
94
+ identifier: contentlet.dataset?.['dotIdentifier'],
95
+ title: contentlet.dataset?.['dotTitle'],
96
+ inode: contentlet.dataset?.['dotInode'],
97
+ contentType: contentlet.dataset?.['dotType']
98
+ }
99
+ })
100
+ };
101
+ });
102
+ }
103
+ /**
104
+ * Get container data from VTLS.
105
+ *
106
+ * @export
107
+ * @param {HTMLElement} container - The container element.
108
+ * @return {object} An object containing the container data.
109
+ * @example
110
+ * ```ts
111
+ * const container = document.querySelector('.container');
112
+ * const data = getContainerData(container);
113
+ * console.log(data);
114
+ * ```
115
+ */
116
+ function getDotCMSContainerData(container) {
117
+ return {
118
+ acceptTypes: container.dataset?.['dotAcceptTypes'] || '',
119
+ identifier: container.dataset?.['dotIdentifier'] || '',
120
+ maxContentlets: container.dataset?.['maxContentlets'] || '',
121
+ uuid: container.dataset?.['dotUuid'] || ''
122
+ };
123
+ }
124
+ /**
125
+ * Get the closest container data from the contentlet.
126
+ *
127
+ * @export
128
+ * @param {Element} element - The contentlet element.
129
+ * @return {object | null} An object containing the closest container data or null if no container is found.
130
+ * @example
131
+ * ```ts
132
+ * const contentlet = document.querySelector('.contentlet');
133
+ * const data = getClosestDotCMSContainerData(contentlet);
134
+ * console.log(data);
135
+ * ```
136
+ */
137
+ function getClosestDotCMSContainerData(element) {
138
+ // Find the closest ancestor element with data-dot-object="container" attribute
139
+ const container = element.closest('[data-dot-object="container"]');
140
+ // If a container element is found
141
+ if (container) {
142
+ // Return the dataset of the container element
143
+ return getDotCMSContainerData(container);
144
+ } else {
145
+ // If no container element is found, return null
146
+ console.warn('No container found for the contentlet');
147
+ return null;
148
+ }
149
+ }
150
+ /**
151
+ * Find the closest contentlet element based on HTMLElement.
152
+ *
153
+ * @export
154
+ * @param {HTMLElement | null} element - The starting element.
155
+ * @return {HTMLElement | null} The closest contentlet element or null if not found.
156
+ * @example
157
+ * const element = document.querySelector('.some-element');
158
+ * const contentlet = findDotCMSElement(element);
159
+ * console.log(contentlet);
160
+ */
161
+ function findDotCMSElement(element) {
162
+ if (!element) return null;
163
+ if (element?.dataset?.['dotObject'] === 'contentlet' || element?.dataset?.['dotObject'] === 'container' && element.children.length === 0) {
164
+ return element;
165
+ }
166
+ return findDotCMSElement(element?.['parentElement']);
167
+ }
168
+ /**
169
+ * Find VTL data within a target element.
170
+ *
171
+ * @export
172
+ * @param {HTMLElement} target - The target element to search within.
173
+ * @return {Array<{ inode: string, name: string }> | null} An array of objects containing VTL data or null if none found.
174
+ * @example
175
+ * ```ts
176
+ * const target = document.querySelector('.target-element');
177
+ * const vtlData = findDotCMSVTLData(target);
178
+ * console.log(vtlData);
179
+ * ```
180
+ */
181
+ function findDotCMSVTLData(target) {
182
+ const vltElements = target.querySelectorAll('[data-dot-object="vtl-file"]');
183
+ if (!vltElements.length) {
184
+ return null;
185
+ }
186
+ return Array.from(vltElements).map(vltElement => {
187
+ return {
188
+ inode: vltElement.dataset?.['dotInode'],
189
+ name: vltElement.dataset?.['dotUrl']
190
+ };
191
+ });
192
+ }
193
+ /**
194
+ * Check if the scroll position is at the bottom of the page.
195
+ *
196
+ * @export
197
+ * @return {boolean} True if the scroll position is at the bottom, otherwise false.
198
+ * @example
199
+ * ```ts
200
+ * if (dotCMSScrollIsInBottom()) {
201
+ * console.log('Scrolled to the bottom');
202
+ * }
203
+ * ```
204
+ */
205
+ function computeScrollIsInBottom() {
206
+ const documentHeight = document.documentElement.scrollHeight;
207
+ const viewportHeight = window.innerHeight;
208
+ const scrollY = window.scrollY;
209
+ return scrollY + viewportHeight >= documentHeight;
210
+ }
211
+ /**
212
+ *
213
+ *
214
+ * Combine classes into a single string.
215
+ *
216
+ * @param {string[]} classes
217
+ * @returns {string} Combined classes
218
+ */
219
+ const combineClasses = classes => classes.filter(Boolean).join(' ');
220
+ /**
221
+ *
222
+ *
223
+ * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
224
+ * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
225
+ *
226
+ * @example
227
+ * ```typescript
228
+ * const classes = getColumnPositionClasses({
229
+ * leftOffset: 1, // Starts at the first column
230
+ * width: 6 // Spans 6 columns
231
+ * });
232
+ * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
233
+ * ```
234
+ *
235
+ * @param {DotPageAssetLayoutColumn} column - Column configuration object
236
+ * @param {number} column.leftOffset - Starting position (0-based) in the grid
237
+ * @param {number} column.width - Number of columns to span
238
+ * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
239
+ */
240
+ const getColumnPositionClasses = column => {
241
+ const {
242
+ leftOffset,
243
+ width
244
+ } = column;
245
+ const startClass = `${START_CLASS}${leftOffset}`;
246
+ const endClass = `${END_CLASS}${leftOffset + width}`;
247
+ return {
248
+ startClass,
249
+ endClass
250
+ };
251
+ };
252
+ /**
253
+ *
254
+ *
255
+ * Helper function that returns an object containing the dotCMS data attributes.
256
+ * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
257
+ * @param {string} container - The container to get the attributes for
258
+ * @returns {DotContentletAttributes} The dotCMS data attributes
259
+ */
260
+ function getDotContentletAttributes(contentlet, container) {
261
+ return {
262
+ 'data-dot-identifier': contentlet?.identifier,
263
+ 'data-dot-basetype': contentlet?.baseType,
264
+ 'data-dot-title': contentlet?.['widgetTitle'] || contentlet?.title,
265
+ 'data-dot-inode': contentlet?.inode,
266
+ 'data-dot-type': contentlet?.contentType,
267
+ 'data-dot-container': container,
268
+ 'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages']
269
+ };
270
+ }
271
+ /**
272
+ *
273
+ *
274
+ * Retrieves container data from a DotCMS page asset using the container reference.
275
+ * This function processes the container information and returns a standardized format
276
+ * for container editing.
277
+ *
278
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
279
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
280
+ * @throws {Error} When page asset is invalid or container is not found
281
+ * @returns {EditableContainerData} Formatted container data for editing
282
+ *
283
+ * @example
284
+ * const containerData = getContainersData(pageAsset, containerRef);
285
+ * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
286
+ */
287
+ const getContainersData = (dotCMSPageAsset, columContainer) => {
288
+ const {
289
+ identifier,
290
+ uuid
291
+ } = columContainer;
292
+ const dotContainer = dotCMSPageAsset.containers[identifier];
293
+ if (!dotContainer) {
294
+ return null;
295
+ }
296
+ const {
297
+ containerStructures,
298
+ container
299
+ } = dotContainer;
300
+ const acceptTypes = containerStructures?.map(structure => structure.contentTypeVar).join(',') ?? '';
301
+ const variantId = container?.parentPermissionable?.variantId;
302
+ const maxContentlets = container?.maxContentlets ?? 0;
303
+ const path = container?.path;
304
+ return {
305
+ uuid,
306
+ variantId,
307
+ acceptTypes,
308
+ maxContentlets,
309
+ identifier: path ?? identifier
310
+ };
311
+ };
312
+ /**
313
+ *
314
+ *
315
+ * Retrieves the contentlets (content items) associated with a specific container.
316
+ * Handles different UUID formats and provides warning for missing contentlets.
317
+ *
318
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
319
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
320
+ * @returns {DotCMSContentlet[]} Array of contentlets in the container
321
+ *
322
+ * @example
323
+ * const contentlets = getContentletsInContainer(pageAsset, containerRef);
324
+ * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
325
+ */
326
+ const getContentletsInContainer = (dotCMSPageAsset, columContainer) => {
327
+ const {
328
+ identifier,
329
+ uuid
330
+ } = columContainer;
331
+ const {
332
+ contentlets
333
+ } = dotCMSPageAsset.containers[identifier];
334
+ const contentletsInContainer = contentlets[`uuid-${uuid}`] || contentlets[`uuid-dotParser_${uuid}`] || [];
335
+ if (!contentletsInContainer) {
336
+ console.warn(`We couldn't find the contentlets for the container with the identifier ${identifier} and the uuid ${uuid} becareful by adding content to this container.\nWe recommend to change the container in the layout and add the content again.`);
337
+ }
338
+ return contentletsInContainer;
339
+ };
340
+ /**
341
+ *
342
+ *
343
+ * Generates the required DotCMS data attributes for a container element.
344
+ * These attributes are used by DotCMS for container identification and functionality.
345
+ *
346
+ * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
347
+ * @returns {DotContainerAttributes} Object containing all necessary data attributes
348
+ *
349
+ * @example
350
+ * const attributes = getDotContainerAttributes({
351
+ * uuid: '123',
352
+ * identifier: 'cont1',
353
+ * acceptTypes: 'type1,type2',
354
+ * maxContentlets: 5
355
+ * });
356
+ * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
357
+ */
358
+ function getDotContainerAttributes({
359
+ uuid,
360
+ identifier,
361
+ acceptTypes,
362
+ maxContentlets
363
+ }) {
364
+ return {
365
+ 'data-dot-object': 'container',
366
+ 'data-dot-accept-types': acceptTypes,
367
+ 'data-dot-identifier': identifier,
368
+ 'data-max-contentlets': maxContentlets.toString(),
369
+ 'data-dot-uuid': uuid
370
+ };
371
+ }
372
+
373
+ /**
374
+ * Post message to dotcms page editor
375
+ *
376
+ * @export
377
+ * @template T
378
+ * @param {DotCMSUVEMessage<T>} message
379
+ */
380
+ function sendMessageToUVE(message) {
381
+ window.parent.postMessage(message, '*');
382
+ }
383
+ /**
384
+ * You can use this function to edit a contentlet in the editor.
385
+ *
386
+ * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
387
+ *
388
+ * @export
389
+ * @template T
390
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
391
+ */
392
+ function editContentlet(contentlet) {
393
+ sendMessageToUVE({
394
+ action: DotCMSUVEAction.EDIT_CONTENTLET,
395
+ payload: contentlet
396
+ });
397
+ }
398
+ /*
399
+ * Reorders the menu based on the provided configuration.
400
+ *
401
+ * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
402
+ * @param {number} [config.startLevel=1] - The starting level of the menu to reorder.
403
+ * @param {number} [config.depth=2] - The depth of the menu to reorder.
404
+ *
405
+ * This function constructs a URL for the reorder menu page with the specified
406
+ * start level and depth, and sends a message to the editor to perform the reorder action.
407
+ */
408
+ function reorderMenu(config) {
409
+ const {
410
+ startLevel = 1,
411
+ depth = 2
412
+ } = config || {};
413
+ sendMessageToUVE({
414
+ action: DotCMSUVEAction.REORDER_MENU,
415
+ payload: {
416
+ startLevel,
417
+ depth
418
+ }
419
+ });
420
+ }
421
+ /**
422
+ * Initializes the inline editing in the editor.
423
+ *
424
+ * @export
425
+ * @param {INLINE_EDITING_EVENT_KEY} type
426
+ * @param {InlineEditEventData} eventData
427
+ * @return {*}
428
+ *
429
+ * * @example
430
+ * ```html
431
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
432
+ * ${My Content}
433
+ * </div>
434
+ * ```
435
+ */
436
+ function initInlineEditing(type, data) {
437
+ sendMessageToUVE({
438
+ action: DotCMSUVEAction.INIT_INLINE_EDITING,
439
+ payload: {
440
+ type,
441
+ data
442
+ }
443
+ });
444
+ }
445
+
446
+ /**
447
+ * Enum representing the different types of blocks available in the Block Editor
448
+ *
449
+ * @export
450
+ * @enum {string}
451
+ */
452
+ var Blocks;
453
+ (function (Blocks) {
454
+ /** Represents a paragraph block */
455
+ Blocks["PARAGRAPH"] = "paragraph";
456
+ /** Represents a heading block */
457
+ Blocks["HEADING"] = "heading";
458
+ /** Represents a text block */
459
+ Blocks["TEXT"] = "text";
460
+ /** Represents a bullet/unordered list block */
461
+ Blocks["BULLET_LIST"] = "bulletList";
462
+ /** Represents an ordered/numbered list block */
463
+ Blocks["ORDERED_LIST"] = "orderedList";
464
+ /** Represents a list item within a list block */
465
+ Blocks["LIST_ITEM"] = "listItem";
466
+ /** Represents a blockquote block */
467
+ Blocks["BLOCK_QUOTE"] = "blockquote";
468
+ /** Represents a code block */
469
+ Blocks["CODE_BLOCK"] = "codeBlock";
470
+ /** Represents a hard break (line break) */
471
+ Blocks["HARDBREAK"] = "hardBreak";
472
+ /** Represents a horizontal rule/divider */
473
+ Blocks["HORIZONTAL_RULE"] = "horizontalRule";
474
+ /** Represents a DotCMS image block */
475
+ Blocks["DOT_IMAGE"] = "dotImage";
476
+ /** Represents a DotCMS video block */
477
+ Blocks["DOT_VIDEO"] = "dotVideo";
478
+ /** Represents a table block */
479
+ Blocks["TABLE"] = "table";
480
+ /** Represents a DotCMS content block */
481
+ Blocks["DOT_CONTENT"] = "dotContent";
482
+ })(Blocks || (Blocks = {}));
483
+
484
+ /**
485
+ * Subscribes to content changes in the UVE editor
486
+ *
487
+ * @param {UVEEventHandler} callback - Function to be called when content changes are detected
488
+ * @returns {Object} Object containing unsubscribe function and event type
489
+ * @returns {Function} .unsubscribe - Function to remove the event listener
490
+ * @returns {UVEEventType} .event - The event type being subscribed to
491
+ * @internal
492
+ */
493
+ function onContentChanges(callback) {
494
+ const messageCallback = event => {
495
+ if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
496
+ callback(event.data.payload);
497
+ }
498
+ };
499
+ window.addEventListener('message', messageCallback);
500
+ return {
501
+ unsubscribe: () => {
502
+ window.removeEventListener('message', messageCallback);
503
+ },
504
+ event: UVEEventType.CONTENT_CHANGES
505
+ };
506
+ }
507
+ /**
508
+ * Subscribes to page reload events in the UVE editor
509
+ *
510
+ * @param {UVEEventHandler} callback - Function to be called when page reload is triggered
511
+ * @returns {Object} Object containing unsubscribe function and event type
512
+ * @returns {Function} .unsubscribe - Function to remove the event listener
513
+ * @returns {UVEEventType} .event - The event type being subscribed to
514
+ * @internal
515
+ */
516
+ function onPageReload(callback) {
517
+ const messageCallback = event => {
518
+ if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_RELOAD_PAGE) {
519
+ callback();
520
+ }
521
+ };
522
+ window.addEventListener('message', messageCallback);
523
+ return {
524
+ unsubscribe: () => {
525
+ window.removeEventListener('message', messageCallback);
526
+ },
527
+ event: UVEEventType.PAGE_RELOAD
528
+ };
529
+ }
530
+ /**
531
+ * Subscribes to request bounds events in the UVE editor
532
+ *
533
+ * @param {UVEEventHandler} callback - Function to be called when bounds are requested
534
+ * @returns {Object} Object containing unsubscribe function and event type
535
+ * @returns {Function} .unsubscribe - Function to remove the event listener
536
+ * @returns {UVEEventType} .event - The event type being subscribed to
537
+ * @internal
538
+ */
539
+ function onRequestBounds(callback) {
540
+ const messageCallback = event => {
541
+ if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_REQUEST_BOUNDS) {
542
+ const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
543
+ const positionData = getDotCMSPageBounds(containers);
544
+ callback(positionData);
545
+ }
546
+ };
547
+ window.addEventListener('message', messageCallback);
548
+ return {
549
+ unsubscribe: () => {
550
+ window.removeEventListener('message', messageCallback);
551
+ },
552
+ event: UVEEventType.REQUEST_BOUNDS
553
+ };
554
+ }
555
+ /**
556
+ * Subscribes to iframe scroll events in the UVE editor
557
+ *
558
+ * @param {UVEEventHandler} callback - Function to be called when iframe scroll occurs
559
+ * @returns {Object} Object containing unsubscribe function and event type
560
+ * @returns {Function} .unsubscribe - Function to remove the event listener
561
+ * @returns {UVEEventType} .event - The event type being subscribed to
562
+ * @internal
563
+ */
564
+ function onIframeScroll(callback) {
565
+ const messageCallback = event => {
566
+ if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SCROLL_INSIDE_IFRAME) {
567
+ const direction = event.data.direction;
568
+ callback(direction);
569
+ }
570
+ };
571
+ window.addEventListener('message', messageCallback);
572
+ return {
573
+ unsubscribe: () => {
574
+ window.removeEventListener('message', messageCallback);
575
+ },
576
+ event: UVEEventType.IFRAME_SCROLL
577
+ };
578
+ }
579
+ /**
580
+ * Subscribes to contentlet hover events in the UVE editor
581
+ *
582
+ * @param {UVEEventHandler} callback - Function to be called when a contentlet is hovered
583
+ * @returns {Object} Object containing unsubscribe function and event type
584
+ * @returns {Function} .unsubscribe - Function to remove the event listener
585
+ * @returns {UVEEventType} .event - The event type being subscribed to
586
+ * @internal
587
+ */
588
+ function onContentletHovered(callback) {
589
+ const pointerMoveCallback = event => {
590
+ const foundElement = findDotCMSElement(event.target);
591
+ if (!foundElement) return;
592
+ const {
593
+ x,
594
+ y,
595
+ width,
596
+ height
597
+ } = foundElement.getBoundingClientRect();
598
+ const isContainer = foundElement.dataset?.['dotObject'] === 'container';
599
+ const contentletForEmptyContainer = {
600
+ identifier: 'TEMP_EMPTY_CONTENTLET',
601
+ title: 'TEMP_EMPTY_CONTENTLET',
602
+ contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
603
+ inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
604
+ widgetTitle: 'TEMP_EMPTY_CONTENTLET',
605
+ baseType: 'TEMP_EMPTY_CONTENTLET',
606
+ onNumberOfPages: 1
607
+ };
608
+ const contentlet = {
609
+ identifier: foundElement.dataset?.['dotIdentifier'],
610
+ title: foundElement.dataset?.['dotTitle'],
611
+ inode: foundElement.dataset?.['dotInode'],
612
+ contentType: foundElement.dataset?.['dotType'],
613
+ baseType: foundElement.dataset?.['dotBasetype'],
614
+ widgetTitle: foundElement.dataset?.['dotWidgetTitle'],
615
+ onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages']
616
+ };
617
+ const vtlFiles = findDotCMSVTLData(foundElement);
618
+ const contentletPayload = {
619
+ container:
620
+ // Here extract dot-container from contentlet if it is Headless
621
+ // or search in parent container if it is VTL
622
+ foundElement.dataset?.['dotContainer'] ? JSON.parse(foundElement.dataset?.['dotContainer']) : getClosestDotCMSContainerData(foundElement),
623
+ contentlet: isContainer ? contentletForEmptyContainer : contentlet,
624
+ vtlFiles
625
+ };
626
+ const contentletHoveredPayload = {
627
+ x,
628
+ y,
629
+ width,
630
+ height,
631
+ payload: contentletPayload
632
+ };
633
+ callback(contentletHoveredPayload);
634
+ };
635
+ document.addEventListener('pointermove', pointerMoveCallback);
636
+ return {
637
+ unsubscribe: () => {
638
+ document.removeEventListener('pointermove', pointerMoveCallback);
639
+ },
640
+ event: UVEEventType.CONTENTLET_HOVERED
641
+ };
642
+ }
643
+
644
+ /**
645
+ * Events that can be subscribed to in the UVE
646
+ *
647
+ * @internal
648
+ * @type {Record<UVEEventType, UVEEventSubscriber>}
649
+ */
650
+ const __UVE_EVENTS__ = {
651
+ [UVEEventType.CONTENT_CHANGES]: callback => {
652
+ return onContentChanges(callback);
653
+ },
654
+ [UVEEventType.PAGE_RELOAD]: callback => {
655
+ return onPageReload(callback);
656
+ },
657
+ [UVEEventType.REQUEST_BOUNDS]: callback => {
658
+ return onRequestBounds(callback);
659
+ },
660
+ [UVEEventType.IFRAME_SCROLL]: callback => {
661
+ return onIframeScroll(callback);
662
+ },
663
+ [UVEEventType.CONTENTLET_HOVERED]: callback => {
664
+ return onContentletHovered(callback);
665
+ }
666
+ };
667
+ /**
668
+ * Default UVE event
669
+ *
670
+ * @param {string} event - The event to subscribe to.
671
+ * @internal
672
+ */
673
+ const __UVE_EVENT_ERROR_FALLBACK__ = event => {
674
+ return {
675
+ unsubscribe: () => {
676
+ /* do nothing */
677
+ },
678
+ event
679
+ };
680
+ };
681
+ /**
682
+ * Development mode
683
+ *
684
+ * @internal
685
+ */
686
+ const DEVELOPMENT_MODE = 'development';
687
+ /**
688
+ * Production mode
689
+ *
690
+ * @internal
691
+ */
692
+ const PRODUCTION_MODE = 'production';
693
+ /**
694
+ * End class
695
+ *
696
+ * @internal
697
+ */
698
+ const END_CLASS = 'col-end-';
699
+ /**
700
+ * Start class
701
+ *
702
+ * @internal
703
+ */
704
+ const START_CLASS = 'col-start-';
705
+ /**
706
+ * Empty container style for React
707
+ *
708
+ * @internal
709
+ */
710
+ const EMPTY_CONTAINER_STYLE_REACT = {
711
+ width: '100%',
712
+ backgroundColor: '#ECF0FD',
713
+ display: 'flex',
714
+ justifyContent: 'center',
715
+ alignItems: 'center',
716
+ color: '#030E32',
717
+ height: '10rem'
718
+ };
719
+ /**
720
+ * Empty container style for Angular
721
+ *
722
+ * @internal
723
+ */
724
+ const EMPTY_CONTAINER_STYLE_ANGULAR = {
725
+ width: '100%',
726
+ 'background-color': '#ECF0FD',
727
+ display: 'flex',
728
+ 'justify-content': 'center',
729
+ 'align-items': 'center',
730
+ color: '#030E32',
731
+ height: '10rem'
732
+ };
733
+ /**
734
+ * Custom no component
735
+ *
736
+ * @internal
737
+ */
738
+ const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
739
+
740
+ export { Blocks as B, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, END_CLASS as E, PRODUCTION_MODE as P, START_CLASS as S, __UVE_EVENT_ERROR_FALLBACK__ as _, __UVE_EVENTS__ as a, EMPTY_CONTAINER_STYLE_REACT as b, EMPTY_CONTAINER_STYLE_ANGULAR as c, __DOTCMS_UVE_EVENT__ as d, editContentlet as e, getDotCMSContentletsBound as f, getDotCMSPageBounds as g, getDotCMSContainerData as h, initInlineEditing as i, getClosestDotCMSContainerData as j, findDotCMSElement as k, findDotCMSVTLData as l, computeScrollIsInBottom as m, combineClasses as n, getColumnPositionClasses as o, getDotContentletAttributes as p, getContainersData as q, reorderMenu as r, sendMessageToUVE as s, getContentletsInContainer as t, getDotContainerAttributes as u };