@dialpad/dialtone-vue 3.225.0-next.9 → 3.226.0

package/dist/lib/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":[],"sources":["../../../components/Button/Button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n        blockStartIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n        startIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (aka left) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n        iconClass,\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n        endIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (aka right) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n        blockEndIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport DtLoader from '@/components/Loader/Loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './ButtonConstants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/Link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted, info, mention\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\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 leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-start (aka top) icon container\n     */\n    blockStartIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-end (aka bottom) icon container\n     */\n    blockEndIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the legacy icon container\n     * @deprecated Use startIconClass or endIconClass\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * The inverted value is deprecated and will be removed in the next major version.\n     * Please use the v-dt-mode directive instead.\n     * @values default, unstyled, muted, critical, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"button.cjs","names":[],"sources":["../../../components/Button/Button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n        blockStartIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n        startIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (aka left) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n        iconClass,\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n        endIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (aka right) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n        blockEndIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport DtLoader from '@/components/Loader/Loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './ButtonConstants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/Link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted, info, mention\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\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 leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-start (aka top) icon container\n     */\n    blockStartIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-end (aka bottom) icon container\n     */\n    blockEndIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the legacy icon container\n     * @deprecated Use startIconClass or endIconClass\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * The inverted value is deprecated and will be removed in the next major version.\n     * Please use the v-dt-mode directive instead.\n     * @values default, unstyled, muted, critical, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    propCombination () {\n      return [this.circle, this.kind, this.importance, this.link];\n    },\n  },\n\n  watch: {\n    propCombination: { handler: 'validatePropCombination', immediate: true },\n  },\n\n  methods: {\n    validatePropCombination () {\n      if (process.env.NODE_ENV === 'production') return;\n\n      if (this.circle && this.link) {\n        warn('You cannot enable circle and link at the same time', this);\n      }\n\n      this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n    },\n\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/button/button.js

@@ -229,16 +229,24 @@ var E = {
 		},
 		loaderSize() {
 			return i[String(this.size)];
+		},
+		propCombination() {
+			return [
+				this.circle,
+				this.kind,
+				this.importance,
+				this.link
+			];
 		}
 	},
-	watch: { $props: {
-		deep: !0,
-		immediate: !0,
-		handler() {
-			process.env.NODE_ENV !== "production" && (this.circle && this.link && w("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
-		}
+	watch: { propCombination: {
+		handler: "validatePropCombination",
+		immediate: !0
 	} },
 	methods: {
+		validatePropCombination() {
+			process.env.NODE_ENV !== "production" && (this.circle && this.link && w("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
+		},
 		resolveRouterLink() {
 			try {
 				return x("RouterLink");

package/dist/lib/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../components/Button/Button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n        blockStartIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n        startIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (aka left) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n        iconClass,\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n        endIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (aka right) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n        blockEndIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport DtLoader from '@/components/Loader/Loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './ButtonConstants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/Link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted, info, mention\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\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 leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-start (aka top) icon container\n     */\n    blockStartIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-end (aka bottom) icon container\n     */\n    blockEndIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the legacy icon container\n     * @deprecated Use startIconClass or endIconClass\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * The inverted value is deprecated and will be removed in the next major version.\n     * Please use the v-dt-mode directive instead.\n     * @values default, unstyled, muted, critical, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../components/Button/Button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n        blockStartIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n        startIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (aka left) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n        iconClass,\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n        endIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (aka right) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n        blockEndIconClass,\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport DtLoader from '@/components/Loader/Loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './ButtonConstants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/Link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted, info, mention\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\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 leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-start (aka top) icon container\n     */\n    blockStartIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the block-end (aka bottom) icon container\n     */\n    blockEndIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the legacy icon container\n     * @deprecated Use startIconClass or endIconClass\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * The inverted value is deprecated and will be removed in the next major version.\n     * Please use the v-dt-mode directive instead.\n     * @values default, unstyled, muted, critical, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    propCombination () {\n      return [this.circle, this.kind, this.importance, this.link];\n    },\n  },\n\n  watch: {\n    propCombination: { handler: 'validatePropCombination', immediate: true },\n  },\n\n  methods: {\n    validatePropCombination () {\n      if (process.env.NODE_ENV === 'production') return;\n\n      if (this.circle && this.link) {\n        warn('You cannot enable circle and link at the same time', this);\n      }\n\n      this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n    },\n\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/popover/popover.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/modal.cjs`),i=require(`../../common/mixins/mode.cjs`),a=require(`../../shared/sr_only_close_button.cjs`),o=require(`./tippy-utils.cjs`),s=require(`./popover-constants.cjs`),c=require(`../lazy-show/lazy-show.cjs`),l=require(`./popover-header-footer.cjs`);let u=require(`vue`);var d={name:`DtPopover`,components:{SrOnlyCloseButton:a.default,DtLazyShow:c.default,PopoverHeaderFooter:l.default},mixins:[r.default,i.default],props:{open:{type:[Boolean,null],default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:`div`},transition:{type:String,default:`fade`},role:{type:String,default:`dialog`,validator:e=>s.POPOVER_ROLES.includes(e)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},padding:{type:String,default:`large`,validator:e=>Object.keys(s.POPOVER_PADDING_CLASSES).some(t=>t===e)},contentClass:{type:[String,Array,Object],default:``},contentWidth:{type:String,default:``,validator:e=>s.POPOVER_CONTENT_WIDTHS.includes(e)},contentAppear:{type:Boolean,default:null},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:``},externalAnchorElement:{type:e.HTML_ELEMENT_TYPE,default:null},id:{type:String,default(){return t.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},closeOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},focustrap:{type:Boolean,default:!1},fallbackPlacements:{type:Array,default:()=>[`auto`]},boundary:{type:[String,e.HTML_ELEMENT_TYPE],default:`clippingParents`,validator:e=>s.POPOVER_BOUNDARY_VALUES.includes(e)||e instanceof HTMLElement},placement:{type:String,default:`bottom-end`},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:e=>s.POPOVER_STICKY_VALUES.includes(e)},maxHeight:{type:String,default:``},maxWidth:{type:String,default:``},showCloseButton:{type:Boolean,default:!1},anchorClass:{type:[String,Array,Object],default:``},headerWrapperClass:{type:[String,Array,Object],default:``},headerClass:{type:[String,Array,Object],default:``},footerWrapperClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Array,Object],default:``},initialFocusElement:{type:[String,e.HTML_ELEMENT_TYPE],default:`first`,validator:e=>s.POPOVER_INITIAL_FOCUS_STRINGS.includes(e)||e instanceof HTMLElement||e.startsWith(`#`)},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>s.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement}},emits:[`keydown`,`update:open`,`opened`,`mouseenter-popover`,`mouseleave-popover`,`mouseenter-popover-anchor`,`mouseleave-popover-anchor`],data(){return{POPOVER_PADDING_CLASSES:s.POPOVER_PADDING_CLASSES,POPOVER_HEADER_FOOTER_PADDING_CLASSES:s.POPOVER_HEADER_FOOTER_PADDING_CLASSES,intersectionObserver:null,mutationObserver:null,isOutsideViewport:!1,isOpen:!1,isDialogAriaHidden:!0,toAppear:!1,anchorEl:null,popoverContentEl:null,hasSlotContent:t.hasSlotContent,scrimTarget:`body`}},computed:{popoverListeners(){return{keydown:e=>{this.onKeydown(e)},"after-leave":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?`calc(100vh - var(--dt-spacing-50))`:this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&t.getUniqueString(`DtPopover__anchor`)}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(e){this.tip?.setProps({zIndex:e?650:this.calculateAnchorZindex()})},offset(e){this.tip?.setProps({offset:e})},sticky(e){this.tip?.setProps({sticky:e})},fallbackPlacements(){this.tip?.setProps({popperOptions:this.popperOptions()})},tether(){this.tip?.setProps({popperOptions:this.popperOptions()})},boundary(){this.tip?.setProps({popperOptions:this.popperOptions()})},externalAnchorElement(){this.updateAnchorEl()},placement(e){this.tip?.setProps({placement:e})},open:{handler:function(e){e!==null&&(this.isOpen=e),e===!0&&(this.toAppear=!0)},immediate:!0},contentAppear:{handler:function(e){e!==null&&(this.toAppear=e)}},isOpen(e,t){e?(this.isDialogAriaHidden=!1,this.initTippyInstance(),this.tip?.show()):!e&&t!==e&&(this.removeEventListeners(),this.tip?.hide())}},mounted(){t.warnIfUnmounted(t.returnFirstEl(this.$el),this.$options.name),this.popoverContentEl=t.returnFirstEl(this.$refs.content?.$el),this.updateAnchorEl(),this.mutationObserver=new MutationObserver(this.updateAnchorEl),this.mutationObserver.observe(this.$refs.anchor,{childList:!0}),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeUnmount(){this._isUnmounting=!0,this.popoverContentEl&&(this.popoverContentEl.style.transition=`none`),this.tip?.destroy(),this.intersectionObserver?.disconnect(),this.mutationObserver?.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{getModeReferenceEl(){return this.$refs.anchor},hasIntersectedViewport(e){let n=e?.[0]?.target;if(!n)return;let r=t.isOutOfViewPort(n);this.isOutsideViewport=r.bottom||r.top},updateAnchorEl(){let e=(this.externalAnchorElement||(this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null))??this.$refs.anchor.children[0];if(e!==this.anchorEl){if(this.anchorEl=e,this.tip?.destroy(),delete this.tip,!this.anchorEl){console.warn(`No anchor found for popover`);return}this.isOpen&&(this.initTippyInstance(),this.tip?.show())}},popperOptions(){return o.getPopperOptions({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0,boundary:this.boundary})},validateProps(){this.modal&&this.initialFocusElement===`none`&&console.error(`If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement`)},calculateAnchorZindex(){return t.returnFirstEl(this.$el).getRootNode().querySelector(`.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"], .d-modal[open], .d-modal--transparent[open]`)||this.anchorEl?.closest(`.d-zi-drawer`)?650:300},defaultToggleOpen(e){if(!this.openOnContext&&(this.open===null||this.open===void 0)){if(!this.anchorEl?.contains(e.target)&&!this.anchorEl?.isEqualNode(e.target)||this.anchorEl?.disabled)return;this.toggleOpen()}},async onContext(e){this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip?.setProps({placement:`right-start`,getReferenceClientRect:()=>({width:0,height:0,top:e.clientY,bottom:e.clientY,left:e.clientX,right:e.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(e){this.open===null&&(this.openWithArrowKeys&&this.anchorEl?.contains(e.target)&&(this.isOpen||(this.isOpen=!0)),this.$emit(`keydown`,e))},addEventListeners(){window.addEventListener(`dt-popover-close`,this.closePopover),this.contentWidth===`anchor`&&window.addEventListener(`resize`,this.onResize)},removeEventListeners(){window.removeEventListener(`dt-popover-close`,this.closePopover),this.contentWidth===`anchor`&&window.removeEventListener(`resize`,this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){if(this.modal){let e=this.anchorEl?.closest(`body, .tippy-box`);if(!e)return;e.tagName?.toLowerCase()===`body`?(t.disableRootScrolling(this.anchorEl.getRootNode().host),this.tip?.setProps({offset:this.offset})):e.classList.add(`d-zi-popover`)}},enableScrolling(){let e=this.anchorEl?.closest(`body, .tippy-box`);e&&(e.tagName?.toLowerCase()===`body`?(t.enableRootScrolling(this.anchorEl.getRootNode().host),this.tip?.setProps({offset:this.offset})):e.classList.remove(`d-zi-popover`))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth===`anchor`&&(await this.setPopoverContentAnchorWidth(),this._isUnmounting)||(this.contentWidth===null&&(this.popoverContentEl.style.width=`auto`),this.addEventListeners())},async onLeaveTransitionComplete(){if(!this._isUnmounting){if(this.modal){if(await this.focusFirstElement(this.$refs.anchor),this._isUnmounting||(await this.$nextTick(),this._isUnmounting))return;this.enableScrolling()}this._isUnmounting||(this.isDialogAriaHidden=!0,this.tip?.unmount(),this.$emit(`opened`,!1),this.open!==null&&this.$emit(`update:open`,!1))}},async onEnterTransitionComplete(){this._isUnmounting||(this.focusInitialElement(),await this.$nextTick(),!this._isUnmounting&&(this.preventScrolling(),this.$emit(`opened`,!0,this.$refs.popover__content),this.open!==null&&this.$emit(`update:open`,!0)))},focusInitialElement(){this.initialFocusElement===`dialog`&&t.returnFirstEl(this.$refs.content?.$el)?.focus(),this.initialFocusElement.startsWith(`#`)&&this.focusInitialElementById(),this.initialFocusElement===`first`&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){let e=t.returnFirstEl(this.$refs.content?.$el)?.querySelector(this.initialFocusElement);e?e.focus():(console.warn(`Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.`),t.returnFirstEl(this.$refs.content?.$el)?.focus())},onResize(){this.closePopover()},onClickOutside(){this.closeOnClick&&(this.popoverContentEl?.querySelector(`.d-popover__anchor--opened`)||this.closePopover())},onKeydown(e){e.key===`Escape`&&this.closePopover(),this.$emit(`keydown`,e)},async setPopoverContentAnchorWidth(){await this.$nextTick(),this.popoverContentEl.style.width=`${this.anchorEl?.clientWidth}px`},focusFirstElementIfNeeded(e){this._getFocusableElements(e,!0).length===0?this.showCloseButton?this.$refs.popover__header?.focusCloseButton():t.returnFirstEl(this.$refs.content?.$el)?.focus():this.focusFirstElement(e)},resolveParentScrimTarget(){return this.anchorEl?.parentElement??document.body},resolveRootScrimTarget(){try{return window.parent.document.body}catch{return this.resolveParentScrimTarget()}},resolveBodyScrimTarget(){return this.anchorEl?.closest(`dialog`)??this.anchorEl?.getRootNode()?.querySelector(`body`)??document.body},resolveScrimTarget(){if(this.appendTo instanceof HTMLElement)return this.appendTo;switch(this.appendTo){case`parent`:return this.resolveParentScrimTarget();case`root`:return this.resolveRootScrimTarget();default:return this.resolveBodyScrimTarget()}},getReferenceClientRect(e){let t=this.anchorEl?.getBoundingClientRect();if(this.appendTo!==`root`||e)return t;let n=this.anchorEl?.ownerDocument,r=(n?.defaultView||n?.parentWindow)?.frameElement;if(!r)return t;let i=r.getBoundingClientRect();return{width:t?.width,height:t?.height,top:i?.top+t?.top,left:i?.left+t?.left,right:i?.right+t?.right,bottom:i?.bottom+t?.bottom}},initTippyInstance(){this.scrimTarget=this.resolveScrimTarget();let e=null,t=!1;switch(this.appendTo){case`body`:e=this.anchorEl?.closest(`dialog`)??this.anchorEl?.getRootNode()?.querySelector(`body`);break;case`root`:try{e=window.parent.document.body}catch(n){console.error(`Could not attach the popover to iframe parent window: `,n),e=`parent`,t=!0}break;default:e=this.appendTo;break}this.tip?.destroy(),this.tip=o.createTippyPopover(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:e,interactive:!0,trigger:`manual`,getReferenceClientRect:()=>this.getReferenceClientRect(t),hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},onMouseEnter(){this.$emit(`mouseenter-popover`)},onMouseLeave(){this.$emit(`mouseleave-popover`)},onMouseEnterAnchor(){this.$emit(`mouseenter-popover-anchor`)},onMouseLeaveAnchor(){this.$emit(`mouseleave-popover-anchor`)}}},f=[`id`,`data-qa`,`tabindex`],p=[`data-qa`];function m(e,t,n,r,i,a){let o=(0,u.resolveComponent)(`popover-header-footer`),s=(0,u.resolveComponent)(`sr-only-close-button`),c=(0,u.resolveComponent)(`dt-lazy-show`),l=(0,u.resolveDirective)(`dt-focustrap`);return(0,u.openBlock)(),(0,u.createElementBlock)(`div`,null,[n.modal&&i.isOpen?((0,u.openBlock)(),(0,u.createBlock)(u.Teleport,{key:0,to:i.scrimTarget},[(0,u.createElementVNode)(`div`,{class:`d-modal--transparent`,"data-qa":`dt-popover-scrim`,"aria-hidden":`false`,onClick:t[0]||(t[0]=(0,u.withModifiers)(()=>{},[`prevent`,`stop`]))})],8,[`to`])):(0,u.createCommentVNode)(``,!0),((0,u.openBlock)(),(0,u.createBlock)((0,u.resolveDynamicComponent)(n.elementType),{ref:`popover`,class:(0,u.normalizeClass)([`d-popover`,{"d-popover__anchor--opened":i.isOpen}]),"data-qa":`dt-popover-container`},{default:(0,u.withCtx)(()=>[(0,u.createElementVNode)(`div`,{id:!n.ariaLabelledby&&a.labelledBy,ref:`anchor`,class:(0,u.normalizeClass)(n.anchorClass),"data-qa":e.$attrs[`data-qa`]?`${e.$attrs[`data-qa`]}-anchor`:`dt-popover-anchor`,tabindex:n.openOnContext?0:void 0,onClickCapture:t[1]||(t[1]=(...e)=>a.defaultToggleOpen&&a.defaultToggleOpen(...e)),onContextmenu:t[2]||(t[2]=(...e)=>a.onContext&&a.onContext(...e)),onKeydown:[t[3]||(t[3]=(0,u.withKeys)((0,u.withModifiers)((...e)=>a.onArrowKeyPress&&a.onArrowKeyPress(...e),[`prevent`]),[`up`])),t[4]||(t[4]=(0,u.withKeys)((0,u.withModifiers)((...e)=>a.onArrowKeyPress&&a.onArrowKeyPress(...e),[`prevent`]),[`down`])),t[6]||(t[6]=(0,u.withKeys)(t=>e.$emit(`keydown`,t),[`enter`])),t[7]||(t[7]=(0,u.withKeys)(t=>e.$emit(`keydown`,t),[`space`]))],onKeydownCapture:t[5]||(t[5]=(0,u.withKeys)((...e)=>a.closePopover&&a.closePopover(...e),[`escape`])),onMouseenter:t[8]||(t[8]=(...e)=>a.onMouseEnter&&a.onMouseEnter(...e)),onMouseleave:t[9]||(t[9]=(...e)=>a.onMouseLeave&&a.onMouseLeave(...e))},[(0,u.renderSlot)(e.$slots,`anchor`,{attrs:{"aria-expanded":i.isOpen.toString(),"aria-controls":n.id,"aria-haspopup":n.role}})],42,f),(0,u.withDirectives)(((0,u.openBlock)(),(0,u.createBlock)(c,(0,u.mergeProps)({id:n.id,ref:`content`,role:n.role,"data-qa":e.$attrs[`data-qa`]?`${e.$attrs[`data-qa`]}__dialog`:`dt-popover`,"aria-hidden":`${i.isDialogAriaHidden}`,"aria-labelledby":a.labelledBy,"aria-label":n.ariaLabel,"aria-modal":`${!n.modal}`,transition:n.transition,show:i.isOpen,appear:i.toAppear,class:[`d-popover__dialog`,{"d-popover__dialog--modal":n.modal},n.dialogClass],style:{"max-height":a.calculatedMaxHeight,"max-width":n.maxWidth},css:e.$attrs.css,tabindex:n.contentTabindex},e.modeAttrs,(0,u.toHandlers)(a.popoverListeners),{onMouseenter:a.onMouseEnterAnchor,onMouseleave:a.onMouseLeaveAnchor}),{default:(0,u.withCtx)(()=>[i.hasSlotContent(e.$slots.headerContent)||n.showCloseButton?((0,u.openBlock)(),(0,u.createBlock)(o,{key:0,ref:`popover__header`,class:(0,u.normalizeClass)([i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding],n.headerWrapperClass]),"content-class":n.headerClass,type:`header`,"show-close-button":n.showCloseButton,onClose:a.closePopover},{content:(0,u.withCtx)(()=>[(0,u.renderSlot)(e.$slots,`headerContent`,{close:a.closePopover})]),_:3},8,[`class`,`content-class`,`show-close-button`,`onClose`])):(0,u.createCommentVNode)(``,!0),(0,u.createElementVNode)(`div`,{ref:`popover__content`,"data-qa":e.$attrs[`data-qa`]?`${e.$attrs[`data-qa`]}-content`:`dt-popover-content`,class:(0,u.normalizeClass)([`d-popover__content`,i.POPOVER_PADDING_CLASSES[n.padding],n.contentClass])},[(0,u.renderSlot)(e.$slots,`content`,{close:a.closePopover})],10,p),i.hasSlotContent(e.$slots.footerContent)?((0,u.openBlock)(),(0,u.createBlock)(o,{key:1,ref:`popover__footer`,type:`footer`,class:(0,u.normalizeClass)([i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding],n.footerWrapperClass]),"content-class":n.footerClass},{content:(0,u.withCtx)(()=>[(0,u.renderSlot)(e.$slots,`footerContent`,{close:a.closePopover})]),_:3},8,[`class`,`content-class`])):(0,u.createCommentVNode)(``,!0),n.showCloseButton?(0,u.createCommentVNode)(``,!0):((0,u.openBlock)(),(0,u.createBlock)(s,{key:2,onClose:a.closePopover},null,8,[`onClose`]))]),_:3},16,[`id`,`role`,`data-qa`,`aria-hidden`,`aria-labelledby`,`aria-label`,`aria-modal`,`transition`,`show`,`appear`,`class`,`style`,`css`,`tabindex`,`onMouseenter`,`onMouseleave`])),[[l,{active:(n.modal||n.focustrap)&&i.isOpen,initialFocus:!1,restoreFocus:!n.modal&&n.focustrap}]])]),_:3},8,[`class`]))])}var h=n.t(d,[[`render`,m]]);exports.default=h;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/modal.cjs`),i=require(`../../common/mixins/mode.cjs`),a=require(`../../shared/sr_only_close_button.cjs`),o=require(`./tippy-utils.cjs`),s=require(`./popover-constants.cjs`),c=require(`../lazy-show/lazy-show.cjs`),l=require(`./popover-header-footer.cjs`);let u=require(`vue`);var d={name:`DtPopover`,components:{SrOnlyCloseButton:a.default,DtLazyShow:c.default,PopoverHeaderFooter:l.default},mixins:[r.default,i.default],props:{open:{type:[Boolean,null],default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:`div`},transition:{type:String,default:`fade`},role:{type:String,default:`dialog`,validator:e=>s.POPOVER_ROLES.includes(e)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},padding:{type:String,default:`large`,validator:e=>Object.keys(s.POPOVER_PADDING_CLASSES).some(t=>t===e)},contentClass:{type:[String,Array,Object],default:``},contentWidth:{type:String,default:``,validator:e=>s.POPOVER_CONTENT_WIDTHS.includes(e)},contentAppear:{type:Boolean,default:null},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:``},externalAnchorElement:{type:e.HTML_ELEMENT_TYPE,default:null},id:{type:String,default(){return t.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},closeOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},focustrap:{type:Boolean,default:!1},fallbackPlacements:{type:Array,default:()=>[`auto`]},boundary:{type:[String,e.HTML_ELEMENT_TYPE],default:`clippingParents`,validator:e=>s.POPOVER_BOUNDARY_VALUES.includes(e)||e instanceof HTMLElement},placement:{type:String,default:`bottom-end`},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:e=>s.POPOVER_STICKY_VALUES.includes(e)},maxHeight:{type:String,default:``},maxWidth:{type:String,default:``},showCloseButton:{type:Boolean,default:!1},anchorClass:{type:[String,Array,Object],default:``},headerWrapperClass:{type:[String,Array,Object],default:``},headerClass:{type:[String,Array,Object],default:``},footerWrapperClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Array,Object],default:``},initialFocusElement:{type:[String,e.HTML_ELEMENT_TYPE],default:`first`,validator:e=>s.POPOVER_INITIAL_FOCUS_STRINGS.includes(e)||e instanceof HTMLElement||e.startsWith(`#`)},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>s.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement}},emits:[`keydown`,`update:open`,`opened`,`mouseenter-popover`,`mouseleave-popover`,`mouseenter-popover-anchor`,`mouseleave-popover-anchor`],data(){return{POPOVER_PADDING_CLASSES:s.POPOVER_PADDING_CLASSES,POPOVER_HEADER_FOOTER_PADDING_CLASSES:s.POPOVER_HEADER_FOOTER_PADDING_CLASSES,intersectionObserver:null,mutationObserver:null,isOutsideViewport:!1,isOpen:!1,isDialogAriaHidden:!0,toAppear:!1,anchorEl:null,popoverContentEl:null,hasSlotContent:t.hasSlotContent,scrimTarget:`body`}},computed:{popoverListeners(){return{keydown:e=>{this.onKeydown(e)},"after-leave":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?`calc(100vh - var(--dt-spacing-50))`:this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&t.getUniqueString(`DtPopover__anchor`)},modalValidationState(){return[this.modal,this.initialFocusElement]}},watch:{modalValidationState:{handler:`validateProps`,immediate:!0},modal:{immediate:!0,handler(e){this.tip?.setProps({zIndex:e?650:this.calculateAnchorZindex()})}},offset:{deep:!0,handler(e){this.tip?.setProps({offset:e})}},sticky(e){this.tip?.setProps({sticky:e})},fallbackPlacements:{deep:!0,handler(){this.tip?.setProps({popperOptions:this.popperOptions()})}},tether(){this.tip?.setProps({popperOptions:this.popperOptions()})},boundary(){this.tip?.setProps({popperOptions:this.popperOptions()})},externalAnchorElement(){this.updateAnchorEl()},placement(e){this.tip?.setProps({placement:e})},open:{handler:function(e){e!==null&&(this.isOpen=e),e===!0&&(this.toAppear=!0)},immediate:!0},contentAppear:{handler:function(e){e!==null&&(this.toAppear=e)}},isOpen(e,t){e?(this.isDialogAriaHidden=!1,this.initTippyInstance(),this.tip?.show()):!e&&t!==e&&(this.removeEventListeners(),this.tip?.hide())}},mounted(){t.warnIfUnmounted(t.returnFirstEl(this.$el),this.$options.name),this.popoverContentEl=t.returnFirstEl(this.$refs.content?.$el),this.updateAnchorEl(),this.mutationObserver=new MutationObserver(this.updateAnchorEl),this.mutationObserver.observe(this.$refs.anchor,{childList:!0}),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeUnmount(){this._isUnmounting=!0,this.popoverContentEl&&(this.popoverContentEl.style.transition=`none`),this.tip?.destroy(),this.intersectionObserver?.disconnect(),this.mutationObserver?.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{getModeReferenceEl(){return this.$refs.anchor},hasIntersectedViewport(e){let n=e?.[0]?.target;if(!n)return;let r=t.isOutOfViewPort(n);this.isOutsideViewport=r.bottom||r.top},updateAnchorEl(){let e=(this.externalAnchorElement||(this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null))??this.$refs.anchor.children[0];if(e!==this.anchorEl){if(this.anchorEl=e,this.tip?.destroy(),delete this.tip,!this.anchorEl){console.warn(`No anchor found for popover`);return}this.isOpen&&(this.initTippyInstance(),this.tip?.show())}},popperOptions(){return o.getPopperOptions({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0,boundary:this.boundary})},validateProps(){this.modal&&this.initialFocusElement===`none`&&console.error(`If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement`)},calculateAnchorZindex(){return t.returnFirstEl(this.$el).getRootNode().querySelector(`.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"], .d-modal[open], .d-modal--transparent[open]`)||this.anchorEl?.closest(`.d-zi-drawer`)?650:300},defaultToggleOpen(e){if(!this.openOnContext&&(this.open===null||this.open===void 0)){if(!this.anchorEl?.contains(e.target)&&!this.anchorEl?.isEqualNode(e.target)||this.anchorEl?.disabled)return;this.toggleOpen()}},async onContext(e){this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip?.setProps({placement:`right-start`,getReferenceClientRect:()=>({width:0,height:0,top:e.clientY,bottom:e.clientY,left:e.clientX,right:e.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(e){this.open===null&&(this.openWithArrowKeys&&this.anchorEl?.contains(e.target)&&(this.isOpen||(this.isOpen=!0)),this.$emit(`keydown`,e))},addEventListeners(){window.addEventListener(`dt-popover-close`,this.closePopover),this.contentWidth===`anchor`&&window.addEventListener(`resize`,this.onResize)},removeEventListeners(){window.removeEventListener(`dt-popover-close`,this.closePopover),this.contentWidth===`anchor`&&window.removeEventListener(`resize`,this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){if(this.modal){let e=this.anchorEl?.closest(`body, .tippy-box`);if(!e)return;e.tagName?.toLowerCase()===`body`?(t.disableRootScrolling(this.anchorEl.getRootNode().host),this.tip?.setProps({offset:this.offset})):e.classList.add(`d-zi-popover`)}},enableScrolling(){let e=this.anchorEl?.closest(`body, .tippy-box`);e&&(e.tagName?.toLowerCase()===`body`?(t.enableRootScrolling(this.anchorEl.getRootNode().host),this.tip?.setProps({offset:this.offset})):e.classList.remove(`d-zi-popover`))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth===`anchor`&&(await this.setPopoverContentAnchorWidth(),this._isUnmounting)||(this.contentWidth===null&&(this.popoverContentEl.style.width=`auto`),this.addEventListeners())},async onLeaveTransitionComplete(){if(!this._isUnmounting){if(this.modal){if(await this.focusFirstElement(this.$refs.anchor),this._isUnmounting||(await this.$nextTick(),this._isUnmounting))return;this.enableScrolling()}this._isUnmounting||(this.isDialogAriaHidden=!0,this.tip?.unmount(),this.$emit(`opened`,!1),this.open!==null&&this.$emit(`update:open`,!1))}},async onEnterTransitionComplete(){this._isUnmounting||(this.focusInitialElement(),await this.$nextTick(),!this._isUnmounting&&(this.preventScrolling(),this.$emit(`opened`,!0,this.$refs.popover__content),this.open!==null&&this.$emit(`update:open`,!0)))},focusInitialElement(){this.initialFocusElement===`dialog`&&t.returnFirstEl(this.$refs.content?.$el)?.focus(),this.initialFocusElement.startsWith(`#`)&&this.focusInitialElementById(),this.initialFocusElement===`first`&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){let e=t.returnFirstEl(this.$refs.content?.$el)?.querySelector(this.initialFocusElement);e?e.focus():(console.warn(`Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.`),t.returnFirstEl(this.$refs.content?.$el)?.focus())},onResize(){this.closePopover()},onClickOutside(){this.closeOnClick&&(this.popoverContentEl?.querySelector(`.d-popover__anchor--opened`)||this.closePopover())},onKeydown(e){e.key===`Escape`&&this.closePopover(),this.$emit(`keydown`,e)},async setPopoverContentAnchorWidth(){await this.$nextTick(),this.popoverContentEl.style.width=`${this.anchorEl?.clientWidth}px`},focusFirstElementIfNeeded(e){this._getFocusableElements(e,!0).length===0?this.showCloseButton?this.$refs.popover__header?.focusCloseButton():t.returnFirstEl(this.$refs.content?.$el)?.focus():this.focusFirstElement(e)},resolveParentScrimTarget(){return this.anchorEl?.parentElement??document.body},resolveRootScrimTarget(){try{return window.parent.document.body}catch{return this.resolveParentScrimTarget()}},resolveBodyScrimTarget(){return this.anchorEl?.closest(`dialog`)??this.anchorEl?.getRootNode()?.querySelector(`body`)??document.body},resolveScrimTarget(){if(this.appendTo instanceof HTMLElement)return this.appendTo;switch(this.appendTo){case`parent`:return this.resolveParentScrimTarget();case`root`:return this.resolveRootScrimTarget();default:return this.resolveBodyScrimTarget()}},getReferenceClientRect(e){let t=this.anchorEl?.getBoundingClientRect();if(this.appendTo!==`root`||e)return t;let n=this.anchorEl?.ownerDocument,r=(n?.defaultView||n?.parentWindow)?.frameElement;if(!r)return t;let i=r.getBoundingClientRect();return{width:t?.width,height:t?.height,top:i?.top+t?.top,left:i?.left+t?.left,right:i?.right+t?.right,bottom:i?.bottom+t?.bottom}},initTippyInstance(){this.scrimTarget=this.resolveScrimTarget();let e=null,t=!1;switch(this.appendTo){case`body`:e=this.anchorEl?.closest(`dialog`)??this.anchorEl?.getRootNode()?.querySelector(`body`);break;case`root`:try{e=window.parent.document.body}catch(n){console.error(`Could not attach the popover to iframe parent window: `,n),e=`parent`,t=!0}break;default:e=this.appendTo;break}this.tip?.destroy(),this.tip=o.createTippyPopover(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:e,interactive:!0,trigger:`manual`,getReferenceClientRect:()=>this.getReferenceClientRect(t),hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},onMouseEnter(){this.$emit(`mouseenter-popover`)},onMouseLeave(){this.$emit(`mouseleave-popover`)},onMouseEnterAnchor(){this.$emit(`mouseenter-popover-anchor`)},onMouseLeaveAnchor(){this.$emit(`mouseleave-popover-anchor`)}}},f=[`id`,`data-qa`,`tabindex`],p=[`data-qa`];function m(e,t,n,r,i,a){let o=(0,u.resolveComponent)(`popover-header-footer`),s=(0,u.resolveComponent)(`sr-only-close-button`),c=(0,u.resolveComponent)(`dt-lazy-show`),l=(0,u.resolveDirective)(`dt-focustrap`);return(0,u.openBlock)(),(0,u.createElementBlock)(`div`,null,[n.modal&&i.isOpen?((0,u.openBlock)(),(0,u.createBlock)(u.Teleport,{key:0,to:i.scrimTarget},[(0,u.createElementVNode)(`div`,{class:`d-modal--transparent`,"data-qa":`dt-popover-scrim`,"aria-hidden":`false`,onClick:t[0]||(t[0]=(0,u.withModifiers)(()=>{},[`prevent`,`stop`]))})],8,[`to`])):(0,u.createCommentVNode)(``,!0),((0,u.openBlock)(),(0,u.createBlock)((0,u.resolveDynamicComponent)(n.elementType),{ref:`popover`,class:(0,u.normalizeClass)([`d-popover`,{"d-popover__anchor--opened":i.isOpen}]),"data-qa":`dt-popover-container`},{default:(0,u.withCtx)(()=>[(0,u.createElementVNode)(`div`,{id:!n.ariaLabelledby&&a.labelledBy,ref:`anchor`,class:(0,u.normalizeClass)(n.anchorClass),"data-qa":e.$attrs[`data-qa`]?`${e.$attrs[`data-qa`]}-anchor`:`dt-popover-anchor`,tabindex:n.openOnContext?0:void 0,onClickCapture:t[1]||(t[1]=(...e)=>a.defaultToggleOpen&&a.defaultToggleOpen(...e)),onContextmenu:t[2]||(t[2]=(...e)=>a.onContext&&a.onContext(...e)),onKeydown:[t[3]||(t[3]=(0,u.withKeys)((0,u.withModifiers)((...e)=>a.onArrowKeyPress&&a.onArrowKeyPress(...e),[`prevent`]),[`up`])),t[4]||(t[4]=(0,u.withKeys)((0,u.withModifiers)((...e)=>a.onArrowKeyPress&&a.onArrowKeyPress(...e),[`prevent`]),[`down`])),t[6]||(t[6]=(0,u.withKeys)(t=>e.$emit(`keydown`,t),[`enter`])),t[7]||(t[7]=(0,u.withKeys)(t=>e.$emit(`keydown`,t),[`space`]))],onKeydownCapture:t[5]||(t[5]=(0,u.withKeys)((...e)=>a.closePopover&&a.closePopover(...e),[`escape`])),onMouseenter:t[8]||(t[8]=(...e)=>a.onMouseEnter&&a.onMouseEnter(...e)),onMouseleave:t[9]||(t[9]=(...e)=>a.onMouseLeave&&a.onMouseLeave(...e))},[(0,u.renderSlot)(e.$slots,`anchor`,{attrs:{"aria-expanded":i.isOpen.toString(),"aria-controls":n.id,"aria-haspopup":n.role}})],42,f),(0,u.withDirectives)(((0,u.openBlock)(),(0,u.createBlock)(c,(0,u.mergeProps)({id:n.id,ref:`content`,role:n.role,"data-qa":e.$attrs[`data-qa`]?`${e.$attrs[`data-qa`]}__dialog`:`dt-popover`,"aria-hidden":`${i.isDialogAriaHidden}`,"aria-labelledby":a.labelledBy,"aria-label":n.ariaLabel,"aria-modal":`${!n.modal}`,transition:n.transition,show:i.isOpen,appear:i.toAppear,class:[`d-popover__dialog`,{"d-popover__dialog--modal":n.modal},n.dialogClass],style:{"max-height":a.calculatedMaxHeight,"max-width":n.maxWidth},css:e.$attrs.css,tabindex:n.contentTabindex},e.modeAttrs,(0,u.toHandlers)(a.popoverListeners),{onMouseenter:a.onMouseEnterAnchor,onMouseleave:a.onMouseLeaveAnchor}),{default:(0,u.withCtx)(()=>[i.hasSlotContent(e.$slots.headerContent)||n.showCloseButton?((0,u.openBlock)(),(0,u.createBlock)(o,{key:0,ref:`popover__header`,class:(0,u.normalizeClass)([i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding],n.headerWrapperClass]),"content-class":n.headerClass,type:`header`,"show-close-button":n.showCloseButton,onClose:a.closePopover},{content:(0,u.withCtx)(()=>[(0,u.renderSlot)(e.$slots,`headerContent`,{close:a.closePopover})]),_:3},8,[`class`,`content-class`,`show-close-button`,`onClose`])):(0,u.createCommentVNode)(``,!0),(0,u.createElementVNode)(`div`,{ref:`popover__content`,"data-qa":e.$attrs[`data-qa`]?`${e.$attrs[`data-qa`]}-content`:`dt-popover-content`,class:(0,u.normalizeClass)([`d-popover__content`,i.POPOVER_PADDING_CLASSES[n.padding],n.contentClass])},[(0,u.renderSlot)(e.$slots,`content`,{close:a.closePopover})],10,p),i.hasSlotContent(e.$slots.footerContent)?((0,u.openBlock)(),(0,u.createBlock)(o,{key:1,ref:`popover__footer`,type:`footer`,class:(0,u.normalizeClass)([i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding],n.footerWrapperClass]),"content-class":n.footerClass},{content:(0,u.withCtx)(()=>[(0,u.renderSlot)(e.$slots,`footerContent`,{close:a.closePopover})]),_:3},8,[`class`,`content-class`])):(0,u.createCommentVNode)(``,!0),n.showCloseButton?(0,u.createCommentVNode)(``,!0):((0,u.openBlock)(),(0,u.createBlock)(s,{key:2,onClose:a.closePopover},null,8,[`onClose`]))]),_:3},16,[`id`,`role`,`data-qa`,`aria-hidden`,`aria-labelledby`,`aria-label`,`aria-modal`,`transition`,`show`,`appear`,`class`,`style`,`css`,`tabindex`,`onMouseenter`,`onMouseleave`])),[[l,{active:(n.modal||n.focustrap)&&i.isOpen,initialFocus:!1,restoreFocus:!n.modal&&n.focustrap}]])]),_:3},8,[`class`]))])}var h=n.t(d,[[`render`,m]]);exports.default=h;
 //# sourceMappingURL=popover.cjs.map