@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/common/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../common/utils/index.js"],"sourcesContent":["import {\n  DEFAULT_PREFIX,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  VALIDATION_MESSAGE_TYPES,\n} from '../constants';\nimport {\n  h,\n  Comment,\n  Text,\n} from 'vue';\n\nlet UNIQUE_ID_COUNTER = 0;\nlet TIMER;\n\n// selector to find focusable not hidden inputs\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';\n// selector to find focusable not disables elements\nconst FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)';\n// // selector to find focusable not hidden and disabled elements\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`;\n// selector to find focusable elements\nconst FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},*[tabindex]`;\n\nconst scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;\n\nexport function getUniqueString (prefix = DEFAULT_PREFIX) {\n  return `${prefix}${UNIQUE_ID_COUNTER++}`;\n}\n\n/**\n * Returns a random element from array\n * @param array - the array to return a random element from\n * @param {string} seed - use a string to seed the randomization, so it returns the same element each time\n * based on that string.\n * @returns {*} - the random element\n */\nexport function getRandomElement (array, seed) {\n  if (seed) {\n    const hash = javaHashCode(seed);\n    return array[Math.abs(hash) % array.length];\n  } else {\n    return array[getRandomInt(array.length)];\n  }\n}\n\n/**\n * Returns a hash code for a string.\n * (Compatible to Java's String.hashCode())\n * We use this algo to be in sync with android.\n *\n * The hash code for a string object is computed as\n *     s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1]\n * using number arithmetic, where s[i] is the i th character\n * of the given string, n is the length of the string,\n * and ^ indicates exponentiation.\n * (The hash value of the empty string is zero.)\n *\n * @param {string} str a string\n * @return {number} a hash code value for the given string.\n */\nexport function javaHashCode (str) {\n  let h;\n  for (let i = 0; i < str.length; i++) {\n    h = Math.imul(31, h) + str.charCodeAt(i) | 0;\n  }\n\n  return h;\n}\n\n/**\n * Generate a random integer\n * @param {number} max - max range of integer to generate\n * @returns {number} randomly generated integer between 0 and max\n */\nexport function getRandomInt (max) {\n  return Math.floor(Math.random() * max);\n}\n\nexport function formatMessages (messages) {\n  if (!messages) {\n    return [];\n  }\n\n  return messages.map(message => {\n    if (typeof message === 'string') {\n      return {\n        message,\n        type: DEFAULT_VALIDATION_MESSAGE_TYPE,\n      };\n    }\n\n    return message;\n  });\n}\n\nexport function filterFormattedMessages (formattedMessages) {\n  const validationState = getValidationState(formattedMessages);\n\n  if (!formattedMessages || !validationState) {\n    return [];\n  }\n\n  return formattedMessages.filter(message => !!message.message && message.type === validationState);\n}\n\n/*\n * The priority order of message types is as flows: 'error' > 'warning' > 'success'.\n * If any message of type 'error' is present in messages, the input state is considered\n * to be 'error', then 'warning' and lastly 'success'.\n */\nexport function getValidationState (formattedMessages) {\n  if (!formattedMessages) {\n    return null;\n  }\n\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.ERROR)) {\n    return VALIDATION_MESSAGE_TYPES.ERROR;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.WARNING)) {\n    return VALIDATION_MESSAGE_TYPES.WARNING;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.SUCCESS)) {\n    return VALIDATION_MESSAGE_TYPES.SUCCESS;\n  }\n\n  return null;\n}\n\nexport function hasFormattedMessageOfType (formattedMessages, messageType) {\n  if (!formattedMessages || !messageType) {\n    return false;\n  }\n\n  return formattedMessages.some(message => message?.type === messageType);\n}\n\nexport function findFirstFocusableNode (element) {\n  return element?.querySelector(FOCUSABLE_SELECTOR);\n}\n\n/* html-fragment component:\n * To render html without wrapping in another element as when using v-html.\n * props: html\n */\nexport const htmlFragment = (props) => {\n  return h('div', { innerHTML: props.html });\n};\n\nexport const flushPromises = () => {\n  return new Promise((resolve) => {\n    scheduler(resolve);\n  });\n};\n\n/*\n  It is very cumbersome to check if a slot is empty in vue 3. Copied this method from the following thread\n  https://github.com/vuejs/core/issues/4733. There is an RFC to fix this but not yet being worked on.\n  https://github.com/vuejs/rfcs/discussions/453\n*/\nexport function hasSlotContent (slot, slotProps = {}) {\n  if (!slot) return false;\n\n  // eslint-disable-next-line complexity\n  return slot(slotProps).some((vnode) => {\n    if (vnode.type === Comment) return false;\n\n    if (Array.isArray(vnode.children) && !vnode.children.length) return false;\n\n    return (\n      vnode.type !== Text ||\n      (typeof vnode.children === 'string' && vnode.children.trim() !== '')\n    );\n  });\n}\n\n/**\n * Transform a string from kebab-case to PascalCase\n * @param string\n * @returns {string}\n */\nexport const kebabCaseToPascalCase = (string) => {\n  return string?.toLowerCase()\n    .split('-')\n    .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n    .join('');\n};\n\n/**\n * Transform a string from PascalCase to kebab-case\n * @param string\n * @returns {string}\n */\nexport const pascalCaseToKebabCase = (string) => {\n  return string\n    .replace(/\\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase())\n    .replace(/^-/, '');\n};\n\nexport const extractVueListeners = (attrs) => {\n  const listeners = Object.entries(attrs)\n    .filter(([key]) => key.startsWith('on'));\n  return Object.fromEntries(listeners);\n};\n\n/*\n* Set's a global timer to debounce the execution of a function.\n* @param { object } func - the function that is going to be called after timeout\n* @param { number } [timeout=300] timeout\n* */\nexport function debounce (func, timeout = 300) {\n  clearTimeout(TIMER);\n  TIMER = setTimeout(func, timeout);\n}\n\n/**\n * Checks if the element is out of the viewport\n * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/\n * @param  {HTMLElement} element The element to check\n * @return {Object} A set of booleans for each side of the element\n */\n\nexport function isOutOfViewPort (element) {\n  const bounding = element.getBoundingClientRect();\n\n  const isOut = {\n    top: bounding.top < 0,\n    left: bounding.left < 0,\n    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),\n    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth),\n  };\n  isOut.any = Object.values(isOut).some(val => val);\n  isOut.all = Object.values(isOut).every(val => val);\n  return isOut;\n}\n\n// match valid characters for a domain name followed by a dot, e.g. \"dialpad.\"\nconst domainNameRegex = /(?:(?:[^\\s!@#$%^&*()_=+[\\]{}\\\\|;:'\",.<>/?]+)\\.)/;\n\n// match valid TLDs for a hostname (outdated list from ~2017)\nconst tldRegerx = new RegExp(\n  '(?:' +\n  'com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|' +\n  'za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|' +\n  'il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|' +\n  'ae|ph|online|ng|ee|ws|ve|cat' +\n  ')',\n);\n\n// match valid IPv4 addresses, e.g. \"192.158.1.38\"\nconst ipv4Regex = new RegExp(\n  '(?:(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])\\\\.){3}' +\n  '(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])',\n);\n\n// match hostnames OR IPv4 addresses, e.g. \"dialpad.com\" or \"192.158.1.38\"\nconst hostnameOrIpRegex = new RegExp(\n  '(?:' +\n  [\n    [\n      domainNameRegex.source,\n      tldRegerx.source,\n    ].join('+'),\n    ipv4Regex.source,\n  ].join('|') +\n  ')',\n);\n\n// match URL paths, e.g. \"/news\"\nconst urlPathRegex = /(?:(?:[;/][^#?<>\\s]*)?)/;\n\n// match URL queries and fragments, e.g. \"?cache=1&new=true\" or \"#heading1\"\nconst urlQueryOrFragmentRegex = /(?:(?:\\?[^#<>\\s]+)?(?:#[^<>\\s]+)?)/;\n\n// match complete hostnames or IPv4 addresses without a protocol and with optional\n// URL paths, queries and fragments e.g. \"dialpad.com/news?cache=1#heading1\"\nconst urlWithoutProtocolRegex = new RegExp(\n  '\\\\b' +\n  [\n    hostnameOrIpRegex.source,\n    urlPathRegex.source,\n    urlQueryOrFragmentRegex.source,\n    '(?!\\\\w)',\n  ].join('+'),\n);\n\n// match complete hostnames with protocols and optional URL paths, queries and fragments,\n// e.g. \"ws://localhost:9011\" or \"https://dialpad.com/news?cache=1#heading1\"\nconst urlWithProtocolRegex = /\\b[a-z\\d.-]+:\\/\\/[^<>\\s]+/;\n\n// match email addresses with an optional \"mailto:\" prefix and URL queries, e.g.\n// \"hey@dialpad.com\" or \"mailto:hey@dialpad.com?subject=Hi&body=Hey%20there\"\nconst emailAddressRegex = new RegExp(\n  '(?:mailto:)?' +\n  '[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+(?:\\\\.[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+)*@' +\n  [\n    hostnameOrIpRegex.source,\n    urlQueryOrFragmentRegex.source,\n  ].join('+') +\n  '(?!\\\\w)',\n);\n\n/**\n * Match phone numbers, e.g. \"765-8813\", \"(778) 765-8813\" or \"+17787658813\".\n * @param {number} minLength\n * @param {number} maxLength\n * @returns {RegExp}\n */\nexport function getPhoneNumberRegex (minLength = 7, maxLength = 15) {\n  // Some older browser versions don't support lookbehind, so provide a RegExp\n  // version without it. It fails just one test case, so IMO it's still good\n  // enough to use. https://caniuse.com/js-regexp-lookbehind\n  try {\n    return new RegExp(\n      '(?:^|(?<=\\\\W))' +\n      '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n      `{${minLength},${maxLength}}` +\n      ')(?=\\\\b)(?=\\\\W(?=\\\\W|$)|\\\\s|$)',\n    );\n  } catch (e) {\n    // eslint-disable-next-line no-console\n    console.warn('This browser doesn\\'t support regex lookahead/lookbehind');\n  }\n\n  return new RegExp(\n    '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n      `{${minLength},${maxLength}}` +\n      ')(?=\\\\b)(?=\\\\W(?=\\\\W|$)|\\\\s|$)',\n  );\n}\n\nconst phoneNumberRegex = getPhoneNumberRegex();\n\n// match all link types\nexport const linkRegex = new RegExp(\n  [\n    urlWithoutProtocolRegex.source,\n    urlWithProtocolRegex.source,\n    emailAddressRegex.source,\n    phoneNumberRegex.source,\n  ].join('|'),\n  'gi',\n);\n\n/**\n * Check if a string is a phone number. Validates only exact matches.\n * @param {string|number} input\n * @returns {boolean}\n */\nexport function isPhoneNumber (input) {\n  if (!input || (!['string', 'number'].includes(typeof input))) return false;\n  input = input.toString();\n  return phoneNumberRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an URL. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isURL (input) {\n  if (!input || typeof input !== 'string') return false;\n  return urlWithoutProtocolRegex.exec(input)?.[0] === input ||\n    urlWithProtocolRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an email address. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isEmailAddress (input) {\n  if (!input || typeof input !== 'string') return false;\n  return emailAddressRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Concatenate a string removing null or undefined elements\n * avoiding parsing them as string with template strings\n * @param {Array} elements\n * @returns {String}\n */\nexport function safeConcatStrings (elements) {\n  return elements.filter(str => !!str).join(' ');\n}\n\n/**\n * Locale safe function to capitalize the first letter of a string.\n * @param {string} str the string to capitalize the first letter of\n * @param {string} locale a string representing the locale to be used. Defaults to 'en-US'\n * @returns The passed in string with the first letter capitalized\n */\nexport function capitalizeFirstLetter (str, locale = 'en-US') {\n  return str.replace(/^\\p{CWU}/u, char => char.toLocaleUpperCase(locale));\n}\n\nexport default {\n  getUniqueString,\n  getRandomElement,\n  getRandomInt,\n  formatMessages,\n  filterFormattedMessages,\n  hasFormattedMessageOfType,\n  getValidationState,\n  htmlFragment,\n  flushPromises,\n  kebabCaseToPascalCase,\n  extractVueListeners,\n  debounce,\n  isOutOfViewPort,\n  getPhoneNumberRegex,\n  linkRegex,\n  isEmailAddress,\n  isPhoneNumber,\n  isURL,\n  safeConcatStrings,\n  capitalizeFirstLetter,\n};\n"],"names":["h"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../common/utils/index.js"],"sourcesContent":["import {\n  DEFAULT_PREFIX,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  VALIDATION_MESSAGE_TYPES,\n} from '../constants';\nimport {\n  h,\n  Comment,\n  Text,\n} from 'vue';\n\nlet UNIQUE_ID_COUNTER = 0;\nlet TIMER;\n\n// selector to find focusable not hidden inputs\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';\n// selector to find focusable not disables elements\nconst FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)';\n// // selector to find focusable not hidden and disabled elements\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`;\n// selector to find focusable elements\nconst FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},*[tabindex]`;\n\nconst scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;\n\nexport function getUniqueString (prefix = DEFAULT_PREFIX) {\n  return `${prefix}${UNIQUE_ID_COUNTER++}`;\n}\n\n/**\n * Returns a random element from array\n * @param array - the array to return a random element from\n * @param {string} seed - use a string to seed the randomization, so it returns the same element each time\n * based on that string.\n * @returns {*} - the random element\n */\nexport function getRandomElement (array, seed) {\n  if (seed) {\n    const hash = javaHashCode(seed);\n    return array[Math.abs(hash) % array.length];\n  } else {\n    return array[getRandomInt(array.length)];\n  }\n}\n\n/**\n * Returns a hash code for a string.\n * (Compatible to Java's String.hashCode())\n * We use this algo to be in sync with android.\n *\n * The hash code for a string object is computed as\n *     s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1]\n * using number arithmetic, where s[i] is the i th character\n * of the given string, n is the length of the string,\n * and ^ indicates exponentiation.\n * (The hash value of the empty string is zero.)\n *\n * @param {string} str a string\n * @return {number} a hash code value for the given string.\n */\nexport function javaHashCode (str) {\n  let h;\n  for (let i = 0; i < str.length; i++) {\n    h = Math.imul(31, h) + str.charCodeAt(i) | 0;\n  }\n\n  return h;\n}\n\n/**\n * Generate a random integer\n * @param {number} max - max range of integer to generate\n * @returns {number} randomly generated integer between 0 and max\n */\nexport function getRandomInt (max) {\n  return Math.floor(Math.random() * max);\n}\n\nexport function formatMessages (messages) {\n  if (!messages) {\n    return [];\n  }\n\n  return messages.map(message => {\n    if (typeof message === 'string') {\n      return {\n        message,\n        type: DEFAULT_VALIDATION_MESSAGE_TYPE,\n      };\n    }\n\n    return message;\n  });\n}\n\nexport function filterFormattedMessages (formattedMessages) {\n  const validationState = getValidationState(formattedMessages);\n\n  if (!formattedMessages || !validationState) {\n    return [];\n  }\n\n  return formattedMessages.filter(message => !!message.message && message.type === validationState);\n}\n\n/*\n * The priority order of message types is as flows: 'error' > 'warning' > 'success'.\n * If any message of type 'error' is present in messages, the input state is considered\n * to be 'error', then 'warning' and lastly 'success'.\n */\nexport function getValidationState (formattedMessages) {\n  if (!formattedMessages) {\n    return null;\n  }\n\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.ERROR)) {\n    return VALIDATION_MESSAGE_TYPES.ERROR;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.WARNING)) {\n    return VALIDATION_MESSAGE_TYPES.WARNING;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.SUCCESS)) {\n    return VALIDATION_MESSAGE_TYPES.SUCCESS;\n  }\n\n  return null;\n}\n\nexport function hasFormattedMessageOfType (formattedMessages, messageType) {\n  if (!formattedMessages || !messageType) {\n    return false;\n  }\n\n  return formattedMessages.some(message => message?.type === messageType);\n}\n\nexport function findFirstFocusableNode (element) {\n  return element?.querySelector(FOCUSABLE_SELECTOR);\n}\n\n/* html-fragment component:\n * To render html without wrapping in another element as when using v-html.\n * props: html\n */\nexport const htmlFragment = (props) => {\n  return h('div', { innerHTML: props.html });\n};\n\nexport const flushPromises = () => {\n  return new Promise((resolve) => {\n    scheduler(resolve);\n  });\n};\n\n/*\n  It is very cumbersome to check if a slot is empty in vue 3. Copied this method from the following thread\n  https://github.com/vuejs/core/issues/4733. There is an RFC to fix this but not yet being worked on.\n  https://github.com/vuejs/rfcs/discussions/453\n*/\nexport function hasSlotContent (slot, slotProps = {}) {\n  if (!slot) return false;\n\n  // eslint-disable-next-line complexity\n  return slot(slotProps).some((vnode) => {\n    if (vnode.type === Comment) return false;\n\n    if (Array.isArray(vnode.children) && !vnode.children.length) return false;\n\n    return (\n      vnode.type !== Text ||\n      (typeof vnode.children === 'string' && vnode.children.trim() !== '')\n    );\n  });\n}\n\n/**\n * Transform a string from kebab-case to PascalCase\n * @param string\n * @returns {string}\n */\nexport const kebabCaseToPascalCase = (string) => {\n  return string?.toLowerCase()\n    .split('-')\n    .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n    .join('');\n};\n\n/**\n * Transform a string from PascalCase to kebab-case\n * @param string\n * @returns {string}\n */\nexport const pascalCaseToKebabCase = (string) => {\n  return string\n    .replace(/\\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase())\n    .replace(/^-/, '');\n};\n\nexport const extractVueListeners = (attrs) => {\n  const listeners = Object.entries(attrs)\n    .filter(([key]) => key.startsWith('on'));\n  return Object.fromEntries(listeners);\n};\n\n/*\n* Set's a global timer to debounce the execution of a function.\n* @param { object } func - the function that is going to be called after timeout\n* @param { number } [timeout=300] timeout\n* */\nexport function debounce (func, timeout = 300) {\n  clearTimeout(TIMER);\n  TIMER = setTimeout(func, timeout);\n}\n\n/**\n * Checks if the element is out of the viewport\n * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/\n * @param  {HTMLElement} element The element to check\n * @return {Object} A set of booleans for each side of the element\n */\n\nexport function isOutOfViewPort (element) {\n  const bounding = element.getBoundingClientRect();\n\n  const isOut = {\n    top: bounding.top < 0,\n    left: bounding.left < 0,\n    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),\n    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth),\n  };\n  isOut.any = Object.values(isOut).some(val => val);\n  isOut.all = Object.values(isOut).every(val => val);\n  return isOut;\n}\n\n// match valid characters for a domain name followed by a dot, e.g. \"dialpad.\"\nconst domainNameRegex = /(?:(?:[^\\s!@#$%^&*()_=+[\\]{}\\\\|;:'\",.<>/?]+)\\.)/;\n\n// match valid TLDs for a hostname (outdated list from ~2017)\nconst tldRegerx = new RegExp(\n  '(?:' +\n  'com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|' +\n  'za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|' +\n  'il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|' +\n  'ae|ph|online|ng|ee|ws|ve|cat' +\n  ')',\n);\n\n// match valid IPv4 addresses, e.g. \"192.158.1.38\"\nconst ipv4Regex = new RegExp(\n  '(?:(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])\\\\.){3}' +\n  '(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])',\n);\n\n// match hostnames OR IPv4 addresses, e.g. \"dialpad.com\" or \"192.158.1.38\"\nconst hostnameOrIpRegex = new RegExp(\n  '(?:' +\n  [\n    [\n      domainNameRegex.source,\n      tldRegerx.source,\n    ].join('+'),\n    ipv4Regex.source,\n  ].join('|') +\n  ')',\n);\n\n// match URL paths, e.g. \"/news\"\nconst urlPathRegex = /(?:(?:[;/][^#?<>\\s]*)?)/;\n\n// match URL queries and fragments, e.g. \"?cache=1&new=true\" or \"#heading1\"\nconst urlQueryOrFragmentRegex = /(?:(?:\\?[^#<>\\s]+)?(?:#[^<>\\s]+)?)/;\n\n// match complete hostnames or IPv4 addresses without a protocol and with optional\n// URL paths, queries and fragments e.g. \"dialpad.com/news?cache=1#heading1\"\nconst urlWithoutProtocolRegex = new RegExp(\n  '\\\\b' +\n  [\n    hostnameOrIpRegex.source,\n    urlPathRegex.source,\n    urlQueryOrFragmentRegex.source,\n    '(?!\\\\w)',\n  ].join('+'),\n);\n\n// match complete hostnames with protocols and optional URL paths, queries and fragments,\n// e.g. \"ws://localhost:9011\" or \"https://dialpad.com/news?cache=1#heading1\"\nconst urlWithProtocolRegex = /\\b[a-z\\d.-]+:\\/\\/[^<>\\s]+/;\n\n// match email addresses with an optional \"mailto:\" prefix and URL queries, e.g.\n// \"hey@dialpad.com\" or \"mailto:hey@dialpad.com?subject=Hi&body=Hey%20there\"\nconst emailAddressRegex = new RegExp(\n  '(?:mailto:)?' +\n  '[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+(?:\\\\.[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+)*@' +\n  [\n    hostnameOrIpRegex.source,\n    urlQueryOrFragmentRegex.source,\n  ].join('+') +\n  '(?!\\\\w)',\n);\n\n/**\n * Match phone numbers, e.g. \"765-8813\", \"(778) 765-8813\" or \"+17787658813\".\n * @param {number} minLength\n * @param {number} maxLength\n * @returns {RegExp}\n */\nexport function getPhoneNumberRegex (minLength = 7, maxLength = 15) {\n  // Some older browser versions don't support lookbehind, so provide a RegExp\n  // version without it. It fails just one test case, so IMO it's still good\n  // enough to use. https://caniuse.com/js-regexp-lookbehind\n  try {\n    return new RegExp(\n      '(?:^|(?<=\\\\W))' +\n      '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n      `{${minLength},${maxLength}}` +\n      ')(?=\\\\b)(?=\\\\W(?=\\\\W|$)|\\\\s|$)',\n    );\n  } catch (e) {\n    // eslint-disable-next-line no-console\n    console.warn('This browser doesn\\'t support regex lookahead/lookbehind');\n  }\n\n  return new RegExp(\n    '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n      `{${minLength},${maxLength}}` +\n      ')(?=\\\\b)(?=\\\\W(?=\\\\W|$)|\\\\s|$)',\n  );\n}\n\nconst phoneNumberRegex = getPhoneNumberRegex();\n\n// match all link types\nexport const linkRegex = new RegExp(\n  [\n    urlWithoutProtocolRegex.source,\n    urlWithProtocolRegex.source,\n    emailAddressRegex.source,\n    phoneNumberRegex.source,\n  ].join('|'),\n  'gi',\n);\n\n/**\n * Check if a string is a phone number. Validates only exact matches.\n * @param {string|number} input\n * @returns {boolean}\n */\nexport function isPhoneNumber (input) {\n  if (!input || (!['string', 'number'].includes(typeof input))) return false;\n  input = input.toString();\n  return phoneNumberRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an URL. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isURL (input) {\n  if (!input || typeof input !== 'string') return false;\n  return urlWithoutProtocolRegex.exec(input)?.[0] === input ||\n    urlWithProtocolRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an email address. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isEmailAddress (input) {\n  if (!input || typeof input !== 'string') return false;\n  return emailAddressRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Concatenate a string removing null or undefined elements\n * avoiding parsing them as string with template strings\n * @param {Array} elements\n * @returns {String}\n */\nexport function safeConcatStrings (elements) {\n  return elements.filter(str => !!str).join(' ');\n}\n\n/**\n * Locale safe function to capitalize the first letter of a string.\n * @param {string} str the string to capitalize the first letter of\n * @param {string} locale a string representing the locale to be used. Defaults to 'en-US'\n * @returns The passed in string with the first letter capitalized\n */\nexport function capitalizeFirstLetter (str, locale = 'en-US') {\n  return str.replace(/^\\p{CWU}/u, char => char.toLocaleUpperCase(locale));\n}\n\nexport default {\n  getUniqueString,\n  getRandomElement,\n  getRandomInt,\n  formatMessages,\n  filterFormattedMessages,\n  hasFormattedMessageOfType,\n  getValidationState,\n  htmlFragment,\n  flushPromises,\n  kebabCaseToPascalCase,\n  extractVueListeners,\n  debounce,\n  isOutOfViewPort,\n  getPhoneNumberRegex,\n  linkRegex,\n  isEmailAddress,\n  isPhoneNumber,\n  isURL,\n  safeConcatStrings,\n  capitalizeFirstLetter,\n};\n"],"names":["h"],"mappings":"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"}

package/dist/components/avatar/avatar.vue.cjs

@@ -0,0 +1,378 @@
+"use strict";
+const common_utils = require("../../common/utils.cjs");
+const avatar_constants = require("./avatar_constants.cjs");
+const storybook_utils = require("../../common/storybook_utils.cjs");
+const icon_constants = require("../icon/icon_constants.cjs");
+const utils = require("./utils.cjs");
+const vue = require("vue");
+;/* empty css              */
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const presence = require("../presence/presence.vue.cjs");
+const icon = require("../icon/icon.vue.cjs");
+const ICONS_LIST = storybook_utils.getIconNames();
+const _sfc_main = {
+  name: "DtAvatar",
+  components: { DtPresence: presence, DtIcon: icon },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id of the avatar content wrapper element
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * Pass in a seed to get the random color generation based on that string. For example if you pass in a
+     * user ID as the string it will return the same randomly generated colors every time for that user.
+     */
+    seed: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic
+     * if the seed prop is set.
+     */
+    color: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (size) => Object.keys(avatar_constants.AVATAR_SIZE_MODIFIERS).includes(size)
+    },
+    /**
+     * Used to customize the avatar container
+     */
+    avatarClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Set classes on the avatar canvas. Wrapper around the core avatar image.
+     */
+    canvasClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Pass through classes. Used to customize the avatar icon
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: avatar_constants.AVATAR_PRESENCE_STATES.NONE,
+      validator: (state) => {
+        return Object.values(avatar_constants.AVATAR_PRESENCE_STATES).includes(state);
+      }
+    },
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Determines whether to show a group avatar.
+     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
+     */
+    group: {
+      type: Number,
+      default: void 0,
+      validator: (group) => avatar_constants.AVATAR_GROUP_VALIDATOR(group)
+    },
+    /**
+     * The icon that overlays the avatar
+     */
+    overlayIcon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text that overlays the avatar
+     */
+    overlayText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used to customize the avatar overlay
+     */
+    overlayClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Source of the image
+     */
+    imageSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Alt attribute of the image, required if imageSrc is provided.
+     * Can be set to '' (empty string) if the image is described
+     * in text nearby
+     */
+    imageAlt: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Icon name to be displayed on the avatar
+     */
+    iconName: {
+      type: String,
+      default: void 0,
+      validator: (name) => ICONS_LIST.includes(name)
+    },
+    /**
+     * Icon size to be displayed on the avatar
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    iconSize: {
+      type: String,
+      default: "",
+      validator: (size) => !size || Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(size)
+    },
+    /**
+     * Full name used to extract initials.
+     */
+    fullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Makes the avatar focusable and clickable,
+     * emits a click event when clicked.
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Descriptive label for the icon.
+     * To avoid a11y issues, set this prop if clickable and iconName are set.
+     */
+    iconAriaLabel: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * Avatar click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      AVATAR_SIZE_MODIFIERS: avatar_constants.AVATAR_SIZE_MODIFIERS,
+      AVATAR_KIND_MODIFIERS: avatar_constants.AVATAR_KIND_MODIFIERS,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: avatar_constants.AVATAR_PRESENCE_SIZE_MODIFIERS,
+      AVATAR_ICON_SIZES: avatar_constants.AVATAR_ICON_SIZES,
+      imageLoadedSuccessfully: null,
+      formattedInitials: "",
+      initializing: false
+    };
+  },
+  computed: {
+    isNotIconType() {
+      return !this.iconName;
+    },
+    avatarClasses() {
+      return [
+        "d-avatar",
+        avatar_constants.AVATAR_SIZE_MODIFIERS[this.validatedSize],
+        this.avatarClass,
+        {
+          "d-avatar--group": this.showGroup,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          "d-avatar--clickable": this.clickable
+        }
+      ];
+    },
+    overlayClasses() {
+      return [
+        "d-avatar__overlay",
+        this.overlayClass
+      ];
+    },
+    showGroup() {
+      return avatar_constants.AVATAR_GROUP_VALIDATOR(this.group);
+    },
+    formattedGroup() {
+      return this.group > 99 ? "99+" : this.group;
+    },
+    validatedSize() {
+      return this.group ? "xs" : this.size;
+    },
+    showImage() {
+      return this.imageLoadedSuccessfully !== false && this.imageSrc;
+    }
+  },
+  watch: {
+    fullName: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    size: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    group: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    imageSrc(newSrc) {
+      this.imageLoadedSuccessfully = null;
+      if (!newSrc) return;
+      this.validateProps();
+      this.setImageListeners();
+    }
+  },
+  mounted() {
+    this.validateProps();
+    this.setImageListeners();
+  },
+  methods: {
+    async setImageListeners() {
+      await this.$nextTick();
+      const el = this.$refs.avatarImage;
+      if (!el) return;
+      el.addEventListener("load", () => this._loadedImageEventHandler(el), { once: true });
+      el.addEventListener("error", () => this._erroredImageEventHandler(el), { once: true });
+    },
+    formatInitials() {
+      const initials = utils.extractInitialsFromName(this.fullName);
+      if (this.validatedSize === "xs") {
+        this.formattedInitials = "";
+      } else if (this.validatedSize === "sm") {
+        this.formattedInitials = initials[0];
+      } else {
+        this.formattedInitials = initials;
+      }
+    },
+    getColor() {
+      return this.color ?? common_utils.getRandomElement(avatar_constants.AVATAR_RANDOM_COLORS, this.seed);
+    },
+    _loadedImageEventHandler(el) {
+      this.imageLoadedSuccessfully = true;
+      el.classList.remove("d-d-none");
+    },
+    _erroredImageEventHandler(el) {
+      this.imageLoadedSuccessfully = false;
+      el.classList.add("d-d-none");
+    },
+    validateProps() {
+      if (this.imageSrc && this.imageAlt === void 0) {
+        console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby');
+      }
+    },
+    handleClick(e) {
+      if (!this.clickable) return;
+      this.$emit("click", e);
+    }
+  }
+};
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = {
+  key: 1,
+  class: "d-avatar__overlay-text"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "d-avatar__count",
+  "data-qa": "dt-avatar-count"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_presence = vue.resolveComponent("dt-presence");
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "div"), {
+    id: $props.id,
+    class: vue.normalizeClass($options.avatarClasses),
+    "data-qa": "dt-avatar",
+    onClick: $options.handleClick
+  }, {
+    default: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        ref: "canvas",
+        class: vue.normalizeClass([
+          $props.canvasClass,
+          "d-avatar__canvas",
+          { "d-avatar--image-loaded": $data.imageLoadedSuccessfully }
+        ])
+      }, [
+        $options.showImage ? (vue.openBlock(), vue.createElementBlock("img", {
+          key: 0,
+          ref: "avatarImage",
+          class: "d-avatar__image",
+          "data-qa": "dt-avatar-image",
+          src: $props.imageSrc,
+          alt: $props.imageAlt
+        }, null, 8, _hoisted_1)) : $props.iconName ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+          key: 1,
+          name: $props.iconName,
+          "aria-label": $props.iconAriaLabel,
+          size: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size],
+          class: vue.normalizeClass([$props.iconClass, $data.AVATAR_KIND_MODIFIERS.icon]),
+          "data-qa": "dt-avatar-icon"
+        }, null, 8, ["name", "aria-label", "size", "class"])) : (vue.openBlock(), vue.createElementBlock("span", {
+          key: 2,
+          class: vue.normalizeClass([$data.AVATAR_KIND_MODIFIERS.initials])
+        }, vue.toDisplayString($data.formattedInitials), 3))
+      ], 2),
+      $props.overlayIcon || $props.overlayText ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass($options.overlayClasses)
+      }, [
+        $props.overlayIcon ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+          key: 0,
+          class: "d-avatar__overlay-icon",
+          name: $props.overlayIcon
+        }, null, 8, ["name"])) : $props.overlayText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString($props.overlayText), 1)) : vue.createCommentVNode("", true)
+      ], 2)) : vue.createCommentVNode("", true),
+      $options.showGroup ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString($options.formattedGroup), 1)) : vue.createCommentVNode("", true),
+      $props.presence && !$options.showGroup ? (vue.openBlock(), vue.createBlock(_component_dt_presence, vue.mergeProps({
+        key: 2,
+        presence: $props.presence,
+        class: [
+          "d-avatar__presence",
+          $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]
+        ]
+      }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : vue.createCommentVNode("", true)
+    ]),
+    _: 1
+  }, 8, ["id", "class", "onClick"]);
+}
+const DtAvatar = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtAvatar;
+//# sourceMappingURL=avatar.vue.cjs.map

package/dist/components/avatar/avatar.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.vue.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <dt-icon\n        v-else-if=\"iconName\"\n        :name=\"iconName\"\n        :aria-label=\"iconAriaLabel\"\n        :size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        data-qa=\"dt-avatar-icon\"\n      />\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"overlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <dt-icon\n        v-if=\"overlayIcon\"\n        class=\"d-avatar__overlay-icon\"\n        :name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence, DtIcon },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The icon that overlays the avatar\n     */\n    overlayIcon: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon name to be displayed on the avatar\n     */\n    iconName: {\n      type: String,\n      default: undefined,\n      validator: (name) => ICONS_LIST.includes(name),\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n    };\n  },\n\n  computed: {\n    isNotIconType () {\n      return !this.iconName;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n  background-color: transparent;\n  background-image: unset;\n}\n\n.d-avatar__count {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n  background-color: var(--dt-color-surface-contrast-opaque);\n  opacity: var(--dt-opacity-900);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dt-size-radius-circle);\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n  color: var(--dt-color-foreground-primary-inverted);\n  width: 100%;\n}\n\n.d-avatar__overlay-text {\n  color: var(--dt-color-foreground-primary-inverted);\n  font-weight: var(--dt-font-weight-bold);\n  font-size: var(--dt-font-size-200);\n  width: 100%;\n  text-align: center;\n}\n\n.d-avatar--clickable {\n  --avatar-color-border: transparent;\n\n  cursor: pointer;\n  padding: 0;\n  background-color: transparent;\n\n  border-radius: var(--dt-size-radius-circle);\n  border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n\n  &:hover {\n    --avatar-color-border: var(--dt-color-border-default);\n  }\n\n  &:active {\n    --avatar-color-border: var(--dt-color-border-moderate);\n\n    transform: scale(0.98);\n  }\n}\n</style>\n"],"names":["getIconNames","DtPresence","DtIcon","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":"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"}