@heartlandone/vega-sandbox-pr-1474-a64385b416d2e92ec0fb6cf2ef83219880562cb4 2.26.0

package/dist/collection/utils/test/ui.test.js

@@ -0,0 +1,241 @@
+import { DeviceType } from '../../types/ui.type';
+import { LogUtility } from '../log';
+import { setupUserAgent } from '../test-utils';
+import { arrayToClassString, getBrowserVisibleArea, getDeviceType, isParent, containerScrollToItem, isElementVisible, extractNumberFromString, hexToRGB, isTextWrapped, getElementComputedStyle, getHexFromShorthand, findParent, getDeepActiveElementInShadow, } from '../ui';
+beforeAll(() => {
+  document.documentElement.scrollTop = 0;
+});
+test('return getBrowserVisibleArea as expected', () => {
+  Object.defineProperty(window, 'innerHeight', {
+    value: 150,
+  });
+  Object.defineProperty(window, 'pageYOffset', {
+    value: 150,
+  });
+  const visibleRect = getBrowserVisibleArea();
+  expect(visibleRect.bottom).toEqual(300);
+  expect(visibleRect.centerY).toEqual(225);
+});
+test('return getBrowserVisibleArea as expected when set documentElement.scrollTop', () => {
+  document.documentElement.scrollTop = 150;
+  Object.defineProperty(window, 'innerHeight', {
+    value: 150,
+  });
+  const visibleRect = getBrowserVisibleArea();
+  expect(visibleRect.bottom).toEqual(300);
+  expect(visibleRect.centerY).toEqual(225);
+});
+test('return getBrowserVisibleArea as expected when set body.scrollTop', () => {
+  document.documentElement.scrollTop = 0;
+  window['innerHeight'] = 150;
+  document.body.scrollTop = 150;
+  const visibleRect = getBrowserVisibleArea();
+  expect(document.documentElement.scrollTop).toEqual(0);
+  expect(visibleRect.bottom).toEqual(300);
+});
+test('return tablet when userAgent is set tablet ', () => {
+  setupUserAgent('tablet');
+  const deviceType = getDeviceType();
+  expect(deviceType).toEqual(DeviceType.TABLET);
+});
+test('return mobile when userAgent is set mobile ', () => {
+  setupUserAgent('mobile');
+  const deviceType = getDeviceType();
+  expect(deviceType).toEqual(DeviceType.MOBILE);
+});
+test('return desktop when userAgent is set desktop ', () => {
+  setupUserAgent('desktop');
+  const deviceType = getDeviceType();
+  expect(deviceType).toEqual(DeviceType.DESKTOP);
+});
+test('toClassString as expected when array set', () => {
+  const source = ['class1', null, undefined, '', 'class2'];
+  const result = arrayToClassString(source);
+  expect(result).toEqual('class1 class2');
+});
+test('toClassString as expected when array not set', () => {
+  const result = arrayToClassString(null);
+  expect(result).toEqual('');
+});
+test('isParent as expected', () => {
+  const container = document.createElement('div');
+  container.innerHTML = `
+    <vega-card class='card1'>
+        <div>
+			<div class='inner2'></div>
+			<div class='inner3'></div>
+		</div>
+    </vega-card>
+	<div class='inner1'></div>`;
+  document.body.append(container);
+  const card = document.body.querySelector('vega-card');
+  const inner2 = document.body.querySelector('.inner2');
+  const inner3 = document.body.querySelector('.inner3');
+  const inner1 = document.body.querySelector('.inner1');
+  expect(isParent(inner2, card)).toBeTruthy();
+  expect(isParent(inner2, inner3)).toBeFalsy();
+  expect(isParent(inner2, inner1)).toBeFalsy();
+  expect(isParent(undefined, inner1)).toBeFalsy();
+  expect(isParent(inner2, undefined)).toBeFalsy();
+});
+test('isParent as expected in shadow dom', () => {
+  const container = document.createElement('div');
+  container.innerHTML = `<div class='shadow'><p></p></div>`;
+  document.body.append(container);
+  const shadowNode = document.body.querySelector('.shadow');
+  const shadowRoot = shadowNode.attachShadow({ mode: 'open' });
+  const shadowSpan = shadowRoot.appendChild(document.createElement('span'));
+  const shadowSlot = shadowNode.querySelector('p');
+  expect(shadowNode.contains(shadowSpan)).toBeFalsy();
+  expect(isParent(shadowSpan, shadowNode)).toBeTruthy();
+  expect(isParent(shadowSlot, shadowNode)).toBeTruthy();
+});
+test('isParent should work as expected in shadow dom', () => {
+  const container = document.createElement('div');
+  container.innerHTML = `<div id='shadowComp'></div>`;
+  document.body.append(container);
+  const shadowCompShadowRoot = container.attachShadow({ mode: 'open' });
+  const span = document.createElement('span');
+  span.textContent = "I'm in the shadow DOM";
+  shadowCompShadowRoot.appendChild(span);
+  expect(isParent(span, container)).toBeTruthy();
+});
+test('containerScrollToItem as expected', () => {
+  const container = document.createElement('div');
+  container.innerHTML = `
+    <vega-card class='card' style='max-height: 90px; overflow: auto;'>
+		<div class='inner1' style='height: 30px;'>1</div>
+		<div class='inner2' style='height: 30px;'>1</div>
+		<div class='inner3' style='height: 30px;'>1</div>
+		<div class='inner4' style='height: 30px;'>1</div>
+		<div class='inner5' style='height: 30px;'>1</div>
+		<div class='inner6' style='height: 30px;'>1</div>
+		<div class='inner7' style='height: 30px;'>1</div>
+		<div class='inner8' style='height: 30px;'>1</div>
+    </vega-card>`;
+  document.body.append(container);
+  const card = document.body.querySelector('vega-card');
+  const item = document.body.querySelector('.inner6');
+  Object.assign(item, { offsetTop: 150 });
+  containerScrollToItem(card, item);
+  expect(card.scrollTop).toEqual(150);
+  const item1 = document.body.querySelector('.inner2');
+  Object.assign(item1, { offsetTop: 30 });
+  containerScrollToItem(card, item1);
+  expect(card.scrollTop).toEqual(30);
+});
+test('isElementVisible should return true if height larger than 0', () => {
+  const container = document.createElement('div');
+  spyOn(container, 'getBoundingClientRect').and.returnValue({
+    height: 50,
+  });
+  expect(isElementVisible(container)).toBeTruthy();
+});
+test('isElementVisible should return false if height is 0', () => {
+  const container = document.createElement('div');
+  spyOn(container, 'getBoundingClientRect').and.returnValue({
+    height: 0,
+  });
+  expect(isElementVisible(container)).toBeFalsy();
+});
+test('extractNumberFromString should work as expected', () => {
+  expect(extractNumberFromString(null)).toEqual(null);
+  expect(extractNumberFromString('')).toEqual(null);
+  expect(extractNumberFromString('test-')).toEqual(null);
+  expect(extractNumberFromString('test-12-test')).toEqual(12);
+  expect(extractNumberFromString('test-*-12-*-test3')).toEqual(123);
+});
+test('hexToRGB should work as expected', () => {
+  expect(hexToRGB('#FFFFFF')).toEqual({ b: 255, g: 255, r: 255 });
+  expect(hexToRGB('#FFF')).toEqual({ b: 255, g: 255, r: 255 });
+  expect(hexToRGB('GGG')).toEqual(null);
+});
+test('hexFullFormConverter should work as expected', () => {
+  expect(getHexFromShorthand('#FFF')).toEqual('#FFFFFF');
+  expect(getHexFromShorthand('AAA')).toEqual('#AAAAAA');
+  expect(getHexFromShorthand('#BBBBBB')).toEqual('#BBBBBB');
+  expect(getHexFromShorthand('#bbb')).toEqual('#bbbbbb');
+});
+describe('isTextWrapped', () => {
+  let element;
+  beforeEach(() => {
+    element = document.createElement('div');
+    Object.assign(element, { clientHeight: 44 });
+  });
+  test('isTextWrapped should return true', () => {
+    spyOn(window, 'getComputedStyle').and.returnValue({
+      getPropertyValue: jest.fn().mockReturnValueOnce('22px'),
+    });
+    const returnValue = isTextWrapped(element);
+    expect(returnValue).toEqual(true);
+  });
+  test('isTextWrapped should return false', () => {
+    spyOn(window, 'getComputedStyle').and.returnValue({
+      getPropertyValue: jest.fn().mockReturnValueOnce('50px'),
+    });
+    const returnValue = isTextWrapped(element);
+    expect(returnValue).toEqual(false);
+  });
+  test('isTextWrapped should console warn information', () => {
+    spyOn(window, 'getComputedStyle').and.returnValue({
+      getPropertyValue: jest.fn().mockReturnValueOnce('normal'),
+    });
+    spyOn(LogUtility, 'warn');
+    isTextWrapped(element);
+    expect(LogUtility.warn).toBeCalledTimes(1);
+    expect(LogUtility.warn).toHaveBeenCalledWith('The line height of this element is not obtained');
+  });
+  test('return getElementComputedStyle as expected', () => {
+    spyOn(window, 'getComputedStyle').and.returnValue({
+      getPropertyValue: jest.fn().mockReturnValueOnce('16px'),
+    });
+    const element = document.createElement('div');
+    element.innerText = 'test';
+    const returnValue = getElementComputedStyle(element, 'font-size');
+    expect(returnValue).toEqual('16px');
+  });
+  test('should return the element parent when call findParent', () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+    <p>
+        <span id="test">test content</span>
+    </p>
+    `;
+    document.body.append(container);
+    const testEl = document.querySelector('#test');
+    expect(findParent(testEl, 'div')).toEqual(container);
+    expect(findParent(testEl, 'span')).toEqual(null);
+  });
+  test('should return the element parent when call findParent in shadow dom', () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+    <div id='shadowComp'>
+    </div>
+    `;
+    document.body.append(container);
+    const shadowCompShadowRoot = container.attachShadow({ mode: 'open' });
+    const span = document.createElement('span');
+    span.textContent = "I'm in the shadow DOM";
+    shadowCompShadowRoot.appendChild(span);
+    expect(findParent(span, 'div')).toEqual(container);
+  });
+  test('getDeepActiveElementInShadow', () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+    <input id='input-out-of-shadow' />
+    <div id='shadow-container'></div>
+    `;
+    document.body.append(container);
+    const shadowContainer = document.querySelector('#shadow-container');
+    document.querySelector('#shadow-container').attachShadow({ mode: 'open' });
+    const innerShadow = document.createElement('div');
+    innerShadow.attachShadow({ mode: 'open' });
+    const innerElement = document.createElement('input');
+    innerShadow.shadowRoot.appendChild(innerElement);
+    shadowContainer.shadowRoot.appendChild(innerShadow);
+    document.querySelector('#input-out-of-shadow').focus();
+    expect(getDeepActiveElementInShadow()).toEqual(document.activeElement);
+    innerElement.focus();
+    expect(getDeepActiveElementInShadow()).not.toEqual(shadowContainer);
+  });
+});

package/dist/collection/utils/test-utils.js

@@ -0,0 +1,134 @@
+import { MockHTMLElement } from '@stencil/core/mock-doc';
+import { Breakpoints } from '../constants/tokens/breakpoints';
+import { DeviceType } from '../types/ui.type';
+/**
+ * Get the viewport size for a given device type
+ *
+ * @param {'desktop' | 'mobile'} size - The device type.
+ * @returns {{ width: number; height: number }} An object with the width and height of the viewport.
+ */
+export const getViewportByDeviceType = (size) => {
+  switch (size) {
+    case DeviceType.DESKTOP:
+      return { width: 1440, height: 768 };
+    case DeviceType.MOBILE:
+      return { width: 375, height: 812 };
+    case DeviceType.TABLET:
+      return { width: 768, height: 1024 };
+    default:
+      throw new Error('Unsupported device type');
+  }
+};
+/**
+ * Get the viewport size for device
+ *
+ * @param {TestDeviceType} device - device name
+ * @returns {{ width: number; height: number }} Width and height of the viewport.
+ */
+export const getViewportByDevice = (device) => {
+  switch (device) {
+    case 'iPad-Air':
+      return { width: 820, height: 1180 };
+    case 'iPhone8-Plus':
+      return { width: 414, height: 736 };
+  }
+};
+/**
+ * Get the viewport size by breakpoint.
+ *
+ * @param {'S' | 'M' | 'L' | 'XL'} size - The size of the viewport.
+ * @returns {{ width: number; height: number }} An object with a width and height property.
+ */
+export const getViewportByBreakpoints = (size) => {
+  return { width: Breakpoints[size], height: 812 };
+};
+/**
+ * setup UserAgent
+ *
+ * @param {'mobile' | 'desktop' | 'tablet'} agentType - agentType
+ */
+export function setupUserAgent(agentType) {
+  let agent;
+  let maxTouchPoints;
+  if (agentType === 'mobile') {
+    agent =
+      'Mozilla/5.0 (Linux; Android 12) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Mobile Safari/537.36';
+    maxTouchPoints = 1;
+  }
+  else if (agentType === 'desktop') {
+    agent =
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36';
+    maxTouchPoints = 0;
+  }
+  else {
+    agent = 'Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko)';
+    maxTouchPoints = 1;
+  }
+  Object.defineProperty(window, 'navigator', {
+    configurable: true,
+    writable: true,
+    value: { userAgent: agent, maxTouchPoints: maxTouchPoints },
+  });
+}
+/**
+ * NOTE: This const is only for **E2E** **SPEC** test cases.
+ * The function mocks an SVG element constructor for testing purposes in TypeScript or other properties if not defined.
+ *
+ * @todo Need update the mock function
+ * @param {SVGElement} [svg] - The `svg` parameter is an optional argument of type `SVGElement`. If it
+ * is provided, it will be used as the mock SVG element. If it is not provided, a new SVG element will
+ * be created using `document.createElementNS('http://www.w3.org/2000/svg',
+ */
+export function mockChartElement(svg) {
+  if (!globalThis.SVGElement) {
+    svg = svg || document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Object.defineProperty(globalThis, 'SVGElement', {
+      value: svg.constructor,
+    });
+  }
+  if (!globalThis.Path2D) {
+    Object.defineProperty(globalThis, 'Path2D', {
+      value: jest.fn(),
+    });
+  }
+  try {
+    //For the getParentClientWidth and getParentClientHeight return null
+    Object.defineProperty(MockHTMLElement.prototype, 'clientWidth', {
+      /**
+       * return the style width when get clientWidth, style.width=500px return 500
+       *
+       * @returns {number} element width
+       */
+      get: function () {
+        const styleWidth = this.style.width;
+        return styleWidth.indexOf('px') > 0 ? Number(styleWidth.replace('px', '')) : 0;
+      },
+    });
+    Object.defineProperty(MockHTMLElement.prototype, 'clientHeight', {
+      /**
+       * return the style height when get clientHeight, style.height=500px return 500
+       *
+       * @returns {number} element height
+       */
+      get: function () {
+        const styleHeight = this.style.height;
+        return styleHeight.indexOf('px') > 0 ? Number(styleHeight.replace('px', '')) : 0;
+      },
+    });
+    // eslint-disable-next-line no-empty
+  }
+  catch (e) { }
+}
+/**
+ * NOTE: This const is only for **SPEC** test cases.
+ * This method allows the program to stay for a period of time.
+ *
+ * @param {number} [ms] - The `ms` milliseconds of stay.
+ * @returns {Promise<void>} - promise used to signal the process is done
+ */
+export function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}

package/dist/collection/utils/timer.js

@@ -0,0 +1,20 @@
+/**
+ * This function returns a function that will execute the given function after a delay.
+ * The function is called with the same arguments as the original function
+ *
+ * @typedef T generic type parameter
+ * @param {() => void} fn - The function to be debounced.
+ * @param {number} delay - The delay in milliseconds.
+ * @param {T} context - The context to be used when calling the function.
+ * @returns {(() => void)} A function that will call the original function with the given arguments after the given delay.
+ */
+export const debounce = (fn, delay, context) => {
+  let timer;
+  return function (...args) {
+    if (timer)
+      clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(context, args);
+    }, delay);
+  };
+};

package/dist/collection/utils/ui.js

@@ -0,0 +1,200 @@
+import { DeviceType } from '../types/ui.type';
+import { LogUtility } from './log';
+/**
+ * Get the browser's visible area
+ *
+ * @returns {BrowserVisibleArea} The browser visible area.
+ */
+export const getBrowserVisibleArea = () => {
+  const rect = {
+    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
+    bottom: 0,
+    centerY: 0,
+    height: window.innerHeight,
+    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
+    right: 0,
+    width: document.body.clientWidth,
+    centerX: 0,
+  };
+  rect.bottom = rect.top + rect.height;
+  rect.right = rect.left + rect.width;
+  rect.centerY = rect.top + rect.height / 2;
+  rect.centerX = rect.left + rect.width / 2;
+  return rect;
+};
+/**
+ * find the parent dom with selector
+ * if selector is a component tag name like 'vega-card',
+ * we can call by findParent<HTMLVegaCardElement>(this.el, "vega-card") get the HTMLVegaCardElement;
+ *
+ * The function is generic, meaning that it can be used with any type of element
+ *
+ * @typedef HTMLElementTagNameMap
+ * @typedef T
+ * @param {HTMLElement} el - The element to start searching from.
+ * @param {keyof HTMLElementTagNameMap | string} selector - The selector to find the parent element with.
+ * @returns {T | null} The first element that matches the selector.
+ */
+export function findParent(el, selector) {
+  if (!el)
+    return null;
+  const parent = el.parentElement || el.getRootNode()['host'];
+  return (parent === null || parent === void 0 ? void 0 : parent.matches(selector)) ? parent : findParent(parent, selector);
+}
+/**
+ * It returns the device type based on the user agent
+ *
+ * @returns {DeviceType} The device type.
+ */
+export const getDeviceType = () => {
+  const userAgent = navigator.userAgent;
+  if (/(tablet|ipad|playbook|silk|Macintosh)|(android(?!.*mobi))/i.test(userAgent) &&
+    navigator.maxTouchPoints > 0) {
+    return DeviceType.TABLET;
+  }
+  else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(userAgent)) {
+    return DeviceType.MOBILE;
+  }
+  return DeviceType.DESKTOP;
+};
+/**
+ * return class sting without '', null, undefined, Nan
+ *
+ * @param {string[]} classes - class array
+ * @returns {string} - class string
+ */
+export const arrayToClassString = (classes) => {
+  if (classes) {
+    return classes.filter((c) => c).join(' ');
+  }
+  else {
+    return '';
+  }
+};
+/**
+ * If the element is the target, return true, otherwise, if the element has a parent, return the result
+ * of calling isParent on the parent, otherwise return false.
+ *
+ * @param {HTMLElement} element - The element to check if it's a parent of the target.
+ * @param {HTMLElement} target - The element that you want to check if it's a parent of the element.
+ * @returns {boolean} A boolean value.
+ */
+export function isParent(element, target) {
+  if (!element || !target)
+    return false;
+  if (element === target)
+    return true;
+  return isParent(element.parentElement || element.getRootNode()['host'], target);
+}
+/**
+ * "Scroll the container to the item."
+ * The function takes two parameters:
+ * container: The container to scroll.
+ * item: The item to scroll to.
+ * The function scrolls the container to the item
+ *
+ * @param {HTMLElement} container - The container element that you want to scroll.
+ * @param {HTMLElement} item - The item to scroll to.
+ * @returns {void} - return.
+ */
+export function containerScrollToItem(container, item) {
+  container.scrollTop = item.offsetTop;
+}
+/**
+ * Check if the element is visible by checking if the element's height is greater than 0.
+ *
+ * @param {HTMLElement} element - HTMLElement - the element to check if it's visible
+ * @returns {boolean} A boolean value.
+ */
+export function isElementVisible(element) {
+  return element.getBoundingClientRect().height > 0;
+}
+/**
+ * It takes a string and returns a number, or null if the string is empty
+ *
+ * @param {string} input - The string to extract the number from.
+ * @returns {number | null} A function that takes a string and returns a number or null.
+ */
+export function extractNumberFromString(input) {
+  if (input) {
+    const result = input.replace(/\D/g, '');
+    return result === '' ? null : Number(result);
+  }
+  return null;
+}
+/**
+ * It takes a hexadecimal color string and returns an object with the red, green, and blue values
+ *
+ * @param {string} hex - The hexadecimal color value to convert to RGB.
+ * @returns {RGBType | null} - The RGB color value
+ */
+export function hexToRGB(hex) {
+  hex = getHexFromShorthand(hex);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16),
+    }
+    : null;
+}
+/**
+ * It converts a hexadecimal color code from shorthand form to full form
+ *
+ * @param {string} hex - The hexadecimal color code that you want to convert to full form.
+ * @returns {string} the hexFullForm variable.
+ */
+export function getHexFromShorthand(hex) {
+  if (!hex)
+    hex = '';
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "#0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const hexFullForm = hex.replace(shorthandRegex, function (_m, r, g, b) {
+    return '#' + r + r + g + g + b + b;
+  });
+  return hexFullForm;
+}
+/**
+ * It returns true if the text in the element is wrapped.
+ *
+ * @param {HTMLElement} element - The element to be judged.
+ * @returns {boolean} A boolean value.
+ */
+export function isTextWrapped(element) {
+  const lineHeight = parseFloat(getElementComputedStyle(element, 'line-height'));
+  if (!isNaN(lineHeight)) {
+    return element.clientHeight > lineHeight;
+  }
+  else {
+    LogUtility.warn('The line height of this element is not obtained');
+    return false;
+  }
+}
+/**
+ * "Get the computed style of an element."
+ * The first parameter is the element whose style we want to get. The second parameter is the name of
+ * the style we want to get
+ *
+ * @param {HTMLElement} element - The element whose style you want to get.
+ * @param {string} styleName - The name of the style you want to get.
+ * @returns {string} The computed style of the element.
+ */
+export function getElementComputedStyle(element, styleName) {
+  return window.getComputedStyle(element).getPropertyValue(styleName);
+}
+/**
+ * Get the deep active element in shadow component
+ *
+ * @param {Document | ShadowRoot} root the root element
+ * @returns {HTMLElement|null} active element
+ */
+export function getDeepActiveElementInShadow(root = document) {
+  const activeEl = root.activeElement;
+  if (activeEl && activeEl.shadowRoot) {
+    return getDeepActiveElementInShadow(activeEl.shadowRoot);
+  }
+  else {
+    return activeEl;
+  }
+}

package/dist/collection/value-model-adapters/angular-ng-model-accessor-adapter.js

@@ -0,0 +1,35 @@
+export const AngularAccessorAdapter = [
+  {
+    elementSelectors: [
+      'vega-checkbox',
+      'vega-checkbox-group',
+      'vega-color-picker',
+      'vega-combo-box',
+      'vega-date-picker',
+      'vega-file-uploader',
+      'vega-image-uploader',
+      'vega-input',
+      'vega-input-credit-card',
+      'vega-input-phone-number',
+      'vega-input-range',
+      'vega-input-select',
+      'vega-radio-group',
+      'vega-selection-chip-group',
+      'vega-selection-tile-group',
+      'vega-signature-capture',
+      'vega-stepper',
+      'vega-textarea',
+      'vega-time-picker',
+      'vega-toggle-switch',
+    ],
+    event: 'vegaChange',
+    targetAttr: 'value',
+    type: 'text',
+  },
+  {
+    elementSelectors: [],
+    event: 'change',
+    targetAttr: 'value',
+    type: 'text',
+  },
+];

package/dist/collection/value-model-adapters/vue-component-v-model-adaptor.js

@@ -0,0 +1,30 @@
+// This is an array of ComponentModelConfig objects for components that should be integrated with v-model.
+// https://github.com/ionic-team/stencil-ds-output-targets#componentmodels
+export const VueComponentVModelAdaptor = [
+  {
+    elements: [
+      'vega-checkbox',
+      'vega-checkbox-group',
+      'vega-color-picker',
+      'vega-combo-box',
+      'vega-date-picker',
+      'vega-file-uploader',
+      'vega-image-uploader',
+      'vega-input',
+      'vega-input-credit-card',
+      'vega-input-phone-number',
+      'vega-input-range',
+      'vega-input-select',
+      'vega-radio-group',
+      'vega-selection-chip-group',
+      'vega-selection-tile-group',
+      'vega-signature-capture',
+      'vega-stepper',
+      'vega-textarea',
+      'vega-time-picker',
+      'vega-toggle-switch',
+    ],
+    event: 'vegaChange',
+    targetAttr: 'value',
+  },
+];

package/dist/esm/accessibility-e5fd0fab.js

@@ -0,0 +1,15 @@
+/**
+ * It returns a function that takes a KeyboardEvent and dispatches a click event on the currentTarget if the key is Enter.
+ *
+ * @returns {(e: KeyboardEvent) => void } A function that takes a KeyboardEvent and dispatches a click event on the currentTarget.
+ */
+function createEnterKeyHandlerToTriggerClick() {
+  return function (e) {
+    var _a;
+    if (e.key === 'Enter') {
+      (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
+    }
+  };
+}
+
+export { createEnterKeyHandlerToTriggerClick as c };