@globalpayments/vega 2.49.1 → 2.51.0

package/dist/collection/components/vega-code-block/vega-code-block.js

@@ -0,0 +1,404 @@
+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 { Component, Element, Host, h, Prop, Event, Method, Watch } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { VegaCodeBlockRenderer } from './slimmers/renderers/vega-code-block-renderer';
+import { arrayToClassString } from '../../utils/ui';
+import { VegaCodeBlockContentRenderer } from './slimmers/renderers/vega-code-block-content-renderer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaChange, VegaRemove } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaCodeBlockValueController } from './slimmers/controllers/vega-code-block-value-controller';
+import { deepEqual } from '../../utils/object';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { CodeContentParseController } from './slimmers/controllers/vega-code-block-content-parse-controller';
+import { VegaCodeBlockSelectionController } from './slimmers/controllers/vega-code-block-selection-controller';
+import { CodeBlockInputController } from './slimmers/controllers/vega-code-block-input-controller';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
+import { VegaCodeBlockFocusController } from './slimmers/controllers/vega-code-block-focus-controller';
+import { VegaCodeBlockCopyButtonRenderer } from './slimmers/renderers/vega-code-block-copy-button-renderer';
+import { PrismCodeHighlightParseController } from './slimmers/controllers/prism-code-highlight-parse-controller';
+import { DefaultCodeHighlightParseController } from './slimmers/controllers/default-code-highlight-parse-controller';
+import { ComponentGlobalStyleSlimmer } from '../../helpers/slimmers/component-global-style-slimmer';
+import codeColorVariable from './code-color-variable.css';
+import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
+/**
+ * A component for capturing and displaying syntax-highlighted code blocks with copy-to-clipboard functionality.
+ *
+ * @vegaVersion 2.50.0
+ */
+export class VegaCodeBlock {
+  constructor() {
+    this.globalSlimmers = {};
+    //TODO: The global style should be removed after the code color change to the color token.
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(codeColorVariable);
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.codeBlockRenderer = new VegaCodeBlockRenderer();
+    this.contentRenderer = new VegaCodeBlockContentRenderer();
+    this.copyButtonRenderer = new VegaCodeBlockCopyButtonRenderer();
+    this.valueController = new VegaCodeBlockValueController();
+    this.contentParseController = new CodeContentParseController();
+    this.prismCodeHighlightParser = new PrismCodeHighlightParseController();
+    this.defaultCodeHighlightParser = new DefaultCodeHighlightParseController();
+    this.selectionController = new VegaCodeBlockSelectionController();
+    this.inputController = new CodeBlockInputController();
+    this.insertCompositionTextController = new InsertCompositionTextController();
+    this.focusController = new VegaCodeBlockFocusController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaChange);
+    this.removeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaRemove);
+    this.eventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.codeBlockRenderer.getToolbarContainerRef());
+    /**
+     * Specifies whether the code block editor is in read-only mode.
+     *
+     * @vegaVersion 2.50.0
+     */
+    this.readOnly = false;
+    /**
+     * Specifies whether the code block editor is disabled.
+     *
+     * @vegaVersion 2.50.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether to display the copy button in the code block.
+     *
+     * @vegaVersion 2.50.0
+     */
+    this.showCopyButton = true;
+    /**
+     * Specifies whether to display the code line number in the code block.
+     *
+     * @vegaVersion 2.50.0
+     */
+    this.showLineNumber = true;
+  }
+  watchEditableChange() {
+    methodPlaceholder();
+  }
+  /**
+   * Check the props value to avoid unnecessary updates.
+   *
+   * @param {unknown} newValue - The new props value.
+   * @param {unknown} oldValue - The old props value.
+   * @param {string} name - The property name.
+   * @returns {boolean} Return false to skip the current update flow.
+   */
+  componentShouldUpdate(newValue, oldValue, name) {
+    if (name === 'value' && deepEqual(newValue, oldValue)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Invoke this method to focus the current code block.
+   *
+   * @vegaVersion 2.50.0
+   */
+  async doFocus() {
+    methodPlaceholder();
+  }
+  render() {
+    const classNames = arrayToClassString([
+      this.readOnly ? 'readonly' : '',
+      this.disabled ? 'disabled' : '',
+      this.showLineNumber ? 'show-line-number' : '',
+      this.prismCodeHighlightParser.canParse() ? 'highlight' : '',
+    ]);
+    return sanitizeVegaComponent(h(Host, { contenteditable: false, class: classNames }, this.codeBlockRenderer.render()), this.host);
+  }
+  static get is() { return "vega-code-block"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-code-block.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-code-block.css"]
+  }; }
+  static get properties() { return {
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }],
+        "text": "Specifies whether the code block editor is in read-only mode."
+      },
+      "attribute": "read-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }],
+        "text": "Specifies whether the code block editor is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showCopyButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }],
+        "text": "Specifies whether to display the copy button in the code block."
+      },
+      "attribute": "show-copy-button",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "showLineNumber": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }],
+        "text": "Specifies whether to display the code line number in the code block."
+      },
+      "attribute": "show-line-number",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "VegaCodeBlockValue",
+        "resolved": "{ language?: \"css\" | \"html\" | \"js\" | \"jsx\" | \"plainText\" | \"ts\" | \"tsx\"; code: string; }",
+        "references": {
+          "VegaCodeBlockValue": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }],
+        "text": "Specifies the content or value to be displayed in the code block."
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "VegaCodeBlockValue",
+        "resolved": "{ language?: \"css\" | \"html\" | \"js\" | \"jsx\" | \"plainText\" | \"ts\" | \"tsx\"; code: string; }",
+        "references": {
+          "VegaCodeBlockValue": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }, {
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "VegaCodeBlockValue",
+        "resolved": "{ language?: \"css\" | \"html\" | \"js\" | \"jsx\" | \"plainText\" | \"ts\" | \"tsx\"; code: string; }",
+        "references": {
+          "VegaCodeBlockValue": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "vegaRemove",
+      "name": "vegaRemove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }],
+        "text": "An event emitter notifying the deletion of the code block. By default, the element is removed from the page, but this behavior can be prevented."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "remove",
+      "name": "remove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }, {
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the deletion of the code block. By default, the element is removed from the page, but this behavior can be prevented."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "doFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to focus the current code block.",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "readOnly",
+      "methodName": "watchEditableChange"
+    }, {
+      "propName": "disabled",
+      "methodName": "watchEditableChange"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCodeBlock.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "componentGlobalStyleSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "codeBlockRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "contentRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "copyButtonRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "contentParseController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "prismCodeHighlightParser", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "defaultCodeHighlightParser", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "selectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "inputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "insertCompositionTextController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "focusController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "removeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "eventPreventSlimmer", void 0);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer.js

@@ -24,6 +24,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
       month: null,
       year: null,
     };
+    /* eslint-enable no-restricted-globals */
     /**
      * When interacting with open vega-dropdown, prevent it from collapsing since is treated as outside element by litepicker
      *
@@ -85,6 +86,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
       this.syncDropdownOptions('month', item, index);
       const selectedOptionValue = this.getSelectedOptionFromSelect(item);
       const value = VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(selectedOptionValue)];
+      // eslint-disable-next-line no-restricted-globals
       const monthButton = document.createElement('span');
       monthButton.classList.add('dropdown-current-value');
       monthButton.innerText = `${this.translationSlimmer.t(value)}`;
@@ -110,6 +112,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
     ui.querySelectorAll('select.month-item-year').forEach((item, index) => {
       this.syncDropdownOptions('year', item, index);
       const value = this.getSelectedOptionFromSelect(item);
+      // eslint-disable-next-line no-restricted-globals
       const yearButton = document.createElement('span');
       yearButton.classList.add('dropdown-current-value');
       yearButton.innerText = `${this.translationSlimmer.t(value)}`;
@@ -250,6 +253,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
   removeActiveDropdownClass() {
     Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
   }
+  /* eslint-disable no-restricted-globals */
   onDropdownShow() {
     document.addEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
     document.addEventListener('click', this.onVegaDropdownContentBoxClick);
@@ -266,6 +270,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
   initSetup() {
     const hideLitepicker = this.datePicker.hide.bind(this.datePicker);
     this.datePicker.hide = async () => {
+      // eslint-disable-next-line no-restricted-globals
       const activeElement = document.activeElement;
       if (!this.isMonthsOrYearsDropdownContentBoxOnFocus &&
         (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) !== 'VEGA-DROPDOWN-CONTENT-BOX') {

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -64,8 +64,10 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       });
     };
     this.renderClearButton = (ui) => {
+      // eslint-disable-next-line no-restricted-globals
       const footerContainer = document.createElement('div');
       footerContainer.className = 'footer-container';
+      // eslint-disable-next-line no-restricted-globals
       const clearButton = document.createElement('vega-button-link');
       clearButton.label = this.translationSlimmer.t('Clear');
       clearButton.addEventListener('click', this.vegaDatePickerCalendarController.handleClear);
@@ -91,7 +93,9 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     if (this.datePicker === null) {
       this.initDatePicker();
     }
+    // eslint-disable-next-line no-restricted-globals
     this.calendarContainerRef = document.createElement('vega-date-picker-calendar');
+    // eslint-disable-next-line no-restricted-globals
     document.body.append(this.calendarContainerRef);
   }
   /*

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

@@ -140,12 +140,15 @@ export class VegaIcon {
   appendStyles(iconStyles) {
     var _a;
     if (iconStyles) {
-      const styleElement = (_a = this.host.shadowRoot.querySelector('#fa-icon-styles')) !== null && _a !== void 0 ? _a : document.createElement('style');
+      const styleElement = 
+      // eslint-disable-next-line no-restricted-globals
+      (_a = this.host.shadowRoot.querySelector('#fa-icon-styles')) !== null && _a !== void 0 ? _a : document.createElement('style');
       styleElement.id = 'fa-icon-styles';
       styleElement.innerHTML = iconStyles;
       this.host.shadowRoot.appendChild(styleElement);
     }
   }
+  /* eslint-disable no-restricted-globals */
   /**
    * The below method is e2e-test covered in
    * @see {module:append-fa-icon-styles-to-shadow-dom}

package/dist/collection/components/vega-image-uploader/slimmers/controllers/vega-image-uploader-preview-controller.js

@@ -40,6 +40,7 @@ export class VegaImageUploaderPreviewController extends VegaSlimmer {
      * @returns {HTMLElement} a preview vega modal
      */
     this.generatePreviewModal = (imagePreviewURL) => {
+      // eslint-disable-next-line no-restricted-globals
       const previewModal = document.createElement('vega-modal');
       if (this.value && this.value.name) {
         previewModal.modalTitle = this.value.name;
@@ -50,6 +51,7 @@ export class VegaImageUploaderPreviewController extends VegaSlimmer {
             </div>
         `;
       this.previewModalRef = previewModal;
+      // eslint-disable-next-line no-restricted-globals
       document.body.append(previewModal);
       return previewModal;
     };

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-compact-width-controller.js

@@ -82,6 +82,7 @@ export class VegaInputCompactWidthController extends VegaSlimmer {
    */
   getCalculateTextWidthContainer() {
     if (!this.calculateTextWidthContainer) {
+      // eslint-disable-next-line no-restricted-globals
       const container = document.createElement('div');
       container.classList.add('v-font-field-value');
       container.style.visibility = 'hidden';

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

@@ -55,7 +55,7 @@ vega-field-label {
   border-radius: 8px;
 }
 
-.vega-input-container:focus-within {
+.vega-input-container:not(.no-focus):focus-within {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
   outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
@@ -69,11 +69,15 @@ vega-field-label {
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 
-.vega-input-container.error:focus-within {
+.vega-input-container.error:not(.no-focus):focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
+.vega-input-container.error .vega-input-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+}
 
 .vega-input-prefix {
   text-align: center;
@@ -251,6 +255,12 @@ vega-field-label {
   cursor: pointer;
   color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
 }
+.vega-input-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border-radius: 4px;
+  padding: 2px;
+}
 
 .vega-input-clear-icon.invisible {
   visibility: hidden;

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

@@ -276,6 +276,12 @@ export class VegaInput {
     this.isClearIconVisible = () => {
       return !this.disabled && Boolean(this.value);
     };
+    this.onClearInputFocus = () => {
+      this.inputContainerRef.classList.add('no-focus');
+    };
+    this.onClearInputBlur = () => {
+      this.inputContainerRef.classList.remove('no-focus');
+    };
     /**
      * Handles input event and updates the value based on a specified trigger.
      * The below method is e2e-test covered in
@@ -326,6 +332,16 @@ export class VegaInput {
       detail: this.value,
     });
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-on-type-change}
+   */
+  /* istanbul ignore next */
+  watchTypeChange(newType, oldType) {
+    if (newType === 'number' || oldType === 'number') {
+      this.maskConfigController.setupStringFormatter(this.inputRef);
+    }
+  }
   watchValidationRules() {
     methodPlaceholder();
   }
@@ -397,7 +413,7 @@ export class VegaInput {
     return (h("div", { class: {
         'vega-input-clear-icon': true,
         'invisible': !this.isClearIconVisible(),
-      }, tabIndex: -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, tabIndex: !this.disabled ? 0 : -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick(), onFocusin: this.onClearInputFocus, onFocusout: this.onClearInputBlur },
       h("vega-icon", { icon: "close" })));
   }
   renderHintDom() {
@@ -520,9 +536,14 @@ export class VegaInput {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'text' | 'email' | 'password' | 'number' | 'hidden'",
+        "original": "InputType",
         "resolved": "\"email\" | \"hidden\" | \"number\" | \"password\" | \"text\"",
-        "references": {}
+        "references": {
+          "InputType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -1152,6 +1173,9 @@ export class VegaInput {
     }, {
       "propName": "value",
       "methodName": "watchValue"
+    }, {
+      "propName": "type",
+      "methodName": "watchTypeChange"
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"

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

@@ -27,7 +27,7 @@ export class VegaInputRangeClearIconRenderer extends VegaSlimmer {
     return (h("div", { class: {
         'vega-input-range-clear-icon': true,
         'invisible': !this.shouldShowClearIcon(),
-      }, "aria-label": "clear input range", role: "button", tabindex: "-1", onClick: this.clearInputRangeValue, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, "aria-label": "clear input range", role: "button", tabindex: !this.disabled ? 0 : -1, onClick: this.clearInputRangeValue, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       h("vega-icon", { icon: "close" })));
   }
   /**

package/dist/collection/components/vega-input-range/vega-input-range.css

@@ -46,6 +46,12 @@
 .vega-input-range-input-container .vega-input-range-clear-icon.invisible {
   visibility: hidden;
 }
+.vega-input-range-input-container .vega-input-range-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border-radius: 4px;
+  padding: 2px;
+}
 .vega-input-range-input-container vega-input::part(input-container) {
   border-width: 0px;
 }
@@ -103,6 +109,10 @@
 .vega-input-range-container.error .vega-input-range-input-container:hover {
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
+.vega-input-range-container.error .vega-input-range-input-container .vega-input-range-clear-icon:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+}
 .vega-input-range-container.error vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   outline-offset: 3px;