analytics/webcontent/bi/js/dashboard-analytics/widgets/livewidget/expandmode/DataSlotsView.html

<ul class="list fields slots" role="list" tabindex="-1">
	{{
		var index = 0;
	}}
	{{~it.datasets :value}}
	{{
		var layer = value.name;
		var slots = it.groupedSlotsByDataset[layer];
		var layerText = value.caption;
		var showLayerLabel = it.datasets.length > 1  && layerText !== undefined;
		var state = !showLayerLabel || it.underscore.contains(it.visibleLayers,layer);
		var stateLabel = state ? it.collapseLabel : it.expandLabel;
		}}
	<div class="{{=layer}} completeLayer {{?state}}expanded{{??}}collapsed{{?}}" role="list" aria-expanded="{{=state}}">
		{{?showLayerLabel}}
		<div class="{{=layer}} layerTitle" title="{{=layerText}}">
			<div class="{{=layer}} layerExpanderButton" id="{{=layer}}" role="button" tabindex="0" title="{{=stateLabel}}">
				<svg class="svgIcon" style="height:12px; width:12px; pointer-events:none;"  aria-label="{{=stateLabel}}" title="{{=stateLabel}}">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!it.chevronRightIcon}}"></use>
				</svg>
			</div>
			<div class="layerText">{{=layerText}}</div>
		</div>
		{{?}}

		<div class="{{=layer}} {{?!showLayerLabel}}singleLayer{{??}}multiLayer{{?}} layerSlots">
			{{~slots :slot}}
			{{? !slot.hidden }}
			<li class="slot columnItem {{=slot.noMapping}}" mappedItems="{{=slot.mappings.length}}"
			 data-slot-id="{{=slot.id}}" slot-index="{{=index}}" map-index="-1" role="listitem">
				<div class="title" title="{{!slot.caption}}">
					{{? slot.iconUrl }}
						 <img alt="{{!slot.caption}}" class="svgIcon columnIcon" role="img" src="{{!slot.iconUrl}}" aria-label="{{!slot.caption}}" focusable=false></img>
					{{?? slot.icon }}
						<svg class="svgIcon columnIcon" role="img" aria-label="{{!slot.caption}}" title="{{!slot.caption}}">
							<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!slot.icon.id}}">
								<title>
									{{!slot.caption}}
								</title>
							</use>
						</svg>
					{{?}}
					<div class="columnLabel">{{!slot.caption}}{{? !slot.optional && slot.showRequiredMarker}} <span class="optionalSign">*</span>{{?}}</div>
					<div class="dropfirst" tabindex="0" aria-required="{{=!slot.optional}}">
						<div class="line"></div>
					</div>
				</div>
				<div class="slotContainer {{?slot.shapable}}infographicZone{{?}}">
					{{~slot.mappings :mapping:mapIndex}}
						<div class="dropafter" tabindex="0" mappedItems="{{=slot.mappings.length}}"
							data-slot-id="{{=slot.id}}" map-index="{{=mapIndex}}">
							<div class="line"></div>
						</div>
						<div class="listitem columnName {{=slot.noMapping}} {{? mapping.unavailable === true}}unavailable{{?}}" tabindex="0" data-slot-id="{{=slot.id}}"
							{{? mapping.mappingId !== undefined }} data-mapping-id="{{=mapping.mappingId}}"{{?}}
							{{? mapping.columnId !== undefined }} data-column-id="{{=mapping.columnId}}"{{?}}
							{{? slot.optional !== undefined }} data-optional="{{=slot.optional}}"{{?}}
							map-index ="{{=mapIndex}}" aria-label="{{!mapping.name}}"
							{{? it.maxWidth !== undefined }} style="max-width: {{=it.maxWidth}};"{{?}}>

							<div class="infoRegion">
								<div class="slotInfo">
									<div title="{{!mapping.name}}" class="mappingLabel">
										{{!mapping.name}}
									</div>
									<div class='graphic'>
										{{? it.graphic.length}}
											{{it.graphic.content}}
										{{?}}
										{{? slot.shapeDropEnabled && it.graphic.length === 0}}
											<span class="webfont wfg_shape" title='{{=it.infographicShapeLabel}}' role="img"></span>
										{{?}}
									</div>
								</div>
								{{? mapping.configurable }}
								<div class="menuoverflow">
									<svg class="svgIcon columnIcon" role="img" aria-label="" focusable=false>
										<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!it.menuOverflowIcon}}">
										</use>
									</svg>
								</div>
								{{?}}
							</div>
							{{?mapping.filterString}}
							<div class="filterRegion">
								<div title="{{!mapping.filterString}}" class="filterLabel" {{?it.filterStringMaxWidth}}style="max-width: {{=it.filterStringMaxWidth}};"{{?}}>
									{{!mapping.filterString}}
								</div>
								{{?mapping.numberOfFilters}}
								<div class="circleBg">
									<div class="numberOfFilters">
										{{!mapping.numberOfFilters}}
									</div>
								</div>
								{{?}}
							</div>
							{{?}}
						</div>
					{{~}}
					{{? slot.mappings.length > 0}}
					<div class="dropafter" tabindex="0" mappedItems="{{=slot.mappings.length}}"
						data-slot-id="{{=slot.id}}" map-index="{{=slot.mappings.length}}">
						<div class="line"></div>
					</div>
					{{?}}
				</div>
			</li>
			{{
				index++;
			}}
			{{?}}
			{{~}}
		</div>
	</div>
	{{~}}
	{{?it.missingFilters.length >0}}
			<li class="columnName missingFilterLabel">
			<svg class="svgIcon error" role="img" focusable="false"><use style="pointer-events: none; " xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!it.errorIcon}}"></use></svg>
			{{=it.missingFiltersLabel}}
			<svg class="svgIcon removeMissingFilters" role="img" tabindex="0" aria-label="{{!it.deleteLabel}}" title="{{!it.deleteLabel}}">
				<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!it.closeIcon}}"></use>
			</svg>
			</li>
		{{~it.missingFilters :value:index}}
			<li class="listitem columnName missingFilter {{?index == it.missingFilters.length -1}}bottom{{?}}" role="listitem">
				<div tabindex="0">{{=value}}</div>
			</li>
		{{~}}
	{{?}}

		<li class="localFilter columnItem{{?it.filters.length === 0}} noMapping {{?}}" role="listitem" slot-index="{{=it.slots.length+1}}">
			<div class="title" title="{{!it.ContextFiltersLabel}}">
				<svg class="svgIcon columnIcon" role="img" aria-label="{{!it.ContextFiltersLabel}}" focusable=false>
					<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!it.filterIcon}}">
						{{!it.ContextFiltersLabel}}
						<title>
							{{!it.ContextFiltersLabel}}
						</title>
					</use>
				</svg>
				<div class="columnLabel">{{!it.ContextFiltersLabel}}</div>
				<div class="dropfirst" tabindex="0">
					<div class="line"></div>
				</div>
			</div>
			<div class="slotContainer">
				{{~it.filters :filter:index}}
				<div class="listitem columnName" data-filter-id="{{=filter.id}}"
					{{? filter.columnId !== undefined }} data-column-id="{{=filter.columnId}}"{{?}}
					{{? it.maxWidth !== undefined }} style="max-width: {{=it.maxWidth}};"{{?}}
					aria-label="{{!filter.name}}" tabindex="0">
					<div class="infoRegion">
						<div class="slotInfo">
							<div title="{{!filter.name}}" class="mappingLabel">
								{{!filter.name}}
							</div>
						</div>
						<div class="menuoverflow">
							<svg class="svgIcon columnIcon" role="img" aria-label="" focusable=false>
								<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!it.menuOverflowIcon}}">
								</use>
							</svg>
						</div>
					</div>
					{{?filter.filterString}}
					<div class="filterRegion">
						<div title="{{!filter.filterString}}" class="filterLabel" {{?it.filterStringMaxWidth}}style="max-width: {{=it.filterStringMaxWidth}};"{{?}}>
							{{!filter.filterString}}
						</div>
						{{?filter.numberOfFilters}}
						<div class="circleBg">
							<div class="numberOfFilters">
								{{!filter.numberOfFilters}}
							</div>
						</div>
						{{?}}
					</div>
					{{?}}
				</div>
			{{~}}
		</div>
	</li>

	<li class="hintItem columnItem">
		{{= it.requiredFieldsDescription }}
	</li>
	<li class="hintItem columnItem">
		<svg class="svgIcon columnIcon" role="img">
			<use style="pointer-events: none;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{!it.informationIcon}}"></use>
		</svg>
		<div>{{= it.dragAndDropDescription }}</div>
	</li>

</ul>
{{? it.heatByItem !== undefined }}
<div class="columnHeader">{{=it.heatByLabel}}</div>
<ul class="heatByZone" role="list" tabindex="0">
	{{~it.heatByItem :slot:index}}
		<li class="columnItem" role="listitem">
			<div class="listitem columnName" tabindex="0"
				data-column-id="{{=slot.columnId}}"
				data-column-label="{{=slot.columnLabel}}"
				data-slot-id="{{=slot.id}}"
				aria-label="{{!slot.columnLabel}}">
				<button class="wfg_remove" title="{{!it.deleteLabel}}"></button>
				{{!slot.columnLabel}}
			</div>
		</li>
	{{~}}
</ul>
{{?}}