@heartlandone/vega 2.83.0 → 2.85.0

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

@@ -84,7 +84,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridColumnsType>",
-        "resolved": "3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
+        "resolved": "3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -114,7 +114,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridRowsType>",
-        "resolved": "3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
+        "resolved": "3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 1 | 2 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

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

@@ -1173,7 +1173,7 @@ export class VegaInput {
       "mutable": false,
       "complexType": {
         "original": "MaskConfigType | MaskConfigType[]",
-        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\"; options?: MaskConfig | NumberMaskConfig; overrideValue?: boolean; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; strategy?: () => StringFormatStrategy; })",
+        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\"; options?: MaskConfig | NumberMaskConfig; overrideValue?: boolean; trigger?: \"input\" | \"blur\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; strategy?: () => StringFormatStrategy; })",
         "references": {
           "MaskConfigType": {
             "location": "import",

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -602,7 +602,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; preserveValueIfNotInSource?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; useDefaultFilter?: boolean; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; preserveValueIfNotInSource?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-padding-state-controller.js

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaModalSectionPaddingState } from '../models/vega-modal-section-padding-state';
+/**
+ * Modal section padding state controller
+ */
+export class VegaModalPaddingStateController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    this.setSectionPaddingState();
+  }
+  /**
+   * Watch for changes in padding and update the section padding state accordingly.
+   */
+  watchPadding() {
+    this.setSectionPaddingState();
+  }
+  /**
+   * Set the section padding state based on the current padding prop.
+   */
+  setSectionPaddingState() {
+    this.sectionPaddingState = new VegaModalSectionPaddingState(this.padding);
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaModalPaddingStateController.prototype, "sectionPaddingState", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalPaddingStateController.prototype, "padding", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaModalPaddingStateController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchPadding')
+], VegaModalPaddingStateController.prototype, "watchPadding", null);

package/dist/collection/components/vega-modal/slimmers/models/vega-modal-section-padding-state.js

@@ -0,0 +1,56 @@
+import { isVegaModalSectionPaddingType } from '../../../../types/type-guard';
+/**
+ * Represents the modal section padding state.
+ */
+export class VegaModalSectionPaddingState {
+  constructor(padding) {
+    if (isVegaModalSectionPaddingType(padding)) {
+      this.sectionPadding = Object.assign({}, VegaModalSectionPaddingState.defaultSectionPadding, padding);
+    }
+    else {
+      const isEmptyPadding = !padding || (typeof padding === 'object' && Object.keys(padding).length === 0);
+      const paddingValue = isEmptyPadding
+        ? VegaModalSectionPaddingState.defaultPadding
+        : padding;
+      this.sectionPadding = {
+        header: paddingValue,
+        content: paddingValue,
+        footer: paddingValue,
+      };
+    }
+  }
+  /**
+   * Gets the padding for the header section of the modal.
+   *
+   * @returns {ResponsiveType<PaddingType>} The padding for the header section.
+   */
+  getHeaderPadding() {
+    return this.sectionPadding.header;
+  }
+  /**
+   * Gets the padding for the content section of the modal.
+   *
+   * @returns {ResponsiveType<PaddingType>} The padding for the content section.
+   */
+  getContentPadding() {
+    return this.sectionPadding.content;
+  }
+  /**
+   * Gets the padding for the footer section of the modal.
+   *
+   * @returns {ResponsiveType<PaddingType>} The padding for the footer section.
+   */
+  getFooterPadding() {
+    return this.sectionPadding.footer;
+  }
+}
+VegaModalSectionPaddingState.defaultPadding = 'size-24';
+VegaModalSectionPaddingState.defaultSectionPadding = {
+  header: {
+    x: VegaModalSectionPaddingState.defaultPadding,
+    top: VegaModalSectionPaddingState.defaultPadding,
+    bottom: 'size-16',
+  },
+  content: { x: VegaModalSectionPaddingState.defaultPadding, y: '0' },
+  footer: VegaModalSectionPaddingState.defaultPadding,
+};

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

@@ -9,7 +9,7 @@ import { Fragment, h, Host } from '@stencil/core';
 import { generateUUID } from '../../../../utils/misc';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import { DefaultModalSize } from '../../../../constants/ui';
-import { isResponsiveSizeType } from '../../../../types/type-guard';
+import { isResponsiveSizeType, isVegaModalSectionPaddingType } from '../../../../types/type-guard';
 /**
  * Modal renderer
  */
@@ -31,6 +31,7 @@ export class VegaModalRenderer extends VegaSlimmer {
     return (h(Host, { class: {
         'align-center': this.deprecatedPropertySlimmer.getValue() && this.openState.isOpen,
         'animation': this.animation,
+        'is-section-padding': isVegaModalSectionPaddingType(this.padding),
       } },
       h("vega-box", { class: "modal-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, width: isResponsiveSizeType(this.size) ? this.size : DefaultModalSize, height: this.height, margin: this.margin }, this.renderContainer())));
   }
@@ -44,10 +45,9 @@ export class VegaModalRenderer extends VegaSlimmer {
     return (h("vega-box", { class: {
         'vega-modal-header': true,
         'vega-modal-header-with-title': this.hasModalTitle(),
-        'vega-modal-header-with-slot': this.useModalSlotTitle(),
         'vega-modal-header-with-icon': this.showCloseButton,
         'vega-modal-header-with-content-scroll': this.isContentScrollable(),
-      }, padding: this.padding, id: this.titleId },
+      }, padding: this.sectionPaddingState.getHeaderPadding(), id: this.titleId },
       this.renderTitle(),
       this.showCloseButton && this.renderCloseBtn()));
   }
@@ -55,7 +55,7 @@ export class VegaModalRenderer extends VegaSlimmer {
     return (h("vega-box", { class: {
         'vega-modal-content': true,
         'vega-modal-content-with-scroll': this.isContentScrollable(),
-      }, padding: this.padding, maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e) },
+      }, padding: this.sectionPaddingState.getContentPadding(), maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e) },
       h(Fragment, null,
         h("slot", null),
         h("slot", { name: "content" }),
@@ -66,7 +66,7 @@ export class VegaModalRenderer extends VegaSlimmer {
         'vega-modal-footer': true,
         'vega-modal-footer-with-slot': this.hasModalFooter(),
         'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
-      }, padding: this.padding, ref: (e) => (this.modalFooter = e) },
+      }, padding: this.sectionPaddingState.getFooterPadding(), ref: (e) => (this.modalFooter = e) },
       h(Fragment, null,
         h("slot", { name: "footer" }),
         h("slot", { name: "modal-footer" }))));
@@ -88,12 +88,9 @@ export class VegaModalRenderer extends VegaSlimmer {
     return Boolean(this.contentMaxHeight);
   }
   hasModalTitle() {
-    return Boolean(this.modalTitle) || this.useModalSlotTitle();
-  }
-  useModalSlotTitle() {
-    return (!this.modalTitle &&
-      (this.host.querySelector(`[slot='modal-title']`) !== null ||
-        this.host.querySelector(`[slot='title']`) !== null));
+    return (Boolean(this.modalTitle) ||
+      this.host.querySelector(`[slot='modal-title']`) !== null ||
+      this.host.querySelector(`[slot='title']`) !== null);
   }
 }
 __decorate([
@@ -138,3 +135,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "openStateController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "sectionPaddingState", void 0);

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

@@ -5240,15 +5240,30 @@
   align-items: center;
   flex-direction: row;
   gap: 8px;
-  padding-bottom: 0px;
 }
 
-.vega-modal-header.vega-modal-header-with-title:not(.vega-modal-header-with-slot),
-.vega-modal-header.vega-modal-header-with-icon:not(.vega-modal-header-with-slot) {
+:host(:not(.is-section-padding)) .vega-modal-header {
+  padding-bottom: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-header.vega-modal-header-with-title, :host(:not(.is-section-padding)) .vega-modal-header.vega-modal-header-with-icon {
   padding-bottom: 16px;
 }
-
-.vega-modal-header-with-content-scroll:not(.vega-modal-header-with-title):not(.vega-modal-header-with-icon) {
+:host(:not(.is-section-padding)) .vega-modal-header.vega-modal-header-with-content-scroll:not(.vega-modal-header-with-title):not(.vega-modal-header-with-icon) {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-content {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-content.vega-modal-content-with-scroll {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+:host(:not(.is-section-padding)) .vega-modal-footer:not(.vega-modal-footer-with-slot) {
+  padding-top: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-footer.vega-modal-footer-with-content-scroll:not(.vega-modal-footer-with-slot) {
   padding-top: 0px;
   padding-bottom: 0px;
 }
@@ -5305,26 +5320,10 @@
   display: block;
 }
 
-.vega-modal-content {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .vega-modal-content-with-scroll {
-  padding-top: 24px;
-  padding-bottom: 24px;
   overflow: auto;
 }
 
-.vega-modal-footer:not(.vega-modal-footer-with-slot) {
-  padding-top: 0px;
-}
-
-.vega-modal-footer-with-content-scroll:not(.vega-modal-footer-with-slot) {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot {
   position: relative;
   z-index: 1;

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

@@ -24,6 +24,7 @@ import { VegaModalBackdropController } from './slimmers/controllers/vega-modal-b
 import { VegaModalOpenedModalStackController } from './slimmers/controllers/vega-modal-opened-modal-stack-controller';
 import { VegaModalZIndexController } from './slimmers/controllers/vega-modal-z-index-controller';
 import { VegaModalOpenState } from './slimmers/models/vega-modal-open-state';
+import { VegaModalPaddingStateController } from './slimmers/controllers/vega-modal-padding-state-controller';
 /**
  * @vegaVersion 1.0.6
  */
@@ -37,6 +38,7 @@ export class VegaModal {
     this.backdropController = new VegaModalBackdropController();
     this.openedModalStackController = new VegaModalOpenedModalStackController();
     this.zIndexController = new VegaModalZIndexController();
+    this.paddingStateController = new VegaModalPaddingStateController();
     this.renderer = new VegaModalRenderer();
     this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
     this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
@@ -163,6 +165,9 @@ export class VegaModal {
   watchOpen() {
     this.openState = new VegaModalOpenState(this.open, 'property');
   }
+  watchPadding() {
+    methodPlaceholder();
+  }
   watchContentMaxHeight() {
     methodPlaceholder();
   }
@@ -470,8 +475,8 @@ export class VegaModal {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "ResponsiveType<PaddingType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "original": "ResponsiveType<PaddingType> | VegaModalSectionPadding",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { header?: ResponsiveType<PaddingType>; content?: ResponsiveType<PaddingType>; footer?: ResponsiveType<PaddingType>; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -480,6 +485,10 @@ export class VegaModal {
           "PaddingType": {
             "location": "import",
             "path": "../../types/ui.type"
+          },
+          "VegaModalSectionPadding": {
+            "location": "import",
+            "path": "./types"
           }
         }
       },
@@ -573,7 +582,8 @@ export class VegaModal {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "openState": {}
+    "openState": {},
+    "sectionPaddingState": {}
   }; }
   static get events() { return [{
       "method": "vegaClose",
@@ -691,6 +701,9 @@ export class VegaModal {
     }, {
       "propName": "open",
       "methodName": "watchOpen"
+    }, {
+      "propName": "padding",
+      "methodName": "watchPadding"
     }, {
       "propName": "contentMaxHeight",
       "methodName": "watchContentMaxHeight"
@@ -745,6 +758,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "zIndexController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "paddingStateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "renderer", void 0);

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

@@ -1,4 +1,5 @@
 import { BlockAnnotation, BlockAnnotationTypeEnum } from './block-annotation.abstract';
+import { TEXT_STYLE_DEFAULTS } from './text-style-default-styles';
 /**
  * Text style annotation
  */
@@ -24,45 +25,9 @@ export class TextStyleAnnotation extends BlockAnnotation {
    * @returns {Nullable<AnnotationStyle>} The default styles for the given text style type.
    */
   static getDefaultStyles(textStyle) {
-    const textStyleBase = {
-      fontFamily: 'Inter',
-      fontSize: '16px',
-      lineHeight: '22px',
-      minHeight: '22px',
-      fontWeight: '500',
-    };
-    const paragraphStyle = Object.assign(Object.assign({}, textStyleBase), { marginTop: '0px', marginBottom: '0px' });
-    switch (textStyle) {
-      case 'paragraph': {
-        return paragraphStyle;
-      }
-      case 'title': {
-        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' });
-      }
-      case 'subtitle': {
-        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' });
-      }
-      case 'heading-1': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '22px', lineHeight: '24px', minHeight: '24px' });
-      }
-      case 'heading-2': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '20px', lineHeight: '24px', minHeight: '24px' });
-      }
-      case 'heading-3': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '18px' });
-      }
-      case 'heading-4': {
-        return Object.assign({}, paragraphStyle);
-      }
-      case 'heading-5': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '14px' });
-      }
-      case 'heading-6': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '12px' });
-      }
-      default:
-        return null;
-    }
+    if (!textStyle)
+      return null;
+    return TEXT_STYLE_DEFAULTS[textStyle];
   }
   /**
    * Generate the JSON representation of the annotation

package/dist/collection/components/vega-rich-text-editor/dto/annotations/text-style-default-styles.js

@@ -0,0 +1,30 @@
+const TEXT_STYLE_BASE = {
+  fontFamily: 'Inter',
+  fontSize: '16px',
+  lineHeight: '22px',
+  minHeight: '22px',
+  fontWeight: '500',
+};
+const PARAGRAPH_TEXT_STYLE = Object.assign(Object.assign({}, TEXT_STYLE_BASE), { marginTop: '0px', marginBottom: '0px' });
+export const TEXT_STYLE_VALUES = [
+  'paragraph',
+  'title',
+  'subtitle',
+  'heading-1',
+  'heading-2',
+  'heading-3',
+  'heading-4',
+  'heading-5',
+  'heading-6',
+];
+export const TEXT_STYLE_DEFAULTS = {
+  'paragraph': PARAGRAPH_TEXT_STYLE,
+  'title': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' }),
+  'subtitle': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' }),
+  'heading-1': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '22px', lineHeight: '24px', minHeight: '24px' }),
+  'heading-2': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '20px', lineHeight: '24px', minHeight: '24px' }),
+  'heading-3': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '18px' }),
+  'heading-4': Object.assign({}, PARAGRAPH_TEXT_STYLE),
+  'heading-5': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '14px' }),
+  'heading-6': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '12px' }),
+};

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-dynamic-popover-renderer.js

@@ -25,7 +25,6 @@ import { TablePopoverBaseRenderer } from './table-popover-base-renderer';
 export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   constructor(colors, renderContext) {
     super(renderContext);
-    this.tableColorSchema = [];
     this.popoverCloseType = 'none'; // 'save' | 'cancel' | 'change' | 'none'
     this.tablePropertiesHandlerMap = {
       save: new TablePropertiesSaveEventHandler(),
@@ -53,7 +52,7 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.tablePropertiesHandlerMap[eventKey].handle(extensionContext, this.currentTableBlock, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -73,7 +72,7 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.cellPropertiesHandlerMap[eventKey].handle(extensionContext, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -125,55 +124,58 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
     await this.popoverRef.hide();
   }
   /**
-   * Renders a vega-popover whose target and content are provided dynamically by callers.
+   * Re-targets the shared popovers to the given table.
    *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {() => HTMLElement} getTableRef - Current table DOM reference
-   * @param {RTETableBlock} renderData - Current table block being rendered.
-   * @returns {VegaRTERenderResult} The rendered popover host.
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
    */
-  render(h, getTableRef, renderData) {
+  reTarget(tableBlock, getTableRef) {
     this.getTableRef = getTableRef;
-    this.currentTableBlock = renderData;
-    return h('vega-popover', {
-      trigger: 'click',
-      isScreenPosition: true,
-      class: 'rte-table-dynamic-popover',
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (popover) => {
-        this.popoverRef = popover;
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
-          const extensionContext = this.getTableExtensionContext();
-          if (this.popoverCloseType === 'change' && extensionContext) {
-            extensionContext.flushValue(extensionContext.host.value);
-          }
-        });
-      },
-    }, [
-      h('div', {
-        slot: 'popover',
-        class: 'rte-table-dynamic-popover-content',
-      }, [
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.tablePropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: TableSettingType.TABLE,
-          onVegaCancel: this.handleTablePropertiesUpdate,
-          onVegaChange: this.handleTablePropertiesUpdate,
-          onVegaSave: this.handleTablePropertiesUpdate,
-        }),
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.cellPropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: TableSettingType.CELL,
-          onVegaCancel: this.handleCellPropertiesUpdate,
-          onVegaChange: this.handleCellPropertiesUpdate,
-          onVegaSave: this.handleCellPropertiesUpdate,
-        }),
-      ]),
-    ]);
+    this.currentTableBlock = tableBlock;
+  }
+  /**
+   * Builds the popover DOM and appends it to the given container.
+   *
+   * @returns {Nullable<HTMLElement>} The constructed popover element.
+   */
+  render() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-dynamic-popover';
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+        const extensionContext = this.getTableExtensionContext();
+        if (this.popoverCloseType === 'change' && extensionContext) {
+          extensionContext.flushValue(extensionContext.host.value);
+        }
+      });
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      slotDiv.className = 'rte-table-dynamic-popover-content';
+      const tablePropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      tablePropsForm.colors = this.tableColorSchema;
+      tablePropsForm.type = TableSettingType.TABLE;
+      tablePropsForm.setAttribute('type', TableSettingType.TABLE);
+      tablePropsForm.addEventListener('vegaCancel', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaChange', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaSave', this.handleTablePropertiesUpdate);
+      const cellPropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      cellPropsForm.colors = this.tableColorSchema;
+      cellPropsForm.type = TableSettingType.CELL;
+      cellPropsForm.setAttribute('type', TableSettingType.CELL);
+      cellPropsForm.addEventListener('vegaCancel', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaChange', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaSave', this.handleCellPropertiesUpdate);
+      slotDiv.appendChild(tablePropsForm);
+      slotDiv.appendChild(cellPropsForm);
+      popover.appendChild(slotDiv);
+      this.popoverRef = popover;
+      this.tablePropertiesFormRef = tablePropsForm;
+      this.cellPropertiesFormRef = cellPropsForm;
+      return popover;
+    }
   }
   /**
    * Updates the visibility of the pre-rendered content blocks based on type.
@@ -183,13 +185,13 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   updateContent(type) {
     this.popoverCloseType = 'none';
     const extensionContext = this.getTableExtensionContext();
-    if (this.tablePropertiesFormRef && type === 'TABLE') {
+    if (type === 'TABLE') {
       this.tablePropertiesFormRef.classList.remove('vega-hidden');
       this.cellPropertiesFormRef.classList.add('vega-hidden');
       this.tablePropertiesFormRef.defaultValue =
         TablePropertiesEventHandler.generateTablePropertiesForm(this.currentTableBlock);
     }
-    else if (this.cellPropertiesFormRef && type === 'CELL') {
+    else if (type === 'CELL') {
       this.cellPropertiesFormRef.classList.remove('vega-hidden');
       this.tablePropertiesFormRef.classList.add('vega-hidden');
       if (extensionContext) {