<link
	rel="stylesheet"
	href="./sly/css/app/widgets/classes_mapping_preview/style.css"
/>

<div
	style="
		display: flex;
		flex-direction: column;
		max-height: 128px;
		overflow-y: auto;
	"
>
	<link
		rel="stylesheet"
		href="./sly/css/app/widgets/object_class_view/style.css"
	/>
	<div v-for="(mapping, idx) in state.{{{widget.widget_id}}}.mapping">
		<span class="classes-mapping-preview" style="margin-left: 1px">
			<i class="zmdi zmdi-circle" :style="{color: mapping.class.color}"></i>
			<b style="font-size: 16">{{mapping.class.title}}</b>
			<span
				v-if="mapping.class.shape_text"
				style="
					margin-left: 5px;
					font-size: 12px;
					color: #8492a6;
					line-height: initial;
				"
			>
				{{mapping.class.shape_text}}
			</span>
		</span>
		<i class="zmdi zmdi-long-arrow-right"></i>
		<i
			v-if="mapping.value.length == 7 && mapping.value[0] == '#'"
			class="zmdi zmdi-circle"
			style="margin-right: 5px"
			:style="{color: mapping.value}"
		></i>
		<span> {{mapping.value}} </span>
	</div>
</div>
