{"version":3,"file":"styles.css","mappings":"AA2HA,gBACA,iBACA,qBACA,oBAKA,iBADA,mBADA,wBADA,sBAIA","sources":["webpack://@square/maker/./src/components/Icon/src/Icon.vue"],"sourcesContent":["<template>\n\t<render-fn\n\t\t:render-fn=\"iconRenderFn\"\n\t\t:class=\"$s.Icon\"\n\t\t:style=\"inlineStyles\"\n\t\t:aria-hidden=\"decorative ? 'true' : undefined\"\n\t\t:aria-label=\"decorative ? undefined : ariaLabel\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t/>\n</template>\n\n<script>\nimport cssValidator from '@square/maker/utils/css-validator';\nimport assert from '@square/maker/utils/assert';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport RenderFn from '@square/maker/utils/RenderFn';\nimport { ICON_SIZES } from '@square/maker/utils/constants';\n\n// width & height css props accept same set of values\nconst sizeValidator = cssValidator('width');\n\n/**\n * @inheritAttrs svg\n * @inheritListeners svg\n */\nexport default {\n\tcomponents: {\n\t\tRenderFn,\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 in theme\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 * name of icon, defined in theme\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * size of icon, can be named value or any valid CSS width/height\n\t\t * @values small, medium, large, xlarge, xxlarge\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (size) => ICON_SIZES[size] || sizeValidator(size),\n\t\t},\n\t\t/**\n\t\t * color of icon\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 * fill of icon\n\t\t */\n\t\tfill: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('fill'),\n\t\t},\n\t\t/**\n\t\t * Whether the icon is purely decorative.\n\t\t * If true, the icon will be hidden from assistive technologies.\n\t\t * If false you should provide an ariaLabel.\n\t\t */\n\t\tdecorative: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Descriptive label for non-decorative icons.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('icon', [\n\t\t\t'pattern',\n\t\t\t'name',\n\t\t\t'color',\n\t\t\t'fill',\n\t\t]),\n\t\ticonRenderFn() {\n\t\t\tlet renderFn = this.theme.icons[this.resolvedName];\n\t\t\tassert.warn(renderFn, `'${this.resolvedName}' icon not defined in theme`, 'Icon');\n\t\t\trenderFn = renderFn || this.theme.icons.info; // fallback to info icon\n\t\t\treturn renderFn;\n\t\t},\n\t\tinlineStyles() {\n\t\t\treturn {\n\t\t\t\t'--color': this.resolvedColor,\n\t\t\t\t'--icon-size': ICON_SIZES[this.size] || this.size,\n\t\t\t\t'--fill': this.resolvedFill,\n\t\t\t};\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Icon {\n\t--icon-size: 16px;\n\t--color: currentColor;\n\t--fill: currentColor;\n\n\twidth: var(--icon-size);\n\theight: var(--icon-size);\n\tcolor: var(--color);\n\tfill: var(--fill);\n}\n</style>\n"],"names":[],"sourceRoot":""}