@heartlandone/vega 2.77.0 → 2.78.0

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

@@ -63,95 +63,145 @@ export class VegaInputPhoneNumber {
     });
     this.phoneNumberInputValue = '';
     /**
-     * Specifies the label or title for the phone number input field.
-     *
-     * It provides descriptive text that helps identify the
-     *    purpose or content expected in the input field.
+     * Specifies the visible label text rendered above the phone number input.
+     * The label identifies the purpose of the field and serves as the
+     * accessible name for screen readers.
      *
+     * @default ''
      * @vegaVersion 2.18.0
      */
     this.label = '';
     /**
-     * Specifies the size of the phone number input field.
+     * Controls the visual size of the phone number input field.
+     *
+     * - `'default'` — Standard height, suitable for most form layouts.
+     * - `'small'` — Compact height, useful for dense UIs.
      *
+     * @default 'default'
      * @vegaVersion 2.18.0
      */
     this.size = 'default';
     /**
-     * Determines whether the phone number input field is required.
+     * Determines whether the phone number input field must have a value before
+     * the form can be submitted. When `true`, the built-in
+     * `InputPhoneNumberRequiredRule` is applied during validation and a
+     * required indicator is shown on the label.
      *
+     * @default false
      * @vegaVersion 2.18.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
     /**
-     * Determines whether the phone number input field is disabled.
+     * Specifies whether the phone number input field is disabled. When `true`,
+     * both the country selector and the phone number text field become
+     * non-interactive — the user cannot type, select a country, or focus
+     * any part of the component.
      *
+     * @default false
      * @vegaVersion 2.18.0
      */
     this.disabled = false;
     /**
-     * Specifies the default country calling code using the two-letter uppercase country code.
+     * Specifies the currently selected country using a two-letter uppercase
+     * ISO 3166-1 alpha-2 code (e.g., `'US'`, `'GB'`, `'CN'`). The country
+     * code determines the flag icon and calling code prefix displayed in the
+     * country selector. Changing this value updates the phone number prefix
+     * accordingly.
      *
+     * @default 'US'
      * @vegaVersion 2.18.0
-     * @defaultValue US
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.countryCode = CountrySelectController.defaultCountryCode;
     /**
-     * Specifies the countries available for selection.
+     * An array of country codes available for selection in the country
+     * dropdown. Each entry must be a two-letter uppercase ISO 3166-1 alpha-2
+     * code.
      *
-     * Note: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes.
+     * By default all 245 supported codes are loaded, but providing a smaller
+     * subset improves initial render performance.
      *
+     * @default VegaCountryCode[] (all 245 codes)
      * @vegaVersion 2.18.0
-     * @defaultValue ['US', 'CN', ...]{@link VegaCountryCode}
      */
     this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
     /**
-     * Specifies whether the phone number input field can be set to an empty value.
-     * - `true`:
-     *      The value property is cleared when the input field is empty.
-     * - `false`:
-     *      The value property is `+1` when no phone number is entered.
+     * Controls whether the `value` property can be an empty string.
      *
+     * - `true` — The `value` property is cleared to `''` when the user
+     *   deletes all digits from the input field.
+     * - `false` — The `value` property always retains at least the country
+     *   calling code prefix (e.g., `'+1'` for US) even when no phone number
+     *   digits have been entered.
+     *
+     * @default false
      * @vegaVersion 2.35.0
      */
     this.emptyValueEnabled = false;
     /**
-     * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
+     * The current value of the phone number input in
+     * [E.164](https://en.wikipedia.org/wiki/E.164) format (e.g., `'+14155552671'`).
+     *
+     * This property is mutable and reflected to the host element attribute.
+     * It updates as the user types and can be set externally to pre-populate
+     * or reset the field. When `emptyValueEnabled` is `false` and no digits
+     * have been entered, the value defaults to the country calling code
+     * prefix (e.g., `'+1'` for US).
      *
-     * @VegaWarning - Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`.
-     *              - For example, if the default country code is US, the default value will be `+1`.
+     * @default '+1'
      * @vegaVersion 2.18.0
-     * @defaultValue +1
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = `+${getCountryCallingCode(this.countryCode)}`;
     /**
-     * Specifies custom validation rules for the phone number input field.
+     * An array of custom validation rules applied to the phone number input in
+     * addition to the built-in rules (`InputPhoneNumberRequiredRule`,
+     * `ValidPhoneNumberRule`). Each rule must implement the
+     * `FormFieldValidationRule` interface.
      *
+     * Rules are evaluated in order when `autoValidation` is enabled or when
+     * validation is triggered programmatically.
+     *
+     * @default []
      * @vegaVersion 2.18.0
      */
     this.validationRules = [];
     /**
-     * Indicates whether the current value in the field is considered valid
-     *    based on the defined validation rules.
+     * Reflects the current validation status of the phone number input.
+     *
+     * - `true` — the field value passes all validation rules.
+     * - `false` — one or more validation rules have failed.
+     * - `null` — the field has not been validated yet (initial state).
+     *
+     * This property is mutable: it is updated automatically when
+     * `autoValidation` is enabled, but can also be set manually to override
+     * the validation state.
      *
+     * @default null
      * @vegaVersion 2.18.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
     /**
-     * Determines whether the phone number input field should undergo automatic validation
-     *    during the user's input.
+     * Determines whether the phone number input should be validated
+     * automatically as the user interacts with it. When `true`, validation
+     * rules (including `required`, `ValidPhoneNumberRule`, and custom
+     * `validationRules`) are evaluated and the `isValid` property is updated
+     * accordingly.
      *
+     * Set to `false` to handle validation manually.
+     *
+     * @default true
      * @vegaVersion 2.18.0
      */
     this.autoValidation = true;
     /**
-     * Provides a supplementary prompt message that assists users in
-     *    understanding the expected value for the input field.
+     * Supplementary helper message displayed below the phone number input that
+     * assists users in understanding the expected value or provides additional
+     * context (e.g., `'We will send a verification code to this number'`).
      *
+     * @default ''
      * @vegaVersion 2.18.0
      */
     this.hint = '';
@@ -192,10 +242,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Specifies the label or title for the phone number input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
+        "text": "Specifies the visible label text rendered above the phone number input.\nThe label identifies the purpose of the field and serves as the\naccessible name for screen readers."
       },
       "attribute": "label",
       "reflect": false,
@@ -213,10 +266,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "'default'"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Specifies the size of the phone number input field."
+        "text": "Controls the visual size of the phone number input field.\n\n- `'default'` \u2014 Standard height, suitable for most form layouts.\n- `'small'` \u2014 Compact height, useful for dense UIs."
       },
       "attribute": "size",
       "reflect": false,
@@ -234,10 +290,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Determines whether the phone number input field is required."
+        "text": "Determines whether the phone number input field must have a value before\nthe form can be submitted. When `true`, the built-in\n`InputPhoneNumberRequiredRule` is applied during validation and a\nrequired indicator is shown on the label."
       },
       "attribute": "required",
       "reflect": true,
@@ -255,10 +314,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Determines whether the phone number input field is disabled."
+        "text": "Specifies whether the phone number input field is disabled. When `true`,\nboth the country selector and the phone number text field become\nnon-interactive \u2014 the user cannot type, select a country, or focus\nany part of the component."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -281,13 +343,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "'US'"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
-          }, {
-            "name": "defaultValue",
-            "text": "US"
           }],
-        "text": "Specifies the default country calling code using the two-letter uppercase country code."
+        "text": "Specifies the currently selected country using a two-letter uppercase\nISO 3166-1 alpha-2 code (e.g., `'US'`, `'GB'`, `'CN'`). The country\ncode determines the flag icon and calling code prefix displayed in the\ncountry selector. Changing this value updates the phone number prefix\naccordingly."
       },
       "attribute": "country-code",
       "reflect": true,
@@ -310,13 +372,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "VegaCountryCode[] (all 245 codes)"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
-          }, {
-            "name": "defaultValue",
-            "text": "['US', 'CN', ...]{@link VegaCountryCode }"
           }],
-        "text": "Specifies the countries available for selection.\n\nNote: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes."
+        "text": "An array of country codes available for selection in the country\ndropdown. Each entry must be a two-letter uppercase ISO 3166-1 alpha-2\ncode.\n\nBy default all 245 supported codes are loaded, but providing a smaller\nsubset improves initial render performance."
       },
       "defaultValue": "CountrySelectController.defaultAllowedCountryCodes"
     },
@@ -332,10 +394,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
             "name": "vegaVersion",
             "text": "2.35.0"
           }],
-        "text": "Specifies whether the phone number input field can be set to an empty value.\n- `true`:\n     The value property is cleared when the input field is empty.\n- `false`:\n     The value property is `+1` when no phone number is entered."
+        "text": "Controls whether the `value` property can be an empty string.\n\n- `true` \u2014 The `value` property is cleared to `''` when the user\n  deletes all digits from the input field.\n- `false` \u2014 The `value` property always retains at least the country\n  calling code prefix (e.g., `'+1'` for US) even when no phone number\n  digits have been entered."
       },
       "attribute": "empty-value-enabled",
       "reflect": false,
@@ -353,16 +418,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "VegaWarning",
-            "text": "- Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`.\n- For example, if the default country code is US, the default value will be `+1`."
+            "name": "default",
+            "text": "'+1'"
           }, {
             "name": "vegaVersion",
             "text": "2.18.0"
-          }, {
-            "name": "defaultValue",
-            "text": "+1"
           }],
-        "text": "Specifies the value of the phone number input in [E.164]{@link https ://en.wikipedia.org/wiki/E.164} format."
+        "text": "The current value of the phone number input in\n[E.164](https://en.wikipedia.org/wiki/E.164) format (e.g., `'+14155552671'`).\n\nThis property is mutable and reflected to the host element attribute.\nIt updates as the user types and can be set externally to pre-populate\nor reset the field. When `emptyValueEnabled` is `false` and no digits\nhave been entered, the value defaults to the country calling code\nprefix (e.g., `'+1'` for US)."
       },
       "attribute": "value",
       "reflect": true,
@@ -385,10 +447,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "[]"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Specifies custom validation rules for the phone number input field."
+        "text": "An array of custom validation rules applied to the phone number input in\naddition to the built-in rules (`InputPhoneNumberRequiredRule`,\n`ValidPhoneNumberRule`). Each rule must implement the\n`FormFieldValidationRule` interface.\n\nRules are evaluated in order when `autoValidation` is enabled or when\nvalidation is triggered programmatically."
       },
       "defaultValue": "[]"
     },
@@ -404,10 +469,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "null"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Indicates whether the current value in the field is considered valid\n   based on the defined validation rules."
+        "text": "Reflects the current validation status of the phone number input.\n\n- `true` \u2014 the field value passes all validation rules.\n- `false` \u2014 one or more validation rules have failed.\n- `null` \u2014 the field has not been validated yet (initial state).\n\nThis property is mutable: it is updated automatically when\n`autoValidation` is enabled, but can also be set manually to override\nthe validation state."
       },
       "attribute": "is-valid",
       "reflect": true,
@@ -425,10 +493,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "true"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Determines whether the phone number input field should undergo automatic validation\n   during the user's input."
+        "text": "Determines whether the phone number input should be validated\nautomatically as the user interacts with it. When `true`, validation\nrules (including `required`, `ValidPhoneNumberRule`, and custom\n`validationRules`) are evaluated and the `isValid` property is updated\naccordingly.\n\nSet to `false` to handle validation manually."
       },
       "attribute": "auto-validation",
       "reflect": true,
@@ -446,10 +517,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "undefined"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Specifies a placeholder string that displays as a temporary hint\n   or example inside the input field."
+        "text": "Specifies placeholder text displayed inside the phone number text field\nwhen it is empty. The placeholder disappears once the user begins typing\nand is typically used to indicate the expected format\n(e.g., `'(555) 555-5555'`)."
       },
       "attribute": "placeholder",
       "reflect": false
@@ -466,10 +540,13 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input field."
+        "text": "Supplementary helper message displayed below the phone number input that\nassists users in understanding the expected value or provides additional\ncontext (e.g., `'We will send a verification code to this number'`)."
       },
       "attribute": "hint",
       "reflect": false,
@@ -487,10 +564,13 @@ export class VegaInputPhoneNumber {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "string"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "An event emitter notifying a value change."
+        "text": "Fires whenever the phone number value changes \u2014 including typing,\npasting, or programmatic updates. The event detail contains the full\nphone number in E.164 format (e.g., `'+14155552671'`)."
       },
       "complexType": {
         "original": "string",
@@ -505,13 +585,16 @@ export class VegaInputPhoneNumber {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "string"
+          }, {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "An event emitter notifying a value change."
+        "text": "Native-equivalent mirror of `vegaChange`. Fires with the same payload\nand at the same time, allowing consumers to listen using the standard\n`change` event name."
       },
       "complexType": {
         "original": "string",
@@ -526,10 +609,13 @@ export class VegaInputPhoneNumber {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "VegaCountryType"
+          }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "An event emitter notifying a country change."
+        "text": "Fires whenever the selected country changes via the country dropdown.\nThe event detail contains a `VegaCountryType` object with the country\ncode, calling code, and display name of the newly selected country."
       },
       "complexType": {
         "original": "VegaCountryType",
@@ -549,13 +635,16 @@ export class VegaInputPhoneNumber {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "VegaCountryType"
+          }, {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
             "name": "vegaVersion",
             "text": "2.18.0"
           }],
-        "text": "An event emitter notifying a country change."
+        "text": "Native-equivalent mirror of `vegaCountryChange`. Fires with the same\npayload and at the same time, allowing consumers to listen using the\nstandard `countryChange` event name."
       },
       "complexType": {
         "original": "VegaCountryType",

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

@@ -78,6 +78,7 @@ export class VegaInputRangeInputRenderer extends VegaSlimmer {
       'type': 'number',
       'data-index': index,
       'placeholder': this.getPlaceholderByIndex(index),
+      'data-aria-label': this.getDataAriaLabel(index),
       'showClearIcon': false,
       'disabled': this.disabled,
       'size': this.size,
@@ -96,6 +97,17 @@ export class VegaInputRangeInputRenderer extends VegaSlimmer {
     const placeholder = this.placeholder || VegaInputRangeInputRenderer.defaultPlaceholder;
     return this.translationSlimmer.t(placeholder[index]);
   }
+  /**
+   * Get the data aria label for the input range input by the input range index
+   *
+   * @param {number} index the range index 0|1
+   * @returns {string} the data aria label for the input range input
+   */
+  // TODO: should guarantee all the a11y label is integrated with our translation api, https://gethired.atlassian.net/browse/VD-8327
+  getDataAriaLabel(index) {
+    const inputRangeLabel = this.label || 'Input range';
+    return `${inputRangeLabel} ${index === 0 ? 'start' : 'end'}`;
+  }
   /**
    * get the input value by the input range index
    *
@@ -129,6 +141,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputRangeInputRenderer.prototype, "placeholder", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "label", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputRangeInputRenderer.prototype, "showClearIcon", void 0);

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

@@ -27,6 +27,7 @@ import { VegaInputSelectItemsSlotController } from './slimmers/controllers/vega-
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaInputSelectPrefixIconRenderer } from './slimmers/renderers/vega-input-select-prefix-icon-renderer';
 import { InputSelectValueInSourceRule } from '../../helpers/validator/rules/input-select-value-in-source-rule';
+import { VegaInternalTranslation } from '../../helpers/translation/internal-translation-controller';
 /**
  * @vegaVersion 1.0.7
  */
@@ -102,15 +103,15 @@ export class VegaInputSelect {
      * Allows customization of the text displayed within the
      *    select field when single or multiple items are selected.
      *    The default format for the selected label is
-     *    `${number of selected items} Selected` for multiple mode only.
+     *    `{0} Selected` for multiple mode only.
      *
      *	To enable all modes, use the `SelectedLabelTypeForAllModes` type.
      * 		For single mode, the default format is the `displayName` of the selected item if not set
-     * 		For multiple mode, the default format is `${number of selected items} Selected` if not set
+     * 		For multiple mode, the default format is `{0} Selected` if not set
      *
      * @vegaVersion 1.35.0
      */
-    this.selectedLabel = (value) => `${value.length} Selected`;
+    this.selectedLabel = (value) => VegaInternalTranslation.t(`{0} Selected`, value.length);
     /**
      * Controls the selection capabilities of the associated dropdown menu.
      *
@@ -342,9 +343,9 @@ export class VegaInputSelect {
             "name": "vegaVersion",
             "text": "1.35.0"
           }],
-        "text": "Allows customization of the text displayed within the\n   select field when single or multiple items are selected.\n   The default format for the selected label is\n   `${number of selected items} Selected` for multiple mode only.\n\nTo enable all modes, use the `SelectedLabelTypeForAllModes` type.\n\t\tFor single mode, the default format is the `displayName` of the selected item if not set\n\t\tFor multiple mode, the default format is `${number of selected items} Selected` if not set"
+        "text": "Allows customization of the text displayed within the\n   select field when single or multiple items are selected.\n   The default format for the selected label is\n   `{0} Selected` for multiple mode only.\n\nTo enable all modes, use the `SelectedLabelTypeForAllModes` type.\n\t\tFor single mode, the default format is the `displayName` of the selected item if not set\n\t\tFor multiple mode, the default format is `{0} Selected` if not set"
       },
-      "defaultValue": "(value: string[]) =>\n\t\t`${value.length} Selected`"
+      "defaultValue": "(value: string[]) =>\n\t\tVegaInternalTranslation.t<'dynamic'>(`{0} Selected`, value.length)"
     },
     "selectType": {
       "type": "string",

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

@@ -28,7 +28,6 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
     };
   }
   render() {
-    var _a;
     const url = this.url || 'javascript:void(0);';
     const classList = this.selected === true ? 'selected' : '';
     return (h(Host, { class: classList, "data-key": this.itemKey },
@@ -38,8 +37,8 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
             h("vega-icon", { icon: this.icon, size: "size-16" })))),
         h("span", { class: "vega-links-name" },
           h("slot", null)),
-        h("div", { class: "vega-counter-badge" },
-          h("vega-counter-badge", { count: this.deprecatedPropertySlimmer.getValue(), color: (_a = this.counterBadge) === null || _a === void 0 ? void 0 : _a.color })))));
+        !!this.deprecatedPropertySlimmer.getValue() && (h("div", { class: "vega-counter-badge" },
+          h("vega-counter-badge", { count: this.deprecatedPropertySlimmer.getValue(), color: this.counterBadge.color }))))));
   }
   notifyVegaLeftNav() {
     const vegaLeftNav = findParent(this.host, 'vega-left-nav');

package/dist/collection/components/vega-popover/vega-popover-content-box/vega-popover-content-box.css

@@ -2559,6 +2559,11 @@
   border-bottom-color: transparent;
 }
 
+:host(.vega-no-suitable-placement) .vega-arrow,
+:host(.vega-no-suitable-alignment) .vega-arrow {
+  display: none;
+}
+
 :host(.vega-placement-left) .vega-arrow {
   transform: rotate(144deg);
   right: -9px;

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\">; gap?: ResponsiveType<GapType>; alignItems?: ResponsiveType<FlexAlignItemType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
+        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\">; gap?: ResponsiveType<GapType>; alignItems?: ResponsiveType<FlexAlignItemType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
         "references": {
           "VegaFlexProps": {
             "location": "import",

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

@@ -57,7 +57,13 @@ class RTEImageNodeRenderer extends RTENodeRenderer {
   renderImage(imageAnnotation, node, renderContext) {
     var _a;
     return (h("img", Object.assign({}, (_a = node.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render({ filterAttributes: ['width', 'height'] }), { class: this.getClassesForImageNode(node, renderContext.editable), style: renderContext.editable
-        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node) })));
+        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node), 
+      // eslint-disable-next-line react/jsx-no-bind
+      onError: (e) => {
+        const img = e.target;
+        img.style.width = '16px';
+        img.style.height = '16px';
+      } })));
   }
   /**
    * Get the custom class string of the current RTEImageNode.

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

@@ -20,10 +20,13 @@ export class InsertImageController extends VegaSlimmer {
    * Insert a image to current state
    *
    * @param {string} imageUrl The image url
+   * @param {RTEBlock[]} selectedBlocks The current selected blocks, if not provided, will get from selectionController
+   * @param {RTENode[]} selectedNodes The current selected nodes, if not provided, will get from selectionController
+   * @param {RTERange} currentRange The current selected range, if not provided, will get from selectionController
    * @returns {RTEImageNode} RTEImageNode
    */
-  insertImageToCaretPosition(imageUrl) {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
+  insertImageToCaretPosition(imageUrl, selectedBlocks, selectedNodes, currentRange) {
+    selectedBlocks || (selectedBlocks = this.selectionController.getSelectedBlocks());
     const imageBlock = new RTEImageBlock(generateUUID());
     const newImageNode = new RTEImageNode(generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new ImageAnnotationAction('md', ''));
@@ -33,8 +36,8 @@ export class InsertImageController extends VegaSlimmer {
       void this.valueController.flushChanges(this.value);
     }
     else {
-      const { startOffset } = this.selectionController.getCurrentRange();
-      const selectedNodes = this.selectionController.getSelectedNodes();
+      const { startOffset } = currentRange || this.selectionController.getCurrentRange();
+      selectedNodes || (selectedNodes = this.selectionController.getSelectedNodes());
       selectedBlocks[0].apply(new InsertImageToBlockAction(selectedNodes[0], startOffset, imageBlock));
     }
     this.updateCaretPosition(newImageNode);