@globalpayments/vega 2.70.0 → 2.72.0

package/dist/collection/components/vega-rich-text-editor/test/dto/annotation-style.test.js

@@ -17,7 +17,7 @@ describe('annotation-style', () => {
     });
     const blockAnnotationStyle = new RTEAnnotationStyle(textBlock);
     expect(blockAnnotationStyle.toCssText()).toEqual('color: red;font-size: 16px;');
-    expect(blockAnnotationStyle.toCssText({ standalone: true })).toEqual('font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: center;color: red;');
+    expect(blockAnnotationStyle.toCssText({ standalone: true })).toEqual('font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: center;color: red;');
     expect(blockAnnotationStyle.toCssText(null, null, {})).toEqual('');
     expect(blockAnnotationStyle.toCssText(null, null, { color: 'red' })).toEqual('color: red;');
     expect(blockAnnotationStyle.toCssText(null, null, { backgroundColor: 'blue', fontWeight: 'bold' })).toEqual('background-color: blue;font-weight: bold;');
@@ -56,6 +56,7 @@ describe('annotation-style', () => {
       fontSize: '16px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
       textAlign: 'center',

package/dist/collection/components/vega-rich-text-editor/test/dto/annotations.test.js

@@ -47,6 +47,7 @@ describe('annotations', () => {
       fontSize: '16px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -55,18 +56,21 @@ describe('annotations', () => {
       fontSize: '36px',
       fontWeight: '500',
       lineHeight: '40px',
+      minHeight: '40px',
     });
     expect(new TextStyleAnnotation('subtitle').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '28px',
       fontWeight: '500',
       lineHeight: '32px',
+      minHeight: '32px',
     });
     expect(new TextStyleAnnotation('heading-1').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '22px',
       fontWeight: '500',
       lineHeight: '24px',
+      minHeight: '24px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -75,6 +79,7 @@ describe('annotations', () => {
       fontSize: '20px',
       fontWeight: '500',
       lineHeight: '24px',
+      minHeight: '24px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -83,6 +88,7 @@ describe('annotations', () => {
       fontSize: '18px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -91,6 +97,7 @@ describe('annotations', () => {
       fontSize: '16px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -99,6 +106,7 @@ describe('annotations', () => {
       fontSize: '14px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -107,6 +115,7 @@ describe('annotations', () => {
       fontSize: '12px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/text-block.test.js

@@ -187,7 +187,7 @@ describe('text block', () => {
         },
       ],
     };
-    expect(RTETextBlock.from(textBlock).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a text.</span></a></p>`);
+    expect(RTETextBlock.from(textBlock).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a text.</span></a></p>`);
     expect(RTETextBlock.from(textBlock, { autoMatchFormat: false }).toHtml()).toEqual(`<p><a href="www.google.com"><span>This is a text.</span></a></p>`);
   });
 });

package/dist/collection/components/vega-rich-text-editor/test/dto/content-state.test.js

@@ -316,7 +316,7 @@ describe('content state', () => {
           nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-top: 0px; margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-top: 0px; margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
     });
     it('should convert text node with annotations to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -336,7 +336,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span> text</span></p>`);
     });
     it('should convert text block with annotations to HTML with inline styles correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -354,7 +354,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;text-decoration: underline;">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;text-decoration: underline;">This is a paragraph</span></p>`);
     });
     it('should convert image block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -399,7 +399,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
     });
     it('should convert number list block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -420,7 +420,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ol style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ol>`);
+      expect(contentState.toHtml()).toEqual(`<ol style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ol>`);
     });
     it('should convert code block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -456,7 +456,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://example.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a link</span></a></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://example.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a link</span></a></p>`);
     });
     it('should convert a complex value to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -789,7 +789,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<div style="font-family: Inter;font-size: 36px;line-height: 40px;font-weight: 500;"><span style="font-weight: 700;">Title</span></div><div style="font-family: Inter;font-size: 28px;line-height: 32px;font-weight: 500;"><span>Subtitle</span></div><h1 style="font-family: Inter;font-size: 22px;line-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 1</span></h1><h2 style="font-family: Inter;font-size: 20px;line-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 2</span></h2><h3 style="font-family: Inter;font-size: 18px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 3</span></h3><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Paragraph</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Bold text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-style: italic;">Italic text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Underline text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Strikethrough text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><code style="font-family: Roboto Mono;white-space: pre-wrap;">Code text</code></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="color: #BD2947;">Color text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: left;"><span>Left align</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span>Right align</span></p><ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 2</span></li></ul><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-left: 32px;"><span>More indent</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>Link text</span></a></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p>`);
+      expect(contentState.toHtml()).toEqual(`<div style="font-family: Inter;font-size: 36px;line-height: 40px;min-height: 40px;font-weight: 500;"><span style="font-weight: 700;">Title</span></div><div style="font-family: Inter;font-size: 28px;line-height: 32px;min-height: 32px;font-weight: 500;"><span>Subtitle</span></div><h1 style="font-family: Inter;font-size: 22px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 1</span></h1><h2 style="font-family: Inter;font-size: 20px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 2</span></h2><h3 style="font-family: Inter;font-size: 18px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 3</span></h3><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Paragraph</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Bold text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-style: italic;">Italic text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Underline text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Strikethrough text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><code style="font-family: Roboto Mono;white-space: pre-wrap;">Code text</code></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="color: #BD2947;">Color text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: left;"><span>Left align</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span>Right align</span></p><ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 2</span></li></ul><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-left: 32px;"><span>More indent</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>Link text</span></a></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p>`);
     });
     it('should convert paragraph with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -818,7 +818,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500; margin-top: 0px; margin-bottom: 0px;"><span id="span-element" dir="dir-span">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500; margin-top: 0px; margin-bottom: 0px;"><span id="span-element" dir="dir-span">This is a paragraph</span></p>`);
     });
     it('should convert text node with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -868,7 +868,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span id="text1" style="font-weight: 700;">This is a paragraph.</span><code id="text2" style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span id="text3"> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span id="text1" style="font-weight: 700;">This is a paragraph.</span><code id="text2" style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span id="text3"> text</span></p>`);
     });
     it('should convert bullet list block with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -904,7 +904,7 @@ describe('content state', () => {
           },
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul id="ul" style="padding-left: 8px;margin-left: 16px;"><li id="list1" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li id="list2" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul id="ul" style="padding-left: 8px;margin-left: 16px;"><li id="list1" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li id="list2" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
     });
     it('should convert paragraph with custom class to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1025,7 +1025,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 700; margin-top: 0px; margin-bottom: 0px;"><span style="font-weight: 700">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 700; margin-top: 0px; margin-bottom: 0px;"><span style="font-weight: 700">This is a paragraph</span></p>`);
     });
     it('should convert text node with custom style to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1074,7 +1074,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;padding: 20px;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;padding: 30px;"> code</code><span style="padding: 40px;"> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;padding: 20px;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;padding: 30px;"> code</code><span style="padding: 40px;"> text</span></p>`);
     });
     it('should convert bullet list block with custom style to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1110,7 +1110,7 @@ describe('content state', () => {
           },
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;padding: 60px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;padding: 60px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
     });
     it('should log warning when call toHtml with deprecated parameter', () => {
       setVegaLogLevel('warn');
@@ -2839,8 +2839,8 @@ Line 1
           nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
         },
       ];
-      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
     });

package/dist/collection/constants/regex.js

@@ -4,3 +4,4 @@ export const VisaRegex = /^4/;
 export const MasterCardRegex = /^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/;
 export const AmexRegex = /^3[47]/;
 export const DiscoverRegex = /^(6011|65|64[4-9]|622)/;
+export const DateFormatParserRegex = /(\\)?(Y{2,4}|M{1,4}|D{1,2}|d{1,4})/g;

package/dist/collection/constants/ui.js

@@ -88,6 +88,9 @@ export const VegaNativeEventName = [
   'monthYearChange',
   'complete',
   'paste',
+  'clear',
+  'periodChange',
+  'selectionChange',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/helpers/calendar/calendar-date.js

@@ -1,6 +1,10 @@
 import { VegaInternalTranslation } from '../translation';
 import { CalendarDateTime } from './calendar-date-time';
 import { getSystemTimezone } from './utils';
+import { DateFormatParserRegex } from '../../constants/regex';
+import { compareIsAfter, compareIsBefore, pad } from '../../utils/date';
+// TODO: Need rename calendar-date as vega-date to manage all date operation in vega project
+// https://gethired.atlassian.net/browse/VD-5918
 /**
  * Calendar date class
  */
@@ -20,6 +24,153 @@ export class CalendarDate {
   static from(currentDate, timezone = getSystemTimezone()) {
     return CalendarDateTime.fromDate(currentDate, timezone).calendarDate;
   }
+  /**
+   * Converts a date string to CalendarDate with optional format and timezone parameters.
+   *
+   * @param {string} dateString - The string date.
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - lang
+   * @returns {Nullable<CalendarDate>} - CalendarDate.
+   */
+  static fromString(dateString, format = 'MM/DD/YYYY', lang = 'en-us') {
+    if (!dateString)
+      return null;
+    const formatMatchers = [];
+    let formatMatcher = null;
+    // Analyze the format and find the corresponding positions for year, month, and day.
+    // Data: formatMatchers = [['DD', index: 0, ...], ['MM', index: 3, ...], ['YYYY', index: 7, ...]]
+    while ((formatMatcher = DateFormatParserRegex.exec(format)) != null) {
+      if (formatMatcher[1] === '\\')
+        continue;
+      formatMatchers.push(formatMatcher);
+    }
+    if (formatMatchers.length) {
+      const datePattern = {
+        year: undefined,
+        month: undefined,
+        shortMonth: undefined,
+        longMonth: undefined,
+        day: undefined,
+        value: '',
+      };
+      const firstMatcher = formatMatchers[0];
+      if (firstMatcher && firstMatcher.index > 0) {
+        datePattern.value += '.*?';
+      }
+      // According `matchers` to generate a new regex which can parse the date by corresponding year, month and day
+      // Data: dateRegex = "(\d{2}).*?(\d{2}).*?(\d{4}).*?"
+      //       datePattern = {day: 1, longMonth: null, month: 2, shortMonth: null, year: 3, value: "(\d{2}).*?(\d{2}).*?(\d{4}).*?"}
+      for (const [k, match] of Object.entries(formatMatchers)) {
+        const key = Number(k);
+        if (match) {
+          const { group, pattern } = this.getPatternByFormatToken(match[0], lang);
+          datePattern[group] = key + 1;
+          datePattern.value += pattern;
+          datePattern.value += '.*?';
+        }
+      }
+      const dateRegex = new RegExp(`^${datePattern.value}$`);
+      if (dateRegex.test(dateString)) {
+        // Parse the date
+        // Example: parsedDate = ['08-02-2020', '08', '02', '2020']
+        const parsedDate = dateRegex.exec(dateString);
+        if (parsedDate &&
+          datePattern.year &&
+          (datePattern.month || datePattern.shortMonth || datePattern.longMonth) &&
+          datePattern.day) {
+          const year = Number(parsedDate[datePattern.year]);
+          let month = 1;
+          if (datePattern.month) {
+            month = Number(parsedDate[datePattern.month]) - 1;
+          }
+          else if (datePattern.shortMonth) {
+            month = this.shortMonths(lang).indexOf(parsedDate[datePattern.shortMonth]);
+          }
+          else if (datePattern.longMonth) {
+            month = this.longMonths(lang).indexOf(parsedDate[datePattern.longMonth]);
+          }
+          const day = Number(parsedDate[datePattern.day]);
+          const fullYear = Number(pad(year, 4, `${new Date().getFullYear()}`.slice(0, 2)));
+          if (isNaN(Date.parse(`${fullYear}-${pad(month + 1)}-${pad(day)}`)))
+            return null;
+          return this.from(new Date(fullYear, month, day, 0, 0, 0, 0));
+        }
+      }
+    }
+    return this.from(new Date(dateString));
+  }
+  /**
+   * Get regex pattern by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {FormatPatternType} - regex pattern.
+   */
+  static getPatternByFormatToken(token, lang) {
+    switch (token) {
+      case 'YY':
+      case 'YYYY':
+        return {
+          group: 'year',
+          pattern: `(\\d{${token.length}})`,
+        };
+      case 'M':
+        return {
+          group: 'month',
+          pattern: '(\\d{1,2})',
+        };
+      case 'MM':
+        return {
+          group: 'month',
+          pattern: '(\\d{2})',
+        };
+      case 'MMM':
+        return {
+          group: 'shortMonth',
+          pattern: `(${this.shortMonths(lang).join('|')})`,
+        };
+      case 'MMMM':
+        return {
+          group: 'longMonth',
+          pattern: `(${this.longMonths(lang).join('|')})`,
+        };
+      case 'D':
+        return {
+          group: 'day',
+          pattern: '(\\d{1,2})',
+        };
+      case 'DD':
+        return {
+          group: 'day',
+          pattern: '(\\d{2})',
+        };
+      /* istanbul ignore next */
+      default: {
+        return {
+          group: 'unknown',
+          pattern: '(.*)',
+        };
+      }
+    }
+  }
+  /**
+   * Shorts months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Shorts months.
+   */
+  static shortMonths(lang) {
+    return this.MONTHS.map((month) => new Date(2019, month).toLocaleString(lang, { month: 'short' }));
+  }
+  /**
+   * Long months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Long months.
+   */
+  static longMonths(lang) {
+    return this.MONTHS.map((month) => new Date(2019, month).toLocaleString(lang, { month: 'long' }));
+  }
   /**
    * The year of the calendar date
    *
@@ -53,6 +204,44 @@ export class CalendarDate {
   set date(value) {
     this._date = value;
   }
+  /**
+   * Converts CalendarDate to a string with an optional format specifier.
+   *
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - Language
+   * @returns {string} The string date.
+   */
+  toString(format = 'MM/DD/YYYY', lang = 'en-us') {
+    let result = '';
+    const formatMatchers = [];
+    let formatMatcher = null;
+    while ((formatMatcher = DateFormatParserRegex.exec(format)) != null) {
+      if (formatMatcher[1] === '\\')
+        continue;
+      formatMatchers.push(formatMatcher);
+    }
+    if (formatMatchers.length) {
+      // add start line of tokens are not at the beginning
+      const firstMatcher = formatMatchers[0];
+      if (firstMatcher && firstMatcher.index > 0) {
+        result += format.substring(0, firstMatcher.index);
+      }
+      for (const [k, match] of Object.entries(formatMatchers)) {
+        const key = Number(k);
+        if (match) {
+          result += this.getDateItemByFormatToken(match[0], lang);
+          const nextMatch = formatMatchers[key + 1];
+          if (nextMatch) {
+            result += format.substring(match.index + match[0].length, nextMatch.index);
+          }
+          if (key === formatMatchers.length - 1) {
+            result += format.substring(match.index + match[0].length);
+          }
+        }
+      }
+    }
+    return result.replace(/\\/g, '');
+  }
   /**
    * Verify whether the calendar date is today
    *
@@ -112,11 +301,13 @@ export class CalendarDate {
   /**
    * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
    *
-   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * @param {Nullable<CalendarDate>} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
    * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
    * @returns {boolean} The date is same day with current
    */
   equal(calendarDate) {
+    if (!calendarDate)
+      return false;
     const { year, month, date } = calendarDate;
     return this._year === year && this._month === month && this._date === date;
   }
@@ -131,4 +322,85 @@ export class CalendarDate {
       month: isShortName ? 'short' : 'long',
     }));
   }
+  /**
+   * To determine if it is larger than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isAfter(calendarDate) {
+    if (!calendarDate)
+      return false;
+    return compareIsAfter(this.toDate(), calendarDate.toDate());
+  }
+  /**
+   * To determine if it is less than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isBefore(calendarDate) {
+    if (!calendarDate)
+      return false;
+    return compareIsBefore(this.toDate(), calendarDate.toDate());
+  }
+  /**
+   * Get first day of month.
+   *
+   * @returns {CalendarDate} - First day of month.
+   */
+  firstDateOfMonth() {
+    return CalendarDate.from(new Date(this.year, this.month - 1, 1));
+  }
+  /**
+   * Get last day of month.
+   *
+   * @returns {CalendarDate} - Last day of month.
+   */
+  lastDateOfMonth() {
+    return CalendarDate.from(new Date(this.year, this.month, 0));
+  }
+  /**
+   * Adjusts the calendar date by adding the specified number of years, months, and days.
+   *
+   * @param {number} [years=0] - The number of years to add.
+   * @param {number} [months=0] - The number of months to add.
+   * @param {number} [days=0] - The number of days to add.
+   * @returns {CalendarDate} - A new CalendarDate object with the adjusted date.
+   */
+  add(years = 0, months = 0, days = 0) {
+    const currentDate = this.toDate();
+    const adjustedDate = new Date(currentDate.getFullYear() + years, currentDate.getMonth() + months, currentDate.getDate() + days);
+    return CalendarDate.from(adjustedDate);
+  }
+  /**
+   * Get year, month and day value by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {string} - year, month and day value.
+   */
+  getDateItemByFormatToken(token, lang) {
+    switch (token) {
+      case 'YY':
+        return String(this.year).slice(-2);
+      case 'YYYY':
+        return String(this.year);
+      case 'M':
+        return String(this.month);
+      case 'MM':
+        return `0${this.month}`.slice(-2);
+      case 'MMM':
+        return CalendarDate.shortMonths(lang)[this.month - 1];
+      case 'MMMM':
+        return CalendarDate.longMonths(lang)[this.month - 1];
+      case 'D':
+        return String(this.date);
+      case 'DD':
+        return `0${this.date}`.slice(-2);
+      default:
+        return '';
+    }
+  }
 }
+CalendarDate.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

package/dist/collection/helpers/calendar/calendar-period/calendar-period.abstract.js

@@ -83,6 +83,15 @@ export class CalendarPeriod {
   now() {
     return this.createBy(CalendarDate.from(new Date(), this._timezone));
   }
+  /**
+   * Check the give period is equal to current period
+   *
+   * @param {CalendarPeriod} [period] - Give period to compare
+   * @returns {boolean} compare result
+   */
+  equal(period) {
+    return this.startDate.equal(period.startDate) && this.endDate.equal(period.endDate);
+  }
   /**
    * Calculate the period start date and end date.
    *

package/dist/collection/helpers/calendar/calendar-period/month-period.js

@@ -43,16 +43,28 @@ export class MonthPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   next() {
-    const next = this.current.toDate();
-    next.setMonth(next.getMonth() + 1);
+    const current = this.current.toDate();
+    const year = current.getFullYear();
+    const month = current.getMonth() + 1;
+    const day = current.getDate();
+    // Get the last day of the next month
+    const lastDayOfNextMonth = new Date(year, month + 1, 0).getDate();
+    const nextDay = Math.min(day, lastDayOfNextMonth);
+    const next = new Date(year, month, nextDay);
     return this.createBy(CalendarDate.from(next));
   }
   /**
    * @inheritDoc
    */
   previous() {
-    const previous = this.current.toDate();
-    previous.setMonth(previous.getMonth() - 1);
+    const current = this.current.toDate();
+    const year = current.getFullYear();
+    const month = current.getMonth() - 1;
+    const day = current.getDate();
+    // Get the last day of the previous month
+    const lastDayOfPreviousMonth = new Date(year, month + 1, 0).getDate();
+    const previousDay = Math.min(day, lastDayOfPreviousMonth);
+    const previous = new Date(year, month, previousDay);
     return this.createBy(CalendarDate.from(previous));
   }
   /**