{"version":3,"sources":["webpack://../components/SegmentedControl/src/Segment.vue","webpack://../components/SegmentedControl/src/SegmentedControl.vue"],"names":[],"mappings":"AAyCA,mBACA,UAAA,CACA,oBAAA,CACA,eAAA,CACA,iBAAA,CACA,mBAAA,CACA,mBAAA,CACA,4BAAA,CACA,WAAA,CACA,iBAAA,CACA,YAAA,CACA,cACA,CAEA,mBACA,kBACA,CAEA,mBACA,eACA,CAEA,mBACA,UAAA,CACA,qBAAA,CACA,oCACA,CCDA,mBACA,YAAA,CACA,qBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA,CACA,gBAAA,CACA,gCAAA,CACA,iBACA,CAEA,mBACA,kBACA,CAEA,mBACA,eACA,CAEA,mBACA,WAAA,CACA,cAAA,CACA,gBACA","file":"styles.css","sourcesContent":["<template>\n\t<button\n\t\t:class=\"[\n\t\t\t$s.Button,\n\t\t\t$s[`shape_${controlState.shapeInner}`],\n\t\t\t$s[`size_${controlState.sizeInner}`],\n\t\t\t{ [$s.selected]: isSelected },\n\t\t]\"\n\t\t@click=\"selectSelf\"\n\t>\n\t\t<slot />\n\t</button>\n</template>\n\n<script>\nimport key from './key';\n\nexport default {\n\tinject: {\n\t\tcontrolState: key,\n\t},\n\tprops: {\n\t\tvalue: {\n\t\t\ttype: undefined,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tcomputed: {\n\t\tisSelected() {\n\t\t\treturn this.controlState.currentValue === this.value;\n\t\t},\n\t},\n\tmethods: {\n\t\tselectSelf() {\n\t\t\tthis.controlState.currentValue = this.value;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Button {\n\tflex: 1 0 0;\n\tcolor: rgba(0, 0, 0, 0.6);\n\tfont-weight: 500;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tline-height: inherit;\n\tbackground-color: transparent;\n\tborder: none;\n\tborder-radius: 4px;\n\toutline: none;\n\tcursor: pointer;\n}\n\n.shape_pill {\n\tborder-radius: 32px;\n}\n\n.shape_squared {\n\tborder-radius: 0;\n}\n\n.selected {\n\tcolor: black;\n\tbackground-color: white;\n\tbox-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);\n}\n</style>\n","<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.Container,\n\t\t\t$s[`shape_${shapeInner}`],\n\t\t\t$s[`size_${sizeInner}`],\n\t\t]\"\n\t>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport key from './key';\n\nexport default {\n\tprovide() {\n\t\treturn {\n\t\t\t[key]: this.$data,\n\t\t};\n\t},\n\tmodel: {\n\t\tprop: 'selected',\n\t\tevent: 'segmented-control:update',\n\t},\n\tprops: {\n\t\t/**\n\t\t * Selected Segment inside Control\n\t\t */\n\t\tselected: {\n\t\t\ttype: undefined,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shape of Control & Segments\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 * Size of Control & Segments\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'medium',\n\t\t\tvalidator: (size) => ['small', 'medium'].includes(size),\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrentValue: this.selected,\n\t\t\tshapeInner: this.shape,\n\t\t\tsizeInner: this.size,\n\t\t};\n\t},\n\twatch: {\n\t\tcurrentValue(newValue) {\n\t\t\tthis.$emit('segmented-control:update', newValue);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Container {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n\theight: 56px;\n\tpadding: 4px;\n\tfont-size: 14px;\n\tline-height: 24px;\n\tbackground-color: rgba(0, 0, 0, 0.05);\n\tborder-radius: 4px;\n}\n\n.shape_pill {\n\tborder-radius: 32px;\n}\n\n.shape_squared {\n\tborder-radius: 0;\n}\n\n.size_small {\n\theight: 40px;\n\tfont-size: 12px;\n\tline-height: 16px;\n}\n</style>\n"]}