@dialpad/dialtone 9.110.1 → 9.111.0

package/dist/vue3/common/mixins/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../common/mixins/input.js"],"sourcesContent":["import { warn } from 'vue';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { validationMessageValidator } from '@/common/validators';\nimport { formatMessages } from '@/common/utils';\n\n/**\n * This mixin provides a base set of props, watchers and data attributes that are commonly used in our input components.\n * @displayName Input Mixin\n */\nexport const InputMixin = {\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The name of the input\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The value of the input\n     * @model value\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * Describes the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The validation state of the input\n     */\n    validationState: {\n      type: String,\n      default: '',\n      validator: validationState => {\n        if (!validationState) {\n          return true;\n        }\n\n        return Object.values(VALIDATION_MESSAGE_TYPES).includes(validationState);\n      },\n    },\n\n    /**\n     * Used to customize the input element\n     */\n    inputClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  data () {\n    return {\n      internalDisabled: this.disabled,\n      internalValidationState: this.validationState,\n    };\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      // update internal disabled when the prop changes\n      this.internalDisabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      // update internal validation state when the prop changes\n      this.internalValidationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself\n     * @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)\n     */\n    validateInputLabels (hasLabelOrLabel, ariaLabel) {\n      if (!hasLabelOrLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our checkable inputs.\n *\n * This includes the group context, checked model & prop, internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Checkable Mixin\n */\nexport const CheckableMixin = {\n  model: {\n    prop: 'checked',\n  },\n\n  props: {\n    /**\n     * Used to set the state of the checkable input\n     * @model checked\n     */\n    checked: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Indeterminate State, toggling indeterminate checkbox will uncheck\n     */\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean],\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      internalIndeterminate: this.indeterminate,\n    };\n  },\n\n  watch: {\n    checked (newChecked) {\n      // update internal checked when the prop changes\n      this.internalChecked = newChecked;\n    },\n\n    indeterminate (newValue) {\n      this.internalIndeterminate = newValue;\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our groupable inputs.\n *\n * This includes the group context and internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Groupable Mixin\n */\nexport const GroupableMixin = {\n  inject: {\n    // Object used to pass data from the group\n    groupContext: {\n      default: {},\n    },\n\n    // Method used to update the group value\n    setGroupValue: {\n      default: () => { return () => {}; },\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n    };\n  },\n\n  computed: {\n    hasGroup () {\n      return Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    },\n\n    groupName () {\n      return this.groupContext?.name ?? '';\n    },\n\n    groupValue () {\n      return this.groupContext?.value;\n    },\n\n    groupDisabled () {\n      return this.groupContext?.disabled ?? false;\n    },\n\n    groupValidationState () {\n      return this.groupContext?.validationState ?? null;\n    },\n\n    internalName () {\n      return this.name || this.groupName;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      // update internal value when the prop changes\n      this.internalValue = newValue;\n    },\n\n    groupValue: {\n      immediate: true,\n      handler (newGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the group disabled changes\n          this.internalValue = newGroupValue;\n        }\n      },\n    },\n\n    groupDisabled: {\n      immediate: true,\n      handler (newGroupDisabled) {\n        if (this.hasGroup) {\n          // update internal disabled when the group disabled changes\n          this.internalDisabled = this.disabled || newGroupDisabled;\n        }\n      },\n    },\n\n    groupValidationState: {\n      immediate: true,\n      handler (newGroupValidationState) {\n        if (this.hasGroup) {\n          // update internal validation state when the group validation state changes\n          this.internalValidationState = newGroupValidationState || this.validationState;\n        }\n      },\n    },\n  },\n\n  created () {\n    const hasGroupName = Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    const reactiveGroupName = this.groupContext?.name;\n\n    if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {\n      warn(\n        'Component is being used inside a Group. Did you mean to override the name prop value ' +\n        `(${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`,\n        this,\n      );\n    }\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our validation messages inputs.\n * @displayName Messages Mixin\n */\nexport const MessagesMixin = {\n  props: {\n    /**\n     * Used to customize the validation messages component\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the validation messages component\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Used to hide / show the validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => {\n        return validationMessageValidator(messages);\n      },\n    },\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n  },\n};\n\nexport default {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../common/mixins/input.js"],"sourcesContent":["import { warn } from 'vue';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { validationMessageValidator } from '@/common/validators';\nimport { formatMessages } from '@/common/utils';\n\n/**\n * This mixin provides a base set of props, watchers and data attributes that are commonly used in our input components.\n * @displayName Input Mixin\n */\nexport const InputMixin = {\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The name of the input\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The value of the input\n     * @model value\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * Describes the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The validation state of the input\n     */\n    validationState: {\n      type: String,\n      default: '',\n      validator: validationState => {\n        if (!validationState) {\n          return true;\n        }\n\n        return Object.values(VALIDATION_MESSAGE_TYPES).includes(validationState);\n      },\n    },\n\n    /**\n     * Used to customize the input element\n     */\n    inputClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  data () {\n    return {\n      internalDisabled: this.disabled,\n      internalValidationState: this.validationState,\n    };\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      // update internal disabled when the prop changes\n      this.internalDisabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      // update internal validation state when the prop changes\n      this.internalValidationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself\n     * @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)\n     */\n    validateInputLabels (hasLabelOrLabel, ariaLabel) {\n      if (!hasLabelOrLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our checkable inputs.\n *\n * This includes the group context, checked model & prop, internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Checkable Mixin\n */\nexport const CheckableMixin = {\n  model: {\n    prop: 'checked',\n  },\n\n  props: {\n    /**\n     * Used to set the state of the checkable input\n     * @model checked\n     */\n    checked: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Indeterminate State, toggling indeterminate checkbox will uncheck\n     */\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean],\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      internalIndeterminate: this.indeterminate,\n    };\n  },\n\n  watch: {\n    checked (newChecked) {\n      // update internal checked when the prop changes\n      this.internalChecked = newChecked;\n    },\n\n    indeterminate (newValue) {\n      this.internalIndeterminate = newValue;\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our groupable inputs.\n *\n * This includes the group context and internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Groupable Mixin\n */\nexport const GroupableMixin = {\n  inject: {\n    // Object used to pass data from the group\n    groupContext: {\n      default: {},\n    },\n\n    // Method used to update the group value\n    setGroupValue: {\n      default: () => { return () => {}; },\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n    };\n  },\n\n  computed: {\n    hasGroup () {\n      return Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    },\n\n    groupName () {\n      return this.groupContext?.name ?? '';\n    },\n\n    groupValue () {\n      return this.groupContext?.value;\n    },\n\n    groupDisabled () {\n      return this.groupContext?.disabled ?? false;\n    },\n\n    groupValidationState () {\n      return this.groupContext?.validationState ?? null;\n    },\n\n    internalName () {\n      return this.name || this.groupName;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      // update internal value when the prop changes\n      this.internalValue = newValue;\n    },\n\n    groupValue: {\n      immediate: true,\n      handler (newGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the group disabled changes\n          this.internalValue = newGroupValue;\n        }\n      },\n    },\n\n    groupDisabled: {\n      immediate: true,\n      handler (newGroupDisabled) {\n        if (this.hasGroup) {\n          // update internal disabled when the group disabled changes\n          this.internalDisabled = this.disabled || newGroupDisabled;\n        }\n      },\n    },\n\n    groupValidationState: {\n      immediate: true,\n      handler (newGroupValidationState) {\n        if (this.hasGroup) {\n          // update internal validation state when the group validation state changes\n          this.internalValidationState = newGroupValidationState || this.validationState;\n        }\n      },\n    },\n  },\n\n  created () {\n    const hasGroupName = Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    const reactiveGroupName = this.groupContext?.name;\n\n    if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {\n      warn(\n        'Component is being used inside a Group. Did you mean to override the name prop value ' +\n        `(${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`,\n        this,\n      );\n    }\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our validation messages inputs.\n * @displayName Messages Mixin\n */\nexport const MessagesMixin = {\n  props: {\n    /**\n     * Used to customize the validation messages component\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the validation messages component\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Used to hide / show the validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => {\n        return validationMessageValidator(messages);\n      },\n    },\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n  },\n};\n\nexport default {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n};\n"],"names":["InputMixin","validationState","VALIDATION_MESSAGE_TYPES","newDisabled","newValidationState","hasLabelOrLabel","ariaLabel","warn","CheckableMixin","newChecked","newValue","GroupableMixin","_a","newGroupValue","newGroupDisabled","newGroupValidationState","hasGroupName","reactiveGroupName","MessagesMixin","messages","validationMessageValidator","formatMessages","input"],"mappings":"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"}

package/dist/vue3/common/mixins/keyboard-list-navigation.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./dom.cjs"),E=require("../utils/index.cjs"),N="listElementKey is required or the referenced element doesn't exist. Received listElement: ",v=({listItemRole:o="option",indexKey:s="highlightIndex",idKey:n="highlightId",listElementKey:I="listRef",activeItemKey:c="",openMethod:l=null,afterHighlightMethod:r=null,beginningOfListMethod:m=null,endOfListMethod:u=null,scrollToOnHighlight:g=!0,focusOnKeyboardNavigation:f=!1}={})=>({mixins:[a.default],data(){return{[s]:-1,[n]:"",scrollToOnHighlight:g,focusOnKeyboardNavigation:f}},provide(){return{highlightId:()=>this[n]}},methods:{_getListElement(){var t;return E.returnFirstEl((t=this[I]())==null?void 0:t.$el)||this[I]()},_itemsLength(){const t=this._getListItemNodes();return t===null?0:t.length},_getListItemNodes(){const t=this._getListElement();return t?Array.from(t.querySelectorAll(`[role="${o}"], #sr-only-close-button`)):(console.error(N,t),null)},onUpKey(){l&&this[l](!0),this[s]>0?this.setHighlightIndex(this[s]-1):m&&this[m](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onDownKey(){l&&this[l](!0),this[s]<this._itemsLength()-1?this.setHighlightIndex(this[s]+1):u&&this[u](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onHomeKey(){this.jumpToBeginning(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onEndKey(){this.jumpToEnd(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onNavigationKey(t){const e=this._getListItemNodes(),i=e.filter(h=>h.textContent.trim().toLowerCase().startsWith(t.toLowerCase()));if(i.length<=0)return;const d=i.findIndex(h=>this[s]===e.indexOf(h)),_=e.indexOf(d<i.length-1?i[d+1]:i[0]);this.setHighlightIndex(_),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},isValidLetter(t){return t.length>1?!1:t>="a"&&t<="z"||t>="A"&&t<="Z"},jumpToBeginning(){this.setHighlightIndex(0)},jumpToEnd(){this.setHighlightIndex(this._itemsLength()-1)},setHighlightIndex(t){this[s]=t,this[n]=this._getItemId(t),this._itemsLength()&&r&&this[r](t)},setHighlightId(t){this[n]=t,this[s]=this._getItemIndex(t),this._itemsLength()&&r&&this[r](this._getItemIndex(t))},_getItemIndex(t){const e=this._getListElement();return e?Array.from(e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)).indexOf(e.querySelector(`#${t}`)):void 0},_getItemId(t){var i;const e=this._getListElement();if(e)return(i=e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)[t])==null?void 0:i.id},scrollActiveItemIntoViewIfNeeded(){if(!this.scrollToOnHighlight)return;const t=this[c];if(t){const e=this._getListElement();this.scrollElementIntoViewIfNeeded(t,null,null,e)}},focusActiveItemIfNeeded(){if(!this.focusOnKeyboardNavigation)return;const t=this[c];t&&t.focus()}}});exports.default=v;
+//# sourceMappingURL=keyboard-list-navigation.cjs.map

package/dist/vue3/common/mixins/keyboard-list-navigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-list-navigation.cjs","sources":["../../../common/mixins/keyboard_list_navigation.js"],"sourcesContent":["import Dom from './dom';\nimport { returnFirstEl } from '@/common/utils';\n\nconst ERROR_INVALID_LIST_ELEMENT = (\n  'listElementKey is required or the referenced ' +\n  'element doesn\\'t exist. Received listElement: '\n);\n\n/**\n * Usage: `mixins: [keyboardNavigationMixin(options)]`\n *\n * This mixin provides some common data and methods to navigate a list of items\n * (such as a dropdown or select menu) by keyboard.\n *\n * To be effective, you must bind the onUpKey and onDownKey events, usually to\n * the root element of the component.\n *\n * @param listItemRole\n * @param indexKey\n * @param idKey\n * @param listElementKey\n * @param activeItemKey\n * @param openMethod\n * @param afterHighlightMethod\n * @param beginningOfListMethod\n * @param endOfListMethod\n * @param scrollToOnHighlight\n * @param focusOnKeyboardNavigation\n * @displayName Keyboard Navigation Mixin\n */\nexport default ({\n  // Role of the list items in the component. This is used to identify the list items\n  // so you must update this if the role of your list items is anything other than 'option'\n  listItemRole = 'option',\n  // Key of the data prop that will be added to the component.\n  indexKey = 'highlightIndex',\n  idKey = 'highlightId',\n  // Key of the method that references the list element.\n  listElementKey = 'listRef',\n  // Optional, Key of the computed prop that references the currently active item element.\n  activeItemKey = '',\n  // Optional, name of the method that toggles the list visibility. Used for\n  // opening the list when up or down is pressed.\n  openMethod = null,\n  // Optional, method to call when the highlightIndex is changed.\n  afterHighlightMethod = null,\n  // Optional, method to call when the highlightIndex goes past the beginning of the list.\n  beginningOfListMethod = null,\n  // Optional, method to call when the highlightIndex goes past the end of the list.\n  endOfListMethod = null,\n  // Scroll the active element into view when highlighted by a keyboard event.\n  scrollToOnHighlight = true,\n  // Focus the active element on keyboard navigation.\n  focusOnKeyboardNavigation = false,\n} = {}) => ({\n  mixins: [Dom],\n\n  data () {\n    return {\n      [indexKey]: -1,\n      [idKey]: '',\n      scrollToOnHighlight,\n      focusOnKeyboardNavigation,\n    };\n  },\n\n  provide () {\n    return {\n      highlightId: () => this[idKey],\n    };\n  },\n\n  methods: {\n    // Returns the list element\n    // this[listElement]() can return a Vue component, in which case we need to target\n    // the $el property, or it can simply be an html element.\n    _getListElement () {\n      return returnFirstEl(this[listElementKey]()?.$el) || this[listElementKey]();\n    },\n\n    // Gets the length of all the items in the list, uses the listItemRole param to determine\n    // whether an element is a list item.\n    _itemsLength () {\n      const listItems = this._getListItemNodes();\n\n      if (listItems === null) {\n        return 0;\n      }\n\n      return listItems.length;\n    },\n\n    // Gets all the list item nodes within the list element\n    _getListItemNodes () {\n      const listElement = this._getListElement();\n\n      if (!listElement) {\n        console.error(ERROR_INVALID_LIST_ELEMENT, listElement);\n        return null;\n      }\n\n      return Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n    },\n\n    onUpKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] > 0) {\n        this.setHighlightIndex(this[indexKey] - 1);\n      } else if (beginningOfListMethod) {\n        this[beginningOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onDownKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] < this._itemsLength() - 1) {\n        this.setHighlightIndex(this[indexKey] + 1);\n      } else if (endOfListMethod) {\n        this[endOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onHomeKey () {\n      this.jumpToBeginning();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onEndKey () {\n      this.jumpToEnd();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onNavigationKey (key) {\n      const listItems = this._getListItemNodes();\n\n      const matchingItems = listItems.filter(item => {\n        const content = item.textContent.trim().toLowerCase();\n        return content.startsWith(key.toLowerCase());\n      });\n\n      if (matchingItems.length <= 0) {\n        return;\n      }\n\n      const highlightedMatchingItemIndex = matchingItems.findIndex(item => {\n        return this[indexKey] === listItems.indexOf(item);\n      });\n\n      const nextHighlightedItemIndex = listItems.indexOf(\n        highlightedMatchingItemIndex < matchingItems.length - 1\n          ? matchingItems[highlightedMatchingItemIndex + 1]\n          : matchingItems[0],\n      );\n\n      this.setHighlightIndex(nextHighlightedItemIndex);\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    isValidLetter (key) {\n      if (key.length > 1) {\n        return false;\n      }\n\n      return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');\n    },\n\n    jumpToBeginning () {\n      this.setHighlightIndex(0);\n    },\n\n    jumpToEnd () {\n      this.setHighlightIndex(this._itemsLength() - 1);\n    },\n\n    setHighlightIndex (num) {\n      this[indexKey] = num;\n      this[idKey] = this._getItemId(num);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](num);\n      }\n    },\n\n    setHighlightId (id) {\n      this[idKey] = id;\n      this[indexKey] = this._getItemIndex(id);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](this._getItemIndex(id));\n      }\n    },\n\n    _getItemIndex (id) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      const listItems = Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n      return listItems.indexOf(listElement.querySelector(`#${id}`));\n    },\n\n    _getItemId (index) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      return listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`)[index]?.id;\n    },\n\n    scrollActiveItemIntoViewIfNeeded () {\n      if (!this.scrollToOnHighlight) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        // When listElementKey is not passed,\n        // scrollElementIntoViewIfNeeded will default to the immediate wrapper of the item.\n        const listElement = this._getListElement();\n        this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);\n      }\n    },\n\n    focusActiveItemIfNeeded () {\n      if (!this.focusOnKeyboardNavigation) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        activeItemEl.focus();\n      }\n    },\n  },\n});\n"],"names":["ERROR_INVALID_LIST_ELEMENT","KeyboardNavigation","listItemRole","indexKey","idKey","listElementKey","activeItemKey","openMethod","afterHighlightMethod","beginningOfListMethod","endOfListMethod","scrollToOnHighlight","focusOnKeyboardNavigation","Dom","returnFirstEl","_a","listItems","listElement","key","matchingItems","item","highlightedMatchingItemIndex","nextHighlightedItemIndex","num","id","index","activeItemEl"],"mappings":"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"}

package/dist/vue3/common/mixins/keyboard-list-navigation.js

@@ -0,0 +1,127 @@
+import E from "./dom.js";
+import { returnFirstEl as N } from "../utils/index.js";
+const _ = "listElementKey is required or the referenced element doesn't exist. Received listElement: ", x = ({
+  // Role of the list items in the component. This is used to identify the list items
+  // so you must update this if the role of your list items is anything other than 'option'
+  listItemRole: o = "option",
+  // Key of the data prop that will be added to the component.
+  indexKey: s = "highlightIndex",
+  idKey: n = "highlightId",
+  // Key of the method that references the list element.
+  listElementKey: I = "listRef",
+  // Optional, Key of the computed prop that references the currently active item element.
+  activeItemKey: c = "",
+  // Optional, name of the method that toggles the list visibility. Used for
+  // opening the list when up or down is pressed.
+  openMethod: l = null,
+  // Optional, method to call when the highlightIndex is changed.
+  afterHighlightMethod: r = null,
+  // Optional, method to call when the highlightIndex goes past the beginning of the list.
+  beginningOfListMethod: m = null,
+  // Optional, method to call when the highlightIndex goes past the end of the list.
+  endOfListMethod: g = null,
+  // Scroll the active element into view when highlighted by a keyboard event.
+  scrollToOnHighlight: f = !0,
+  // Focus the active element on keyboard navigation.
+  focusOnKeyboardNavigation: d = !1
+} = {}) => ({
+  mixins: [E],
+  data() {
+    return {
+      [s]: -1,
+      [n]: "",
+      scrollToOnHighlight: f,
+      focusOnKeyboardNavigation: d
+    };
+  },
+  provide() {
+    return {
+      highlightId: () => this[n]
+    };
+  },
+  methods: {
+    // Returns the list element
+    // this[listElement]() can return a Vue component, in which case we need to target
+    // the $el property, or it can simply be an html element.
+    _getListElement() {
+      var t;
+      return N((t = this[I]()) == null ? void 0 : t.$el) || this[I]();
+    },
+    // Gets the length of all the items in the list, uses the listItemRole param to determine
+    // whether an element is a list item.
+    _itemsLength() {
+      const t = this._getListItemNodes();
+      return t === null ? 0 : t.length;
+    },
+    // Gets all the list item nodes within the list element
+    _getListItemNodes() {
+      const t = this._getListElement();
+      return t ? Array.from(t.querySelectorAll(`[role="${o}"], #sr-only-close-button`)) : (console.error(_, t), null);
+    },
+    onUpKey() {
+      l && this[l](!0), this[s] > 0 ? this.setHighlightIndex(this[s] - 1) : m && this[m](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
+    },
+    onDownKey() {
+      l && this[l](!0), this[s] < this._itemsLength() - 1 ? this.setHighlightIndex(this[s] + 1) : g && this[g](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
+    },
+    onHomeKey() {
+      this.jumpToBeginning(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
+    },
+    onEndKey() {
+      this.jumpToEnd(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
+    },
+    onNavigationKey(t) {
+      const e = this._getListItemNodes(), i = e.filter((h) => h.textContent.trim().toLowerCase().startsWith(t.toLowerCase()));
+      if (i.length <= 0)
+        return;
+      const u = i.findIndex((h) => this[s] === e.indexOf(h)), a = e.indexOf(
+        u < i.length - 1 ? i[u + 1] : i[0]
+      );
+      this.setHighlightIndex(a), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
+    },
+    isValidLetter(t) {
+      return t.length > 1 ? !1 : t >= "a" && t <= "z" || t >= "A" && t <= "Z";
+    },
+    jumpToBeginning() {
+      this.setHighlightIndex(0);
+    },
+    jumpToEnd() {
+      this.setHighlightIndex(this._itemsLength() - 1);
+    },
+    setHighlightIndex(t) {
+      this[s] = t, this[n] = this._getItemId(t), this._itemsLength() && r && this[r](t);
+    },
+    setHighlightId(t) {
+      this[n] = t, this[s] = this._getItemIndex(t), this._itemsLength() && r && this[r](this._getItemIndex(t));
+    },
+    _getItemIndex(t) {
+      const e = this._getListElement();
+      return e ? Array.from(e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)).indexOf(e.querySelector(`#${t}`)) : void 0;
+    },
+    _getItemId(t) {
+      var i;
+      const e = this._getListElement();
+      if (e)
+        return (i = e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)[t]) == null ? void 0 : i.id;
+    },
+    scrollActiveItemIntoViewIfNeeded() {
+      if (!this.scrollToOnHighlight)
+        return;
+      const t = this[c];
+      if (t) {
+        const e = this._getListElement();
+        this.scrollElementIntoViewIfNeeded(t, null, null, e);
+      }
+    },
+    focusActiveItemIfNeeded() {
+      if (!this.focusOnKeyboardNavigation)
+        return;
+      const t = this[c];
+      t && t.focus();
+    }
+  }
+});
+export {
+  x as default
+};
+//# sourceMappingURL=keyboard-list-navigation.js.map

package/dist/vue3/common/mixins/keyboard-list-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-list-navigation.js","sources":["../../../common/mixins/keyboard_list_navigation.js"],"sourcesContent":["import Dom from './dom';\nimport { returnFirstEl } from '@/common/utils';\n\nconst ERROR_INVALID_LIST_ELEMENT = (\n  'listElementKey is required or the referenced ' +\n  'element doesn\\'t exist. Received listElement: '\n);\n\n/**\n * Usage: `mixins: [keyboardNavigationMixin(options)]`\n *\n * This mixin provides some common data and methods to navigate a list of items\n * (such as a dropdown or select menu) by keyboard.\n *\n * To be effective, you must bind the onUpKey and onDownKey events, usually to\n * the root element of the component.\n *\n * @param listItemRole\n * @param indexKey\n * @param idKey\n * @param listElementKey\n * @param activeItemKey\n * @param openMethod\n * @param afterHighlightMethod\n * @param beginningOfListMethod\n * @param endOfListMethod\n * @param scrollToOnHighlight\n * @param focusOnKeyboardNavigation\n * @displayName Keyboard Navigation Mixin\n */\nexport default ({\n  // Role of the list items in the component. This is used to identify the list items\n  // so you must update this if the role of your list items is anything other than 'option'\n  listItemRole = 'option',\n  // Key of the data prop that will be added to the component.\n  indexKey = 'highlightIndex',\n  idKey = 'highlightId',\n  // Key of the method that references the list element.\n  listElementKey = 'listRef',\n  // Optional, Key of the computed prop that references the currently active item element.\n  activeItemKey = '',\n  // Optional, name of the method that toggles the list visibility. Used for\n  // opening the list when up or down is pressed.\n  openMethod = null,\n  // Optional, method to call when the highlightIndex is changed.\n  afterHighlightMethod = null,\n  // Optional, method to call when the highlightIndex goes past the beginning of the list.\n  beginningOfListMethod = null,\n  // Optional, method to call when the highlightIndex goes past the end of the list.\n  endOfListMethod = null,\n  // Scroll the active element into view when highlighted by a keyboard event.\n  scrollToOnHighlight = true,\n  // Focus the active element on keyboard navigation.\n  focusOnKeyboardNavigation = false,\n} = {}) => ({\n  mixins: [Dom],\n\n  data () {\n    return {\n      [indexKey]: -1,\n      [idKey]: '',\n      scrollToOnHighlight,\n      focusOnKeyboardNavigation,\n    };\n  },\n\n  provide () {\n    return {\n      highlightId: () => this[idKey],\n    };\n  },\n\n  methods: {\n    // Returns the list element\n    // this[listElement]() can return a Vue component, in which case we need to target\n    // the $el property, or it can simply be an html element.\n    _getListElement () {\n      return returnFirstEl(this[listElementKey]()?.$el) || this[listElementKey]();\n    },\n\n    // Gets the length of all the items in the list, uses the listItemRole param to determine\n    // whether an element is a list item.\n    _itemsLength () {\n      const listItems = this._getListItemNodes();\n\n      if (listItems === null) {\n        return 0;\n      }\n\n      return listItems.length;\n    },\n\n    // Gets all the list item nodes within the list element\n    _getListItemNodes () {\n      const listElement = this._getListElement();\n\n      if (!listElement) {\n        console.error(ERROR_INVALID_LIST_ELEMENT, listElement);\n        return null;\n      }\n\n      return Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n    },\n\n    onUpKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] > 0) {\n        this.setHighlightIndex(this[indexKey] - 1);\n      } else if (beginningOfListMethod) {\n        this[beginningOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onDownKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] < this._itemsLength() - 1) {\n        this.setHighlightIndex(this[indexKey] + 1);\n      } else if (endOfListMethod) {\n        this[endOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onHomeKey () {\n      this.jumpToBeginning();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onEndKey () {\n      this.jumpToEnd();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onNavigationKey (key) {\n      const listItems = this._getListItemNodes();\n\n      const matchingItems = listItems.filter(item => {\n        const content = item.textContent.trim().toLowerCase();\n        return content.startsWith(key.toLowerCase());\n      });\n\n      if (matchingItems.length <= 0) {\n        return;\n      }\n\n      const highlightedMatchingItemIndex = matchingItems.findIndex(item => {\n        return this[indexKey] === listItems.indexOf(item);\n      });\n\n      const nextHighlightedItemIndex = listItems.indexOf(\n        highlightedMatchingItemIndex < matchingItems.length - 1\n          ? matchingItems[highlightedMatchingItemIndex + 1]\n          : matchingItems[0],\n      );\n\n      this.setHighlightIndex(nextHighlightedItemIndex);\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    isValidLetter (key) {\n      if (key.length > 1) {\n        return false;\n      }\n\n      return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');\n    },\n\n    jumpToBeginning () {\n      this.setHighlightIndex(0);\n    },\n\n    jumpToEnd () {\n      this.setHighlightIndex(this._itemsLength() - 1);\n    },\n\n    setHighlightIndex (num) {\n      this[indexKey] = num;\n      this[idKey] = this._getItemId(num);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](num);\n      }\n    },\n\n    setHighlightId (id) {\n      this[idKey] = id;\n      this[indexKey] = this._getItemIndex(id);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](this._getItemIndex(id));\n      }\n    },\n\n    _getItemIndex (id) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      const listItems = Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n      return listItems.indexOf(listElement.querySelector(`#${id}`));\n    },\n\n    _getItemId (index) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      return listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`)[index]?.id;\n    },\n\n    scrollActiveItemIntoViewIfNeeded () {\n      if (!this.scrollToOnHighlight) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        // When listElementKey is not passed,\n        // scrollElementIntoViewIfNeeded will default to the immediate wrapper of the item.\n        const listElement = this._getListElement();\n        this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);\n      }\n    },\n\n    focusActiveItemIfNeeded () {\n      if (!this.focusOnKeyboardNavigation) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        activeItemEl.focus();\n      }\n    },\n  },\n});\n"],"names":["ERROR_INVALID_LIST_ELEMENT","KeyboardNavigation","listItemRole","indexKey","idKey","listElementKey","activeItemKey","openMethod","afterHighlightMethod","beginningOfListMethod","endOfListMethod","scrollToOnHighlight","focusOnKeyboardNavigation","Dom","returnFirstEl","_a","listItems","listElement","key","matchingItems","item","highlightedMatchingItemIndex","nextHighlightedItemIndex","num","id","index","activeItemEl"],"mappings":"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"}

package/dist/vue3/common/mixins/modal.cjs

@@ -1,107 +1,2 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const common_utils = require("../utils.cjs");
-const focusableAttrs = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])';
-const tabbableAttrs = `${focusableAttrs}:not([tabindex="-1"])`;
-const focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;
-const Modal = {
-  methods: {
-    /**
-     * get the first focusable element in your component, includes tabindex="-1".
-     * @param {object} el - optional - ref of dom element to trap focus on.
-     *  will default to the root node of the vue component
-     */
-    async getFirstFocusableElement(el) {
-      await this.$nextTick();
-      const focusableElements = this._getFocusableElements(el, true);
-      return this._getFirstFocusElement(focusableElements);
-    },
-    /**
-     * set focus to the first focusable element in your component, includes tabindex="-1".
-     * @param {object} el - optional - ref of dom element to trap focus on.
-     *  will default to the root node of the vue component
-     */
-    async focusFirstElement(el = this.$el) {
-      const elToFocus = await this.getFirstFocusableElement(common_utils.returnFirstEl(el));
-      elToFocus == null ? void 0 : elToFocus.focus({ preventScroll: true });
-    },
-    async focusElementById(elementId) {
-      var _a;
-      await this.$nextTick();
-      const result = (_a = common_utils.returnFirstEl(this.$el)) == null ? void 0 : _a.querySelector(elementId);
-      if (result) {
-        result.focus();
-        return;
-      }
-      console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.');
-      await this.focusFirstElement();
-    },
-    /**
-     * internal use only.
-     *
-     * @param focusableElements - list of focusable elements
-     * @returns {*} - first DOM element that is focusable.
-     * @private
-     */
-    _getFirstFocusElement(focusableElements) {
-      if (!focusableElements.length) {
-        return;
-      }
-      let firstFocusEl = focusableElements[0];
-      if (firstFocusEl.matches('[type="radio"]:not(:checked)')) {
-        firstFocusEl = focusableElements.find((el) => el.checked && el.name === firstFocusEl.name) || firstFocusEl;
-      }
-      return firstFocusEl;
-    },
-    /**
-     * internal use only.
-     *
-     * gets all the focusable elements within the component
-     * and sets the first and last of those elements.
-     *
-     * @param {object} el - the root dom element to find focusable elements in.
-     * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
-     */
-    _getFocusableElements(el = this.$el, includeNegativeTabIndex = false) {
-      el = common_utils.returnFirstEl(el);
-      if (!el) return [];
-      const focusableContent = [...el.querySelectorAll(focusableElementsList)];
-      return focusableContent.filter((fc) => {
-        const style = window.getComputedStyle(fc);
-        return style.getPropertyValue("display") !== "none" && style.getPropertyValue("visibility") !== "hidden" && fc.matches(includeNegativeTabIndex ? focusableAttrs : tabbableAttrs);
-      });
-    },
-    /**
-     * tabs to the next element contained within your component, does not include tabindex="-1".
-     * @param {object} e - keypress event
-     * @param {object} el - optional - ref of dom element to trap focus on.
-     *  will default to the root node of the vue component
-     */
-    focusTrappedTabPress(e, el) {
-      const isTabPressed = e.key === "Tab";
-      if (!isTabPressed) {
-        return;
-      }
-      const focusableElements = this._getFocusableElements(el);
-      if (!focusableElements.length) {
-        e.preventDefault();
-        return;
-      }
-      const firstFocusableElement = this._getFirstFocusElement(focusableElements);
-      const lastFocusableElement = focusableElements[focusableElements.length - 1];
-      if (e.shiftKey) {
-        if (document.activeElement === firstFocusableElement) {
-          lastFocusableElement.focus();
-          e.preventDefault();
-        }
-      } else {
-        if (document.activeElement === lastFocusableElement) {
-          firstFocusableElement.focus();
-          e.preventDefault();
-        }
-      }
-    }
-  }
-};
-exports.default = Modal;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../utils/index.cjs"),o=':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])',a=`${o}:not([tabindex="-1"])`,u="button,[href],input,select,textarea,details,[tabindex]",c={methods:{async getFirstFocusableElement(e){await this.$nextTick();const t=this._getFocusableElements(e,!0);return this._getFirstFocusElement(t)},async focusFirstElement(e=this.$el){const t=await this.getFirstFocusableElement(r.returnFirstEl(e));t==null||t.focus({preventScroll:!0})},async focusElementById(e){var s;await this.$nextTick();const t=(s=r.returnFirstEl(this.$el))==null?void 0:s.querySelector(e);if(t){t.focus();return}console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.'),await this.focusFirstElement()},_getFirstFocusElement(e){if(!e.length)return;let t=e[0];return t.matches('[type="radio"]:not(:checked)')&&(t=e.find(s=>s.checked&&s.name===t.name)||t),t},_getFocusableElements(e=this.$el,t=!1){return e=r.returnFirstEl(e),e?[...e.querySelectorAll(u)].filter(n=>{const i=window.getComputedStyle(n);return i.getPropertyValue("display")!=="none"&&i.getPropertyValue("visibility")!=="hidden"&&n.matches(t?o:a)}):[]},focusTrappedTabPress(e,t){if(!(e.key==="Tab"))return;const n=this._getFocusableElements(t);if(!n.length){e.preventDefault();return}const i=this._getFirstFocusElement(n),l=n[n.length-1];e.shiftKey?document.activeElement===i&&(l.focus(),e.preventDefault()):document.activeElement===l&&(i.focus(),e.preventDefault())}}};exports.default=c;
 //# sourceMappingURL=modal.cjs.map

package/dist/vue3/common/mixins/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs","sources":["../../../common/mixins/modal.js"],"sourcesContent":["import { returnFirstEl } from '@/common/utils';\n\nconst focusableAttrs = ':not(:disabled):not([aria-disabled=\"true\"]):not([role=\"presentation\"])';\nconst tabbableAttrs = `${focusableAttrs}:not([tabindex=\"-1\"])`;\nconst focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;\n\n/**\n * This mixin provides the methods to automatically trap tab focus within\n * the component this mixin is on, meaning it is not possible to tab out\n * of the component without dismissing it.\n *\n * Useful for accessibility reasons on things like important actionable alerts.\n *\n * Use focusFirstElement to focus on the first tabbable element within your component, and call\n * focusTrappedTabPress every time tab is pressed to trap tab within this\n * component.\n *\n * Note that focusFirstElement WILL focus elements with tabindex=\"-1\",\n * however focusTrappedTabPress will not.\n * @displayName Modal Mixin\n */\nexport default {\n  methods: {\n    /**\n     * get the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async getFirstFocusableElement (el) {\n      await this.$nextTick();\n      const focusableElements = this._getFocusableElements(el, true);\n      return this._getFirstFocusElement(focusableElements);\n    },\n\n    /**\n     * set focus to the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async focusFirstElement (el = this.$el) {\n      const elToFocus = await this.getFirstFocusableElement(returnFirstEl(el));\n      elToFocus?.focus({ preventScroll: true });\n    },\n\n    async focusElementById (elementId) {\n      await this.$nextTick();\n      const result = returnFirstEl(this.$el)?.querySelector(elementId);\n      if (result) {\n        result.focus();\n        return;\n      }\n\n      // eslint-disable-next-line no-console\n      console.warn('Could not find the element specified in dt-modal prop \"initialFocusElement\". ' +\n        'Defaulting to focusing the first element.');\n      await this.focusFirstElement();\n    },\n\n    /**\n     * internal use only.\n     *\n     * @param focusableElements - list of focusable elements\n     * @returns {*} - first DOM element that is focusable.\n     * @private\n     */\n    _getFirstFocusElement (focusableElements) {\n      if (!focusableElements.length) {\n        return;\n      }\n      let firstFocusEl = focusableElements[0];\n      // If first element is a checkbox, put focus on the selected checkbox or the first checkbox if none are selected.\n      if (firstFocusEl.matches('[type=\"radio\"]:not(:checked)')) {\n        firstFocusEl = focusableElements.find(el => el.checked && el.name === firstFocusEl.name) || firstFocusEl;\n      }\n      return firstFocusEl;\n    },\n\n    /**\n     * internal use only.\n     *\n     * gets all the focusable elements within the component\n     * and sets the first and last of those elements.\n     *\n     * @param {object} el - the root dom element to find focusable elements in.\n     * @param {bool} includeNegativeTabIndex - will include tabindex=\"-1\" in the list of focusable elements.\n     */\n    _getFocusableElements (el = this.$el, includeNegativeTabIndex = false) {\n      el = returnFirstEl(el);\n      if (!el) return [];\n      const focusableContent = [...el.querySelectorAll(focusableElementsList)];\n      return focusableContent.filter((fc) => {\n        const style = window.getComputedStyle(fc);\n        return style.getPropertyValue('display') !== 'none' &&\n          style.getPropertyValue('visibility') !== 'hidden' &&\n          fc.matches(includeNegativeTabIndex ? focusableAttrs : tabbableAttrs);\n      });\n    },\n\n    /**\n     * tabs to the next element contained within your component, does not include tabindex=\"-1\".\n     * @param {object} e - keypress event\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    focusTrappedTabPress (e, el) {\n      const isTabPressed = e.key === 'Tab';\n\n      if (!isTabPressed) {\n        return;\n      }\n\n      const focusableElements = this._getFocusableElements(el);\n      if (!focusableElements.length) {\n        e.preventDefault();\n        return;\n      }\n\n      const firstFocusableElement = this._getFirstFocusElement(focusableElements);\n      const lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          lastFocusableElement.focus();\n          e.preventDefault();\n        }\n      } else {\n        if (document.activeElement === lastFocusableElement) {\n          firstFocusableElement.focus();\n          e.preventDefault();\n        }\n      }\n    },\n  },\n};\n"],"names":["returnFirstEl"],"mappings":";;;AAEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB,GAAG,cAAc;AACvC,MAAM,wBAAwB;AAiB9B,MAAe,QAAA;AAAA,EACb,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMP,MAAM,yBAA0B,IAAI;AAClC,YAAM,KAAK;AACX,YAAM,oBAAoB,KAAK,sBAAsB,IAAI,IAAI;AAC7D,aAAO,KAAK,sBAAsB,iBAAiB;AAAA,IACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM,kBAAmB,KAAK,KAAK,KAAK;AACtC,YAAM,YAAY,MAAM,KAAK,yBAAyBA,aAAa,cAAC,EAAE,CAAC;AACvE,6CAAW,MAAM,EAAE,eAAe,KAAM;AAAA,IACzC;AAAA,IAED,MAAM,iBAAkB,WAAW;;AACjC,YAAM,KAAK;AACX,YAAM,UAASA,kBAAAA,cAAc,KAAK,GAAG,MAAtBA,mBAAyB,cAAc;AACtD,UAAI,QAAQ;AACV,eAAO,MAAK;AACZ;AAAA,MACD;AAGD,cAAQ,KAAK,wHACgC;AAC7C,YAAM,KAAK;IACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,sBAAuB,mBAAmB;AACxC,UAAI,CAAC,kBAAkB,QAAQ;AAC7B;AAAA,MACD;AACD,UAAI,eAAe,kBAAkB,CAAC;AAEtC,UAAI,aAAa,QAAQ,8BAA8B,GAAG;AACxD,uBAAe,kBAAkB,KAAK,QAAM,GAAG,WAAW,GAAG,SAAS,aAAa,IAAI,KAAK;AAAA,MAC7F;AACD,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWD,sBAAuB,KAAK,KAAK,KAAK,0BAA0B,OAAO;AACrE,WAAKA,aAAAA,cAAc,EAAE;AACrB,UAAI,CAAC,GAAI,QAAO;AAChB,YAAM,mBAAmB,CAAC,GAAG,GAAG,iBAAiB,qBAAqB,CAAC;AACvE,aAAO,iBAAiB,OAAO,CAAC,OAAO;AACrC,cAAM,QAAQ,OAAO,iBAAiB,EAAE;AACxC,eAAO,MAAM,iBAAiB,SAAS,MAAM,UAC3C,MAAM,iBAAiB,YAAY,MAAM,YACzC,GAAG,QAAQ,0BAA0B,iBAAiB,aAAa;AAAA,MAC7E,CAAO;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,qBAAsB,GAAG,IAAI;AAC3B,YAAM,eAAe,EAAE,QAAQ;AAE/B,UAAI,CAAC,cAAc;AACjB;AAAA,MACD;AAED,YAAM,oBAAoB,KAAK,sBAAsB,EAAE;AACvD,UAAI,CAAC,kBAAkB,QAAQ;AAC7B,UAAE,eAAc;AAChB;AAAA,MACD;AAED,YAAM,wBAAwB,KAAK,sBAAsB,iBAAiB;AAC1E,YAAM,uBAAuB,kBAAkB,kBAAkB,SAAS,CAAC;AAE3E,UAAI,EAAE,UAAU;AACd,YAAI,SAAS,kBAAkB,uBAAuB;AACpD,+BAAqB,MAAK;AAC1B,YAAE,eAAc;AAAA,QACjB;AAAA,MACT,OAAa;AACL,YAAI,SAAS,kBAAkB,sBAAsB;AACnD,gCAAsB,MAAK;AAC3B,YAAE,eAAc;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACH;;"}
+{"version":3,"file":"modal.cjs","sources":["../../../common/mixins/modal.js"],"sourcesContent":["import { returnFirstEl } from '@/common/utils';\n\nconst focusableAttrs = ':not(:disabled):not([aria-disabled=\"true\"]):not([role=\"presentation\"])';\nconst tabbableAttrs = `${focusableAttrs}:not([tabindex=\"-1\"])`;\nconst focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;\n\n/**\n * This mixin provides the methods to automatically trap tab focus within\n * the component this mixin is on, meaning it is not possible to tab out\n * of the component without dismissing it.\n *\n * Useful for accessibility reasons on things like important actionable alerts.\n *\n * Use focusFirstElement to focus on the first tabbable element within your component, and call\n * focusTrappedTabPress every time tab is pressed to trap tab within this\n * component.\n *\n * Note that focusFirstElement WILL focus elements with tabindex=\"-1\",\n * however focusTrappedTabPress will not.\n * @displayName Modal Mixin\n */\nexport default {\n  methods: {\n    /**\n     * get the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async getFirstFocusableElement (el) {\n      await this.$nextTick();\n      const focusableElements = this._getFocusableElements(el, true);\n      return this._getFirstFocusElement(focusableElements);\n    },\n\n    /**\n     * set focus to the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async focusFirstElement (el = this.$el) {\n      const elToFocus = await this.getFirstFocusableElement(returnFirstEl(el));\n      elToFocus?.focus({ preventScroll: true });\n    },\n\n    async focusElementById (elementId) {\n      await this.$nextTick();\n      const result = returnFirstEl(this.$el)?.querySelector(elementId);\n      if (result) {\n        result.focus();\n        return;\n      }\n\n      // eslint-disable-next-line no-console\n      console.warn('Could not find the element specified in dt-modal prop \"initialFocusElement\". ' +\n        'Defaulting to focusing the first element.');\n      await this.focusFirstElement();\n    },\n\n    /**\n     * internal use only.\n     *\n     * @param focusableElements - list of focusable elements\n     * @returns {*} - first DOM element that is focusable.\n     * @private\n     */\n    _getFirstFocusElement (focusableElements) {\n      if (!focusableElements.length) {\n        return;\n      }\n      let firstFocusEl = focusableElements[0];\n      // If first element is a checkbox, put focus on the selected checkbox or the first checkbox if none are selected.\n      if (firstFocusEl.matches('[type=\"radio\"]:not(:checked)')) {\n        firstFocusEl = focusableElements.find(el => el.checked && el.name === firstFocusEl.name) || firstFocusEl;\n      }\n      return firstFocusEl;\n    },\n\n    /**\n     * internal use only.\n     *\n     * gets all the focusable elements within the component\n     * and sets the first and last of those elements.\n     *\n     * @param {object} el - the root dom element to find focusable elements in.\n     * @param {bool} includeNegativeTabIndex - will include tabindex=\"-1\" in the list of focusable elements.\n     */\n    _getFocusableElements (el = this.$el, includeNegativeTabIndex = false) {\n      el = returnFirstEl(el);\n      if (!el) return [];\n      const focusableContent = [...el.querySelectorAll(focusableElementsList)];\n      return focusableContent.filter((fc) => {\n        const style = window.getComputedStyle(fc);\n        return style.getPropertyValue('display') !== 'none' &&\n          style.getPropertyValue('visibility') !== 'hidden' &&\n          fc.matches(includeNegativeTabIndex ? focusableAttrs : tabbableAttrs);\n      });\n    },\n\n    /**\n     * tabs to the next element contained within your component, does not include tabindex=\"-1\".\n     * @param {object} e - keypress event\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    focusTrappedTabPress (e, el) {\n      const isTabPressed = e.key === 'Tab';\n\n      if (!isTabPressed) {\n        return;\n      }\n\n      const focusableElements = this._getFocusableElements(el);\n      if (!focusableElements.length) {\n        e.preventDefault();\n        return;\n      }\n\n      const firstFocusableElement = this._getFirstFocusElement(focusableElements);\n      const lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          lastFocusableElement.focus();\n          e.preventDefault();\n        }\n      } else {\n        if (document.activeElement === lastFocusableElement) {\n          firstFocusableElement.focus();\n          e.preventDefault();\n        }\n      }\n    },\n  },\n};\n"],"names":["focusableAttrs","tabbableAttrs","focusableElementsList","Modal","el","focusableElements","elToFocus","returnFirstEl","elementId","result","firstFocusEl","includeNegativeTabIndex","fc","style","firstFocusableElement","lastFocusableElement"],"mappings":"kJAEMA,EAAiB,yEACjBC,EAAgB,GAAGD,CAAc,wBACjCE,EAAwB,yDAiBfC,EAAA,CACb,QAAS,CAMP,MAAM,yBAA0BC,EAAI,CAClC,MAAM,KAAK,YACX,MAAMC,EAAoB,KAAK,sBAAsBD,EAAI,EAAI,EAC7D,OAAO,KAAK,sBAAsBC,CAAiB,CACpD,EAOD,MAAM,kBAAmBD,EAAK,KAAK,IAAK,CACtC,MAAME,EAAY,MAAM,KAAK,yBAAyBC,EAAa,cAACH,CAAE,CAAC,EACvEE,GAAA,MAAAA,EAAW,MAAM,CAAE,cAAe,EAAM,EACzC,EAED,MAAM,iBAAkBE,EAAW,OACjC,MAAM,KAAK,YACX,MAAMC,GAASF,EAAAA,EAAAA,cAAc,KAAK,GAAG,IAAtBA,YAAAA,EAAyB,cAAcC,GACtD,GAAIC,EAAQ,CACVA,EAAO,MAAK,EACZ,MACD,CAGD,QAAQ,KAAK,wHACgC,EAC7C,MAAM,KAAK,mBACZ,EASD,sBAAuBJ,EAAmB,CACxC,GAAI,CAACA,EAAkB,OACrB,OAEF,IAAIK,EAAeL,EAAkB,CAAC,EAEtC,OAAIK,EAAa,QAAQ,8BAA8B,IACrDA,EAAeL,EAAkB,KAAKD,GAAMA,EAAG,SAAWA,EAAG,OAASM,EAAa,IAAI,GAAKA,GAEvFA,CACR,EAWD,sBAAuBN,EAAK,KAAK,IAAKO,EAA0B,GAAO,CAErE,OADAP,EAAKG,EAAAA,cAAcH,CAAE,EAChBA,EACoB,CAAC,GAAGA,EAAG,iBAAiBF,CAAqB,CAAC,EAC/C,OAAQU,GAAO,CACrC,MAAMC,EAAQ,OAAO,iBAAiBD,CAAE,EACxC,OAAOC,EAAM,iBAAiB,SAAS,IAAM,QAC3CA,EAAM,iBAAiB,YAAY,IAAM,UACzCD,EAAG,QAAQD,EAA0BX,EAAiBC,CAAa,CAC7E,CAAO,EAPe,EAQjB,EAQD,qBAAsB,EAAGG,EAAI,CAG3B,GAAI,EAFiB,EAAE,MAAQ,OAG7B,OAGF,MAAMC,EAAoB,KAAK,sBAAsBD,CAAE,EACvD,GAAI,CAACC,EAAkB,OAAQ,CAC7B,EAAE,eAAc,EAChB,MACD,CAED,MAAMS,EAAwB,KAAK,sBAAsBT,CAAiB,EACpEU,EAAuBV,EAAkBA,EAAkB,OAAS,CAAC,EAEvE,EAAE,SACA,SAAS,gBAAkBS,IAC7BC,EAAqB,MAAK,EAC1B,EAAE,eAAc,GAGd,SAAS,gBAAkBA,IAC7BD,EAAsB,MAAK,EAC3B,EAAE,eAAc,EAGrB,CACF,CACH"}

package/dist/vue3/common/mixins/modal.js

@@ -1,38 +1,34 @@
-import { returnFirstEl } from "../utils.js";
-const focusableAttrs = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])';
-const tabbableAttrs = `${focusableAttrs}:not([tabindex="-1"])`;
-const focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;
-const Modal = {
+import { returnFirstEl as o } from "../utils/index.js";
+const r = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', a = `${r}:not([tabindex="-1"])`, c = "button,[href],input,select,textarea,details,[tabindex]", f = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
      * @param {object} el - optional - ref of dom element to trap focus on.
      *  will default to the root node of the vue component
      */
-    async getFirstFocusableElement(el) {
+    async getFirstFocusableElement(e) {
       await this.$nextTick();
-      const focusableElements = this._getFocusableElements(el, true);
-      return this._getFirstFocusElement(focusableElements);
+      const t = this._getFocusableElements(e, !0);
+      return this._getFirstFocusElement(t);
     },
     /**
      * set focus to the first focusable element in your component, includes tabindex="-1".
      * @param {object} el - optional - ref of dom element to trap focus on.
      *  will default to the root node of the vue component
      */
-    async focusFirstElement(el = this.$el) {
-      const elToFocus = await this.getFirstFocusableElement(returnFirstEl(el));
-      elToFocus == null ? void 0 : elToFocus.focus({ preventScroll: true });
+    async focusFirstElement(e = this.$el) {
+      const t = await this.getFirstFocusableElement(o(e));
+      t == null || t.focus({ preventScroll: !0 });
     },
-    async focusElementById(elementId) {
-      var _a;
+    async focusElementById(e) {
+      var s;
       await this.$nextTick();
-      const result = (_a = returnFirstEl(this.$el)) == null ? void 0 : _a.querySelector(elementId);
-      if (result) {
-        result.focus();
+      const t = (s = o(this.$el)) == null ? void 0 : s.querySelector(e);
+      if (t) {
+        t.focus();
         return;
       }
-      console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.');
-      await this.focusFirstElement();
+      console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.'), await this.focusFirstElement();
     },
     /**
      * internal use only.
@@ -41,15 +37,11 @@ const Modal = {
      * @returns {*} - first DOM element that is focusable.
      * @private
      */
-    _getFirstFocusElement(focusableElements) {
-      if (!focusableElements.length) {
+    _getFirstFocusElement(e) {
+      if (!e.length)
         return;
-      }
-      let firstFocusEl = focusableElements[0];
-      if (firstFocusEl.matches('[type="radio"]:not(:checked)')) {
-        firstFocusEl = focusableElements.find((el) => el.checked && el.name === firstFocusEl.name) || firstFocusEl;
-      }
-      return firstFocusEl;
+      let t = e[0];
+      return t.matches('[type="radio"]:not(:checked)') && (t = e.find((s) => s.checked && s.name === t.name) || t), t;
     },
     /**
      * internal use only.
@@ -60,14 +52,11 @@ const Modal = {
      * @param {object} el - the root dom element to find focusable elements in.
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
-    _getFocusableElements(el = this.$el, includeNegativeTabIndex = false) {
-      el = returnFirstEl(el);
-      if (!el) return [];
-      const focusableContent = [...el.querySelectorAll(focusableElementsList)];
-      return focusableContent.filter((fc) => {
-        const style = window.getComputedStyle(fc);
-        return style.getPropertyValue("display") !== "none" && style.getPropertyValue("visibility") !== "hidden" && fc.matches(includeNegativeTabIndex ? focusableAttrs : tabbableAttrs);
-      });
+    _getFocusableElements(e = this.$el, t = !1) {
+      return e = o(e), e ? [...e.querySelectorAll(c)].filter((n) => {
+        const i = window.getComputedStyle(n);
+        return i.getPropertyValue("display") !== "none" && i.getPropertyValue("visibility") !== "hidden" && n.matches(t ? r : a);
+      }) : [];
     },
     /**
      * tabs to the next element contained within your component, does not include tabindex="-1".
@@ -75,33 +64,20 @@ const Modal = {
      * @param {object} el - optional - ref of dom element to trap focus on.
      *  will default to the root node of the vue component
      */
-    focusTrappedTabPress(e, el) {
-      const isTabPressed = e.key === "Tab";
-      if (!isTabPressed) {
+    focusTrappedTabPress(e, t) {
+      if (!(e.key === "Tab"))
         return;
-      }
-      const focusableElements = this._getFocusableElements(el);
-      if (!focusableElements.length) {
+      const n = this._getFocusableElements(t);
+      if (!n.length) {
         e.preventDefault();
         return;
       }
-      const firstFocusableElement = this._getFirstFocusElement(focusableElements);
-      const lastFocusableElement = focusableElements[focusableElements.length - 1];
-      if (e.shiftKey) {
-        if (document.activeElement === firstFocusableElement) {
-          lastFocusableElement.focus();
-          e.preventDefault();
-        }
-      } else {
-        if (document.activeElement === lastFocusableElement) {
-          firstFocusableElement.focus();
-          e.preventDefault();
-        }
-      }
+      const i = this._getFirstFocusElement(n), l = n[n.length - 1];
+      e.shiftKey ? document.activeElement === i && (l.focus(), e.preventDefault()) : document.activeElement === l && (i.focus(), e.preventDefault());
     }
   }
 };
 export {
-  Modal as default
+  f as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/vue3/common/mixins/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../common/mixins/modal.js"],"sourcesContent":["import { returnFirstEl } from '@/common/utils';\n\nconst focusableAttrs = ':not(:disabled):not([aria-disabled=\"true\"]):not([role=\"presentation\"])';\nconst tabbableAttrs = `${focusableAttrs}:not([tabindex=\"-1\"])`;\nconst focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;\n\n/**\n * This mixin provides the methods to automatically trap tab focus within\n * the component this mixin is on, meaning it is not possible to tab out\n * of the component without dismissing it.\n *\n * Useful for accessibility reasons on things like important actionable alerts.\n *\n * Use focusFirstElement to focus on the first tabbable element within your component, and call\n * focusTrappedTabPress every time tab is pressed to trap tab within this\n * component.\n *\n * Note that focusFirstElement WILL focus elements with tabindex=\"-1\",\n * however focusTrappedTabPress will not.\n * @displayName Modal Mixin\n */\nexport default {\n  methods: {\n    /**\n     * get the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async getFirstFocusableElement (el) {\n      await this.$nextTick();\n      const focusableElements = this._getFocusableElements(el, true);\n      return this._getFirstFocusElement(focusableElements);\n    },\n\n    /**\n     * set focus to the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async focusFirstElement (el = this.$el) {\n      const elToFocus = await this.getFirstFocusableElement(returnFirstEl(el));\n      elToFocus?.focus({ preventScroll: true });\n    },\n\n    async focusElementById (elementId) {\n      await this.$nextTick();\n      const result = returnFirstEl(this.$el)?.querySelector(elementId);\n      if (result) {\n        result.focus();\n        return;\n      }\n\n      // eslint-disable-next-line no-console\n      console.warn('Could not find the element specified in dt-modal prop \"initialFocusElement\". ' +\n        'Defaulting to focusing the first element.');\n      await this.focusFirstElement();\n    },\n\n    /**\n     * internal use only.\n     *\n     * @param focusableElements - list of focusable elements\n     * @returns {*} - first DOM element that is focusable.\n     * @private\n     */\n    _getFirstFocusElement (focusableElements) {\n      if (!focusableElements.length) {\n        return;\n      }\n      let firstFocusEl = focusableElements[0];\n      // If first element is a checkbox, put focus on the selected checkbox or the first checkbox if none are selected.\n      if (firstFocusEl.matches('[type=\"radio\"]:not(:checked)')) {\n        firstFocusEl = focusableElements.find(el => el.checked && el.name === firstFocusEl.name) || firstFocusEl;\n      }\n      return firstFocusEl;\n    },\n\n    /**\n     * internal use only.\n     *\n     * gets all the focusable elements within the component\n     * and sets the first and last of those elements.\n     *\n     * @param {object} el - the root dom element to find focusable elements in.\n     * @param {bool} includeNegativeTabIndex - will include tabindex=\"-1\" in the list of focusable elements.\n     */\n    _getFocusableElements (el = this.$el, includeNegativeTabIndex = false) {\n      el = returnFirstEl(el);\n      if (!el) return [];\n      const focusableContent = [...el.querySelectorAll(focusableElementsList)];\n      return focusableContent.filter((fc) => {\n        const style = window.getComputedStyle(fc);\n        return style.getPropertyValue('display') !== 'none' &&\n          style.getPropertyValue('visibility') !== 'hidden' &&\n          fc.matches(includeNegativeTabIndex ? focusableAttrs : tabbableAttrs);\n      });\n    },\n\n    /**\n     * tabs to the next element contained within your component, does not include tabindex=\"-1\".\n     * @param {object} e - keypress event\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    focusTrappedTabPress (e, el) {\n      const isTabPressed = e.key === 'Tab';\n\n      if (!isTabPressed) {\n        return;\n      }\n\n      const focusableElements = this._getFocusableElements(el);\n      if (!focusableElements.length) {\n        e.preventDefault();\n        return;\n      }\n\n      const firstFocusableElement = this._getFirstFocusElement(focusableElements);\n      const lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          lastFocusableElement.focus();\n          e.preventDefault();\n        }\n      } else {\n        if (document.activeElement === lastFocusableElement) {\n          firstFocusableElement.focus();\n          e.preventDefault();\n        }\n      }\n    },\n  },\n};\n"],"names":[],"mappings":";AAEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB,GAAG,cAAc;AACvC,MAAM,wBAAwB;AAiB9B,MAAe,QAAA;AAAA,EACb,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMP,MAAM,yBAA0B,IAAI;AAClC,YAAM,KAAK;AACX,YAAM,oBAAoB,KAAK,sBAAsB,IAAI,IAAI;AAC7D,aAAO,KAAK,sBAAsB,iBAAiB;AAAA,IACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM,kBAAmB,KAAK,KAAK,KAAK;AACtC,YAAM,YAAY,MAAM,KAAK,yBAAyB,cAAc,EAAE,CAAC;AACvE,6CAAW,MAAM,EAAE,eAAe,KAAM;AAAA,IACzC;AAAA,IAED,MAAM,iBAAkB,WAAW;;AACjC,YAAM,KAAK;AACX,YAAM,UAAS,mBAAc,KAAK,GAAG,MAAtB,mBAAyB,cAAc;AACtD,UAAI,QAAQ;AACV,eAAO,MAAK;AACZ;AAAA,MACD;AAGD,cAAQ,KAAK,wHACgC;AAC7C,YAAM,KAAK;IACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,sBAAuB,mBAAmB;AACxC,UAAI,CAAC,kBAAkB,QAAQ;AAC7B;AAAA,MACD;AACD,UAAI,eAAe,kBAAkB,CAAC;AAEtC,UAAI,aAAa,QAAQ,8BAA8B,GAAG;AACxD,uBAAe,kBAAkB,KAAK,QAAM,GAAG,WAAW,GAAG,SAAS,aAAa,IAAI,KAAK;AAAA,MAC7F;AACD,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWD,sBAAuB,KAAK,KAAK,KAAK,0BAA0B,OAAO;AACrE,WAAK,cAAc,EAAE;AACrB,UAAI,CAAC,GAAI,QAAO;AAChB,YAAM,mBAAmB,CAAC,GAAG,GAAG,iBAAiB,qBAAqB,CAAC;AACvE,aAAO,iBAAiB,OAAO,CAAC,OAAO;AACrC,cAAM,QAAQ,OAAO,iBAAiB,EAAE;AACxC,eAAO,MAAM,iBAAiB,SAAS,MAAM,UAC3C,MAAM,iBAAiB,YAAY,MAAM,YACzC,GAAG,QAAQ,0BAA0B,iBAAiB,aAAa;AAAA,MAC7E,CAAO;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,qBAAsB,GAAG,IAAI;AAC3B,YAAM,eAAe,EAAE,QAAQ;AAE/B,UAAI,CAAC,cAAc;AACjB;AAAA,MACD;AAED,YAAM,oBAAoB,KAAK,sBAAsB,EAAE;AACvD,UAAI,CAAC,kBAAkB,QAAQ;AAC7B,UAAE,eAAc;AAChB;AAAA,MACD;AAED,YAAM,wBAAwB,KAAK,sBAAsB,iBAAiB;AAC1E,YAAM,uBAAuB,kBAAkB,kBAAkB,SAAS,CAAC;AAE3E,UAAI,EAAE,UAAU;AACd,YAAI,SAAS,kBAAkB,uBAAuB;AACpD,+BAAqB,MAAK;AAC1B,YAAE,eAAc;AAAA,QACjB;AAAA,MACT,OAAa;AACL,YAAI,SAAS,kBAAkB,sBAAsB;AACnD,gCAAsB,MAAK;AAC3B,YAAE,eAAc;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACH;"}
+{"version":3,"file":"modal.js","sources":["../../../common/mixins/modal.js"],"sourcesContent":["import { returnFirstEl } from '@/common/utils';\n\nconst focusableAttrs = ':not(:disabled):not([aria-disabled=\"true\"]):not([role=\"presentation\"])';\nconst tabbableAttrs = `${focusableAttrs}:not([tabindex=\"-1\"])`;\nconst focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;\n\n/**\n * This mixin provides the methods to automatically trap tab focus within\n * the component this mixin is on, meaning it is not possible to tab out\n * of the component without dismissing it.\n *\n * Useful for accessibility reasons on things like important actionable alerts.\n *\n * Use focusFirstElement to focus on the first tabbable element within your component, and call\n * focusTrappedTabPress every time tab is pressed to trap tab within this\n * component.\n *\n * Note that focusFirstElement WILL focus elements with tabindex=\"-1\",\n * however focusTrappedTabPress will not.\n * @displayName Modal Mixin\n */\nexport default {\n  methods: {\n    /**\n     * get the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async getFirstFocusableElement (el) {\n      await this.$nextTick();\n      const focusableElements = this._getFocusableElements(el, true);\n      return this._getFirstFocusElement(focusableElements);\n    },\n\n    /**\n     * set focus to the first focusable element in your component, includes tabindex=\"-1\".\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    async focusFirstElement (el = this.$el) {\n      const elToFocus = await this.getFirstFocusableElement(returnFirstEl(el));\n      elToFocus?.focus({ preventScroll: true });\n    },\n\n    async focusElementById (elementId) {\n      await this.$nextTick();\n      const result = returnFirstEl(this.$el)?.querySelector(elementId);\n      if (result) {\n        result.focus();\n        return;\n      }\n\n      // eslint-disable-next-line no-console\n      console.warn('Could not find the element specified in dt-modal prop \"initialFocusElement\". ' +\n        'Defaulting to focusing the first element.');\n      await this.focusFirstElement();\n    },\n\n    /**\n     * internal use only.\n     *\n     * @param focusableElements - list of focusable elements\n     * @returns {*} - first DOM element that is focusable.\n     * @private\n     */\n    _getFirstFocusElement (focusableElements) {\n      if (!focusableElements.length) {\n        return;\n      }\n      let firstFocusEl = focusableElements[0];\n      // If first element is a checkbox, put focus on the selected checkbox or the first checkbox if none are selected.\n      if (firstFocusEl.matches('[type=\"radio\"]:not(:checked)')) {\n        firstFocusEl = focusableElements.find(el => el.checked && el.name === firstFocusEl.name) || firstFocusEl;\n      }\n      return firstFocusEl;\n    },\n\n    /**\n     * internal use only.\n     *\n     * gets all the focusable elements within the component\n     * and sets the first and last of those elements.\n     *\n     * @param {object} el - the root dom element to find focusable elements in.\n     * @param {bool} includeNegativeTabIndex - will include tabindex=\"-1\" in the list of focusable elements.\n     */\n    _getFocusableElements (el = this.$el, includeNegativeTabIndex = false) {\n      el = returnFirstEl(el);\n      if (!el) return [];\n      const focusableContent = [...el.querySelectorAll(focusableElementsList)];\n      return focusableContent.filter((fc) => {\n        const style = window.getComputedStyle(fc);\n        return style.getPropertyValue('display') !== 'none' &&\n          style.getPropertyValue('visibility') !== 'hidden' &&\n          fc.matches(includeNegativeTabIndex ? focusableAttrs : tabbableAttrs);\n      });\n    },\n\n    /**\n     * tabs to the next element contained within your component, does not include tabindex=\"-1\".\n     * @param {object} e - keypress event\n     * @param {object} el - optional - ref of dom element to trap focus on.\n     *  will default to the root node of the vue component\n     */\n    focusTrappedTabPress (e, el) {\n      const isTabPressed = e.key === 'Tab';\n\n      if (!isTabPressed) {\n        return;\n      }\n\n      const focusableElements = this._getFocusableElements(el);\n      if (!focusableElements.length) {\n        e.preventDefault();\n        return;\n      }\n\n      const firstFocusableElement = this._getFirstFocusElement(focusableElements);\n      const lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          lastFocusableElement.focus();\n          e.preventDefault();\n        }\n      } else {\n        if (document.activeElement === lastFocusableElement) {\n          firstFocusableElement.focus();\n          e.preventDefault();\n        }\n      }\n    },\n  },\n};\n"],"names":["focusableAttrs","tabbableAttrs","focusableElementsList","Modal","el","focusableElements","elToFocus","returnFirstEl","elementId","result","_a","firstFocusEl","includeNegativeTabIndex","fc","style","firstFocusableElement","lastFocusableElement"],"mappings":";AAEA,MAAMA,IAAiB,0EACjBC,IAAgB,GAAGD,CAAc,yBACjCE,IAAwB,0DAiBfC,IAAA;AAAA,EACb,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMP,MAAM,yBAA0BC,GAAI;AAClC,YAAM,KAAK;AACX,YAAMC,IAAoB,KAAK,sBAAsBD,GAAI,EAAI;AAC7D,aAAO,KAAK,sBAAsBC,CAAiB;AAAA,IACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM,kBAAmBD,IAAK,KAAK,KAAK;AACtC,YAAME,IAAY,MAAM,KAAK,yBAAyBC,EAAcH,CAAE,CAAC;AACvE,MAAAE,KAAA,QAAAA,EAAW,MAAM,EAAE,eAAe,GAAM;AAAA,IACzC;AAAA,IAED,MAAM,iBAAkBE,GAAW;;AACjC,YAAM,KAAK;AACX,YAAMC,KAASC,IAAAH,EAAc,KAAK,GAAG,MAAtB,gBAAAG,EAAyB,cAAcF;AACtD,UAAIC,GAAQ;AACV,QAAAA,EAAO,MAAK;AACZ;AAAA,MACD;AAGD,cAAQ,KAAK,wHACgC,GAC7C,MAAM,KAAK;IACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,sBAAuBJ,GAAmB;AACxC,UAAI,CAACA,EAAkB;AACrB;AAEF,UAAIM,IAAeN,EAAkB,CAAC;AAEtC,aAAIM,EAAa,QAAQ,8BAA8B,MACrDA,IAAeN,EAAkB,KAAK,CAAAD,MAAMA,EAAG,WAAWA,EAAG,SAASO,EAAa,IAAI,KAAKA,IAEvFA;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWD,sBAAuBP,IAAK,KAAK,KAAKQ,IAA0B,IAAO;AAErE,aADAR,IAAKG,EAAcH,CAAE,GAChBA,IACoB,CAAC,GAAGA,EAAG,iBAAiBF,CAAqB,CAAC,EAC/C,OAAO,CAACW,MAAO;AACrC,cAAMC,IAAQ,OAAO,iBAAiBD,CAAE;AACxC,eAAOC,EAAM,iBAAiB,SAAS,MAAM,UAC3CA,EAAM,iBAAiB,YAAY,MAAM,YACzCD,EAAG,QAAQD,IAA0BZ,IAAiBC,CAAa;AAAA,MAC7E,CAAO,IAPe;IAQjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,qBAAsB,GAAGG,GAAI;AAG3B,UAAI,EAFiB,EAAE,QAAQ;AAG7B;AAGF,YAAMC,IAAoB,KAAK,sBAAsBD,CAAE;AACvD,UAAI,CAACC,EAAkB,QAAQ;AAC7B,UAAE,eAAc;AAChB;AAAA,MACD;AAED,YAAMU,IAAwB,KAAK,sBAAsBV,CAAiB,GACpEW,IAAuBX,EAAkBA,EAAkB,SAAS,CAAC;AAE3E,MAAI,EAAE,WACA,SAAS,kBAAkBU,MAC7BC,EAAqB,MAAK,GAC1B,EAAE,eAAc,KAGd,SAAS,kBAAkBA,MAC7BD,EAAsB,MAAK,GAC3B,EAAE,eAAc;AAAA,IAGrB;AAAA,EACF;AACH;"}

package/dist/vue3/common/mixins/skeleton.cjs

@@ -1,28 +1,2 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const skeleton_constants = require("../../components/skeleton/skeleton_constants.cjs");
-const SkeletonAnimation = {
-  computed: {
-    skeletonOffset() {
-      const skeletonText = this.$refs.skeleton;
-      if (!skeletonText) {
-        return this.offset;
-      }
-      const { top, height } = skeletonText.getBoundingClientRect();
-      return top + height / 2;
-    },
-    skeletonStyle() {
-      const style = {};
-      if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1) {
-        return style;
-      }
-      const animationDelay = this.skeletonOffset * skeleton_constants.SKELETON_RIPPLE_DURATION / 1e3;
-      const animationDuration = this.animationDuration === -1 ? 1e3 : this.animationDuration;
-      style.animationDelay = `${animationDelay}ms`;
-      style.animationDuration = `${animationDuration}ms`;
-      return style;
-    }
-  }
-};
-exports.default = SkeletonAnimation;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../lib/skeleton/skeleton-constants.cjs"),o={computed:{skeletonOffset(){const t=this.$refs.skeleton;if(!t)return this.offset;const{top:e,height:n}=t.getBoundingClientRect();return e+n/2},skeletonStyle(){const t={};if(this.skeletonOffset===-1||!this.animate&&this.animationDuration===-1)return t;const e=this.skeletonOffset*i.SKELETON_RIPPLE_DURATION/1e3,n=this.animationDuration===-1?1e3:this.animationDuration;return t.animationDelay=`${e}ms`,t.animationDuration=`${n}ms`,t}}};exports.default=o;
 //# sourceMappingURL=skeleton.cjs.map