@globalpayments/vega 2.41.0 → 2.42.0

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

@@ -23,7 +23,7 @@ export class LinkAnnotation extends NodeAnnotation {
   /**
    * Generate the JSON representation of the annotation
    *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
    */
   toJSON() {
     return { link: { href: this.link.href, groupKey: this.link.groupKey } };

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

@@ -51,8 +51,9 @@ export class RTEBlock {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {keyof typeof BlockAnnotationTypeEnum} type - Annotation type
-   * @returns {Nullable<BlockAnnotation> | Nullable<LinkGroupAnnotation>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);

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

@@ -32,7 +32,7 @@ export class RTEListItemBlock extends RTETextBlock {
    * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
    *
    * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
-   * @returns {RTEListBlock} Return an instance of `RTEListItemBlock`
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
    */
   static from(block) {
     const listItemBlock = new RTEListItemBlock(block.id);

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

@@ -25,7 +25,7 @@ export class VegaRTEContent {
    * Converts a JSON array of blocks to a class array of RTEContentBlock.
    *
    * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
-   * @returns {RTEContentBlock[]} The converted array of RTEContentBlock.
+   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
    */
   static fromJSON(value) {
     const blocks = value.map((block) => {

package/dist/collection/components/vega-rich-text-editor/dto/nodes/image-node.js

@@ -22,7 +22,7 @@ export class RTEImageNode extends RTENode {
    *
    * @param {VegaRTEImageNode} node - The node to be converted.
    * @param {RTEImageBlock} parentBlock - The parent block
-   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   * @returns {RTEImageNode} An instance of `RTEImageBlock`
    */
   static from(node, parentBlock) {
     const imageNode = new RTEImageNode(node.id, node.url, parentBlock);

package/dist/collection/components/vega-rich-text-editor/dto/nodes/node.abstract.js

@@ -22,8 +22,9 @@ export class RTENode {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {RTENodeAnnotationMapKey} type - Annotation type
-   * @returns {Nullable<RTENodeAnnotationMapValue>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/block-renderer.abstract.js

@@ -24,7 +24,7 @@ export class RTEBlockRenderer {
    * Get classes from annotations
    *
    * @param {RTEBlock} block - RTE block entity
-   * @returns {AnnotationStyle} - Annotation style
+   * @returns {string} - Annotation style
    */
   getClasses(block) {
     return Array.from(block.annotationMap.values())

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/block-text-nodes-renderer.abstract.js

@@ -9,6 +9,7 @@ import { LinkAnnotationAction } from '../../actions/link-annotation-action';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 /**
  * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
  */
@@ -84,6 +85,7 @@ export class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
     return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
         if (ref) {
           linkWrapperRef = ref;
+          stateEntityRenderingRegistry.removeDirtyDomRef(ref);
         }
       } },
       this.renderLink(linkNodes, linkAnnotation),

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/node-renderer.abstract.js

@@ -23,7 +23,7 @@ export class RTENodeRenderer {
    * Get classes from annotations
    *
    * @param {RTENode} node - The DTO node
-   * @returns {AnnotationStyle} - Annotation style
+   * @returns {string} - Annotation style
    */
   getClasses(node) {
     return Array.from(node.annotationMap.values())

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/insert-composition-text-controller.js

@@ -180,7 +180,7 @@ export class InsertCompositionTextController extends VegaSlimmer {
   /**
    * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
    *
-   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
    */
   getEditableElementRef() {
     if (!this.editableElementRef) {

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -191,6 +191,8 @@ export class SelectionController extends VegaSlimmer {
    * Get selected rich text
    */
   handleSelectionChange() {
+    if (this.disabled)
+      return;
     const selection = this.getSelection();
     if (!selection || selection.rangeCount === 0)
       return;
@@ -279,6 +281,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "disabled", void 0);
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/state-entity-rendering-registry.js

@@ -34,5 +34,14 @@ class StateEntityRenderingRegistry {
   getDOMByEntity(entity) {
     return this.entityToDOM.get(entity);
   }
+  /**
+   * Delete the dirty element to entity ref.
+   *
+   * @example Convert text node to the link node, the old span will change to the link wrapper element, and there will be a new text span, so we need remove the old span ref from the map.
+   * @param {HTMLElement} dom - The dirty element ref.
+   */
+  removeDirtyDomRef(dom) {
+    this.domToEntity.delete(dom);
+  }
 }
 export default new StateEntityRenderingRegistry();

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/text-node-rendering-registry.js

@@ -17,7 +17,7 @@ class TextNodeRenderingRegistry {
   /**
    * Retrieves the text node elements.
    *
-   * @returns {HTMLElement[]} The text node elements, or empty array.
+   * @returns {Map<HTMLElement, TextColorAnnotation>} The text node elements, or empty array.
    */
   getTextNodeElements() {
     return this.textNodeElements;

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.js

@@ -86,7 +86,7 @@ export class UserInputController extends VegaSlimmer {
   /**
    * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
    *
-   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
    */
   getEditableElementRef() {
     if (!this.editableElementRef) {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bold-toolbar-button-slimmer.js

@@ -36,11 +36,12 @@ export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer.js

@@ -47,7 +47,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-toolbar-button-slimmer.js

@@ -34,7 +34,7 @@ export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/numbers-toolbar-button-slimmer.js

@@ -32,7 +32,7 @@ export class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/clear-style-toolbar-button-slimmer.js

@@ -33,7 +33,8 @@ export class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/code-toolbar-button-slimmer.js

@@ -35,8 +35,9 @@ export class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
-      node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/image-toolbar-button-slimmer.js

@@ -56,7 +56,8 @@ export class ImageToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/italic-toolbar-button-slimmer.js

@@ -34,11 +34,12 @@ export class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/less-indent-toolbar-button-slimmer.js

@@ -26,7 +26,8 @@ export class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return (selectedBlocks.some((node) => node.type === 'list-item') ||
+    return (super.isDisabled() ||
+      selectedBlocks.some((node) => node.type === 'list-item') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/link-toolbar-button-slimmer.js

@@ -59,7 +59,8 @@ export class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    return (selectedBlocks.length > 1 ||
+    return (super.isDisabled() ||
+      selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
         return !(node instanceof RTETextNode) ||

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/more-indent-toolbar-button-slimmer.js

@@ -26,7 +26,8 @@ export class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return (selectedBlocks.some((node) => node.type === 'list-item') ||
+    return (super.isDisabled() ||
+      selectedBlocks.some((node) => node.type === 'list-item') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/strikethrough-toolbar-button-slimmer.js

@@ -37,11 +37,12 @@ export class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer.js

@@ -32,7 +32,10 @@ export class TextColorToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     }, {});
   }
   renderSlotContent() {
-    return (h("div", { class: "toolbar-btn-color-preview-box", style: {
+    return (h("div", { class: {
+        'toolbar-btn-color-preview-box': true,
+        'disabled': this.isDisabled(),
+      }, style: {
         backgroundColor: this.getCurrentColor(),
       } }));
   }
@@ -102,12 +105,13 @@ export class TextColorToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-styles-toolbar-button-slimmer.js

@@ -67,7 +67,8 @@ export class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
   addDropdownObserver(dropdownRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/toolbar-button-slimmer.abstract.js

@@ -12,13 +12,13 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
   constructor({ icon, tooltip }) {
     super();
     this.renderBtn = ({ showArrowIcon, iconColor } = {}) => {
-      var _a, _b;
+      var _a;
       return (h("vega-tooltip", { text: this.tooltip.text, placement: ['bottom', 'top'] },
         h("vega-rich-text-editor-toolbar-button", Object.assign({ showArrowIcon: showArrowIcon, icon: this.icon, iconColor: iconColor, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
               this.handleClick();
             });
-          }, selected: this.isSelected(), disabled: (_a = this.isDisabled) === null || _a === void 0 ? void 0 : _a.call(this) }, this.preventLostFocus()), (_b = this.renderSlotContent) === null || _b === void 0 ? void 0 : _b.call(this))));
+          }, selected: this.isSelected(), disabled: this.isDisabled() }, this.preventLostFocus()), (_a = this.renderSlotContent) === null || _a === void 0 ? void 0 : _a.call(this))));
     };
     /**
      * Handle the click event on the toolbar button.
@@ -48,6 +48,12 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
       ? this.renderBtnWrapper(this.renderBtn)
       : this.renderBtn();
   }
+  /**
+   * Whether the button is disabled or not.
+   */
+  isDisabled() {
+    return this.disabled;
+  }
   preventLostFocus() {
     return {
       onMouseDown: (e) => e.preventDefault(),
@@ -60,3 +66,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ToolbarButtonSlimmer.prototype, "focusController", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarButtonSlimmer.prototype, "disabled", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/underline-toolbar-button-slimmer.js

@@ -37,11 +37,12 @@ export class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/vega-rich-text-editor-renderer.js

@@ -72,7 +72,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
   /**
    * Returns the rich text editor component editable element
    *
-   * @returns {HTMLDivElement} The div element which has property contenteditable
+   * @returns {Nullable<HTMLDivElement>} The div element which has property contenteditable
    */
   getRTEEditableElementRef() {
     if (this.richTextContentRef && this.richTextContentRef.shadowRoot) {

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor-toolbar-button/vega-rich-text-editor-toolbar-button.css

@@ -44,6 +44,7 @@
 .rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled {
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+  cursor: not-allowed;
 }
 .rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled vega-icon {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -109,6 +109,7 @@
 :host .rich-text-editor-container.disabled {
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+  cursor: not-allowed;
 }
 :host .rich-text-editor-container.disabled:hover, :host .rich-text-editor-container.disabled:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
@@ -116,6 +117,10 @@
 :host .rich-text-editor-container.disabled:focus-within {
   outline: none;
 }
+:host .rich-text-editor-container.disabled vega-rich-text-content {
+  pointer-events: none;
+  opacity: 0.35;
+}
 :host .rich-text-editor-container.error {
   border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
 }
@@ -206,11 +211,13 @@
   border-radius: 4px;
   width: 16px;
   height: 16px;
-  cursor: pointer;
   justify-content: center;
   align-items: center;
   margin-left: 6px;
 }
+.toolbar-btn-group .toolbar-btn-color-preview-box.disabled {
+  opacity: 0.35;
+}
 .toolbar-btn-group .toolbar-btn-link-wrapper {
   position: relative;
 }

package/dist/collection/components/vega-selection-chip/vega-selection-chip-group/slimmers/controllers/vega-selection-chip-group-items-controller.js

@@ -63,7 +63,7 @@ export class VegaSelectionChipGroupItemsController extends VegaSlimmer {
   /**
    * The function returns current chip items array.
    *
-   * @returns {HTMLElement[]} - current chip items.
+   * @returns {HTMLVegaSelectionChipElement[]} - current chip items.
    */
   getSelectionChipArray() {
     return this.selectionChipArray;
@@ -114,7 +114,7 @@ export class VegaSelectionChipGroupItemsController extends VegaSlimmer {
    * Find the changed attribute mutation record.
    *
    * @param {MutationRecord[]} mutations - Mutations record
-   * @returns {MutationRecord} - Changed attribute mutation record..
+   * @returns {Nullable<MutationRecord>} - Changed attribute mutation record..
    */
   findAttributeMutation(mutations) {
     return mutations && mutations.find((mutation) => mutation.attributeName);
@@ -123,7 +123,7 @@ export class VegaSelectionChipGroupItemsController extends VegaSlimmer {
    * Get the current checked chip element from mutation.
    *
    * @param {MutationRecord} mutation - mutation.
-   * @returns {HTMLElement} The current checked chip.
+   * @returns {Nullable<HTMLVegaSelectionChipElement>} The current checked chip.
    */
   getCurrentChip(mutation) {
     if (mutation &&
@@ -135,7 +135,7 @@ export class VegaSelectionChipGroupItemsController extends VegaSlimmer {
   /**
    * Get the first checked chip element from an array of selection chips.
    *
-   * @returns {HTMLElement} The first checked chip.
+   * @returns {Nullable<HTMLVegaSelectionChipElement>} The first checked chip.
    */
   getFirstCheckedChip() {
     return this.selectionChipArray.find((chip) => chip.checked);

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/slimmers/controllers/vega-selection-tile-group-items-controller.js

@@ -24,7 +24,7 @@ export class VegaSelectionTileGroupItemsController extends VegaSlimmer {
   /**
    * The function `getSelectionTileArray` returns an array of HTMLVegaSelectionTileElement elements.
    *
-   * @returns {HTMLElement[]} An array of HTMLVegaSelectionTileElement elements is being returned.
+   * @returns {HTMLVegaSelectionTileElement[]} An array of HTMLVegaSelectionTileElement elements is being returned.
    */
   getSelectionTileArray() {
     return this.selectionTileArray;

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-panel-controller.js

@@ -93,7 +93,7 @@ export class VegaTabGroupPanelController extends VegaSlimmer {
   /**
    * get the default active panel element if user set
    *
-   * @returns {string} the default active panel attribute id
+   * @returns {Nullable<string>} the default active panel attribute id
    */
   getDefaultActivePanelId() {
     if (this.tabPanels && this.tabPanels.length) {

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-editable-controller.js

@@ -18,7 +18,7 @@ export class VegaTableEditableController extends VegaSlimmer {
   /**
    * Get the map of the row form refs
    *
-   * @returns {Map} The map of row form refs
+   * @returns {Map<string, HTMLVegaFormElement>} The map of row form refs
    */
   getRowFormRefMap() {
     return this.rowFormRefMap;
@@ -173,7 +173,7 @@ export class VegaTableEditableController extends VegaSlimmer {
    * The callback to handle [getFormRef]{@link VegaTable.getFormRef}
    *
    * @param {string} rowKey - The key of the row's record
-   * @returns {HTMLElement} The form ref of the row
+   * @returns {HTMLVegaFormElement} The form ref of the row
    */
   getFormRef(rowKey) {
     if (!this.canMethodBeInvokedInCurrentState('getFormRef')) {

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-row-selection-controller.js

@@ -50,7 +50,7 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
     /**
      * Get the row selection type
      *
-     * @returns {'multiple' | 'single'} Return the type of the row selection
+     * @returns {Nullable<'multiple' | 'single'>} Return the type of the row selection
      */
     this.getRowSelectionType = () => {
       if (!this.rowSelection)

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-sorter.js

@@ -25,7 +25,7 @@ export class VegaTableSorter {
   /**
    * Get params from sorter object for external use
    *
-   * @returns {{VegaTableSorterType}} sorter prop and order
+   * @returns {VegaTableSorterType} sorter prop and order
    */
   toExternalFormat() {
     return { prop: this.prop, order: this.order };
@@ -33,7 +33,7 @@ export class VegaTableSorter {
   /**
    * Get sorter order value
    *
-   * @returns {{VegaTableSortOrderType}} sorter order
+   * @returns {VegaTableSortOrderType} sorter order
    */
   getSortOrder() {
     return this.order;

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-header-renderer.js

@@ -14,7 +14,7 @@ export class VegaTableHeaderRenderer extends VegaSlimmer {
     this.renderHeaderColumnCells = () => {
       return this.columns.map((column) => {
         var _a;
-        return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: (_a = this.sortersMap.get(column.prop)) === null || _a === void 0 ? void 0 : _a.getSortOrder(), breakpoint: column.breakpoint, 
+        return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: (_a = this.sortersMap.get(column.prop)) === null || _a === void 0 ? void 0 : _a.getSortOrder(), sortConfig: this.sortConfig, breakpoint: column.breakpoint, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
@@ -37,6 +37,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-pagination-renderer.js

@@ -20,6 +20,7 @@ import { arrayToClassString } from '../../../../utils/ui';
 import { h } from '@stencil/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange, VegaPageSizeChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
 export class VegaTablePaginationRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -52,9 +53,9 @@ export class VegaTablePaginationRenderer extends VegaSlimmer {
       (_b = (_a = this.pagination).vegaPageSizeChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
     };
     this.getPaginationConfig = () => {
-      var _a;
-      const _b = this.pagination, { position } = _b, otherProps = __rest(_b, ["position"]);
-      return Object.assign(Object.assign({}, otherProps), { position: ((_a = this.pagination.extensions) === null || _a === void 0 ? void 0 : _a.length) > 1 ? undefined : position || 'bottom-center', pageSize: this.pageSize });
+      const _a = this.pagination, { position } = _a, otherProps = __rest(_a, ["position"]);
+      const currentExtensions = ResponsiveFormatFacade.formatCustom(this.pagination.extensions);
+      return Object.assign(Object.assign({}, otherProps), { position: (currentExtensions === null || currentExtensions === void 0 ? void 0 : currentExtensions.length) > 1 ? undefined : position || 'bottom-center', pageSize: this.pageSize });
     };
   }
   render() {