{"version":3,"file":"styles.css","mappings":"AA4LA,gBAEA,aACA,mBAFA,YAGA,CAEA,gCAKA,mBADA,sBADA,sBADA,iBAIA,CAEA,gBACA,mCACA,CAEA,sBACA,uBACA,kBACA,CAEA,gBAEA,mBAEA,sCAHA,aAEA,sBAEA,CAEA,sBACA,uBACA,kBACA","sources":["webpack://@square/maker/./src/components/Thumbnails/src/Thumbnails.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"$s.Thumbnails\"\n\t\t:style=\"thumbnailStyles\"\n\t\trole=\"group\"\n\t\t:aria-label=\"thumbnailContainerAriaLabel\"\n\t>\n\t\t<m-image\n\t\t\tv-for=\"(thumbnailSrc, index) in visibleThumbnails\"\n\t\t\t:key=\"thumbnailSrc\"\n\t\t\t:class=\"$s.ThumbnailImage\"\n\t\t\t:src=\"thumbnailSrc\"\n\t\t\t:alt=\"getThumbnailAlt(thumbnailSrc, index)\"\n\t\t\t:role=\"isClickable ? 'button' : 'img'\"\n\t\t\t:tabindex=\"isClickable ? 0 : undefined\"\n\t\t\t:aria-label=\"isClickable ? getThumbnailClickLabel(thumbnailSrc, index) : undefined\"\n\t\t\t@click=\"$emit('thumbnail:click', thumbnailSrc)\"\n\t\t\t@keydown=\"onThumbnailKeydown($event, thumbnailSrc)\"\n\t\t/>\n\t\t<div\n\t\t\tv-if=\"overflowImageCount > 0\"\n\t\t\t:class=\"$s.ThumbnailOverflow\"\n\t\t\trole=\"button\"\n\t\t\t:tabindex=\"isOverflowClickable ? 0 : undefined\"\n\t\t\t:aria-label=\"computedOverflowAriaLabel\"\n\t\t\t@click=\"$emit('overflow:click')\"\n\t\t\t@keydown=\"onOverflowKeydown\"\n\t\t>\n\t\t\t<m-text\n\t\t\t\t:size=\"overflowTextSize\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t+{{ overflowImageCount }}\n\t\t\t</m-text>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport cssValidator from '@square/maker/utils/css-validator';\nimport { MImage } from '@square/maker/components/Image';\nimport { MText } from '@square/maker/components/Text';\n\nconst MIN_TEXT_SIZE = -2;\nconst MAX_TEXT_SIZE = 7;\n\nexport default {\n\tcomponents: {\n\t\tMImage,\n\t\tMText,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Image urls to display for thumbnails\n\t\t */\n\t\tthumbnails: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Size to display thumbnail images\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: '32px',\n\t\t\tvalidator: cssValidator('width'),\n\t\t},\n\t\t/**\n\t\t * Maximum number of thumbnails to display\n\t\t */\n\t\tmaxThumbnails: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5,\n\t\t\tvalidator: (count) => count >= 0,\n\t\t},\n\t\t/**\n\t\t * Overflow text size. Size of text as step in fluid scale (-2 to 7).\n\t\t */\n\t\toverflowTextSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator: (size) => size >= MIN_TEXT_SIZE && size <= MAX_TEXT_SIZE,\n\t\t},\n\t\t/**\n\t\t * Alt text for thumbnail images. Can be a string (used for all) or\n\t\t * array of strings (one per thumbnail).\n\t\t */\n\t\tthumbnailAlts: {\n\t\t\ttype: [String, Array],\n\t\t\tdefault: () => [],\n\t\t},\n\t\t/**\n\t\t * ARIA label for the thumbnails group\n\t\t */\n\t\tthumbnailContainerAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Thumbnail images',\n\t\t},\n\t\t/**\n\t\t * ARIA label for the overflow button\n\t\t */\n\t\toverflowAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tvisibleThumbnails() {\n\t\t\treturn this.thumbnails.slice(0, this.maxThumbnails);\n\t\t},\n\n\t\toverflowImageCount() {\n\t\t\treturn this.thumbnails.length - this.maxThumbnails;\n\t\t},\n\n\t\tisClickable() {\n\t\t\treturn !!this.$listeners['thumbnail:click'];\n\t\t},\n\n\t\tisOverflowClickable() {\n\t\t\treturn !!this.$listeners['overflow:click'];\n\t\t},\n\n\t\tcomputedOverflowAriaLabel() {\n\t\t\treturn this.overflowAriaLabel\n\t\t\t\t|| `View ${this.overflowImageCount} more images`;\n\t\t},\n\n\t\tthumbnailStyles() {\n\t\t\tconst styles = {\n\t\t\t\t'--size': this.size,\n\t\t\t};\n\t\t\tif (this.isClickable) {\n\t\t\t\tstyles['--thumbnail-cursor'] = 'pointer';\n\t\t\t}\n\t\t\tif (this.isOverflowClickable) {\n\t\t\t\tstyles['--overflow-cursor'] = 'pointer';\n\t\t\t}\n\t\t\treturn styles;\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetThumbnailAlt(thumbnailSource, index) {\n\t\t\tif (Array.isArray(this.thumbnailAlts)) {\n\t\t\t\t// eslint-disable-next-line no-magic-numbers\n\t\t\t\treturn this.thumbnailAlts[index] || `Thumbnail ${index + 1}`;\n\t\t\t}\n\t\t\tif (typeof this.thumbnailAlts === 'string' && this.thumbnailAlts) {\n\t\t\t\treturn this.thumbnailAlts;\n\t\t\t}\n\t\t\t// eslint-disable-next-line no-magic-numbers\n\t\t\treturn `Thumbnail ${index + 1}`;\n\t\t},\n\n\t\tgetThumbnailClickLabel(thumbnailSource, index) {\n\t\t\t// eslint-disable-next-line no-magic-numbers\n\t\t\treturn `View thumbnail ${index + 1}`;\n\t\t},\n\n\t\tonThumbnailKeydown(event, thumbnailSource) {\n\t\t\tif (!this.isClickable) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.$emit('thumbnail:click', thumbnailSource);\n\t\t\t}\n\t\t},\n\n\t\tonOverflowKeydown(event) {\n\t\t\tif (!this.isOverflowClickable) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.$emit('overflow:click');\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Thumbnails {\n\tdisplay: flex;\n\tgap: 8px;\n\talign-items: center;\n}\n\n.ThumbnailImage,\n.ThumbnailOverflow {\n\twidth: var(--size);\n\tmin-width: var(--size);\n\tmax-width: var(--size);\n\theight: var(--size);\n}\n\n.ThumbnailImage {\n\tcursor: var(--thumbnail-cursor, auto);\n}\n\n.ThumbnailImage:focus {\n\toutline: 2px solid #06c;\n\toutline-offset: 2px;\n}\n\n.ThumbnailOverflow {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: var(--overflow-cursor, default);\n}\n\n.ThumbnailOverflow:focus {\n\toutline: 2px solid #06c;\n\toutline-offset: 2px;\n}\n</style>\n"],"names":[],"sourceRoot":""}