Fixes #1228 - Add the .filterLabel template to a file soy separate

packages/clay-management-toolbar/demos/index.html

@@ -254,7 +254,7 @@ <h2>With filter labels</h2>
 				label: 'Filter 2',
 			},
 			{
-				label: 'Category: Label 3',
+				label: 'Category: <strong>Label 3</strong>',
 			}
 		]
 

packages/clay-management-toolbar/src/ClayFilterLabel.soy

@@ -0,0 +1,33 @@
+{namespace ClayFilterLabel}
+
+{template .render}
+	{@param label: html|string}
+	{@param spritemap: string}
+	{@param? _handleFilterLabelCloseClicked: any}
+	{@param? closeable: bool}
+	{@param? expand: bool}
+
+	{let $elementClasses kind="text"}
+		tbar-item
+		{if $expand}
+			{sp}tbar-item-expand
+		{/if}
+	{/let}
+
+	<li class="{$elementClasses}">
+		<div class="tbar-section">
+			{call ClayLabel.render}
+				{param closeable: $closeable /}
+				{param elementClasses: 'component-label tbar-label' /}
+				{param events: ['close': $_handleFilterLabelCloseClicked] /}
+				{param label kind="html"}
+					<div class="label-section">{$label}</div>
+				{/param}
+
+				{param ref: 'label' /}
+				{param spritemap: $spritemap /}
+				{param style: false /}
+			{/call}
+		</div>
+	</li>
+{/template}

packages/clay-management-toolbar/src/ClayResultsBar.js

@@ -1,6 +1,7 @@
 import 'clay-button';
 import 'clay-label';
 import 'clay-link';
+import './ClayFilterLabel.soy.js';
 import {Config} from 'metal-state';
 import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';

packages/clay-management-toolbar/src/ClayResultsBar.soy

@@ -80,42 +80,6 @@
 	</li>
 {/template}
 
-/**
- *
-*/
-{template .filterLabel}
-	{@param index: number}
-	{@param label: html|string}
-	{@param spritemap: string}
-	{@param? _handleFilterLabelCloseClicked: any}
-	{@param? closeable: bool}
-	{@param? expand: bool}
-
-	{let $elementClasses kind="text"}
-		tbar-item
-		{if $expand}
-			{sp}tbar-item-expand
-		{/if}
-	{/let}
-
-	<li class="{$elementClasses}">
-		<div class="tbar-section">
-			{call ClayLabel.render}
-				{param closeable: $closeable /}
-				{param elementClasses: 'component-label tbar-label' /}
-				{param events: ['close': $_handleFilterLabelCloseClicked] /}
-				{param label kind="html"}
-					<div class="label-section">{$label}</div>
-				{/param}
-
-				{param ref: 'label' + $index /}
-				{param spritemap: $spritemap /}
-				{param style: false /}
-			{/call}
-		</div>
-	</li>
-{/template}
-
 /**
  * This renders the list of filter labels
  */
@@ -125,12 +89,12 @@
 	{@param? _handleFilterLabelCloseClicked: any}
 
 	{foreach $filterLabel in $filterLabels}
-		{call .filterLabel}
+		{call ClayFilterLabel.render}
 			{param _handleFilterLabelCloseClicked: $_handleFilterLabelCloseClicked /}
 			{param closeable: $filterLabel.closeable ?: true /}
 			{param expand: isLast($filterLabel) /}
-			{param index: index($filterLabel) /}
 			{param label: $filterLabel.label /}
+			{param ref: 'label' + index($filterLabel) /}
 			{param spritemap: $spritemap /}
 		{/call}
 	{/foreach}