{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/components/circleGraph.ts"],"names":["CircleGraph","Component","el","__publicField","pieChartObserver","entries","chart","speed","delay","percent","circle","text"],"mappings":"wUAEA,MAAMA,UAAoBC,WAAU,CAIlC,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EAJVC,EAAA,2BAAsB,OAAO,WAAW,kCAAkC,EACvE,OAAO,EAKR,KAAK,KAAK,CACZ,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,IAAK,KAAK,GAAG,cAAc,wBAAwB,CACrD,CACF,CAEA,MAAO,CACL,MAAMC,EAAmB,IAAI,qBAC3BC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CAEvB,GADA,QAAQ,IAAI,QAASA,CAAK,EACtBA,EAAM,eAAgB,CACxB,IAAIC,EAAQ,OAAO,KAAK,GAAG,QAAQ,KAAK,GAAK,EAC7C,KAAK,sBAAwBA,EAAQ,GACrC,MAAMC,EAAQ,OAAO,KAAK,GAAG,QAAQ,KAAK,GAAK,EACzCC,EAAU,OAAO,KAAK,GAAG,QAAQ,OAAO,GAAK,EAE7CC,EAASJ,EAAM,OAAO,cAAc,QAAQ,EAElDA,EAAM,OAAO,aACX,aACA,GAAGG,qBACL,EAEIC,GACFA,EAAO,QACL,CACE,CACE,iBAAkB,GACpB,EACA,CACE,iBAAkB,IAAMD,CAC1B,CACF,EACA,CACE,SAAUF,EACV,OAAQ,uCACR,KAAM,UACR,CACF,EAGF,MAAMI,EAAOL,EAAM,OAAO,cAAc,MAAM,EAC1CK,IACFA,EAAK,YAAc,GAAGF,KAEtBE,EAAK,QACH,CACE,CACE,QAAS,EACT,UAAW,iBACb,EACA,CACE,QAAS,EACT,UAAW,gBACb,CACF,EACA,CACE,MAAO,KAAK,oBAAsB,EAAIH,EACtC,SAAU,KAAK,oBAAsB,EAAI,IACzC,OAAQ,uCACR,KAAM,UACR,CACF,GAEFJ,EAAiB,UAAUE,EAAM,MAAM,CACzC,CACF,CAAC,CACH,EACA,CACE,UAAW,EACb,CACF,EAEI,KAAK,IAAI,KACXF,EAAiB,QAAQ,KAAK,IAAI,GAAkB,CAExD,CACF,CAEA,QAAeJ,C","file":"scripts/910.3774e3c2d9a67915c4af.js","sourcesContent":["import { Component } from '@verndale/core';\n\nclass CircleGraph extends Component {\n  preferReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')\n    .matches;\n\n  constructor(el: HTMLElement) {\n    super(el);\n\n    this.init();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      svg: this.el.querySelector('.circle-graph__box svg') as HTMLElement\n    };\n  }\n\n  init() {\n    const pieChartObserver = new IntersectionObserver(\n      entries => {\n        entries.forEach(chart => {\n          console.log('chart', chart);\n          if (chart.isIntersecting) {\n            let speed = Number(this.el.dataset.speed) || 0;\n            this.preferReducedMotion && (speed = 0);\n            const delay = Number(this.el.dataset.delay) || 0;\n            const percent = Number(this.el.dataset.percent) || 0;\n\n            const circle = chart.target.querySelector('circle');\n\n            chart.target.setAttribute(\n              'aria-label',\n              `${percent} percent pie chart`\n            );\n\n            if (circle) {\n              circle.animate(\n                [\n                  {\n                    strokeDashoffset: 100\n                  },\n                  {\n                    strokeDashoffset: 100 - percent\n                  }\n                ],\n                {\n                  duration: speed,\n                  easing: 'cubic-bezier(0.57,-0.04, 0.41, 1.13)',\n                  fill: 'forwards'\n                }\n              );\n            }\n\n            const text = chart.target.querySelector('text');\n            if (text) {\n              text.textContent = `${percent}%`;\n\n              text.animate(\n                [\n                  {\n                    opacity: 0,\n                    transform: 'translateY(20%)'\n                  },\n                  {\n                    opacity: 1,\n                    transform: 'translateY(0%)'\n                  }\n                ],\n                {\n                  delay: this.preferReducedMotion ? 0 : delay,\n                  duration: this.preferReducedMotion ? 0 : 300,\n                  easing: 'cubic-bezier(0.57,-0.04, 0.41, 1.13)',\n                  fill: 'forwards'\n                }\n              );\n            }\n            pieChartObserver.unobserve(chart.target);\n          }\n        });\n      },\n      {\n        threshold: 0.8\n      }\n    );\n\n    if (this.dom.svg) {\n      pieChartObserver.observe(this.dom.svg as HTMLElement);\n    }\n  }\n}\n\nexport default CircleGraph;\n"],"sourceRoot":""}