{"version":3,"file":"styles.css","mappings":"AAgJA,gBAmBA,kBAhBA,mBAQA,yBACA,YACA,2DAPA,yDASA,eAbA,oBAMA,wDADA,oDAHA,YAUA,2BATA,UAJA,kBAQA,mBASA,0BAFA,sDACA,0CAPA,qBA+CA,CApCA,+BACA,mDACA,CAEA,+BACA,cACA,CAEA,+BACA,cACA,CAEA,qCACA,UACA,CAEA,+BACA,iCACA,CAEA,yBACA,kBAKA,CAHA,2BACA,UACA,CAGA,gCACA,SACA,CAEA,+BAEA,qBACA,CAGA,gBAOA,mBAGA,yBANA,WAKA,yDAHA,aAEA,uBAHA,SAJA,kBAEA,UADA,OASA,CAEA,gBAEA,aACA,mBAFA,aAMA,gBAFA,eAGA,mBAJA,2CAMA,CAEA,gCANA,gBAGA,sBAeA,CAZA,gBAGA,qBACA,4BAFA,oBAKA,0BAIA,uBAFA,mBADA,mBAHA,kEAOA","sources":["webpack://@square/maker/./src/components/TextButton/src/TextButton.vue"],"sourcesContent":["<template>\n\t<button\n\t\t:class=\"[\n\t\t\t$s.TextButton,\n\t\t\t$s[`size_${resolvedSize}`],\n\t\t\t{\n\t\t\t\t[$s.loading]: loading,\n\t\t\t}\n\t\t]\"\n\t\t:type=\"type\"\n\t\t:disabled=\"isDisabled\"\n\t\t:style=\"style\"\n\t\tv-bind=\"$attrs\"\n\t\t:aria-label=\"ariaLabel\"\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\n\t\t\t:class=\"[\n\t\t\t\t$s.MainText,\n\t\t\t\t{\n\t\t\t\t\t[$s.TruncateText]: truncateText,\n\t\t\t\t}]\"\n\t\t>\n\t\t\t<!-- @slot Button label -->\n\t\t\t<slot />\n\t\t</span>\n\t</button>\n</template>\n\n<script>\nimport { colord } from 'colord';\nimport { MLoading } from '@square/maker/components/Loading';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport assert from '@square/maker/utils/assert';\n\n/**\n * TextButton component\n * @inheritAttrs button\n * @inheritListeners button\n */\nexport default {\n\tcomponents: {\n\t\tMLoading,\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 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 * 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 label text\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (size) => ['medium', 'large'].includes(size),\n\t\t},\n\t\t/**\n\t\t * Text color of button\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\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 * 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\t/**\n\t\t * Truncate text if it overflows container\n\t\t */\n\t\ttruncateText: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Accessible label for the button when there is no visible text\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('textbutton', [\n\t\t\t'pattern',\n\t\t\t'size',\n\t\t\t'color',\n\t\t]),\n\t\tstyle() {\n\t\t\treturn {\n\t\t\t\t'--color': this.resolvedColor,\n\t\t\t};\n\t\t},\n\t\tisDisabled() {\n\t\t\treturn this.disabled || this.loading;\n\t\t},\n\t},\n\n\tcreated() {\n\t\tassert.warn(this.$slots.default, 'TextButton should be used with a label', 'TextButton');\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/* stylelint-disable no-descending-specificity */\n\n.TextButton {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmin-width: 0;\n\tpadding: 0;\n\tcolor: var(--color, $maker-color-neutral-90);\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-family: $maker-font-label-font-family;\n\ttext-align: inherit;\n\tvertical-align: middle;\n\tbackground-color: transparent;\n\tborder: none;\n\tborder-radius: $maker-shape-default-border-radius;\n\toutline-color: currentColor;\n\tcursor: pointer;\n\ttransition: box-shadow 0.2s ease-in, opacity 0.2s ease-in;\n\tuser-select: none;\n\ttouch-action: manipulation;\n\tfill: currentColor;\n\n\t&.iconButton {\n\t\tmin-width: max-content;\n\t}\n\n\t&.size_medium {\n\t\tfont-size: 14px;\n\t}\n\n\t&.size_large {\n\t\tfont-size: 16px;\n\t}\n\n\t&:hover:not(:disabled) {\n\t\topacity: 0.8;\n\t}\n\n\t&:focus-visible {\n\t\tbox-shadow: 0 0 0 1px currentColor;\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\n\t\t& > * {\n\t\t\topacity: 0.5;\n\t\t}\n\t}\n\n\t& > .Loading {\n\t\topacity: 1;\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, $maker-color-neutral-90);\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.5;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n}\n\n.TruncateText {\n\t/* -webkit-box is supported by all modern browsers */\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\twidth: fit-content;\n\toverflow: hidden;\n\tline-height: 1.1 !important;\n\twhite-space: initial;\n\ttext-align: inherit;\n\ttext-overflow: ellipsis;\n\toverflow-wrap: anywhere;\n}\n\n</style>\n"],"names":[],"sourceRoot":""}