@globalpayments/vega 2.43.0 → 2.45.0

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

@@ -166,6 +166,22 @@ export class VegaModal {
   listenDataDismiss(e) {
     methodPlaceholder(e);
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-backdrop-mousedown-mouseup-e2e}
+   */
+  /* istanbul ignore next */
+  listenMouseDown(e) {
+    methodPlaceholder(e);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-backdrop-mousedown-mouseup-e2e}
+   */
+  /* istanbul ignore next */
+  listenMouseUp(e) {
+    methodPlaceholder(e);
+  }
   /**
    * Invoke this method to show or hide the modal.
    *
@@ -615,6 +631,18 @@ export class VegaModal {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "mousedown",
+      "method": "listenMouseDown",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseup",
+      "method": "listenMouseUp",
+      "target": undefined,
+      "capture": false,
+      "passive": true
     }]; }
 }
 __decorate([

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

@@ -29,14 +29,14 @@ export class VegaNavListRenderer extends VegaSlimmer {
   }
   renderSection(section) {
     var _a;
-    return (h("vega-left-nav-section", { sectionHeader: section.sectionHeader }, (_a = section.children) === null || _a === void 0 ? void 0 : _a.map((item) => item.type == 'group' ? this.renderGroup(item) : this.renderLink(item))));
+    return (h("vega-left-nav-section", { itemKey: section.key, sectionHeader: section.sectionHeader }, (_a = section.children) === null || _a === void 0 ? void 0 : _a.map((item) => item.type == 'group' ? this.renderGroup(item) : this.renderLink(item))));
   }
   renderGroup(item) {
     var _a;
-    return (h("vega-left-nav-group", { key: item.name, icon: item.icon, label: item.name }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.type == 'group' ? this.renderGroup(child) : this.renderLink(child))));
+    return (h("vega-left-nav-group", { itemKey: item.key, key: item.key || item.name, icon: item.icon, label: item.name, "open-by-default": item.openByDefault }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.type == 'group' ? this.renderGroup(child) : this.renderLink(child))));
   }
   renderLink(item) {
-    return (h("vega-left-nav-link", { key: item.name, icon: item.icon, url: item.url, selected: item.selected, counterBadge: item.counterBadge }, item.name));
+    return (h("vega-left-nav-link", { itemKey: item.key, key: item.key || item.name, icon: item.icon, url: item.url, selected: item.selected, counterBadge: item.counterBadge }, item.name));
   }
 }
 __decorate([

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

@@ -37,7 +37,7 @@ export class VegaLeftNavGroupRenderer extends VegaSlimmer {
     return this.groupContainer;
   }
   render() {
-    return (h("div", { class: "vega-li-main", ref: (ref) => (this.groupContainer = ref) },
+    return (h("div", { class: `vega-li-main ${this.openByDefault ? 'open' : ''}`, ref: (ref) => (this.groupContainer = ref) },
       h("a", { href: `#${this.label}`, role: 'button', tabIndex: 0, "data-root": "$1", onClick: this.handleClick, "aria-label": this.label || 'No label defined' },
         this.icon && (h("div", { class: "vega-links-icon" },
           h("div", { class: "prefix-icon" },
@@ -83,3 +83,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "siblingObserverController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "openByDefault", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "itemKey", void 0);

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

@@ -4,7 +4,7 @@ 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 { h, Component, Prop, Element, Event, State } from '@stencil/core';
+import { h, Component, Prop, Element, Event, State, Host } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, slotPlaceholder, } from 'vega-slimmer/core';
 import { VegaLeftNavGroupRenderer } from './slimmers/renderers/vega-left-nav-group-renderer';
@@ -31,10 +31,14 @@ export class VegaLeftNavGroup {
      * @vegaVersion 1.31.0
      */
     this.label = '';
+    /** Specifies whether the navigation group is expanded by default **
+     * @vegaVersion 2.44.0
+     */
+    this.openByDefault = false;
   }
   render() {
     slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(this.renderer.render(), this.host);
+    return (h(Host, { "data-key": this.itemKey }, sanitizeVegaComponent(this.renderer.render(), this.host)));
   }
   static get is() { return "vega-left-nav-group"; }
   static get encapsulation() { return "shadow"; }
@@ -85,6 +89,47 @@ export class VegaLeftNavGroup {
       "attribute": "label",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "openByDefault": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.44.0"
+          }],
+        "text": "Specifies whether the navigation group is expanded by default **"
+      },
+      "attribute": "open-by-default",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "itemKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.45.0"
+          }],
+        "text": "Defines a unique key for the left nav group item."
+      },
+      "attribute": "item-key",
+      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -30,7 +30,7 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
     var _a;
     const url = this.url || 'javascript:void(0);';
     const classList = this.selected === true ? 'selected' : '';
-    return (h(Host, { class: classList },
+    return (h(Host, { class: classList, "data-key": this.itemKey },
       h("a", { href: url, onClick: this.handleClick },
         this.icon && (h("div", { class: "vega-links-icon" },
           h("div", { class: "prefix-icon" },
@@ -76,3 +76,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "customSelectionEnabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "itemKey", void 0);

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

@@ -26,6 +26,7 @@ export class VegaLeftNavLink {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * A boolean that indicates whether the current link item is selected.
+     *
      * @VegaWarning Note: Ensure that the `custom-selection-enabled` property is set to `true` before modifying this value, as modifying it without this setting may lead to unexpected behavior.
      * @vegaVersion 1.31.0
      */
@@ -161,6 +162,26 @@ export class VegaLeftNavLink {
           }],
         "text": "config the counter badge for left nav link items"
       }
+    },
+    "itemKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.45.0"
+          }],
+        "text": "Defines a unique key for the left nav link item."
+      },
+      "attribute": "item-key",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -10,7 +10,7 @@ import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-man
 import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 export class VegaLeftNavSectionRenderer extends VegaSlimmer {
   render() {
-    return (h(Host, null,
+    return (h(Host, { "data-key": this.itemKey },
       this.renderSectionHeader(),
       h("slot", null),
       this.renderListSeparator()));
@@ -38,3 +38,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavSectionRenderer.prototype, "actionClickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavSectionRenderer.prototype, "itemKey", void 0);

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

@@ -56,6 +56,26 @@ export class VegaLeftNavSection {
           }],
         "text": "sectionHeader attached to the left nav section **"
       }
+    },
+    "itemKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.45.0"
+          }],
+        "text": "Defines a unique key for the left nav nav section item."
+      },
+      "attribute": "item-key",
+      "reflect": false
     }
   }; }
   static get events() { return [{

package/dist/collection/components/vega-pagination/vega-pagination-page-size-selector-mobile/slimmers/renderers/page-size-selector-mobile-renderer.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
 export class PageSizeSelectorMobileRenderer extends VegaSlimmer {
   render() {
     if (this.type === 'pageSizeSelectorMobile') {
@@ -16,19 +17,27 @@ export class PageSizeSelectorMobileRenderer extends VegaSlimmer {
     }
   }
   renderPageSizeSelectorMobile() {
-    return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-4" },
-      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t('Show')),
-      this.pageSizeSelectorMobileDropdownRenderer.render(h("vega-button-link", { label: `${this.pageSize.toString()} items / page` }))));
+    const preservedTranslationOutput = VegaInternalTranslation.tWithPreservedBlocks('Show [{0} items / page]', PageSizeSelectorMobileRenderer.clickableReg, this.pageSize);
+    return this.renderTranslatedMessage(preservedTranslationOutput);
   }
   renderPageSizeSelectorMobileAndCurrentPageLabel() {
     const rangeFrom = this.total > 0 ? this.pageSize * (this.current - 1) + 1 : 0;
     const rangeTo = Math.min(this.current * this.pageSize, this.total);
-    return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-4" },
-      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t('Viewing')),
-      this.pageSizeSelectorMobileDropdownRenderer.render(h("vega-button-link", { label: this.translationSlimmer.t(`${rangeFrom}-${rangeTo}`) })),
-      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t(`of ${this.total}`))));
+    const preservedTranslationOutput = VegaInternalTranslation.tWithPreservedBlocks('Viewing [{0}-{1}] of {2}', PageSizeSelectorMobileRenderer.clickableReg, rangeFrom, rangeTo, this.total);
+    return this.renderTranslatedMessage(preservedTranslationOutput);
+  }
+  renderTranslatedMessage(preservedTranslationOutput) {
+    return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-4" }, preservedTranslationOutput.map((outPut) => {
+      if (outPut.isPreserved) {
+        return this.pageSizeSelectorMobileDropdownRenderer.render(h("vega-button-link", { label: outPut.content }));
+      }
+      else {
+        return (h("vega-font", { variant: "font-field-label", color: "text-primary" }, outPut.content));
+      }
+    })));
   }
 }
+PageSizeSelectorMobileRenderer.clickableReg = /(\[[^\]]*\])/g;
 __decorate([
   MapToComponentField()
 ], PageSizeSelectorMobileRenderer.prototype, "translationSlimmer", void 0);

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

@@ -83,10 +83,11 @@ export class VegaPagination {
      * It refers to additional elements or components that can be added to
      *    enhance the functionality or appearance of each pagination item.
      *
-     * @VegaWarning Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. To enable the new responsive default value `{
-          default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
-          M: [['pageSelector']],
-        }`, please enable the feature flag.
+     * @VegaWarning - Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default.
+     *              - To enable the new responsive default value `{
+              default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
+                M: [['pageSelector']],
+                    }`, please enable the feature flag.
      * @vegaVersion 1.25.0
      * @defaultValue [['pageSelector']]
      */
@@ -317,7 +318,7 @@ export class VegaPagination {
       "docs": {
         "tags": [{
             "name": "VegaWarning",
-            "text": "Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. To enable the new responsive default value `{\ndefault: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],\nM: [['pageSelector']],\n}`, please enable the feature flag."
+            "text": "- Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. \n- To enable the new responsive default value `{\ndefault: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],\nM: [['pageSelector']],\n}`, please enable the feature flag."
           }, {
             "name": "vegaVersion",
             "text": "1.25.0"

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

@@ -59,10 +59,8 @@ export class VegaPopover {
     /**
      * Determines whether the popover's position is calculated relative to the screen.
      *
-     * @VegaWarning When enabled (set to true), it overrides the positionRelativeTo property, making it ineffective.
-     *
-     * @VegaWarning Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
-     *
+     * @VegaWarning - It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
+     *              - Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
      * @vegaVersion 2.39.0
      */
     this.isScreenPosition = false;
@@ -279,10 +277,7 @@ export class VegaPopover {
       "docs": {
         "tags": [{
             "name": "VegaWarning",
-            "text": "When enabled (set to true), it overrides the positionRelativeTo property, making it ineffective."
-          }, {
-            "name": "VegaWarning",
-            "text": "Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
+            "text": "- It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.\n- Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
           }, {
             "name": "vegaVersion",
             "text": "2.39.0"

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

@@ -44,8 +44,7 @@ export class RTEListBlock extends RTEBlock {
    * @inheritDoc
    */
   isNotEmpty() {
-    return (this.blocks.length > 0 &&
-      this.blocks.some((listItemBlock) => listItemBlock.isNotEmpty()));
+    return this.blocks.length > 0;
   }
   /**
    * @inheritDoc

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

@@ -71,17 +71,6 @@ export class RTEListItemBlock extends RTETextBlock {
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
-  /**
-   * @inheritDoc
-   */
-  isNotEmpty() {
-    if (this.children) {
-      return super.isNotEmpty() || this.children.some((block) => block.isNotEmpty());
-    }
-    else {
-      return super.isNotEmpty();
-    }
-  }
   /**
    * @inheritDoc
    */

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

@@ -59,7 +59,7 @@ export class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
       const boldAnnotation = new BoldAnnotation(item.bold);
       return (h("vega-dropdown-item", { key: item.key, itemKey: item.key },
         h("vega-box", { padding: { right: 'size-20' } },
-          h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, item.label))));
+          h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, this.translationSlimmer.t(item.label)))));
     })));
   }
   isSelected() {

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

@@ -13,7 +13,7 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
     super();
     this.renderBtn = ({ showArrowIcon, iconColor } = {}) => {
       var _a;
-      return (h("vega-tooltip", { text: this.tooltip.text, placement: ['bottom', 'top'] },
+      return (h("vega-tooltip", { text: this.translationSlimmer.t(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();
@@ -60,6 +60,9 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
     };
   }
 }
+__decorate([
+  MapToComponentField()
+], ToolbarButtonSlimmer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], ToolbarButtonSlimmer.prototype, "selectionController", void 0);

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

@@ -80,7 +80,7 @@ describe('bullet list', () => {
     });
     expect(bulletListBlock.isNotEmpty()).toEqual(true);
     bulletListBlock.blocks[0].nodes[0].text = '';
-    expect(bulletListBlock.isNotEmpty()).toEqual(false);
+    expect(bulletListBlock.isNotEmpty()).toEqual(true);
     const childrenListBlock = RTEListBlock.from({
       id: '1-1-2',
       type: 'bullet-list',
@@ -101,7 +101,7 @@ describe('bullet list', () => {
     bulletListBlock.blocks[0].children = [childrenListBlock];
     expect(bulletListBlock.isNotEmpty()).toEqual(true);
     childrenListBlock.blocks[0].nodes[0].text = '';
-    expect(bulletListBlock.isNotEmpty()).toEqual(false);
+    expect(bulletListBlock.isNotEmpty()).toEqual(true);
   });
 });
 describe('number list', () => {
@@ -125,7 +125,7 @@ describe('number list', () => {
     });
     expect(listBlock.isNotEmpty()).toEqual(true);
     listBlock.blocks[0].nodes[0].text = '';
-    expect(listBlock.isNotEmpty()).toEqual(false);
+    expect(listBlock.isNotEmpty()).toEqual(true);
     const childrenListBlock = RTEListBlock.from({
       id: '1-1-2',
       type: 'number-list',
@@ -146,7 +146,7 @@ describe('number list', () => {
     listBlock.blocks[0].children = [childrenListBlock];
     expect(listBlock.isNotEmpty()).toEqual(true);
     childrenListBlock.blocks[0].nodes[0].text = '';
-    expect(listBlock.isNotEmpty()).toEqual(false);
+    expect(listBlock.isNotEmpty()).toEqual(true);
   });
   it('getLastNode should work as expect', () => {
     const listBlock = RTEListBlock.from({

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

@@ -42,12 +42,14 @@ import { FocusController } from './slimmers/controllers/focus-controller';
 import { TextNodeColorController } from './slimmers/controllers/text-node-color-controller';
 import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 /**
  * @vegaVersion 2.34.0
  */
 export class VegaRichTextEditor {
   constructor() {
     this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
@@ -585,6 +587,9 @@ export class VegaRichTextEditor {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaRichTextEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -54,11 +54,13 @@ export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
   renderImageEditor() {
     return (h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
       h("vega-flex", { gap: "size-12", alignItems: "center" },
-        h("vega-font", { variant: "font-field-label-sm", color: "text-primary" }, "Size:"),
+        h("vega-font", { variant: "font-field-label-sm", color: "text-primary" },
+          this.translationSlimmer.t('Size'),
+          ":"),
         h("vega-segment-control", { size: "small", segments: [
-            { key: 'sm', text: 'Sm' },
-            { key: 'md', text: 'Md' },
-            { key: 'lg', text: 'Lg' },
+            { key: 'sm', text: this.translationSlimmer.t('Sm') },
+            { key: 'md', text: this.translationSlimmer.t('Md') },
+            { key: 'lg', text: this.translationSlimmer.t('Lg') },
           ], selected: this.size, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
               const size = e.detail;
@@ -81,13 +83,13 @@ export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
               }
             });
           } },
-          h("vega-button-group-item", { label: "Alt Text", itemKey: "Alt Text" }),
-          h("vega-button-group-item", { label: "Delete Image", icon: VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
+          h("vega-button-group-item", { label: this.translationSlimmer.t('Alt Text'), itemKey: "Alt Text" }),
+          h("vega-button-group-item", { label: this.translationSlimmer.t('Delete Image'), icon: VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
   }
   renderAltTextEditor() {
     return (h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
       h("vega-form", { ref: (ref) => (this.formRef = ref) },
-        h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: "Alt Text", ref: (ref) => {
+        h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: this.translationSlimmer.t('Alt Text'), ref: (ref) => {
             void ref.doFocus();
           }, onKeyDown: this.handleKeyDown }))));
   }
@@ -128,6 +130,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextImageEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaRichTextImageEditorRenderer.prototype, "findParentContainerRef", null);

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

@@ -11,6 +11,7 @@ import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaRichTextImageEditorRenderer } from './slimmers/renderers/vega-rich-text-image-editor-renderer';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
 /**
  * This is an internal used component and shouldn't be used by clients,
  *    it doesn't show up in storybook either.
@@ -20,6 +21,7 @@ import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-i
 export class VegaRichTextImageEditor {
   constructor() {
     this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextImageEditorRenderer();
     this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextImageEditor, VegaChange);
@@ -154,6 +156,9 @@ export class VegaRichTextImageEditor {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaRichTextImageEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextImageEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -96,8 +96,8 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
             }
           });
         } },
-        h("vega-button-group-item", { label: "Edit", itemKey: "edit" }),
-        h("vega-button-group-item", { label: "Unlink", itemKey: "unlink" }))));
+        h("vega-button-group-item", { label: this.translationSlimmer.t('Edit'), itemKey: "edit" }),
+        h("vega-button-group-item", { label: this.translationSlimmer.t('Unlink'), itemKey: "unlink" }))));
   }
   renderLinkEditContent() {
     return (h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
@@ -105,8 +105,8 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
         h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
           h("vega-input", { "data-vega-form": "url", ref: (ref) => {
               this.urlInputRef = ref;
-            }, size: "small", label: "URL", onKeyDown: this.handleKeyDown }),
-          h("vega-input", { size: "small", label: "Text", "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+            }, size: "small", label: this.translationSlimmer.t('URL'), onKeyDown: this.handleKeyDown }),
+          h("vega-input", { size: "small", label: this.translationSlimmer.t('Text'), "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
   }
   updatePopoverTarget() {
     remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), this.target);
@@ -127,6 +127,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "resetStatusAfterHide", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "target", void 0);

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

@@ -11,6 +11,7 @@ import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaRichTextLinkEditorRenderer } from './slimmers/renderers/vega-rich-text-link-editor-renderer';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
 /**
  * This is an internal used component and shouldn't be used by clients,
  *    it doesn't show up in storybook either.
@@ -20,6 +21,7 @@ import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-i
 export class VegaRichTextLinkEditor {
   constructor() {
     this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextLinkEditorRenderer();
     this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextLinkEditor, VegaChange);
@@ -236,6 +238,9 @@ export class VegaRichTextLinkEditor {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaRichTextLinkEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextLinkEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -22,7 +22,7 @@ export class VegaSkeletonImageRenderer extends VegaSkeletonRendererBase {
     };
   }
   renderChildren() {
-    return h("div", { class: "vega-skeleton-image" });
+    return h("vega-box", { class: "vega-skeleton-image", corners: this.corners });
   }
 }
 __decorate([
@@ -31,3 +31,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSkeletonImageRenderer.prototype, "width", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonImageRenderer.prototype, "corners", void 0);

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

@@ -48,7 +48,6 @@
 }
 
 .vega-skeleton-image {
-  border-radius: 12px;
   width: 100%;
   height: 100%;
 }