@globalpayments/vega 2.35.0 → 2.37.0

package/dist/collection/components/vega-modal/vega-modal.js

@@ -4,18 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
-import { DefaultModalSize } from '../../constants/ui';
-import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
-import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
-import { DeviceType } from '../../types/ui.type';
-import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { Component, Element, Event, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { findParent, getDeviceType } from '../../utils/ui';
-import { formatAndValidResponsiveToken } from '../../utils/design-token';
-import InternalVegaZIndexManager from '../../helpers/zindex/internal-vega-z-index-manager';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
-import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaOpen, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -25,31 +16,35 @@ import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/depreca
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaModalRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-modal/runtime-metrics-payload-definition';
 import { VegaNestedModalController } from './slimmers/controllers/vega-nested-modal-controller';
+import { VegaModalRenderer } from './slimmers/renderers/vega-modal-renderer';
+import { VegaModalLayoutController } from './slimmers/controllers/vega-modal-layout-controller';
+import { VegaModalMobileController } from './slimmers/controllers/vega-modal-mobile-controller';
+import { VegaModalScrollController } from './slimmers/controllers/vega-modal-scroll-controller';
+import { VegaModalOpenStateController } from './slimmers/controllers/vega-modal-open-state-controller';
+import { VegaModalBackdropController } from './slimmers/controllers/vega-modal-backdrop-controller';
+import { VegaModalOpenedModalStackController } from './slimmers/controllers/vega-modal-opened-modal-stack-controller';
+import { VegaModalZIndexController } from './slimmers/controllers/vega-modal-z-index-controller';
 /**
  * @vegaVersion 1.0.6
  */
 export class VegaModal {
   constructor() {
     this.globalSlimmers = {};
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-resize-e2e}
-     */
-    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
-      callback: /* istanbul ignore next */ () => {
-        this.setModalWidth('update');
-        this.setContentMaxHeight();
-      },
-      isDeferred: true,
-    });
     this.nestedModalController = new VegaNestedModalController();
+    this.openStateController = new VegaModalOpenStateController();
+    this.mobileController = new VegaModalMobileController();
+    this.scrollController = new VegaModalScrollController();
+    this.layoutController = new VegaModalLayoutController();
+    this.backdropController = new VegaModalBackdropController();
+    this.openedModalStackController = new VegaModalOpenedModalStackController();
+    this.zIndexController = new VegaModalZIndexController();
+    this.renderer = new VegaModalRenderer();
     this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
     this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
-    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
+    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.renderer.getModalContainerRef());
     this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(mainContentStyle);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
-    this.isModalWidthSet = false;
     /**
      * Provides options for controlling the behavior of the backdrop.
      * - `default`:
@@ -135,18 +130,6 @@ export class VegaModal {
      * @vegaVersion 1.22.0
      */
     this.handleClose = undefined;
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-toggle-interactive-e2e}
-     */
-    /* istanbul ignore next */
-    this.closeModal = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!this.handleClose || this.handleClose()) {
-        this.open = false;
-      }
-    };
   }
   /**
    * The below method is e2e-test covered in
@@ -155,31 +138,14 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   watchSize() {
-    this.setModalWidth('update');
+    methodPlaceholder();
   }
   watchOpen() {
-    this.toggle();
+    methodPlaceholder();
   }
   disconnectedCallback() {
     this.open = false;
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-resize-e2e}
-   */
-  /* istanbul ignore next */
-  componentDidLoad() {
-    if (this.open) {
-      this.toggle();
-    }
-    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
-      this.disableBackdropTouchMove();
-    }
-    if (this.isContentScrollable) {
-      this.listenContentScroll();
-    }
-    this.setContentMaxHeight();
-  }
   /**
    * Clicking on a non-static current modal should close this modal, not other modals.
    * The below method is e2e-test covered in
@@ -187,19 +153,7 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   listenDataTarget(e) {
-    /*
-     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
-     */
-    const target = e.composedPath()[0];
-    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
-      this.open = false;
-    }
-    if (this.host.id &&
-      (target.getAttribute('data-target') === this.host.id ||
-        findParent(target, `[data-target=${this.host.id}]`))) {
-      e.preventDefault();
-      this.open = true;
-    }
+    methodPlaceholder(e);
   }
   /**
    * The below method is e2e-test covered in
@@ -207,11 +161,7 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   listenDataDismiss(e) {
-    const target = e.target.closest(`[data-dismiss='modal']`);
-    if (target) {
-      e.preventDefault();
-      this.open = false;
-    }
+    methodPlaceholder(e);
   }
   /**
    * Invoke this method to show or hide the modal.
@@ -237,265 +187,7 @@ export class VegaModal {
     }
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: {
-        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
-        'animation': this.animation,
-      } },
-      h("div", { class: "modal-dialog" }, this.renderContainer())), this.host);
-  }
-  renderContainer() {
-    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
-    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
-      this.renderHeader(padding),
-      this.renderContent(padding),
-      this.renderFooter(padding)));
-  }
-  renderHeader(padding) {
-    return (h("div", { class: {
-        'vega-modal-header': true,
-        'vega-modal-header-with-title': this.hasModalTitle(),
-        'vega-modal-header-with-icon': this.showCloseButton,
-        'vega-modal-header-with-content-scroll': this.isContentScrollable(),
-        [padding]: true,
-      } },
-      this.renderTitle(),
-      this.showCloseButton && this.renderCloseBtn()));
-  }
-  renderContent(padding) {
-    return (h("div", { class: {
-        'vega-modal-content': true,
-        'vega-modal-content-with-scroll': this.isContentScrollable(),
-        [padding]: true,
-      }, ref: (e) => (this.modalContent = e) },
-      h(Fragment, null,
-        h("slot", null),
-        h("slot", { name: "content" }),
-        h("slot", { name: "modal-content" }))));
-  }
-  renderFooter(padding) {
-    return (h("div", { class: {
-        'vega-modal-footer': true,
-        'vega-modal-footer-with-slot': this.hasModalFooter(),
-        'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
-        [padding]: true,
-      }, ref: (e) => (this.modalFooter = e) },
-      h(Fragment, null,
-        h("slot", { name: "footer" }),
-        h("slot", { name: "modal-footer" }))));
-  }
-  renderTitle() {
-    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null,
-      h("slot", { name: "title" }),
-      h("slot", { name: "modal-title" })))));
-  }
-  renderCloseBtn() {
-    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.closeModal, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("vega-icon", { icon: "close", size: "size-16" })));
-  }
-  hasModalFooter() {
-    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
-      this.host.querySelector(`[slot='footer']`) !== null);
-  }
-  isContentScrollable() {
-    return Boolean(this.contentMaxHeight);
-  }
-  hasModalTitle() {
-    return (Boolean(this.modalTitle) ||
-      this.host.querySelector(`[slot='modal-title']`) !== null ||
-      this.host.querySelector(`[slot='title']`) !== null);
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-content-scroll-to-bottom}
-   */
-  /* istanbul ignore next */
-  listenContentScroll() {
-    this.modalContent.addEventListener('scroll', () => {
-      if (this.modalContent.scrollHeight - this.modalContent.scrollTop <=
-        this.modalContent.clientHeight) {
-        this.modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-      else {
-        this.modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-    });
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  toggle() {
-    this.open ? this.pushToModalStack() : this.deleteFromModalStack();
-    this.updateDocumentRootOverflow();
-    this.setBackdrop();
-    this.setModalZIndex();
-    this.setModalWidth();
-    this.emitEvent();
-    this.setModalVisibility();
-  }
-  setModalZIndex() {
-    if (this.open) {
-      InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.setZIndex(this.host, 'base');
-    }
-    else {
-      InternalVegaZIndexManager.removeZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
-      const length = this.getVisibleModalLength();
-      if (length > 0) {
-        InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-        InternalVegaZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
-      }
-      this.removeBackdropWhileNoModalShow();
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-default-e2e}
-   * @see{module:vega-modal-size-number-e2e}
-   * @see{module:vega-modal-size-responsive-e2e}
-   * @see{module:vega-modal-resize-e2e}
-   * While call toggle method for modal show or hide, it will call this method.
-   * but we should really update the modal width while first initialize modal, window resize and size changed.
-   * So to avoid repeated calls by toggle, we add a flag as parameter,
-   */
-  /* istanbul ignore next */
-  setModalWidth(flag = 'initialize') {
-    if (this.isModalWidthSet && flag === 'initialize')
-      return;
-    const size = this.getModalSize();
-    const dialog = this.host.shadowRoot.querySelector('.modal-dialog');
-    typeof size === 'number'
-      ? (dialog.style['width'] = `${size}px`)
-      : (dialog.style['width'] = `${size}`);
-    this.isModalWidthSet = true;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-content-max-height-responsive-e2e}
-   */
-  /* istanbul ignore next */
-  setContentMaxHeight() {
-    const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
-    if (maxHeight) {
-      this.modalContent.style.maxHeight = `${maxHeight}px`;
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  setModalVisibility() {
-    this.host.style['display'] = this.open ? 'flex' : 'none';
-  }
-  emitEvent() {
-    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-default-e2e}
-   * @see{module:vega-modal-size-number-e2e}
-   * @see{module:vega-modal-size-responsive-e2e}
-   * @see{module:vega-modal-resize-e2e}
-   * @see{module:vega-modal-default-width-S-320-e2e}
-   * @see{module:vega-modal-default-width-S-600-e2e}
-   */
-  /* istanbul ignore next */
-  getModalSize() {
-    const size = ResponsiveFormatFacade.format(this.size, 'size');
-    if (size) {
-      return size;
-    }
-    else {
-      return DefaultModalSize[getCurrentBreakpoint()];
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-backdrop-color-default-e2e}
-   * @see{module:vega-modal-backdrop-color-semi-e2e}
-   * @see{module:vega-modal-backdrop-color-none-e2e}
-   * @see{module:vega-modal-default-e2e}
-   */
-  /* istanbul ignore next */
-  setBackdrop() {
-    if (this.backdrop === 'none')
-      return;
-    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
-    if (!backdrop) {
-      backdrop = document.createElement('vega-backdrop');
-      backdrop.classList.add('modal-backdrop');
-      backdrop.color = VegaModal.backdropColorMap[this.backdropColor];
-      backdrop.visible = true;
-      document.querySelector('body').append(backdrop);
-    }
-    this.backdropRef = backdrop;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-disconnected-callback-e2e }
-   */
-  /* istanbul ignore next */
-  removeBackdropWhileNoModalShow() {
-    if (this.getVisibleModalLength() === 0) {
-      this.backdropRef && this.backdropRef.remove();
-    }
-  }
-  //TODO: Record the nest modal by an array.
-  /**
-   * Get visible modal length
-   */
-  getVisibleModalLength() {
-    return VegaModal.openedModalStack.length;
-  }
-  /**
-   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
-   */
-  updateDocumentRootOverflow() {
-    if (this.backdrop === 'none')
-      return;
-    if (this.open && this.getVisibleModalLength() === 1) {
-      document.body.classList.add('disable-scroll-in-desktop');
-    }
-    else if (!this.open && this.getVisibleModalLength() === 0) {
-      document.body.classList.remove('disable-scroll-in-desktop');
-    }
-  }
-  pushToModalStack() {
-    VegaModal.openedModalStack.push(this.host);
-  }
-  deleteFromModalStack() {
-    VegaModal.openedModalStack = VegaModal.openedModalStack.filter((modal) => modal !== this.host);
-  }
-  /**
-   * There are two situations in modal scrolling:
-   * 1. Scrolls the non-modal content part in vega-modal (e.g. backdrop, modal dialog).
-   * 2. Scrolls the modal content (if scrollable) in vega-modal.
-   * On the mobile side, we need to prevent scrolling in the area outside the modal content.
-   *
-   * TODO: If the modal content is too long, a scroll bar will appear and the body cannot be scrolled,
-   * but on the IOS side, the body content of the scrolling modal will occasionally appear scrolling.
-   * This problem is reproduced on the following websites, and there is no solution yet.
-   * https://v5.bootcss.com/docs/components/modal/
-   * https://mui.com/material-ui/react-dialog/
-   */
-  /* istanbul ignore next */
-  disableBackdropTouchMove() {
-    this.host.addEventListener('touchstart', (e) => {
-      this.touchStartY = e.targetTouches[0].pageY;
-    }, { capture: true });
-    this.host.addEventListener('touchmove', (e) => {
-      const isScrolledTop = this.host.scrollTop <= 0;
-      const isScrolledBottom = this.host.scrollHeight - this.host.scrollTop <= this.host.clientHeight;
-      const isToBottomMove = this.touchStartY < e.targetTouches[0].pageY;
-      const isToTopMove = this.touchStartY > e.targetTouches[0].pageY;
-      if (e.target === this.host &&
-        ((isScrolledTop && isToBottomMove) || (isScrolledBottom && isToTopMove))) {
-        e.preventDefault();
-      }
-    }, { capture: true });
+    return sanitizeVegaComponent(this.renderer.render(), this.host);
   }
   static get is() { return "vega-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -919,21 +611,36 @@ export class VegaModal {
       "passive": false
     }]; }
 }
-VegaModal.openedModalStack = [];
-VegaModal.backdropColorMap = {
-  default: 'bg-backdrop-modal',
-  semi: 'bg-backdrop-popover',
-  none: 'bg-transparent',
-};
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaModal.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
+], VegaModal.prototype, "nestedModalController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaModal.prototype, "nestedModalController", void 0);
+], VegaModal.prototype, "openStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "mobileController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "scrollController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "layoutController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "backdropController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openedModalStackController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "zIndexController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "renderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "openEventEmitter", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-link/slimmers/renderers/vega-left-nav-link-renderer.js

@@ -19,7 +19,7 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
      */
     /* istanbul ignore next */
     this.handleClick = () => {
-      if (!this.selected) {
+      if (!this.selected && !this.customSelectionEnabled) {
         this.controller.setSelected(true);
       }
       this.menuClickEventEmitter.emit();
@@ -73,3 +73,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "customSelectionEnabled", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-link/vega-left-nav-link.js

@@ -29,6 +29,12 @@ export class VegaLeftNavLink {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.selected = false;
+    /**
+     * Specifies whether the link's selected state can be customized. When enabled, it prevents the default automatic selection on click, allowing users to manually control the link’s selection behavior.
+     *
+     * @vegaVersion 2.37.0
+     */
+    this.customSelectionEnabled = false;
   }
   render() {
     slotPlaceholder(h("slot", null));
@@ -84,6 +90,27 @@ export class VegaLeftNavLink {
       "reflect": true,
       "defaultValue": "false"
     },
+    "customSelectionEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.37.0"
+          }],
+        "text": "Specifies whether the link's selected state can be customized. When enabled, it prevents the default automatic selection on click, allowing users to manually control the link\u2019s selection behavior."
+      },
+      "attribute": "custom-selection-enabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "url": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-pagination/internal/vega-pagination-page-size-selector.js

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 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';
-export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, onChange, translationSlimmer, }) => {
+export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, dropdownProps, onChange, translationSlimmer, }) => {
   const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
   const handleChange = (input) => {
     // Because input-select use single mode, so the detail is always a string type
@@ -14,7 +14,7 @@ export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptio
       h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
           id: option.toString(),
           displayName: option.toString(),
-        })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: { matchTargetWidth: false, searchable: false }, 
+        })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: Object.assign({ matchTargetWidth: false, searchable: false }, dropdownProps), 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);

package/dist/collection/components/vega-pagination/vega-pagination.js

@@ -91,7 +91,7 @@ export class VegaPagination {
           const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
             ? this.pageSizeSelectorOptions
             : [...this.pageSizeSelectorOptions, this.pageSize];
-          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
+          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, dropdownProps: this.dropdownProps, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
         }
         case 'pageSelector':
           return (h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
@@ -285,6 +285,29 @@ export class VegaPagination {
         "text": "Specifies the options available for the page size selector\n   in the pagination component."
       },
       "defaultValue": "[10, 20, 50, 100]"
+    },
+    "dropdownProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DropdownPropsForPagination",
+        "resolved": "{ isScreenPosition?: boolean; }",
+        "references": {
+          "DropdownPropsForPagination": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Specifies the properties of the `vega-dropdown` component\n   used to configure the dropdown for the\n   page size selector in pagination."
+      }
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-radio/vega-radio-group/vega-radio-group.js

@@ -267,7 +267,7 @@ export class VegaRadioGroup {
       "mutable": false,
       "complexType": {
         "original": "VegaFlexProps",
-        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<GapType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
+        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; gap?: ResponsiveType<GapType>; alignItems?: ResponsiveType<FlexAlignItemType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
         "references": {
           "VegaFlexProps": {
             "location": "import",

package/dist/collection/components/vega-radio/vega-radio.css

@@ -13,6 +13,9 @@
   position: relative;
   display: inline-flex;
   gap: 8px;
+  cursor: not-allowed;
+}
+.vega-radio-container:not(.vega-radio-disabled) {
   cursor: pointer;
 }
 

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

@@ -4,13 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { h, Host } from '@stencil/core';
 import { VegaDarkModeStyleController } from '../../../../helpers/theme/controllers/dark-mode-style-controller';
 import { TextColorToolbarButtonSlimmer } from '../../../vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer';
 import RTETextBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/text-block-renderer';
 import RTEImageBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/image-block-renderer';
 import RTEListBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/list-block-renderer';
+import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
@@ -21,6 +22,12 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
     ];
     VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
+  componentWillLoad() {
+    this.setRTEContent();
+  }
+  watchValueUpdate() {
+    this.setRTEContent();
+  }
   /**
    * Get the rich text content element
    *
@@ -32,6 +39,11 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   render() {
     return h(Host, null, this.renderRichTextContent());
   }
+  setRTEContent() {
+    if (this.content && !(this.content instanceof VegaRTEContent)) {
+      this.content = VegaRTEContent.fromJSON(this.content);
+    }
+  }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
     return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
@@ -74,3 +86,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentRenderer.prototype, "content", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaRichTextContentRenderer.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchValueUpdate')
+], VegaRichTextContentRenderer.prototype, "watchValueUpdate", null);