{"version":3,"file":"styles.css","mappings":"AAyGA,gBAGA,uDACA,2DAFA,gBADA,UAaA,CARA,+BACA,eACA,CAEA,8DAEA,kBACA,CAGA,gBAIA,8BACA,2DAFA,uBADA,YAIA,4BALA,2BAeA,CARA,+BACA,eACA,CAEA,8DAEA,kBACA,CAGA,+BACA,UACA,CAEA,+BACA,UACA,CAEA,+BACA,WACA,CAEA,+BACA,WACA","sources":["webpack://@square/maker/./src/components/ProgressBar/src/ProgressBar.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.ProgressBarContainer,\n\t\t\t$s[`size_${resolvedSize}`],\n\t\t\t$s[`shape_${resolvedShape}`],\n\t\t]\"\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<div\n\t\t\t:class=\"[\n\t\t\t\t$s.ProgressBar,\n\t\t\t\t$s[`shape_${resolvedShape}`],\n\t\t\t]\"\n\t\t\t:style=\"barStyles\"\n\t\t/>\n\t</div>\n</template>\n\n<script>\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport cssValidator from '@square/maker/utils/css-validator';\n\nconst MIN_PROGRESS = 0;\nconst MAX_PROGRESS = 100;\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\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 * Size (height) of the progress bar\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (size) => ['xsmall', 'small', 'medium', 'large'].includes(size),\n\t\t},\n\t\t/**\n\t\t * Shape of the progress bar\n\t\t */\n\t\tshape: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (shape) => ['squared', 'rounded', 'pill'].includes(shape),\n\t\t},\n\t\t/**\n\t\t * Color of the progress bar\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 (width) of the bar (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},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('progressbar', [\n\t\t\t'pattern',\n\t\t\t'color',\n\t\t\t'size',\n\t\t\t'shape',\n\t\t]),\n\t\tbarStyles() {\n\t\t\treturn {\n\t\t\t\t'--bar-color': this.resolvedColor,\n\t\t\t\t'--fill-percent': `${this.progress}%`,\n\t\t\t};\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.ProgressBarContainer {\n\twidth: 100%;\n\toverflow: hidden;\n\tbackground-color: $maker-color-neutral-10;\n\tborder-radius: $maker-shape-default-border-radius;\n\n\t&.shape_squared {\n\t\tborder-radius: 0;\n\t}\n\n\t&.shape_rounded,\n\t&.shape_pill {\n\t\tborder-radius: 16px;\n\t}\n}\n\n.ProgressBar {\n\twidth: var(--fill-percent, 0);\n\theight: 100%;\n\tcolor: var(--bar-color);\n\tbackground-color: currentColor;\n\tborder-radius: $maker-shape-default-border-radius;\n\ttransition: width 100ms linear;\n\n\t&.shape_squared {\n\t\tborder-radius: 0;\n\t}\n\n\t&.shape_rounded,\n\t&.shape_pill {\n\t\tborder-radius: 16px;\n\t}\n}\n\n.ProgressBarContainer.size_xsmall {\n\theight: 4px;\n}\n\n.ProgressBarContainer.size_small {\n\theight: 8px;\n}\n\n.ProgressBarContainer.size_medium {\n\theight: 12px;\n}\n\n.ProgressBarContainer.size_large {\n\theight: 16px;\n}\n</style>\n"],"names":[],"sourceRoot":""}