@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/motion-text/motion-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion-text.js","sources":["../../../components/motion_text/motion_text.vue"],"sourcesContent":["<template>\n  <span\n    ref=\"contentRef\"\n    :class=\"motionTextClasses\"\n    :style=\"componentStyles\"\n    :data-text-content=\"isStaticAnimationMode ? text : undefined\"\n    :aria-live=\"isAnimating ? 'polite' : 'off'\"\n    :aria-label=\"screenReaderText || undefined\"\n  >\n    <!-- Screen reader content -->\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-motion-text__sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n\n    <!-- Gradient-sweep and shimmer modes: Simple static text with gradient animation -->\n    <template v-if=\"isStaticAnimationMode\">\n      {{ text }}\n      <slot v-if=\"!text\" />\n    </template>\n\n    <!-- Character-by-character animated content for other modes -->\n    <span\n      v-else\n      :key=\"animationKey\"\n      class=\"d-motion-text__content\"\n      :aria-hidden=\"isAnimating\"\n    >\n      <template\n        v-for=\"(word, wordIdx) in words\"\n        :key=\"`${animationKey}-${wordIdx}`\"\n      >\n        <Transition\n          :name=\"`d-motion-text-word-${animationMode}`\"\n        >\n          <span\n            v-if=\"wordIdx < visibleWordCount\"\n            class=\"d-motion-text__word\"\n            :data-text-content=\"word.text\"\n            :style=\"{ '--word-index': wordIdx }\"\n          >\n            <template\n              v-for=\"(char, charIdx) in word.chars\"\n              :key=\"`${animationKey}-${wordIdx}-${charIdx}`\"\n            >\n              <Transition\n                :name=\"`d-motion-text-char-${animationMode}`\"\n              >\n                <span\n                  v-if=\"charIdx < visibleCharsPerWord[wordIdx]\"\n                  class=\"d-motion-text__char\"\n                  :style=\"{\n                    '--char-index': charIdx,\n                    '--char-delay': `${charIdx * timing.characterDelay}ms`,\n                  }\"\n                >{{ char }}</span>\n              </Transition>\n            </template>\n          </span>\n        </Transition>\n      </template>\n    </span>\n\n    <!-- Fallback slot content -->\n    <span\n      v-if=\"!words.length && !text && !isStaticAnimationMode\"\n      class=\"d-motion-text__fallback\"\n    >\n      <slot />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { MOTION_TEXT_ANIMATION_MODES, MOTION_TEXT_SPEEDS, MOTION_TEXT_TIMING_PRESETS } from './motion_text_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtMotionText',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * The text content to animate.\n     * @type {string}\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The animation mode to use for the text reveal.\n     * @values gradient-in, fade-in, slide-in, gradient-sweep, shimmer, none\n     */\n    animationMode: {\n      type: String,\n      default: 'gradient-in',\n      validator: (value) => MOTION_TEXT_ANIMATION_MODES.includes(value),\n    },\n\n    /**\n     * Animation speed using t-shirt sizing.\n     * @values sm, md, lg\n     */\n    speed: {\n      type: String,\n      default: 'md',\n      validator: (value) => MOTION_TEXT_SPEEDS.includes(value),\n    },\n\n    /**\n     * Whether to start animation automatically when component is mounted.\n     * @values true, false\n     */\n    autoStart: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether to loop the animation continuously.\n     * @values true, false\n     */\n    loop: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether to respect the user's prefers-reduced-motion system setting.\n     * @values true, false\n     */\n    respectsReducedMotion: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Alternative text for screen readers. If provided, this will be announced\n     * instead of the animated text.\n     * @type {string}\n     */\n    screenReaderText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the animation starts.\n     * @event start\n     */\n    'start',\n\n    /**\n     * Emitted when the animation completes.\n     * @event complete\n     */\n    'complete',\n\n    /**\n     * Emitted during animation progress.\n     * @event progress\n     * @type {{ wordsComplete: number, totalWords: number, progress: number }}\n     */\n    'progress',\n\n    /**\n     * Emitted when the animation is paused.\n     * @event pause\n     */\n    'pause',\n\n    /**\n     * Emitted when the animation resumes.\n     * @event resume\n     */\n    'resume',\n  ],\n\n  data () {\n    return {\n      words: [],\n      visibleWordCount: 0,\n      visibleCharsPerWord: [],\n      isAnimating: false,\n      isPaused: false,\n      isLooped: false,\n      animationTimeouts: [],\n      prefersReducedMotion: false,\n      animationKey: 0,\n    };\n  },\n\n  computed: {\n    /**\n     * Get timing preset based on speed prop\n     */\n    timing () {\n      return MOTION_TEXT_TIMING_PRESETS[this.speed];\n    },\n\n    /**\n     * Computed styles with timing CSS variables\n     */\n    componentStyles () {\n      return {\n        '--d-motion-text-duration': `${this.timing.duration}ms`,\n        '--d-motion-text-char-duration': `${this.timing.duration}ms`,\n        '--d-motion-text-word-duration': `${this.timing.duration * 2}ms`,\n      };\n    },\n\n    /**\n     * Check if current animation mode is static (gradient-sweep or shimmer)\n     */\n    isStaticAnimationMode () {\n      return this.animationMode === 'gradient-sweep' || this.animationMode === 'shimmer';\n    },\n\n    /**\n     * Computed classes for the motion text element\n     */\n    motionTextClasses () {\n      return [\n        'd-motion-text',\n        `d-motion-text--${this.animationMode}`,\n        {\n          'd-motion-text--animating': this.isAnimating,\n          'd-motion-text--paused': this.isPaused,\n          'd-motion-text--looped': this.isLooped,\n        },\n        this.$attrs.class,\n      ];\n    },\n  },\n\n  watch: {\n    text () {\n      this.reset();\n      this.initializeContent();\n    },\n\n    loop: {\n      handler (newVal) {\n        this.isLooped = newVal;\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.checkReducedMotion();\n    this.initializeContent();\n  },\n\n  beforeUnmount () {\n    this.clearTimeouts();\n  },\n\n  methods: {\n    /**\n     * Self-contained text processing from DOM nodes\n     */\n    processTextToChars (node) {\n      const words = [];\n\n      const processNode = (node, index = 0) => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const matches = node.textContent?.match(/\\S+\\s*/g) || [];\n          words.push(...matches.map((text, i) => ({\n            text,\n            chars: text.split(''),\n            index: index + i,\n          })));\n          return index + matches.length;\n        } else if (node.nodeType === Node.ELEMENT_NODE) {\n          let currentIdx = index;\n          Array.from(node.childNodes).forEach(child => {\n            currentIdx = processNode(child, currentIdx);\n          });\n          return currentIdx;\n        }\n        return index;\n      };\n\n      processNode(node);\n      return words;\n    },\n\n    /**\n     * Process direct text prop into word/character data\n     */\n    processDirectText (text) {\n      if (!text) return [];\n\n      const matches = text.match(/\\S+\\s*/g) || [];\n      return matches.map((wordText, i) => ({\n        text: wordText,\n        chars: wordText.split(''),\n        index: i,\n      }));\n    },\n\n    /**\n     * Check for reduced motion preference\n     */\n    checkReducedMotion () {\n      if (typeof window !== 'undefined' && window.matchMedia) {\n        this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      }\n    },\n\n    /**\n     * Clear all animation timeouts\n     */\n    clearTimeouts () {\n      this.animationTimeouts.forEach(timeout => clearTimeout(timeout));\n      this.animationTimeouts = [];\n    },\n\n    /**\n     * Start the animation\n     * @public\n     */\n    start () {\n      if (this.isAnimating) return;\n\n      this.isAnimating = true;\n      this.isPaused = false;\n      this.$emit('start');\n\n      // Skip animation if reduced motion is preferred and enabled\n      if (this.respectsReducedMotion && this.prefersReducedMotion) {\n        this.showAllContent();\n        return;\n      }\n\n      if (this.animationMode === 'none') {\n        this.showAllContent();\n        return;\n      }\n\n      // For gradient-sweep and shimmer modes, just mark as animating (CSS handles the animation)\n      if (this.isStaticAnimationMode) {\n        return;\n      }\n\n      // Start the word-by-word animation for \"-in\" modes\n      this.showNextWord();\n    },\n\n    /**\n     * Pause the animation\n     * @public\n     */\n    pause () {\n      if (!this.isAnimating || this.isPaused) return;\n\n      this.isPaused = true;\n      this.clearTimeouts();\n      this.$emit('pause');\n    },\n\n    /**\n     * Resume the animation\n     * @public\n     */\n    resume () {\n      if (!this.isPaused) return;\n\n      this.isPaused = false;\n      this.$emit('resume');\n      this.showNextWord();\n    },\n\n    /**\n     * Reset the animation to initial state\n     * @public\n     */\n    reset () {\n      this.clearTimeouts();\n      this.isAnimating = false;\n      this.isPaused = false;\n      this.visibleWordCount = 0;\n      this.visibleCharsPerWord = Array(this.words.length).fill(0);\n      this.animationKey++;\n    },\n\n    /**\n     * Skip to the end of the animation\n     * @public\n     */\n    skipToEnd () {\n      this.showAllContent();\n    },\n\n    /**\n     * Show all content immediately\n     */\n    showAllContent () {\n      this.visibleWordCount = this.words.length;\n      this.visibleCharsPerWord = this.words.map(word => word.chars.length);\n      setTimeout(() => {\n        this.isAnimating = false;\n        this.$emit('complete');\n      }, 0);\n    },\n\n    /**\n     * Show next word in sequence\n     */\n    showNextWord () {\n      if (this.isPaused || this.visibleWordCount >= this.words.length) {\n        if (this.visibleWordCount >= this.words.length) {\n          this.completeAnimation();\n        }\n        return;\n      }\n\n      const timeout = setTimeout(() => {\n        this.visibleWordCount++;\n        this.$emit('progress', {\n          wordsComplete: this.visibleWordCount,\n          totalWords: this.words.length,\n          progress: this.visibleWordCount / this.words.length,\n        });\n\n        this.animateCharsForWord(this.visibleWordCount - 1);\n      }, this.timing.wordDelay);\n\n      this.animationTimeouts.push(timeout);\n    },\n\n    /**\n     * Animate characters for a specific word\n     */\n    animateCharsForWord (wordIdx) {\n      if (this.isPaused || wordIdx >= this.words.length) return;\n\n      this.visibleCharsPerWord[wordIdx] = 0;\n      const chars = this.words[wordIdx].chars.length;\n\n      const revealChar = () => {\n        if (this.isPaused || this.visibleCharsPerWord[wordIdx] >= chars) {\n          if (this.visibleCharsPerWord[wordIdx] >= chars) {\n            this.showNextWord();\n          }\n          return;\n        }\n\n        this.visibleCharsPerWord[wordIdx]++;\n        const timeout = setTimeout(revealChar, this.timing.characterDelay);\n        this.animationTimeouts.push(timeout);\n      };\n\n      revealChar();\n    },\n\n    /**\n     * Complete the animation\n     */\n    completeAnimation () {\n      this.isAnimating = false;\n      this.clearTimeouts();\n\n      this.$emit('complete');\n\n      if (this.loop) {\n        const timeout = setTimeout(() => {\n          this.reset();\n          this.$nextTick(() => {\n            this.start();\n          });\n        }, 500);\n\n        this.animationTimeouts.push(timeout);\n      }\n    },\n\n    /**\n     * Initialize content based on text prop or slot content\n     */\n    initializeContent () {\n      // For gradient-sweep and shimmer modes, skip word/character processing\n      if (this.isStaticAnimationMode) {\n        if (this.autoStart) {\n          this.$nextTick(() => this.start());\n        }\n        return;\n      }\n\n      if (this.text) {\n        this.words = this.processDirectText(this.text);\n      } else if (this.$refs.contentRef) {\n        this.words = this.processTextToChars(this.$refs.contentRef);\n      }\n\n      this.visibleCharsPerWord = Array(this.words.length).fill(0);\n      this.visibleWordCount = 0;\n\n      if (this.autoStart && this.words.length > 0) {\n        this.$nextTick(() => this.start());\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","value","MOTION_TEXT_ANIMATION_MODES","MOTION_TEXT_SPEEDS","MOTION_TEXT_TIMING_PRESETS","newVal","node","words","processNode","index","matches","_a","text","i","currentIdx","child","wordText","timeout","word","wordIdx","chars","revealChar","_createElementBlock","$options","$props","$data","_hoisted_2","_toDisplayString","_Fragment","_createTextVNode","_renderSlot","_ctx","_openBlock","_renderList","_createBlock","_Transition","char","charIdx","_normalizeStyle","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"motion-text.js","sources":["../../../components/motion_text/motion_text.vue"],"sourcesContent":["<template>\n  <span\n    ref=\"contentRef\"\n    :class=\"motionTextClasses\"\n    :style=\"componentStyles\"\n    :data-text-content=\"isStaticAnimationMode ? text : undefined\"\n    :aria-live=\"isAnimating ? 'polite' : 'off'\"\n    :aria-label=\"screenReaderText || undefined\"\n  >\n    <!-- Screen reader content -->\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-motion-text__sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n\n    <!-- Gradient-sweep and shimmer modes: Simple static text with gradient animation -->\n    <template v-if=\"isStaticAnimationMode\">\n      {{ text }}\n      <slot v-if=\"!text\" />\n    </template>\n\n    <!-- Character-by-character animated content for other modes -->\n    <span\n      v-else\n      :key=\"animationKey\"\n      class=\"d-motion-text__content\"\n      :aria-hidden=\"isAnimating\"\n    >\n      <template\n        v-for=\"(word, wordIdx) in words\"\n        :key=\"`${animationKey}-${wordIdx}`\"\n      >\n        <Transition\n          :name=\"`d-motion-text-word-${animationMode}`\"\n        >\n          <span\n            v-if=\"wordIdx < visibleWordCount\"\n            class=\"d-motion-text__word\"\n            :data-text-content=\"word.text\"\n            :style=\"{ '--word-index': wordIdx }\"\n          >\n            <template\n              v-for=\"(char, charIdx) in word.chars\"\n              :key=\"`${animationKey}-${wordIdx}-${charIdx}`\"\n            >\n              <Transition\n                :name=\"`d-motion-text-char-${animationMode}`\"\n              >\n                <span\n                  v-if=\"charIdx < visibleCharsPerWord[wordIdx]\"\n                  class=\"d-motion-text__char\"\n                  :style=\"{\n                    '--char-index': charIdx,\n                    '--char-delay': `${charIdx * timing.characterDelay}ms`,\n                  }\"\n                >{{ char }}</span>\n              </Transition>\n            </template>\n          </span>\n        </Transition>\n      </template>\n    </span>\n\n    <!-- Fallback slot content -->\n    <span\n      v-if=\"!words.length && !text && !isStaticAnimationMode\"\n      class=\"d-motion-text__fallback\"\n    >\n      <slot />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { MOTION_TEXT_ANIMATION_MODES, MOTION_TEXT_SPEEDS, MOTION_TEXT_TIMING_PRESETS } from './motion_text_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtMotionText',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * The text content to animate.\n     * @type {string}\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The animation mode to use for the text reveal.\n     * @values gradient-in, fade-in, slide-in, gradient-sweep, shimmer, none\n     */\n    animationMode: {\n      type: String,\n      default: 'gradient-in',\n      validator: (value) => MOTION_TEXT_ANIMATION_MODES.includes(value),\n    },\n\n    /**\n     * Animation speed.\n     * @values 100, 200, 300, 400, 500\n     */\n    speed: {\n      type: [String, Number],\n      default: 300,\n      validator: (value) => MOTION_TEXT_SPEEDS.includes(String(value)),\n    },\n\n    /**\n     * Whether to start animation automatically when component is mounted.\n     * @values true, false\n     */\n    autoStart: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether to loop the animation continuously.\n     * @values true, false\n     */\n    loop: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether to respect the user's prefers-reduced-motion system setting.\n     * @values true, false\n     */\n    respectsReducedMotion: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Alternative text for screen readers. If provided, this will be announced\n     * instead of the animated text.\n     * @type {string}\n     */\n    screenReaderText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the animation starts.\n     * @event start\n     */\n    'start',\n\n    /**\n     * Emitted when the animation completes.\n     * @event complete\n     */\n    'complete',\n\n    /**\n     * Emitted during animation progress.\n     * @event progress\n     * @type {{ wordsComplete: number, totalWords: number, progress: number }}\n     */\n    'progress',\n\n    /**\n     * Emitted when the animation is paused.\n     * @event pause\n     */\n    'pause',\n\n    /**\n     * Emitted when the animation resumes.\n     * @event resume\n     */\n    'resume',\n  ],\n\n  data () {\n    return {\n      words: [],\n      visibleWordCount: 0,\n      visibleCharsPerWord: [],\n      isAnimating: false,\n      isPaused: false,\n      isLooped: false,\n      animationTimeouts: [],\n      prefersReducedMotion: false,\n      animationKey: 0,\n    };\n  },\n\n  computed: {\n    /**\n     * Get timing preset based on speed prop\n     */\n    timing () {\n      return MOTION_TEXT_TIMING_PRESETS[String(this.speed)];\n    },\n\n    /**\n     * Computed styles with timing CSS variables\n     */\n    componentStyles () {\n      return {\n        '--d-motion-text-duration': `${this.timing.duration}ms`,\n        '--d-motion-text-char-duration': `${this.timing.duration}ms`,\n        '--d-motion-text-word-duration': `${this.timing.duration * 2}ms`,\n      };\n    },\n\n    /**\n     * Check if current animation mode is static (gradient-sweep or shimmer)\n     */\n    isStaticAnimationMode () {\n      return this.animationMode === 'gradient-sweep' || this.animationMode === 'shimmer';\n    },\n\n    /**\n     * Computed classes for the motion text element\n     */\n    motionTextClasses () {\n      return [\n        'd-motion-text',\n        `d-motion-text--${this.animationMode}`,\n        {\n          'd-motion-text--animating': this.isAnimating,\n          'd-motion-text--paused': this.isPaused,\n          'd-motion-text--looped': this.isLooped,\n        },\n        this.$attrs.class,\n      ];\n    },\n  },\n\n  watch: {\n    text () {\n      this.reset();\n      this.initializeContent();\n    },\n\n    loop: {\n      handler (newVal) {\n        this.isLooped = newVal;\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.checkReducedMotion();\n    this.initializeContent();\n  },\n\n  beforeUnmount () {\n    this.clearTimeouts();\n  },\n\n  methods: {\n    /**\n     * Self-contained text processing from DOM nodes\n     */\n    processTextToChars (node) {\n      const words = [];\n\n      const processNode = (node, index = 0) => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const matches = node.textContent?.match(/\\S+\\s*/g) || [];\n          words.push(...matches.map((text, i) => ({\n            text,\n            chars: text.split(''),\n            index: index + i,\n          })));\n          return index + matches.length;\n        } else if (node.nodeType === Node.ELEMENT_NODE) {\n          let currentIdx = index;\n          Array.from(node.childNodes).forEach(child => {\n            currentIdx = processNode(child, currentIdx);\n          });\n          return currentIdx;\n        }\n        return index;\n      };\n\n      processNode(node);\n      return words;\n    },\n\n    /**\n     * Process direct text prop into word/character data\n     */\n    processDirectText (text) {\n      if (!text) return [];\n\n      const matches = text.match(/\\S+\\s*/g) || [];\n      return matches.map((wordText, i) => ({\n        text: wordText,\n        chars: wordText.split(''),\n        index: i,\n      }));\n    },\n\n    /**\n     * Check for reduced motion preference\n     */\n    checkReducedMotion () {\n      if (typeof window !== 'undefined' && window.matchMedia) {\n        this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      }\n    },\n\n    /**\n     * Clear all animation timeouts\n     */\n    clearTimeouts () {\n      this.animationTimeouts.forEach(timeout => clearTimeout(timeout));\n      this.animationTimeouts = [];\n    },\n\n    /**\n     * Start the animation\n     * @public\n     */\n    start () {\n      if (this.isAnimating) return;\n\n      this.isAnimating = true;\n      this.isPaused = false;\n      this.$emit('start');\n\n      // Skip animation if reduced motion is preferred and enabled\n      if (this.respectsReducedMotion && this.prefersReducedMotion) {\n        this.showAllContent();\n        return;\n      }\n\n      if (this.animationMode === 'none') {\n        this.showAllContent();\n        return;\n      }\n\n      // For gradient-sweep and shimmer modes, just mark as animating (CSS handles the animation)\n      if (this.isStaticAnimationMode) {\n        return;\n      }\n\n      // Start the word-by-word animation for \"-in\" modes\n      this.showNextWord();\n    },\n\n    /**\n     * Pause the animation\n     * @public\n     */\n    pause () {\n      if (!this.isAnimating || this.isPaused) return;\n\n      this.isPaused = true;\n      this.clearTimeouts();\n      this.$emit('pause');\n    },\n\n    /**\n     * Resume the animation\n     * @public\n     */\n    resume () {\n      if (!this.isPaused) return;\n\n      this.isPaused = false;\n      this.$emit('resume');\n      this.showNextWord();\n    },\n\n    /**\n     * Reset the animation to initial state\n     * @public\n     */\n    reset () {\n      this.clearTimeouts();\n      this.isAnimating = false;\n      this.isPaused = false;\n      this.visibleWordCount = 0;\n      this.visibleCharsPerWord = Array(this.words.length).fill(0);\n      this.animationKey++;\n    },\n\n    /**\n     * Skip to the end of the animation\n     * @public\n     */\n    skipToEnd () {\n      this.showAllContent();\n    },\n\n    /**\n     * Show all content immediately\n     */\n    showAllContent () {\n      this.visibleWordCount = this.words.length;\n      this.visibleCharsPerWord = this.words.map(word => word.chars.length);\n      setTimeout(() => {\n        this.isAnimating = false;\n        this.$emit('complete');\n      }, 0);\n    },\n\n    /**\n     * Show next word in sequence\n     */\n    showNextWord () {\n      if (this.isPaused || this.visibleWordCount >= this.words.length) {\n        if (this.visibleWordCount >= this.words.length) {\n          this.completeAnimation();\n        }\n        return;\n      }\n\n      const timeout = setTimeout(() => {\n        this.visibleWordCount++;\n        this.$emit('progress', {\n          wordsComplete: this.visibleWordCount,\n          totalWords: this.words.length,\n          progress: this.visibleWordCount / this.words.length,\n        });\n\n        this.animateCharsForWord(this.visibleWordCount - 1);\n      }, this.timing.wordDelay);\n\n      this.animationTimeouts.push(timeout);\n    },\n\n    /**\n     * Animate characters for a specific word\n     */\n    animateCharsForWord (wordIdx) {\n      if (this.isPaused || wordIdx >= this.words.length) return;\n\n      this.visibleCharsPerWord[wordIdx] = 0;\n      const chars = this.words[wordIdx].chars.length;\n\n      const revealChar = () => {\n        if (this.isPaused || this.visibleCharsPerWord[wordIdx] >= chars) {\n          if (this.visibleCharsPerWord[wordIdx] >= chars) {\n            this.showNextWord();\n          }\n          return;\n        }\n\n        this.visibleCharsPerWord[wordIdx]++;\n        const timeout = setTimeout(revealChar, this.timing.characterDelay);\n        this.animationTimeouts.push(timeout);\n      };\n\n      revealChar();\n    },\n\n    /**\n     * Complete the animation\n     */\n    completeAnimation () {\n      this.isAnimating = false;\n      this.clearTimeouts();\n\n      this.$emit('complete');\n\n      if (this.loop) {\n        const timeout = setTimeout(() => {\n          this.reset();\n          this.$nextTick(() => {\n            this.start();\n          });\n        }, 500);\n\n        this.animationTimeouts.push(timeout);\n      }\n    },\n\n    /**\n     * Initialize content based on text prop or slot content\n     */\n    initializeContent () {\n      // For gradient-sweep and shimmer modes, skip word/character processing\n      if (this.isStaticAnimationMode) {\n        if (this.autoStart) {\n          this.$nextTick(() => this.start());\n        }\n        return;\n      }\n\n      if (this.text) {\n        this.words = this.processDirectText(this.text);\n      } else if (this.$refs.contentRef) {\n        this.words = this.processTextToChars(this.$refs.contentRef);\n      }\n\n      this.visibleCharsPerWord = Array(this.words.length).fill(0);\n      this.visibleWordCount = 0;\n\n      if (this.autoStart && this.words.length > 0) {\n        this.$nextTick(() => this.start());\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","value","MOTION_TEXT_ANIMATION_MODES","MOTION_TEXT_SPEEDS","MOTION_TEXT_TIMING_PRESETS","newVal","node","words","processNode","index","matches","_a","text","i","currentIdx","child","wordText","timeout","word","wordIdx","chars","revealChar","_createElementBlock","$options","$props","$data","_hoisted_2","_toDisplayString","_Fragment","_createTextVNode","_renderSlot","_ctx","_openBlock","_renderList","_createBlock","_Transition","char","charIdx","_normalizeStyle","_hoisted_5"],"mappings":"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"}

package/dist/lib/notice/notice-action.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue3"),a=require("../../shared/sr_only_close_button.cjs"),r=require("../../localization/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../button/button.cjs"),_={compatConfig:{MODE:3},name:"DtNoticeAction",components:{DtIconClose:i.DtIconClose,DtButton:d.default,SrOnlyCloseButton:a.default},props:{hideClose:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1}},emits:["close"],data(){return{i18n:new r.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},mounted(){this.hideClose||(this.lastFocusedElement=document.activeElement)},beforeUnmount(){var t;(t=this.lastFocusedElement)==null||t.focus()},methods:{close(){this.$emit("close")}}},m={class:"d-notice__actions","data-qa":"notice-content-actions"};function f(t,C,n,h,B,o){const c=e.resolveComponent("dt-icon-close"),l=e.resolveComponent("dt-button"),s=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",m,[n.hideAction?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:0}),n.hideClose?(e.openBlock(),e.createBlock(s,{key:2,onClose:o.close},null,8,["onClose"])):(e.openBlock(),e.createBlock(l,{key:1,ref:"closeButton",circle:!0,"data-qa":"dt-notice-action-close-button",importance:"clear",size:"sm","aria-label":o.closeButtonTitle,title:o.closeButtonTitle,onClick:o.close},{icon:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),_:1},8,["aria-label","title","onClick"]))])}const p=u._(_,[["render",f]]);exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue"),a=require("../../shared/sr_only_close_button.cjs"),r=require("../../localization/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../button/button.cjs"),_={compatConfig:{MODE:3},name:"DtNoticeAction",components:{DtIconClose:i.DtIconClose,DtButton:d.default,SrOnlyCloseButton:a.default},props:{hideClose:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1}},emits:["close"],data(){return{i18n:new r.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},mounted(){this.hideClose||(this.lastFocusedElement=document.activeElement)},beforeUnmount(){var t;(t=this.lastFocusedElement)==null||t.focus()},methods:{close(){this.$emit("close")}}},m={class:"d-notice__actions","data-qa":"notice-content-actions"};function f(t,C,n,h,B,o){const c=e.resolveComponent("dt-icon-close"),l=e.resolveComponent("dt-button"),s=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",m,[n.hideAction?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:0}),n.hideClose?(e.openBlock(),e.createBlock(s,{key:2,onClose:o.close},null,8,["onClose"])):(e.openBlock(),e.createBlock(l,{key:1,ref:"closeButton","data-qa":"dt-notice-action-close-button",importance:"clear",kind:"muted",size:200,"aria-label":o.closeButtonTitle,title:o.closeButtonTitle,onClick:o.close},{startIcon:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),_:1},8,["aria-label","title","onClick"]))])}const p=u._(_,[["render",f]]);exports.default=p;
 //# sourceMappingURL=notice-action.cjs.map

package/dist/lib/notice/notice-action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice-action.cjs","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      :circle=\"true\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      size=\"sm\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"200\"\n        />\n      </template>\n    </dt-button>\n    <sr-only-close-button\n      v-else\n      @close=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  props: {\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton","SrOnlyCloseButton","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"sWAqCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,iBAEN,WAAY,aACVC,EAAAA,YACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,SAGF,MAAO,CAKL,UAAW,CACT,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,KAIb,MAAO,CAML,SAGF,MAAQ,CACN,MAAO,CACL,KAAM,IAAIC,EAAAA,qBAEd,EAEA,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,uBAAuB,CAC7C,GAGF,SAAW,CACJ,KAAK,YACR,KAAK,mBAAqB,SAAS,cAEvC,EAEA,eAAiB,QACfC,EAAA,KAAK,qBAAL,MAAAA,EAAyB,OAC3B,EAEA,QAAS,CACP,OAAS,CACP,KAAK,MAAM,OAAO,CACpB,EAEJ,KArGI,MAAM,oBACN,UAAQ,6KAFV,OAAAC,YAAA,EAAAC,qBA2BM,MA3BNC,EA2BM,CAtBSC,EAAA,uCAAbC,EAAAA,WAA2BC,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,CAAA,EAElBF,EAAA,yBAgBTG,EAAAA,YAGEC,EAAA,OADC,QAAOC,EAAA,2CAnBVF,EAAAA,YAgBYG,EAAA,OAdV,IAAI,cACH,OAAQ,GACT,UAAQ,gCACR,WAAW,QACX,KAAK,KACJ,aAAYD,EAAA,iBACZ,MAAOA,EAAA,iBACP,QAAOA,EAAA,QAEG,eACT,IAEE,CAFFE,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA"}
+{"version":3,"file":"notice-action.cjs","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      kind=\"muted\"\n      :size=\"200\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          size=\"200\"\n        />\n      </template>\n    </dt-button>\n    <sr-only-close-button\n      v-else\n      @close=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  props: {\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton","SrOnlyCloseButton","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"qWAqCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,iBAEN,WAAY,aACVC,EAAAA,YACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,SAGF,MAAO,CAKL,UAAW,CACT,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,KAIb,MAAO,CAML,SAGF,MAAQ,CACN,MAAO,CACL,KAAM,IAAIC,EAAAA,qBAEd,EAEA,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,uBAAuB,CAC7C,GAGF,SAAW,CACJ,KAAK,YACR,KAAK,mBAAqB,SAAS,cAEvC,EAEA,eAAiB,QACfC,EAAA,KAAK,qBAAL,MAAAA,EAAyB,OAC3B,EAEA,QAAS,CACP,OAAS,CACP,KAAK,MAAM,OAAO,CACpB,EAEJ,KArGI,MAAM,oBACN,UAAQ,6KAFV,OAAAC,YAAA,EAAAC,qBA2BM,MA3BNC,EA2BM,CAtBSC,EAAA,uCAAbC,EAAAA,WAA2BC,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,CAAA,EAElBF,EAAA,yBAgBTG,EAAAA,YAGEC,EAAA,OADC,QAAOC,EAAA,2CAnBVF,EAAAA,YAgBYG,EAAA,OAdV,IAAI,cACJ,UAAQ,gCACR,WAAW,QACX,KAAK,QACJ,KAAM,IACN,aAAYD,EAAA,iBACZ,MAAOA,EAAA,iBACP,QAAOA,EAAA,QAEG,oBACT,IAEE,CAFFE,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA"}

package/dist/lib/notice/notice-action.js

@@ -1,10 +1,10 @@
-import { DtIconClose as r } from "@dialpad/dialtone-icons/vue3";
+import { DtIconClose as r } from "@dialpad/dialtone-icons/vue";
 import m from "../../shared/sr_only_close_button.js";
 import { DialtoneLocalization as d } from "../../localization/index.js";
 import { resolveComponent as o, openBlock as n, createElementBlock as u, renderSlot as _, createCommentVNode as f, createBlock as l, withCtx as p, createVNode as h } from "vue";
 import { _ as C } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import B from "../button/button.js";
-const b = {
+const k = {
   compatConfig: { MODE: 3 },
   name: "DtNoticeAction",
   components: {
@@ -60,13 +60,13 @@ const b = {
       this.$emit("close");
     }
   }
-}, k = {
+}, b = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
 function y(t, D, c, E, N, e) {
   const s = o("dt-icon-close"), i = o("dt-button"), a = o("sr-only-close-button");
-  return n(), u("div", k, [
+  return n(), u("div", b, [
     c.hideAction ? f("", !0) : _(t.$slots, "default", { key: 0 }),
     c.hideClose ? (n(), l(a, {
       key: 2,
@@ -74,23 +74,23 @@ function y(t, D, c, E, N, e) {
     }, null, 8, ["onClose"])) : (n(), l(i, {
       key: 1,
       ref: "closeButton",
-      circle: !0,
       "data-qa": "dt-notice-action-close-button",
       importance: "clear",
-      size: "sm",
+      kind: "muted",
+      size: 200,
       "aria-label": e.closeButtonTitle,
       title: e.closeButtonTitle,
       onClick: e.close
     }, {
-      icon: p(() => [
+      startIcon: p(() => [
         h(s, { size: "200" })
       ]),
       _: 1
     }, 8, ["aria-label", "title", "onClick"]))
   ]);
 }
-const L = /* @__PURE__ */ C(b, [["render", y]]);
+const I = /* @__PURE__ */ C(k, [["render", y]]);
 export {
-  L as default
+  I as default
 };
 //# sourceMappingURL=notice-action.js.map

package/dist/lib/notice/notice-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice-action.js","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      :circle=\"true\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      size=\"sm\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"200\"\n        />\n      </template>\n    </dt-button>\n    <sr-only-close-button\n      v-else\n      @close=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  props: {\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton","SrOnlyCloseButton","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":";;;;;;AAqCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;EAGF,OAAQ;AACN,WAAO;AAAA,MACL,MAAM,IAAIC,EAAoB;AAAA;EAElC;AAAA,EAEA,UAAU;AAAA,IACR,mBAAoB;AAClB,aAAO,KAAK,KAAK,GAAG,uBAAuB;AAAA,IAC7C;AAAA;EAGF,UAAW;AACT,IAAK,KAAK,cACR,KAAK,qBAAqB,SAAS;AAAA,EAEvC;AAAA,EAEA,gBAAiB;;AACf,KAAAC,IAAA,KAAK,uBAAL,QAAAA,EAAyB;AAAA,EAC3B;AAAA,EAEA,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA;AAEJ;EArGI,OAAM;AAAA,EACN,WAAQ;;;;AAFV,SAAAC,EAAA,GAAAC,EA2BM,OA3BNC,GA2BM;AAAA,IAtBSC,EAAA,yBAAbC,EAA2BC,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA;AAAA,IAElBF,EAAA,kBAgBTG,EAGEC,GAAA;AAAA;MADC,SAAOC,EAAA;AAAA,sCAnBVF,EAgBYG,GAAA;AAAA;MAdV,KAAI;AAAA,MACH,QAAQ;AAAA,MACT,WAAQ;AAAA,MACR,YAAW;AAAA,MACX,MAAK;AAAA,MACJ,cAAYD,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,SAAOA,EAAA;AAAA;MAEG,QACT,MAEE;AAAA,QAFFE,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;"}
+{"version":3,"file":"notice-action.js","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      kind=\"muted\"\n      :size=\"200\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          size=\"200\"\n        />\n      </template>\n    </dt-button>\n    <sr-only-close-button\n      v-else\n      @close=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  props: {\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton","SrOnlyCloseButton","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":";;;;;;AAqCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;EAGF,OAAQ;AACN,WAAO;AAAA,MACL,MAAM,IAAIC,EAAoB;AAAA;EAElC;AAAA,EAEA,UAAU;AAAA,IACR,mBAAoB;AAClB,aAAO,KAAK,KAAK,GAAG,uBAAuB;AAAA,IAC7C;AAAA;EAGF,UAAW;AACT,IAAK,KAAK,cACR,KAAK,qBAAqB,SAAS;AAAA,EAEvC;AAAA,EAEA,gBAAiB;;AACf,KAAAC,IAAA,KAAK,uBAAL,QAAAA,EAAyB;AAAA,EAC3B;AAAA,EAEA,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA;AAEJ;EArGI,OAAM;AAAA,EACN,WAAQ;;;;AAFV,SAAAC,EAAA,GAAAC,EA2BM,OA3BNC,GA2BM;AAAA,IAtBSC,EAAA,yBAAbC,EAA2BC,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA;AAAA,IAElBF,EAAA,kBAgBTG,EAGEC,GAAA;AAAA;MADC,SAAOC,EAAA;AAAA,sCAnBVF,EAgBYG,GAAA;AAAA;MAdV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACR,YAAW;AAAA,MACX,MAAK;AAAA,MACJ,MAAM;AAAA,MACN,cAAYD,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,SAAOA,EAAA;AAAA;MAEG,aACT,MAEE;AAAA,QAFFE,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;"}

package/dist/lib/notice/notice-content.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../common/utils/index.cjs"),e=require("vue"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d={compatConfig:{MODE:3},name:"DtNoticeContent",props:{title:{type:String,default:""},titleId:{type:String,default:void 0},contentId:{type:String,default:void 0}},data(){return{hasSlotContent:i.hasSlotContent}}},l={class:"d-notice__content","data-qa":"notice-content"},s=["id"],a=["id"];function r(n,_,t,m,o,f){return e.openBlock(),e.createElementBlock("div",l,[t.title||o.hasSlotContent(n.$slots.titleOverride)?(e.openBlock(),e.createElementBlock("p",{key:0,id:t.titleId,class:"d-notice__title","data-qa":"notice-content-title"},[e.renderSlot(n.$slots,"titleOverride",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],8,s)):e.createCommentVNode("",!0),e.createElementVNode("p",{id:t.contentId,class:"d-notice__message","data-qa":"notice-content-message"},[e.renderSlot(n.$slots,"default")],8,a)])}const u=c._(d,[["render",r]]);exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../common/utils/index.cjs"),t=require("vue"),l=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),a=require("../text/text.cjs"),c={compatConfig:{MODE:3},name:"DtNoticeContent",components:{DtText:a.default},props:{title:{type:String,default:""},titleId:{type:String,default:void 0},contentId:{type:String,default:void 0}},data(){return{hasSlotContent:d.hasSlotContent}}},s={class:"d-notice__content","data-qa":"notice-content"};function r(n,_,e,p,i,f){const o=t.resolveComponent("dt-text");return t.openBlock(),t.createElementBlock("div",s,[e.title||i.hasSlotContent(n.$slots.titleOverride)?(t.openBlock(),t.createBlock(o,{key:0,id:e.titleId,kind:"headline",size:300,density:"200",as:"p",class:"d-notice__title","data-qa":"notice-content-title"},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"titleOverride",{},()=>[t.createTextVNode(t.toDisplayString(e.title),1)])]),_:3},8,["id"])):t.createCommentVNode("",!0),t.createVNode(o,{id:e.contentId,kind:"body",size:200,wrap:"pretty",as:"p",class:"d-notice__message","data-qa":"notice-content-message"},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"default")]),_:3},8,["id"])])}const u=l._(c,[["render",r]]);exports.default=u;
 //# sourceMappingURL=notice-content.cjs.map

package/dist/lib/notice/notice-content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice-content.cjs","sources":["../../../components/notice/notice_content.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__content\"\n    data-qa=\"notice-content\"\n  >\n    <p\n      v-if=\"title || hasSlotContent($slots.titleOverride)\"\n      :id=\"titleId\"\n      class=\"d-notice__title\"\n      data-qa=\"notice-content-title\"\n    >\n      <!-- @slot Slot for the title  -->\n      <slot name=\"titleOverride\">\n        {{ title }}\n      </slot>\n    </p>\n    <p\n      :id=\"contentId\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeContent',\n\n  props: {\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * ID for the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * ID for the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_renderSlot","_createElementVNode"],"mappings":"uOA8BKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,kBAEN,MAAO,CAIL,MAAO,CACL,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,SAIb,MAAQ,CACN,MAAO,CACL,eAAAC,EAAAA,eAEJ,CACF,KAjEI,MAAM,oBACN,UAAQ,4DAFV,OAAAC,YAAA,EAAAC,qBAuBM,MAvBNC,EAuBM,CAlBIC,EAAA,OAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,iBADpDJ,EAAAA,mBAUI,IAAA,OARD,GAAIE,EAAA,QACL,MAAM,kBACN,UAAQ,yBAGRG,EAAAA,WAEOD,4BAFP,IAEO,qCADFF,EAAA,KAAK,EAAA,CAAA,uCAGZI,EAAAA,mBAOI,IAAA,CAND,GAAIJ,EAAA,UACL,MAAM,oBACN,UAAQ,2BAGRG,aAAQD,EAAA,OAAA,SAAA"}
+{"version":3,"file":"notice-content.cjs","sources":["../../../components/notice/notice_content.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__content\"\n    data-qa=\"notice-content\"\n  >\n    <dt-text\n      v-if=\"title || hasSlotContent($slots.titleOverride)\"\n      :id=\"titleId\"\n      kind=\"headline\"\n      :size=\"300\"\n      density=\"200\"\n      as=\"p\"\n      class=\"d-notice__title\"\n      data-qa=\"notice-content-title\"\n    >\n      <!-- @slot Slot for the title  -->\n      <slot name=\"titleOverride\">\n        {{ title }}\n      </slot>\n    </dt-text>\n    <dt-text\n      :id=\"contentId\"\n      kind=\"body\"\n      :size=\"200\"\n      wrap=\"pretty\"\n      as=\"p\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </dt-text>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\nimport { DtText } from '@/components/text';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeContent',\n\n  components: { DtText },\n\n  props: {\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * ID for the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * ID for the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtText","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_createBlock","_component_dt_text","_renderSlot","_createVNode"],"mappings":"qQAuCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,kBAEN,WAAY,CAAA,OAAEC,EAAAA,SAEd,MAAO,CAIL,MAAO,CACL,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,SAIb,MAAQ,CACN,MAAO,CACL,eAAAC,EAAAA,eAEJ,CACF,KA5EI,MAAM,oBACN,UAAQ,gFAFV,OAAAC,YAAA,EAAAC,qBA+BM,MA/BNC,EA+BM,CA1BIC,EAAA,OAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,iBADpDC,EAAAA,YAcUC,EAAA,OAZP,GAAIJ,EAAA,QACL,KAAK,WACJ,KAAM,IACP,QAAQ,MACR,GAAG,IACH,MAAM,kBACN,UAAQ,2CAGR,IAEO,CAFPK,EAAAA,WAEOH,4BAFP,IAEO,qCADFF,EAAA,KAAK,EAAA,CAAA,kDAGZM,EAAAA,YAWUF,EAAA,CAVP,GAAIJ,EAAA,UACL,KAAK,OACJ,KAAM,IACP,KAAK,SACL,GAAG,IACH,MAAM,oBACN,UAAQ,6CAGR,IAAQ,CAARK,aAAQH,EAAA,OAAA,SAAA"}

package/dist/lib/notice/notice-content.js

@@ -1,9 +1,11 @@
-import { hasSlotContent as a } from "../../common/utils/index.js";
-import { openBlock as n, createElementBlock as o, renderSlot as i, createTextVNode as c, toDisplayString as s, createCommentVNode as r, createElementVNode as l } from "vue";
-import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const f = {
+import { hasSlotContent as c } from "../../common/utils/index.js";
+import { resolveComponent as s, openBlock as o, createElementBlock as r, createBlock as l, withCtx as i, renderSlot as d, createTextVNode as m, toDisplayString as _, createCommentVNode as f, createVNode as p } from "vue";
+import { _ as u } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import y from "../text/text.js";
+const C = {
   compatConfig: { MODE: 3 },
   name: "DtNoticeContent",
+  components: { DtText: y },
   props: {
     /**
      * Title header of the notice. This can be left blank to remove the title from the notice entirely.
@@ -31,36 +33,51 @@ const f = {
   },
   data() {
     return {
-      hasSlotContent: a
+      hasSlotContent: c
     };
   }
-}, m = {
+}, g = {
   class: "d-notice__content",
   "data-qa": "notice-content"
-}, u = ["id"], p = ["id"];
-function g(e, S, t, h, d, C) {
-  return n(), o("div", m, [
-    t.title || d.hasSlotContent(e.$slots.titleOverride) ? (n(), o("p", {
+};
+function S(e, h, t, k, a, x) {
+  const n = s("dt-text");
+  return o(), r("div", g, [
+    t.title || a.hasSlotContent(e.$slots.titleOverride) ? (o(), l(n, {
       key: 0,
       id: t.titleId,
+      kind: "headline",
+      size: 300,
+      density: "200",
+      as: "p",
       class: "d-notice__title",
       "data-qa": "notice-content-title"
-    }, [
-      i(e.$slots, "titleOverride", {}, () => [
-        c(s(t.title), 1)
-      ])
-    ], 8, u)) : r("", !0),
-    l("p", {
+    }, {
+      default: i(() => [
+        d(e.$slots, "titleOverride", {}, () => [
+          m(_(t.title), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["id"])) : f("", !0),
+    p(n, {
       id: t.contentId,
+      kind: "body",
+      size: 200,
+      wrap: "pretty",
+      as: "p",
       class: "d-notice__message",
       "data-qa": "notice-content-message"
-    }, [
-      i(e.$slots, "default")
-    ], 8, p)
+    }, {
+      default: i(() => [
+        d(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["id"])
   ]);
 }
-const I = /* @__PURE__ */ _(f, [["render", g]]);
+const q = /* @__PURE__ */ u(C, [["render", S]]);
 export {
-  I as default
+  q as default
 };
 //# sourceMappingURL=notice-content.js.map

package/dist/lib/notice/notice-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice-content.js","sources":["../../../components/notice/notice_content.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__content\"\n    data-qa=\"notice-content\"\n  >\n    <p\n      v-if=\"title || hasSlotContent($slots.titleOverride)\"\n      :id=\"titleId\"\n      class=\"d-notice__title\"\n      data-qa=\"notice-content-title\"\n    >\n      <!-- @slot Slot for the title  -->\n      <slot name=\"titleOverride\">\n        {{ title }}\n      </slot>\n    </p>\n    <p\n      :id=\"contentId\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeContent',\n\n  props: {\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * ID for the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * ID for the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_renderSlot","_createElementVNode"],"mappings":";;;AA8BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEJ;AACF;EAjEI,OAAM;AAAA,EACN,WAAQ;;;AAFV,SAAAC,EAAA,GAAAC,EAuBM,OAvBNC,GAuBM;AAAA,IAlBIC,EAAA,SAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,UADpDJ,EAUI,KAAA;AAAA;MARD,IAAIE,EAAA;AAAA,MACL,OAAM;AAAA,MACN,WAAQ;AAAA;MAGRG,EAEOD,+BAFP,MAEO;AAAA,YADFF,EAAA,KAAK,GAAA,CAAA;AAAA;;IAGZI,EAOI,KAAA;AAAA,MAND,IAAIJ,EAAA;AAAA,MACL,OAAM;AAAA,MACN,WAAQ;AAAA;MAGRG,EAAQD,EAAA,QAAA,SAAA;AAAA;;;;"}
+{"version":3,"file":"notice-content.js","sources":["../../../components/notice/notice_content.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__content\"\n    data-qa=\"notice-content\"\n  >\n    <dt-text\n      v-if=\"title || hasSlotContent($slots.titleOverride)\"\n      :id=\"titleId\"\n      kind=\"headline\"\n      :size=\"300\"\n      density=\"200\"\n      as=\"p\"\n      class=\"d-notice__title\"\n      data-qa=\"notice-content-title\"\n    >\n      <!-- @slot Slot for the title  -->\n      <slot name=\"titleOverride\">\n        {{ title }}\n      </slot>\n    </dt-text>\n    <dt-text\n      :id=\"contentId\"\n      kind=\"body\"\n      :size=\"200\"\n      wrap=\"pretty\"\n      as=\"p\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </dt-text>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\nimport { DtText } from '@/components/text';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeContent',\n\n  components: { DtText },\n\n  props: {\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * ID for the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * ID for the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtText","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_createBlock","_component_dt_text","_renderSlot","_createVNode"],"mappings":";;;;AAuCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY,EAAE,QAAAC;EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEJ;AACF;EA5EI,OAAM;AAAA,EACN,WAAQ;;;;AAFV,SAAAC,EAAA,GAAAC,EA+BM,OA/BNC,GA+BM;AAAA,IA1BIC,EAAA,SAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,UADpDC,EAcUC,GAAA;AAAA;MAZP,IAAIJ,EAAA;AAAA,MACL,MAAK;AAAA,MACJ,MAAM;AAAA,MACP,SAAQ;AAAA,MACR,IAAG;AAAA,MACH,OAAM;AAAA,MACN,WAAQ;AAAA;iBAGR,MAEO;AAAA,QAFPK,EAEOH,+BAFP,MAEO;AAAA,cADFF,EAAA,KAAK,GAAA,CAAA;AAAA;;;;IAGZM,EAWUF,GAAA;AAAA,MAVP,IAAIJ,EAAA;AAAA,MACL,MAAK;AAAA,MACJ,MAAM;AAAA,MACP,MAAK;AAAA,MACL,IAAG;AAAA,MACH,OAAM;AAAA,MACN,WAAQ;AAAA;iBAGR,MAAQ;AAAA,QAARK,EAAQH,EAAA,QAAA,SAAA;AAAA;;;;;;"}

package/dist/lib/notice/notice-icon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@dialpad/dialtone-icons/vue3"),r=require("./notice-constants.cjs"),l=require("../../common/utils/index.cjs"),t=require("vue"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),s=new Map([["info",e.DtIconInfo],["success",e.DtIconCheckCircle],["warning",e.DtIconAlertTriangle],["error",e.DtIconAlertCircle],["base",e.DtIconBell]]),a={compatConfig:{MODE:3},name:"DtNoticeIcon",components:{DtIconInfo:e.DtIconInfo,DtIconCheckCircle:e.DtIconCheckCircle,DtIconAlertTriangle:e.DtIconAlertTriangle,DtIconAlertCircle:e.DtIconAlertCircle,DtIconBell:e.DtIconBell},props:{kind:{type:String,default:"base",validate(n){return r.NOTICE_KINDS.includes(n)}}},data(){return{hasSlotContent:l.hasSlotContent}},computed:{defaultIcon(){return s.get(this.kind)}}},u={key:0,"aria-hidden":"true",class:"d-notice__icon"};function d(n,D,_,C,c,o){return o.defaultIcon||c.hasSlotContent(n.$slots.default)?(t.openBlock(),t.createElementBlock("div",u,[t.renderSlot(n.$slots,"default",{},()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.defaultIcon),{size:"400"}))])])):t.createCommentVNode("",!0)}const I=i._(a,[["render",d]]);exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@dialpad/dialtone-icons/vue"),r=require("./notice-constants.cjs"),l=require("../../common/utils/index.cjs"),t=require("vue"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),s=new Map([["info",e.DtIconInfo],["success",e.DtIconCheckCircle],["warning",e.DtIconAlertTriangle],["error",e.DtIconAlertCircle],["base",e.DtIconBell]]),a={compatConfig:{MODE:3},name:"DtNoticeIcon",components:{DtIconInfo:e.DtIconInfo,DtIconCheckCircle:e.DtIconCheckCircle,DtIconAlertTriangle:e.DtIconAlertTriangle,DtIconAlertCircle:e.DtIconAlertCircle,DtIconBell:e.DtIconBell},props:{kind:{type:String,default:"base",validate(n){return r.NOTICE_KINDS.includes(n)}}},data(){return{hasSlotContent:l.hasSlotContent}},computed:{defaultIcon(){return s.get(this.kind)}}},u={key:0,"aria-hidden":"true",class:"d-notice__icon"};function d(n,D,_,C,c,o){return o.defaultIcon||c.hasSlotContent(n.$slots.default)?(t.openBlock(),t.createElementBlock("div",u,[t.renderSlot(n.$slots,"default",{},()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.defaultIcon),{size:"400"}))])])):t.createCommentVNode("",!0)}const I=i._(a,[["render",d]]);exports.default=I;
 //# sourceMappingURL=notice-icon.cjs.map

package/dist/lib/notice/notice-icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice-icon.cjs","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue3';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["kindToIcon","DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","_sfc_main","kind","NOTICE_KINDS","hasSlotContent","$options","$data","_ctx","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":"qTA2BMA,EAAa,IAAI,IAAI,CACzB,CAAC,OAAQC,EAAAA,UAAU,EACnB,CAAC,UAAWC,EAAAA,iBAAiB,EAC7B,CAAC,UAAWC,EAAAA,mBAAmB,EAC/B,CAAC,QAASC,EAAAA,iBAAiB,EAC3B,CAAC,OAAQC,EAAAA,UAAU,CACrB,CAAC,EAEIC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eAEN,WAAY,YACVL,EAAAA,WACA,kBAAAC,EAAAA,kBACA,oBAAAC,EAAAA,oBACA,kBAAAC,EAAAA,6BACAC,EAAAA,YAGF,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUE,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,IAIJ,MAAQ,CACN,MAAO,CACL,eAAAE,EAAAA,eAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAOT,EAAW,IAAI,KAAK,IAAI,CACjC,EAEJ,WArEI,cAAY,OACZ,MAAM,0CAFA,OAAAU,EAAA,aAAeC,EAAA,eAAeC,EAAA,OAAO,OAAO,GADpDC,EAAAA,YAAAC,EAAAA,mBAYM,MAZNC,EAYM,CANJC,EAAAA,WAKOJ,sBALP,IAKO,EAJLC,YAAA,EAAAI,EAAAA,YAGEC,0BAFKR,EAAA,WAAW,EAAA,CAChB,KAAK,MAAK"}
+{"version":3,"file":"notice-icon.cjs","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["kindToIcon","DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","_sfc_main","kind","NOTICE_KINDS","hasSlotContent","$options","$data","_ctx","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":"oTA2BMA,EAAa,IAAI,IAAI,CACzB,CAAC,OAAQC,EAAAA,UAAU,EACnB,CAAC,UAAWC,EAAAA,iBAAiB,EAC7B,CAAC,UAAWC,EAAAA,mBAAmB,EAC/B,CAAC,QAASC,EAAAA,iBAAiB,EAC3B,CAAC,OAAQC,EAAAA,UAAU,CACrB,CAAC,EAEIC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eAEN,WAAY,YACVL,EAAAA,WACA,kBAAAC,EAAAA,kBACA,oBAAAC,EAAAA,oBACA,kBAAAC,EAAAA,6BACAC,EAAAA,YAGF,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUE,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,IAIJ,MAAQ,CACN,MAAO,CACL,eAAAE,EAAAA,eAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAOT,EAAW,IAAI,KAAK,IAAI,CACjC,EAEJ,WArEI,cAAY,OACZ,MAAM,0CAFA,OAAAU,EAAA,aAAeC,EAAA,eAAeC,EAAA,OAAO,OAAO,GADpDC,EAAAA,YAAAC,EAAAA,mBAYM,MAZNC,EAYM,CANJC,EAAAA,WAKOJ,sBALP,IAKO,EAJLC,YAAA,EAAAI,EAAAA,YAGEC,0BAFKR,EAAA,WAAW,EAAA,CAChB,KAAK,MAAK"}

package/dist/lib/notice/notice-icon.js

@@ -1,4 +1,4 @@
-import { DtIconBell as n, DtIconAlertCircle as r, DtIconAlertTriangle as c, DtIconCheckCircle as a, DtIconInfo as s } from "@dialpad/dialtone-icons/vue3";
+import { DtIconBell as n, DtIconAlertCircle as r, DtIconAlertTriangle as c, DtIconCheckCircle as a, DtIconInfo as s } from "@dialpad/dialtone-icons/vue";
 import { NOTICE_KINDS as l } from "./notice-constants.js";
 import { hasSlotContent as d } from "../../common/utils/index.js";
 import { openBlock as o, createElementBlock as m, renderSlot as f, createBlock as p, resolveDynamicComponent as u, createCommentVNode as I } from "vue";

package/dist/lib/notice/notice-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice-icon.js","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue3';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["kindToIcon","DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","_sfc_main","kind","NOTICE_KINDS","hasSlotContent","$options","$data","_ctx","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;AA2BA,MAAMA,IAAa,oBAAI,IAAI;AAAA,EACzB,CAAC,QAAQC,CAAU;AAAA,EACnB,CAAC,WAAWC,CAAiB;AAAA,EAC7B,CAAC,WAAWC,CAAmB;AAAA,EAC/B,CAAC,SAASC,CAAiB;AAAA,EAC3B,CAAC,QAAQC,CAAU;AACrB,CAAC,GAEIC,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,YAAAL;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUE,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;EAIJ,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAE;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,aAAOT,EAAW,IAAI,KAAK,IAAI;AAAA,IACjC;AAAA;AAEJ;;EArEI,eAAY;AAAA,EACZ,OAAM;;;AAFA,SAAAU,EAAA,eAAeC,EAAA,eAAeC,EAAA,OAAO,OAAO,KADpDC,KAAAC,EAYM,OAZNC,GAYM;AAAA,IANJC,EAKOJ,yBALP,MAKO;AAAA,OAJLC,EAAA,GAAAI,EAGEC,EAFKR,EAAA,WAAW,GAAA,EAChB,MAAK,OAAK;AAAA;;;;"}
+{"version":3,"file":"notice-icon.js","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["kindToIcon","DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","_sfc_main","kind","NOTICE_KINDS","hasSlotContent","$options","$data","_ctx","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;AA2BA,MAAMA,IAAa,oBAAI,IAAI;AAAA,EACzB,CAAC,QAAQC,CAAU;AAAA,EACnB,CAAC,WAAWC,CAAiB;AAAA,EAC7B,CAAC,WAAWC,CAAmB;AAAA,EAC/B,CAAC,SAASC,CAAiB;AAAA,EAC3B,CAAC,QAAQC,CAAU;AACrB,CAAC,GAEIC,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,YAAAL;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUE,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;EAIJ,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAE;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,aAAOT,EAAW,IAAI,KAAK,IAAI;AAAA,IACjC;AAAA;AAEJ;;EArEI,eAAY;AAAA,EACZ,OAAM;;;AAFA,SAAAU,EAAA,eAAeC,EAAA,eAAeC,EAAA,OAAO,OAAO,KADpDC,KAAAC,EAYM,OAZNC,GAYM;AAAA,IANJC,EAKOJ,yBALP,MAKO;AAAA,OAJLC,EAAA,GAAAI,EAGEC,EAFKR,EAAA,WAAW,GAAA,EAChB,MAAK,OAAK;AAAA;;;;"}

package/dist/lib/notice/notice.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./notice-icon.cjs"),s=require("./notice-content.cjs"),u=require("./notice-action.cjs"),i=require("./notice-constants.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_={compatConfig:{MODE:3},name:"DtNotice",components:{DtNoticeIcon:r.default,DtNoticeContent:s.default,DtNoticeAction:u.default},props:{titleId:{type:String,default:void 0},contentId:{type:String,default:void 0},title:{type:String,default:""},role:{type:String,default:"status",validate(t){return i.NOTICE_ROLES.includes(t)}},important:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return i.NOTICE_KINDS.includes(t)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},truncateText:{type:Boolean,default:!1}},emits:["close","click"],computed:{noticeClass(){return["d-notice",{error:"d-notice--error",info:"d-notice--info",success:"d-notice--success",warning:"d-notice--warning",base:"d-notice--base"}[this.kind],{"d-notice--important":this.important,"d-notice--truncate":this.truncateText}]}}};function m(t,o,n,p,h,c){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),a=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(c.noticeClass),"data-qa":"notice"},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title,role:n.role},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title","role"]),e.createVNode(a,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=S=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],2)}const C=f._(_,[["render",m]]);exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./notice-icon.cjs"),r=require("./notice-content.cjs"),u=require("./notice-action.cjs"),i=require("./notice-constants.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_={compatConfig:{MODE:3},name:"DtNotice",components:{DtNoticeIcon:s.default,DtNoticeContent:r.default,DtNoticeAction:u.default},props:{titleId:{type:String,default:void 0},contentId:{type:String,default:void 0},title:{type:String,default:""},role:{type:String,default:"status",validate(t){return i.NOTICE_ROLES.includes(t)}},important:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return i.NOTICE_KINDS.includes(t)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},truncateText:{type:Boolean,default:!1}},emits:["close","click"],computed:{noticeClass(){return["d-notice",{error:"d-notice--error",info:"d-notice--info",success:"d-notice--success",warning:"d-notice--warning",base:"d-notice--base"}[this.kind],{"d-notice--important":this.important,"d-notice--truncate":this.truncateText}]}}};function m(t,o,n,h,p,c){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),a=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(c.noticeClass),"data-qa":"notice"},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind,class:e.normalizeClass({"d-notice__icon--has-title":n.title||t.$slots.titleOverride})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind","class"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title,role:n.role},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title","role"]),e.createVNode(a,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=S=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],2)}const C=f._(_,[["render",m]]);exports.default=C;
 //# sourceMappingURL=notice.cjs.map

package/dist/lib/notice/notice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice.cjs","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      @close=\"$emit('close')\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","role","NOTICE_ROLES","kind","NOTICE_KINDS","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"mUA+CKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,MAAO,CAKL,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,QAMX,MAAO,CACL,KAAM,OACN,QAAS,IASX,KAAM,CACJ,KAAM,OACN,QAAS,SACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAQF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUE,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAQX,aAAc,CACZ,KAAM,QACN,QAAS,KAIb,MAAO,CAML,QAQA,SAGF,SAAU,CACR,aAAe,CAQb,MAAO,CACL,WARkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAIM,KAAK,IAAI,EACrB,CAAE,sBAAuB,KAAK,UAAW,qBAAsB,KAAK,cAExE,EAEJ,+KA9LEE,EAAAA,mBAiCQ,QAAA,CAhCL,uBAAOC,EAAA,WAAW,EACnB,UAAQ,WAGCC,EAAA,oDADTC,EAAAA,YAMiBC,EAAA,OAJd,KAAMF,EAAA,yBAGP,IAAoB,CAApBG,aAAoBC,EAAA,OAAA,MAAA,sBAEtBC,EAAAA,YAaoBC,EAAA,CAZjB,WAAUN,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,MACP,KAAMA,EAAA,OAEI,wBAGT,IAA6B,CAA7BG,aAA6BC,EAAA,OAAA,eAAA,sBAG/B,IAAQ,CAARD,aAAQC,EAAA,OAAA,SAAA,qDAEVC,EAAAA,YAOmBE,EAAA,CANhB,cAAaP,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOI,EAAA,MAAK,OAAA,uBAGb,IAAsB,CAAtBD,aAAsBC,EAAA,OAAA,QAAA"}
+{"version":3,"file":"notice.cjs","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n      :class=\"{ 'd-notice__icon--has-title': title || $slots.titleOverride }\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      @close=\"$emit('close')\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","role","NOTICE_ROLES","kind","NOTICE_KINDS","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_normalizeClass","_ctx","_renderSlot","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"mUAgDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,MAAO,CAKL,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,QAMX,MAAO,CACL,KAAM,OACN,QAAS,IASX,KAAM,CACJ,KAAM,OACN,QAAS,SACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAQF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUE,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAQX,aAAc,CACZ,KAAM,QACN,QAAS,KAIb,MAAO,CAML,QAQA,SAGF,SAAU,CACR,aAAe,CAQb,MAAO,CACL,WARkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAIM,KAAK,IAAI,EACrB,CAAE,sBAAuB,KAAK,UAAW,qBAAsB,KAAK,cAExE,EAEJ,+KA/LEE,EAAAA,mBAkCQ,QAAA,CAjCL,uBAAOC,EAAA,WAAW,EACnB,UAAQ,WAGCC,EAAA,oDADTC,EAAAA,YAOiBC,EAAA,OALd,KAAMF,EAAA,KACN,MAAKG,EAAAA,eAAA,CAAA,4BAAiCH,EAAA,OAASI,EAAA,OAAO,aAAa,CAAA,sBAGpE,IAAoB,CAApBC,aAAoBD,EAAA,OAAA,MAAA,8BAEtBE,EAAAA,YAaoBC,EAAA,CAZjB,WAAUP,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,MACP,KAAMA,EAAA,OAEI,wBAGT,IAA6B,CAA7BK,aAA6BD,EAAA,OAAA,eAAA,sBAG/B,IAAQ,CAARC,aAAQD,EAAA,OAAA,SAAA,qDAEVE,EAAAA,YAOmBE,EAAA,CANhB,cAAaR,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOI,EAAA,MAAK,OAAA,uBAGb,IAAsB,CAAtBC,aAAsBD,EAAA,OAAA,QAAA"}

package/dist/lib/notice/notice.js

@@ -1,16 +1,16 @@
-import u from "./notice-icon.js";
-import m from "./notice-content.js";
-import _ from "./notice-action.js";
-import { NOTICE_KINDS as p, NOTICE_ROLES as h } from "./notice-constants.js";
-import { resolveComponent as i, openBlock as d, createElementBlock as C, normalizeClass as y, createBlock as k, withCtx as n, renderSlot as o, createCommentVNode as I, createVNode as l } from "vue";
+import m from "./notice-icon.js";
+import _ from "./notice-content.js";
+import p from "./notice-action.js";
+import { NOTICE_KINDS as h, NOTICE_ROLES as C } from "./notice-constants.js";
+import { resolveComponent as i, openBlock as d, createElementBlock as y, normalizeClass as l, createBlock as k, withCtx as n, renderSlot as o, createCommentVNode as I, createVNode as a } from "vue";
 import { _ as N } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const g = {
   compatConfig: { MODE: 3 },
   name: "DtNotice",
   components: {
-    DtNoticeIcon: u,
-    DtNoticeContent: m,
-    DtNoticeAction: _
+    DtNoticeIcon: m,
+    DtNoticeContent: _,
+    DtNoticeAction: p
   },
   props: {
     /**
@@ -46,7 +46,7 @@ const g = {
       type: String,
       default: "status",
       validate(t) {
-        return h.includes(t);
+        return C.includes(t);
       }
     },
     /**
@@ -66,7 +66,7 @@ const g = {
       type: String,
       default: "base",
       validate(t) {
-        return p.includes(t);
+        return h.includes(t);
       }
     },
     /**
@@ -134,22 +134,23 @@ const g = {
     }
   }
 };
-function B(t, c, e, S, v, a) {
-  const r = i("dt-notice-icon"), s = i("dt-notice-content"), f = i("dt-notice-action");
-  return d(), C("aside", {
-    class: y(a.noticeClass),
+function B(t, c, e, S, v, s) {
+  const r = i("dt-notice-icon"), f = i("dt-notice-content"), u = i("dt-notice-action");
+  return d(), y("aside", {
+    class: l(s.noticeClass),
     "data-qa": "notice"
   }, [
     e.hideIcon ? I("", !0) : (d(), k(r, {
       key: 0,
-      kind: e.kind
+      kind: e.kind,
+      class: l({ "d-notice__icon--has-title": e.title || t.$slots.titleOverride })
     }, {
       default: n(() => [
         o(t.$slots, "icon")
       ]),
       _: 3
-    }, 8, ["kind"])),
-    l(s, {
+    }, 8, ["kind", "class"])),
+    a(f, {
       "title-id": e.titleId,
       "content-id": e.contentId,
       title: e.title,
@@ -163,10 +164,10 @@ function B(t, c, e, S, v, a) {
       ]),
       _: 3
     }, 8, ["title-id", "content-id", "title", "role"]),
-    l(f, {
+    a(u, {
       "hide-action": e.hideAction,
       "hide-close": e.hideClose,
-      onClose: c[0] || (c[0] = (D) => t.$emit("close"))
+      onClose: c[0] || (c[0] = (O) => t.$emit("close"))
     }, {
       default: n(() => [
         o(t.$slots, "action")

package/dist/lib/notice/notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice.js","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      @close=\"$emit('close')\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","role","NOTICE_ROLES","kind","NOTICE_KINDS","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":";;;;;;AA+CA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUC,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;;IAQF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUE,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;IAOF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;EAGF,UAAU;AAAA,IACR,cAAe;AAQb,aAAO;AAAA,QACL;AAAA,QARkB;AAAA,UAClB,OAAO;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,UACT,SAAS;AAAA,UACT,MAAM;AAAA,UAIM,KAAK,IAAI;AAAA,QACrB,EAAE,uBAAuB,KAAK,WAAW,sBAAsB,KAAK;;IAExE;AAAA;AAEJ;;;cA9LEE,EAiCQ,SAAA;AAAA,IAhCL,SAAOC,EAAA,WAAW;AAAA,IACnB,WAAQ;AAAA;IAGCC,EAAA,6BADTC,EAMiBC,GAAA;AAAA;MAJd,MAAMF,EAAA;AAAA;iBAGP,MAAoB;AAAA,QAApBG,EAAoBC,EAAA,QAAA,MAAA;AAAA;;;IAEtBC,EAaoBC,GAAA;AAAA,MAZjB,YAAUN,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,MAAMA,EAAA;AAAA;MAEI,iBAGT,MAA6B;AAAA,QAA7BG,EAA6BC,EAAA,QAAA,eAAA;AAAA;iBAG/B,MAAQ;AAAA,QAARD,EAAQC,EAAA,QAAA,SAAA;AAAA;;;IAEVC,EAOmBE,GAAA;AAAA,MANhB,eAAaP,EAAA;AAAA,MACb,cAAYA,EAAA;AAAA,MACZ,gCAAOI,EAAA,MAAK,OAAA;AAAA;iBAGb,MAAsB;AAAA,QAAtBD,EAAsBC,EAAA,QAAA,QAAA;AAAA;;;;;;"}
+{"version":3,"file":"notice.js","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n      :class=\"{ 'd-notice__icon--has-title': title || $slots.titleOverride }\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      @close=\"$emit('close')\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","role","NOTICE_ROLES","kind","NOTICE_KINDS","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_normalizeClass","_ctx","_renderSlot","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":";;;;;;AAgDA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUC,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;;IAQF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUE,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;IAOF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;EAGF,UAAU;AAAA,IACR,cAAe;AAQb,aAAO;AAAA,QACL;AAAA,QARkB;AAAA,UAClB,OAAO;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,UACT,SAAS;AAAA,UACT,MAAM;AAAA,UAIM,KAAK,IAAI;AAAA,QACrB,EAAE,uBAAuB,KAAK,WAAW,sBAAsB,KAAK;;IAExE;AAAA;AAEJ;;;cA/LEE,EAkCQ,SAAA;AAAA,IAjCL,SAAOC,EAAA,WAAW;AAAA,IACnB,WAAQ;AAAA;IAGCC,EAAA,6BADTC,EAOiBC,GAAA;AAAA;MALd,MAAMF,EAAA;AAAA,MACN,OAAKG,EAAA,EAAA,6BAAiCH,EAAA,SAASI,EAAA,OAAO,cAAa,CAAA;AAAA;iBAGpE,MAAoB;AAAA,QAApBC,EAAoBD,EAAA,QAAA,MAAA;AAAA;;;IAEtBE,EAaoBC,GAAA;AAAA,MAZjB,YAAUP,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,MAAMA,EAAA;AAAA;MAEI,iBAGT,MAA6B;AAAA,QAA7BK,EAA6BD,EAAA,QAAA,eAAA;AAAA;iBAG/B,MAAQ;AAAA,QAARC,EAAQD,EAAA,QAAA,SAAA;AAAA;;;IAEVE,EAOmBE,GAAA;AAAA,MANhB,eAAaR,EAAA;AAAA,MACb,cAAYA,EAAA;AAAA,MACZ,gCAAOI,EAAA,MAAK,OAAA;AAAA;iBAGb,MAAsB;AAAA,QAAtBC,EAAsBD,EAAA,QAAA,QAAA;AAAA;;;;;;"}