{"version":3,"file":"styles.css","mappings":"AA6GA,gBACA,yDACA,oBACA,CAEA,gBACA,sDACA,oDACA,CAEA,gBACA,0DACA,yDACA,4DACA,oDAaA,8CACA,qCACA,2DAbA,sBAMA,8BAGA,uDADA,eADA,mDAGA,iBANA,gBAUA,aATA,kBAcA,YAJA,mEAGA,CAjBA,UAqDA,CAjCA,6BACA,8BACA,CAEA,+BACA,mBACA,UACA,CAEA,+BACA,+BACA,CAEA,uJAKA,gDADA,0FAEA,CAMA,kLAEA,uCACA,CAEA,+BACA,eACA","sources":["webpack://@square/maker/./src/components/Textarea/src/TextareaControl.vue"],"sourcesContent":["<template>\n\t<textarea\n\t\tref=\"textarea\"\n\t\tv-model=\"textareaVal\"\n\t\t:class=\"[\n\t\t\t$s.Textarea,\n\t\t\t$s[`variant_${variant}`],\n\t\t\t{\n\t\t\t\t[$s.resizable]: resizable,\n\t\t\t\t[$s.disabled]: disabled,\n\t\t\t\t[$s.invalid]: invalid,\n\t\t\t},\n\t\t]\"\n\t\t:disabled=\"disabled\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t/>\n</template>\n\n<script>\n/**\n * Textarea Control\n * @inheritAttrs textarea\n * @inheritListeners textarea\n */\nexport default {\n\tmodel: {\n\t\tprop: 'value',\n\t\tevent: 'textarea:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * textarea variant\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'fill',\n\t\t\tvalidator: (variant) => ['fill', 'outline'].includes(variant),\n\t\t},\n\t\t/**\n\t\t * textarea's current value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Toggles textarea's 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 * Toggle textarea's invalid state\n\t\t */\n\t\tinvalid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Toggles whether textarea is resizable\n\t\t */\n\t\tresizable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttextareaVal: {\n\t\t\tget() {\n\t\t\t\treturn this.value;\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\t/**\n\t\t\t\t * updated textarea value\n\t\t\t\t * @property {string}\n\t\t\t\t */\n\t\t\t\tthis.$emit('textarea:update', value);\n\t\t\t},\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tupdated() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tmethods: {\n\t\tsetCustomValidity() {\n\t\t\tconst customValidity = this.invalid ? 'invalid' : '';\n\t\t\t// sets element's internal :invalid flag\n\t\t\tthis.$refs.textarea.setCustomValidity(customValidity);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/*\n\tMost (if not all) of these should be provided\n\tby the Theme Context, but this is a placeholder\n\tuntil we get a Theme Context component\n*/\n.variant_fill {\n\t--color-background: $maker-color-neutral-10;\n\t--color-border: transparent;\n}\n\n.variant_outline {\n\t--color-background: $maker-color-background;\n\t--color-border: $maker-color-neutral-20;\n}\n\n.Textarea {\n\t--color-placeholder: $maker-color-neutral-80;\n\t--color-foreground: $maker-color-neutral-90;\n\t--color-border-active: $maker-color-neutral-80;\n\t--color-error: $maker-color-error-fill;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\t/* top & bottom padding + 3 line-heights */\n\tmin-height: calc(12px * 2 + 24px * 3);\n\tpadding: 12px 16px;\n\tcolor: var(--color-foreground);\n\tfont-weight: $maker-font-body-font-weight;\n\tfont-size: 16px;\n\tfont-family: $maker-font-body-font-family;\n\tline-height: 24px;\n\tbackground-color: var(--color-background, #fff);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: $maker-shape-default-border-radius;\n\toutline: none;\n\ttransition:\n\t\tborder 0.2s ease,\n\t\tbackground-color 0.2s ease,\n\t\tcolor 0.2s ease;\n\tresize: none;\n\n\t&::placeholder {\n\t\tcolor: var(--color-placeholder);\n\t}\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&.invalid {\n\t\tborder-color: var(--color-error);\n\t}\n\n\t&:-webkit-autofill,\n\t&:-webkit-autofill:hover,\n\t&:-webkit-autofill:focus,\n\t&:-webkit-autofill:active {\n\t\tbox-shadow: 0 0 0 9999px var(--color-foreground) inset, 0 0 0 9999px var(--color-foreground);\n\t\t-webkit-text-fill-color: var(--color-background);\n\t}\n\n\t&:hover:not(.disabled, .invalid) {\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&:active:not(.disabled, .invalid),\n\t&:focus:not(.disabled, .invalid) {\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&.resizable {\n\t\tresize: vertical;\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}