{"version":3,"file":"styles.css","mappings":"AAgJA,gBACA,mBACA,iBAGA,oBACA,uBAFA,iBAKA,CAEA,gCAHA,0BADA,wBAOA,CAEA,gBAEA,6CACA,iCAFA,uBAGA,CAEA,gBAGA,2BACA,6CACA,iCAJA,yBACA,uBAIA,CAEA,gBAGA,mBAIA,wBALA,aAIA,YAFA,uBAHA,kBAIA,UAGA","sources":["webpack://@square/maker/./src/components/ProgressCircle/src/ProgressCircle.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"$s.ProgressCircleContainer\"\n\t\t:style=\"styles\"\n\t\trole=\"progressbar\"\n\t\taria-valuemin=\"0\"\n\t\taria-valuemax=\"100\"\n\t\t:aria-valuenow=\"progress\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<svg\n\t\t\t:class=\"$s.ProgressCircle\"\n\t\t\tviewBox=\"0 0 48 48\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\t:class=\"$s.ProgressBackground\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tcx=\"24\"\n\t\t\t\tcy=\"24\"\n\t\t\t\tr=\"22\"\n\t\t\t/>\n\t\t\t<circle\n\t\t\t\tv-if=\"showProgress\"\n\t\t\t\t:class=\"$s.Progress\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tcx=\"24\"\n\t\t\t\tcy=\"24\"\n\t\t\t\tr=\"22\"\n\t\t\t/>\n\t\t</svg>\n\t\t<div\n\t\t\tv-if=\"resolvedShowIcon\"\n\t\t\t:class=\"$s.IconContainer\"\n\t\t>\n\t\t\t<m-icon :name=\"resolvedIconName\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport { MIcon } from '@square/maker/components/Icon';\nimport cssValidator from '@square/maker/utils/css-validator';\n\nconst MIN_PROGRESS = 0;\nconst MAX_PROGRESS = 100;\nconst TWO = 2;\nconst RADIUS = 22;\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tcomponents: {\n\t\tMIcon,\n\t},\n\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * pattern defined at theme level\n\t\t */\n\t\tpattern: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * color of the progress circle\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\t\t/**\n\t \t * progress of circle (0 - 100)\n\t\t */\n\t\tprogress: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator: (progress) => progress >= MIN_PROGRESS && progress <= MAX_PROGRESS,\n\t\t},\n\t\t/**\n\t\t * name of icon (defined in theme)\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * shows icon\n\t\t */\n\t\tshowIcon: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * color of icon\n\t\t */\n\t\ticonColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\t},\n\tcomputed: {\n\t\t...resolveThemeableProps('progresscircle', [\n\t\t\t'pattern',\n\t\t\t'color',\n\t\t\t'iconName',\n\t\t\t'showIcon',\n\t\t\t'iconColor',\n\t\t]),\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\t'--stroke-color': this.resolvedColor,\n\t\t\t\t'--icon-color': this.resolvedIconColor,\n\t\t\t\t'--progress-length': this.progressLength,\n\t\t\t};\n\t\t},\n\t\tshowProgress() {\n\t\t\treturn this.progress > MIN_PROGRESS;\n\t\t},\n\t\tprogressLength() {\n\t\t\treturn (this.progress / MAX_PROGRESS) * (TWO * Math.PI * RADIUS);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.ProgressCircleContainer {\n\t--circle-size: 48px;\n\t--stroke-width: 4;\n\n\tposition: relative;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\twidth: var(--circle-size);\n\theight: var(--circle-size);\n}\n\n.ProgressCircle {\n\twidth: var(--circle-size);\n\theight: var(--circle-size);\n}\n\n.ProgressBackground {\n\ttransform-origin: center;\n\tstroke: $maker-color-neutral-10;\n\tstroke-width: var(--stroke-width);\n}\n\n.Progress {\n\ttransform: rotate(-90deg);\n\ttransform-origin: center;\n\tstroke: var(--stroke-color);\n\tstroke-dasharray: var(--progress-length), 1000;\n\tstroke-width: var(--stroke-width);\n}\n\n.IconContainer {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\tcolor: var(--icon-color);\n}\n</style>\n"],"names":[],"sourceRoot":""}