{"version":3,"sources":["webpack://../components/Button/src/Button.vue"],"names":[],"mappings":"AAkQA,mBACA,iBAAA,CACA,mBAAA,CACA,kBAAA,CACA,WAAA,CACA,2BAAA,CACA,eAAA,CACA,mBAAA,CACA,qBAAA,CACA,kCAAA,CACA,WAAA,CACA,iBAAA,CACA,YAAA,CACA,4DAEA,CACA,cAAA,CACA,gFAGA,CACA,wBAAA,CAAA,gBAAA,CACA,yBAAA,CACA,iBAsGA,CApGA,qCACA,kBACA,CAEA,qCACA,eACA,CAEA,qCACA,6BAAA,CAAA,qBACA,CAEA,qCACA,4BAAA,CACA,cASA,CAPA,uCACA,eACA,CAEA,uDACA,WACA,CAGA,qCACA,6BAAA,CACA,cASA,CAPA,uCACA,gBACA,CAEA,uDACA,YACA,CAGA,qCACA,4BAAA,CACA,cASA,CAPA,uCACA,eACA,CAEA,uDACA,YACA,CAGA,uCACA,aACA,CAEA,qCACA,UACA,CAEA,qCACA,sBACA,CAEA,qCACA,qBACA,CAEA,qCACA,0BAAA,CACA,6BACA,CAEA,4BACA,WAKA,CAHA,8BACA,UACA,CAGA,yBACA,0DAGA,CAEA,wCACA,iCAAA,CACA,wCACA,CAEA,yCACA,kCAAA,CACA,yCACA,CAEA,qCAEA,2BACA,CAGA,mBACA,iBAAA,CACA,OAAA,CACA,SAAA,CACA,UAAA,CACA,QAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,2BAAA,CACA,4BACA,CAEA,mBACA,YAAA,CACA,YAAA,CACA,kBAAA,CACA,yBAAA,CAAA,iBAMA,CAEA,sCAPA,cAAA,CACA,eAAA,CACA,aAAA,CACA,kBAAA,CACA,sBAWA,CARA,mBACA,yBAAA,CAAA,iBAAA,CAMA,UACA,CAEA,wDACA,eACA,CAEA,wDACA,gBACA","file":"styles.css","sourcesContent":["<template>\n\t<button\n\t\t:class=\"[\n\t\t\t$s.Button,\n\t\t\t$s[`size_${size}`],\n\t\t\t$s[`shape_${shape}`],\n\t\t\t$s[`align_${align}`],\n\t\t\t{\n\t\t\t\t[$s.fullWidth]: fullWidth,\n\t\t\t\t[$s.iconButton]: isSingleChild(),\n\t\t\t\t[$s.loading]: loading,\n\t\t\t}\n\t\t]\"\n\t\t:type=\"type\"\n\t\t:disabled=\"disabled\"\n\t\t:style=\"style\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<m-loading\n\t\t\tv-if=\"loading\"\n\t\t\t:class=\"$s.Loading\"\n\t\t/>\n\t\t<span :class=\"$s.MainText\">\n\t\t\t<!-- @slot Button label -->\n\t\t\t<slot />\n\t\t</span>\n\n\t\t<span\n\t\t\tv-if=\"$scopedSlots.information\"\n\t\t\t:class=\"$s.InformationText\"\n\t\t>\n\t\t\t<!-- @slot Information label -->\n\t\t\t<slot\n\t\t\t\tname=\"information\"\n\t\t\t/>\n\t\t</span>\n\t</button>\n</template>\n\n<script>\nimport chroma from 'chroma-js';\nimport { MLoading } from '@square/maker/components/Loading';\n\nfunction getContrast(chromaBg, targetChromaFg) {\n\tconst contrastAccessibilityThreshold = 4.5;\n\tif (!targetChromaFg\n\t\t|| chroma.contrast(chromaBg, targetChromaFg) < contrastAccessibilityThreshold) {\n\t\tconst isLightThreshold = 0.32;\n\t\tconst isLight = chromaBg.luminance() > isLightThreshold;\n\t\treturn chroma(isLight ? '#000' : '#fff');\n\t}\n\treturn targetChromaFg;\n}\n\nfunction getFocus(chromaColor) {\n\tconst arbitraryAlphaValue = 0.3;\n\treturn chromaColor.alpha(arbitraryAlphaValue);\n}\n\nfunction getHover(chromaColor) {\n\t// mix color with 5% black\n\tconst arbitraryValue = 0.05;\n\treturn chroma.mix(chromaColor, '#000', arbitraryValue);\n}\n\nfunction getActive(chromaColor) {\n\t// mix color with 10% black\n\tconst arbitraryValue = 0.1;\n\treturn chroma.mix(chromaColor, '#000', arbitraryValue);\n}\n\nfunction fill(tokens) {\n\tconst color = chroma(tokens.color);\n\tconst colorHover = getHover(color);\n\tconst colorActive = getActive(color);\n\tconst textColor = tokens.textColor ? chroma(tokens.textColor) : undefined;\n\tconst contrastColor = getContrast(color, textColor);\n\tconst contrastColorHover = getHover(contrastColor);\n\tconst contrastColorActive = getActive(contrastColor);\n\tconst focusColor = getFocus(color);\n\treturn {\n\t\t'--small-padding': '8px 16px',\n\t\t'--medium-padding': '12px 24px',\n\t\t'--large-padding': '20px 32px',\n\t\t'--color-main': color.hex(),\n\t\t'--color-main-hover': colorHover.hex(),\n\t\t'--color-main-active': colorActive.hex(),\n\t\t'--color-contrast': contrastColor.hex(),\n\t\t'--color-contrast-hover': contrastColorHover.hex(),\n\t\t'--color-contrast-active': contrastColorActive.hex(),\n\t\t'--color-focus': focusColor.hex(),\n\t};\n}\n\nfunction outline(tokens) {\n\tconst color = chroma(tokens.color);\n\tconst colorHover = getHover(color);\n\tconst colorActive = getActive(color);\n\tconst focusColor = getFocus(color);\n\treturn {\n\t\t'--small-padding': '8px 16px',\n\t\t'--medium-padding': '12px 24px',\n\t\t'--large-padding': '20px 32px',\n\t\t'--color-main': 'transparent',\n\t\t'--color-main-hover': 'rgba(0, 0, 0, 0.05)',\n\t\t'--color-main-active': 'rgba(0, 0, 0, 0.1)',\n\t\t'--color-contrast': color.hex(),\n\t\t'--color-contrast-hover': colorHover.hex(),\n\t\t'--color-contrast-active': colorActive.hex(),\n\t\t'--color-focus': focusColor.hex(),\n\t\t'--outline-border': 'inset 0 0 0 1px var(--color-contrast)',\n\t};\n}\n\nfunction ghost(tokens) {\n\tconst color = chroma(tokens.color);\n\tconst colorHover = getHover(color);\n\tconst colorActive = getActive(color);\n\tconst focusColor = getFocus(color);\n\treturn {\n\t\t'--small-padding': '8px',\n\t\t'--medium-padding': '12px',\n\t\t'--large-padding': '20px',\n\t\t'--color-main': 'transparent',\n\t\t'--color-main-hover': 'rgba(0, 0, 0, 0.05)',\n\t\t'--color-main-active': 'rgba(0, 0, 0, 0.1)',\n\t\t'--color-contrast': color.hex(),\n\t\t'--color-contrast-hover': colorHover.hex(),\n\t\t'--color-contrast-active': colorActive.hex(),\n\t\t'--color-focus': focusColor.hex(),\n\t};\n}\n\nconst VARIANTS = {\n\tprimary: fill,\n\tsecondary: outline,\n\ttertiary: ghost,\n};\n\n/**\n * Button component\n * @inheritAttrs button\n * @inheritListeners button\n */\nexport default {\n\tcomponents: {\n\t\tMLoading,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Type of the button\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t},\n\t\t/**\n\t\t * Size of the button\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 * Whether to make the button full-width\n\t\t */\n\t\tfullWidth: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Background color of button\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: '#000',\n\t\t\tvalidator: (color) => chroma.valid(color),\n\t\t},\n\t\t/**\n\t\t * Text color of button\n\t\t */\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => chroma.valid(color),\n\t\t},\n\t\t/**\n\t\t * Semantic variant\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator: (variant) => ['primary', 'secondary', 'tertiary'].includes(variant),\n\t\t},\n\t\t/**\n\t\t * Shape of button\n\t\t */\n\t\tshape: {\n\t\t\ttype: String,\n\t\t\tdefault: 'rounded',\n\t\t\tvalidator: (shape) => ['squared', 'rounded', 'pill'].includes(shape),\n\t\t},\n\t\t/**\n\t\t * Toggles button disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * How to align button's contents\n\t\t */\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: 'center',\n\t\t\tvalidator: (variant) => ['center', 'stack', 'space-between'].includes(variant),\n\t\t},\n\t\t/**\n\t\t * Toggles button loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tstyle() {\n\t\t\treturn VARIANTS[this.variant]({\n\t\t\t\tcolor: this.color,\n\t\t\t\ttextColor: this.textColor,\n\t\t\t});\n\t\t},\n\t},\n\n\tmethods: {\n\t\tisSingleChild() {\n\t\t\tif (this.$scopedSlots.information) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tconst empty = 0;\n\t\t\tconst children = (this.$slots.default || []).filter(\n\t\t\t\t(vnode) => vnode.tag || vnode.text.trim().length > empty,\n\t\t\t);\n\t\t\tconst firstChildIndex = 0;\n\t\t\tconst singleChild = 1;\n\t\t\treturn children.length === singleChild && children[firstChildIndex].tag;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Button {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmin-width: 0;\n\tcolor: var(--color-contrast);\n\tfont-weight: 500;\n\tfont-family: inherit;\n\tvertical-align: middle;\n\tbackground-color: var(--color-main);\n\tborder: none;\n\tborder-radius: 8px;\n\toutline: none;\n\tbox-shadow:\n\t\tvar(--outline-border, 0 0),\n\t\tvar(--focus-border, 0 0);\n\tcursor: pointer;\n\ttransition:\n\t\tcolor 0.2s ease-in,\n\t\tbackground-color 0.2s ease-in,\n\t\tbox-shadow 0.2s ease-in;\n\tuser-select: none;\n\ttouch-action: manipulation;\n\tfill: currentColor;\n\n\t&.shape_pill {\n\t\tborder-radius: 32px;\n\t}\n\n\t&.shape_squared {\n\t\tborder-radius: 0;\n\t}\n\n\t&.iconButton {\n\t\tmin-width: max-content;\n\t}\n\n\t&.size_small {\n\t\tpadding: var(--small-padding);\n\t\tfont-size: 12px;\n\n\t\t& > * {\n\t\t\tline-height: 1.4;\n\t\t}\n\n\t\t&.iconButton {\n\t\t\tpadding: 8px;\n\t\t}\n\t}\n\n\t&.size_medium {\n\t\tpadding: var(--medium-padding);\n\t\tfont-size: 14px;\n\n\t\t& > * {\n\t\t\tline-height: 1.77;\n\t\t}\n\n\t\t&.iconButton {\n\t\t\tpadding: 12px;\n\t\t}\n\t}\n\n\t&.size_large {\n\t\tpadding: var(--large-padding);\n\t\tfont-size: 16px;\n\n\t\t& > * {\n\t\t\tline-height: 1.5;\n\t\t}\n\n\t\t&.iconButton {\n\t\t\tpadding: 20px;\n\t\t}\n\t}\n\n\t&.iconButton > * {\n\t\tline-height: 0;\n\t}\n\n\t&.fullWidth {\n\t\twidth: 100%;\n\t}\n\n\t&.align_center {\n\t\tjustify-content: center;\n\t}\n\n\t&.align_stack {\n\t\tflex-direction: column;\n\t}\n\n\t&.align_space-between {\n\t\tflex-direction: row-reverse;\n\t\tjustify-content: space-between;\n\t}\n\n\t&:disabled {\n\t\tcursor: initial;\n\n\t\t& > * {\n\t\t\topacity: 0.4;\n\t\t}\n\t}\n\n\t&:focus {\n\t\t--focus-border:\n\t\t\t0 0 0 1px #fff,\n\t\t\t0 0 0 3px var(--color-focus);\n\t}\n\n\t&:hover:not(:disabled) {\n\t\tcolor: var(--color-contrast-hover);\n\t\tbackground-color: var(--color-main-hover);\n\t}\n\n\t&:active:not(:disabled) {\n\t\tcolor: var(--color-contrast-active);\n\t\tbackground-color: var(--color-main-active);\n\t}\n\n\t&.loading {\n\t\t/* don't inherit color in loading state on hover/active */\n\t\tcolor: transparent !important;\n\t}\n}\n\n.Loading {\n\tposition: absolute;\n\ttop: 4px;\n\tright: 4px;\n\tbottom: 4px;\n\tleft: 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--color-contrast);\n\tbackground-color: transparent;\n}\n\n.MainText {\n\tdisplay: flex;\n\tgap: 8px;\n\talign-items: center;\n\twidth: max-content;\n\tmax-width: 100%;\n\toverflow: hidden;\n\tline-height: 1;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n}\n\n.InformationText {\n\twidth: min-content;\n\tmax-width: 100%;\n\toverflow: hidden;\n\tline-height: 1;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\topacity: 0.6;\n}\n\n.Button.align_center .InformationText {\n\tmargin-left: 8px;\n}\n\n.Button.align_space-between .InformationText {\n\tmargin-right: 8px;\n}\n</style>\n"]}