{"version":3,"file":"styles.css","mappings":"AAwEA,gBACA,WACA,CCmGA,gBAGA,0BAFA,0BACA,6BAEA,CAEA,8BACA,cACA,CAEA,6BACA,eACA","sources":["webpack://@square/maker/./src/components/StarRating/src/Star.vue","webpack://@square/maker/./src/components/StarRating/src/StarRating.vue"],"sourcesContent":["<template>\n\t<!-- eslint-disable max-len -->\n\t<svg\n\t\t:class=\"$s.Star\"\n\t\tviewBox=\"0 0 16 16\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<path\n\t\t\tv-if=\"fill === 'full'\"\n\t\t\td=\"M8.00001 1.5L10.0433 5.00814C10.1846 5.25074 10.4214 5.42277 10.6958 5.48219L14.6636 6.34141L11.9586 9.36878C11.7716 9.57814 11.6811 9.85649 11.7094 10.1358L12.1184 14.175L8.40325 12.5379C8.14634 12.4246 7.85367 12.4246 7.59676 12.5379L3.88166 14.175L4.29062 10.1358C4.3189 9.85649 4.22846 9.57814 4.0414 9.36878L1.33637 6.34141L5.30423 5.48219C5.57862 5.42277 5.8154 5.25074 5.9567 5.00814L8.00001 1.5Z\"\n\t\t\t:fill=\"color\"\n\t\t\t:stroke=\"color\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-linejoin=\"round\"\n\t\t/>\n\t\t<path\n\t\t\tv-if=\"fill === 'empty'\"\n\t\t\td=\"M8.00001 1.5L10.0433 5.00814C10.1846 5.25074 10.4214 5.42277 10.6958 5.48219L14.6636 6.34141L11.9586 9.36878C11.7716 9.57814 11.6811 9.85649 11.7094 10.1358L12.1184 14.175L8.40325 12.5379C8.14634 12.4246 7.85367 12.4246 7.59676 12.5379L3.88166 14.175L4.29062 10.1358C4.3189 9.85649 4.22846 9.57814 4.0414 9.36878L1.33637 6.34141L5.30423 5.48219C5.57862 5.42277 5.8154 5.25074 5.9567 5.00814L8.00001 1.5Z\"\n\t\t\t:stroke=\"color\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-linejoin=\"round\"\n\t\t/>\n\t\t<template v-if=\"fill === 'half'\">\n\t\t\t<path\n\t\t\t\td=\"M8 1.5L10.0433 5.00814C10.1846 5.25074 10.4214 5.42277 10.6958 5.48219L14.6636 6.34141L11.9586 9.36878C11.7716 9.57814 11.6811 9.85648 11.7094 10.1358L12.1184 14.175L8.40325 12.5379C8.14634 12.4246 7.85367 12.4246 7.59676 12.5379L3.88166 14.175L4.29062 10.1358C4.3189 9.85649 4.22846 9.57814 4.0414 9.36878L1.33637 6.34141L5.30423 5.48219C5.57862 5.42277 5.8154 5.25074 5.9567 5.00814L8 1.5Z\"\n\t\t\t\t:stroke=\"color\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M4.74068 9.80798L4.44922 13.3867L7.81143 11.9653C7.85659 11.9462 7.90513 11.9364 7.95416 11.9364H7.96093L7.99999 2.91674L8 2.91518V2.5L7.90873 2.51626C7.85536 2.52576 7.80507 2.54799 7.7621 2.58105C7.734 2.60268 7.70948 2.6286 7.68944 2.65786L7.63343 2.73967L7.53284 2.91595L6.14573 5.48649C6.07563 5.6164 5.9517 5.7087 5.80714 5.73864L2.06665 6.51358L4.61907 9.43866C4.70778 9.54031 4.75163 9.67351 4.74068 9.80798Z\"\n\t\t\t\t:fill=\"color\"\n\t\t\t/>\n\t\t</template>\n\t</svg>\n</template>\n\n<script>\nimport cssValidator from '@square/maker/utils/css-validator';\n\n/**\n * @inheritAttrs svg\n * @inheritListeners svg\n */\nexport default {\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Determines the fill style of the star\n\t\t */\n\t\tfill: {\n\t\t\ttype: String,\n\t\t\tdefault: 'full',\n\t\t\tvalidator: (fill) => ['full', 'half', 'empty'].includes(fill),\n\t\t},\n\t\t/**\n\t\t * Color of the star\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: '#ffbf00',\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Star {\n\theight: 32px;\n}\n</style>\n","<template>\n\t<div\n\t\t:style=\"starComputedStyles\"\n\t\t:role=\"isEditable ? 'slider' : 'img'\"\n\t\ttabindex=\"0\"\n\t\taria-readonly=\"true\"\n\t\taria-valuemin=\"0\"\n\t\taria-valuemax=\"5\"\n\t\t:aria-valuenow=\"displayedRating\"\n\t\t:aria-label=\"ariaLabel\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<m-star\n\t\t\tv-for=\"star in MAX_RATING\"\n\t\t\t:key=\"star\"\n\t\t\t:fill=\"fillForStarRating(star)\"\n\t\t\t:color=\"resolvedColor\"\n\t\t\t:class=\"$s.Star\"\n\t\t\t@mouseenter=\"hoverStar(star)\"\n\t\t\t@mouseleave=\"unhoverStar(star)\"\n\t\t\t@click=\"clickStar(star)\"\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';\nimport MStar from './Star.vue';\n\nconst MIN_RATING = 0;\nconst MAX_RATING = 5;\nconst HALF_RATING = 0.5;\n\nconst STAR_STYLES = {\n\tsmall: {\n\t\theight: 16,\n\t\tspacing: 1,\n\t},\n\tmedium: {\n\t\theight: 24,\n\t\tspacing: 2,\n\t},\n\tlarge: {\n\t\theight: 32,\n\t\tspacing: 4,\n\t},\n};\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tcomponents: {\n\t\tMStar,\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 * Rating value from 0-5, determines fill state of stars\n\t\t */\n\t\trating: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator: (rating) => rating >= MIN_RATING && rating <= MAX_RATING,\n\t\t},\n\t\t/**\n\t\t * Size of rating component\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'medium',\n\t\t\tvalidator: (size) => ['small', 'medium', 'large'].includes(size),\n\t\t},\n\t\t/**\n\t\t * Color of the star\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 * Determines whether to bubble up click/hover events and show pointer cursor\n\t\t */\n\t\tisEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Accessible label for the star rating\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Rating',\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tMAX_RATING,\n\t\t\thoveredRating: 0,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('starrating', [\n\t\t\t'color',\n\t\t]),\n\n\t\tdisplayedRating() {\n\t\t\treturn this.hoveredRating || this.rating;\n\t\t},\n\n\t\tstarComputedStyles() {\n\t\t\tconst styles = STAR_STYLES[this.size];\n\n\t\t\treturn {\n\t\t\t\t'--star-height': `${styles.height}px`,\n\t\t\t\t'--star-spacing': `${styles.spacing}px`,\n\t\t\t\t'--star-cursor': this.isEditable ? 'pointer' : 'default',\n\t\t\t};\n\t\t},\n\t},\n\n\tmethods: {\n\t\tfillForStarRating(rating) {\n\t\t\tif (this.displayedRating >= rating) {\n\t\t\t\treturn 'full';\n\t\t\t}\n\n\t\t\tif (this.displayedRating >= rating - HALF_RATING) {\n\t\t\t\treturn 'half';\n\t\t\t}\n\n\t\t\treturn 'empty';\n\t\t},\n\n\t\tclickStar(star) {\n\t\t\tif (this.isEditable) {\n\t\t\t\tthis.$emit('star-click', star);\n\t\t\t}\n\t\t},\n\n\t\thoverStar(star) {\n\t\t\tif (this.isEditable) {\n\t\t\t\tthis.$emit('star-hover', star);\n\t\t\t\tthis.hoveredRating = star;\n\t\t\t}\n\t\t},\n\n\t\tunhoverStar(star) {\n\t\t\tif (this.isEditable) {\n\t\t\t\tthis.$emit('star-unhover', star);\n\t\t\t\tthis.hoveredRating = 0;\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Star {\n\theight: var(--star-height);\n\tpadding: 0 var(--star-spacing);\n\tcursor: var(--star-cursor);\n}\n\n.Star:first-of-type {\n\tpadding-left: 0;\n}\n\n.Star:last-of-type {\n\tpadding-right: 0;\n}\n</style>\n"],"names":[],"sourceRoot":""}