Feature: Render Template Query Item Samples

src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts

@@ -260,12 +260,15 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 								  </uui-button>`
 								: ''}
 						</div>
-						<div class="row">
+						<div class="row query-results">
 							<span id="results-count">
 								${this._templateQuery?.resultCount ?? 0}
 								<umb-localize key="template_itemsReturned">items returned, in</umb-localize>
 								${this._templateQuery?.executionTime ?? 0} ms
 							</span>
+							${this._templateQuery?.sampleResults.map(
+								(sample) => html`<span><uui-icon name=${sample.icon}></uui-icon>${sample.name}</span>`,
+							) ?? ''}
 						</div>
 						<umb-code-block language="C#" copy>${this._templateQuery?.queryExpression ?? ''}</umb-code-block>
 					</uui-box>
@@ -322,6 +325,16 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 			#results-count {
 				font-weight: bold;
 			}
+			.query-results {
+				flex-direction: column;
+				align-items: flex-start;
+				gap: 0;
+			}
+			.query-results span {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-1);
+			}
 		`,
 	];
 }