{"version":3,"file":"progress-circle.cjs","names":[],"sources":["../../../components/progress_circle/progress_circle.vue"],"sourcesContent":["<script>\n/**\n * Circular SVG progress indicator for determinate upload or processing progress.\n * @see https://dialtone.dialpad.com/components/progress-circle.html\n */\nimport { PROGRESS_CIRCLE_SIZES, PROGRESS_CIRCLE_KINDS } from './progress_circle_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtProgressCircle',\n  props: {\n    /** Accessible label read by screen readers. */\n    ariaLabel: { type: String, required: true },\n    /** Current progress value (0–100). */\n    progress: {\n      type: Number,\n      default: 0,\n      validator: (v) => v >= 0 && v <= 100,\n    },\n\n    /**\n     * The size of the progress indicator, aligning to Dialtone icon sizes.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(PROGRESS_CIRCLE_SIZES).includes(s),\n    },\n\n    /**\n     * The color variant of the progress indicator.\n     * @values default, brand, critical, positive, warning, info, ai\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(PROGRESS_CIRCLE_KINDS).includes(k),\n    },\n  },\n\n  data () {\n    return {\n      strokeWidth: 3.25,\n      uid: Math.random().toString(36).substring(2, 9),\n    };\n  },\n\n  computed: {\n    // SVG stroke doesn't support CSS gradients, so the \"ai\" kind uses an inline\n    // SVG <linearGradient> referenced via url(#id) instead of a CSS variable.\n    isAi () {\n      return this.kind === 'ai';\n    },\n\n    // Unique per-instance to avoid collisions when multiple progress circles coexist.\n    aiGradientId () {\n      return `progress-circle-ai-gradient-${this.uid}`;\n    },\n\n    fillStrokeStyle () {\n      return this.isAi ? { stroke: `url(#${this.aiGradientId})` } : {};\n    },\n\n    sizeClass () {\n      return PROGRESS_CIRCLE_SIZES[this.size];\n    },\n\n    kindClass () {\n      return PROGRESS_CIRCLE_KINDS[this.kind];\n    },\n\n    circleRadius () {\n      return 12 - (this.strokeWidth / 2);\n    },\n\n    circleCircumference () {\n      return 2 * Math.PI * this.circleRadius;\n    },\n\n    // Draws a full circle as two arcs so getTotalLength() returns the circumference.\n    circlePath () {\n      const r = this.circleRadius;\n      const top = 12 - r;\n      const bottom = 12 + r;\n      return `M 12 ${top} A ${r} ${r} 0 0 1 12 ${bottom} A ${r} ${r} 0 0 1 12 ${top} Z`;\n    },\n\n    // stroke-dasharray/offset control how much of the circle is visually \"filled\".\n    cssVars () {\n      const C = this.circleCircumference;\n      const MIN_VISUAL_PROGRESS = 5;\n      const visualProgress = (this.progress > 0 && this.progress < MIN_VISUAL_PROGRESS)\n        ? MIN_VISUAL_PROGRESS\n        : this.progress;\n      const fillLength = C * visualProgress / 100;\n      const sw = this.strokeWidth;\n      const capArc = sw / 2;\n\n      // When both arcs are visible, round linecaps extend capArc past each endpoint.\n      // Shorten each arc by capArc at both ends (total sw per arc) so the caps meet\n      // exactly at each junction without overlapping. Rotate the fill forward by\n      // capArc so its start cap lands at 12 o'clock.\n      const both = this.progress > 0 && this.progress < 100;\n      const adj = both ? sw : 0;\n\n      return {\n        // Full-circle arcs use 'none' to avoid round-cap overlap at the path seam.\n        '--stroke-dasharray': (!both && this.progress >= 100) ? 'none' : C,\n        '--fill-dashoffset': C - Math.max(0, fillLength - adj),\n        '--fill-rotate': `${both ? (capArc / C * 360) : 0}deg`,\n        '--track-dasharray': (!both && this.progress <= 0) ? 'none' : `${Math.max(0, C - fillLength - adj)} ${C}`,\n        '--track-dashoffset': -(fillLength + (both ? capArc : 0)),\n      };\n    },\n  },\n\n};\n</script>\n\n<template>\n  <div\n    class=\"d-progress-circle\"\n    :class=\"[sizeClass, kindClass]\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    data-qa=\"dt-progress-circle\"\n  >\n    <svg\n      class=\"d-progress-circle__bar\"\n      :style=\"cssVars\"\n      viewBox=\"0 0 24 24\"\n    >\n      <defs v-if=\"isAi\">\n        <linearGradient\n          :id=\"aiGradientId\"\n          x1=\"0%\"\n          y1=\"0%\"\n          x2=\"100%\"\n          y2=\"100%\"\n        >\n          <!-- This emulates the AI gradient, for which each color isn't directly mappable to a CSS variable -->\n          <stop\n            offset=\"0%\"\n            stop-color=\"var(--dt-color-brand-gold)\"\n          />\n          <stop\n            offset=\"33%\"\n            stop-color=\"var(--dt-color-brand-red)\"\n          />\n          <stop\n            offset=\"66%\"\n            stop-color=\"var(--dt-color-brand-magenta)\"\n          />\n          <stop\n            offset=\"100%\"\n            stop-color=\"var(--dt-color-brand-purple)\"\n          />\n        </linearGradient>\n      </defs>\n      <path\n        v-if=\"progress <= 95\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--track\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n      />\n      <path\n        v-if=\"progress > 0\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--fill\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n        :style=\"fillStrokeStyle\"\n      />\n    </svg>\n  </div>\n</template>\n"],"mappings":"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"}