windmill-components 1.542.5 → 1.550.0

package/package/components/TeamSelector.svelte

@@ -2,71 +2,117 @@
 import { RefreshCcw } from 'lucide-svelte';
 import { WorkspaceService } from '../gen';
 import Select from './select/Select.svelte';
-import { onMount } from 'svelte';
-let { disabled = false, placeholder = 'Select a team', selectedTeam = $bindable(), containerClass = 'w-64', showRefreshButton = true, teams = undefined, minWidth = '160px', onError } = $props();
+import { debounce } from '../utils';
+let { disabled = false, selectedTeam = $bindable(), containerClass = 'w-64', showRefreshButton = true, teams = undefined, minWidth = '160px', onError } = $props();
 let isFetching = $state(false);
-onMount(() => {
-    if (!teams)
-        loadTeams();
+let searchResults = $state([]);
+// Only enable search mode if no teams are provided
+const searchMode = !teams;
+// Determine which teams to show: provided teams or search results
+// In search mode, include the selected team if it exists
+let displayTeams = $derived(() => {
+    const baseTeams = teams || searchResults;
+    if (searchMode && selectedTeam && !baseTeams.find(t => t.team_id === selectedTeam?.team_id)) {
+        return [selectedTeam, ...baseTeams];
+    }
+    return baseTeams;
+});
+// Create separate filter text for search mode
+let searchFilterText = $state('');
+// Debounced search function
+const debouncedSearch = debounce(async (query) => {
+    await searchTeams(query);
+}, 500);
+// Watch for search filter text changes (only in search mode)
+$effect(() => {
+    if (searchMode) {
+        if (searchFilterText.length >= 1) {
+            debouncedSearch.debounced(searchFilterText);
+        }
+        else if (searchFilterText.length === 0) {
+            searchResults = [];
+        }
+    }
 });
-async function loadTeams() {
+async function searchTeams(query) {
+    if (!query)
+        return;
     isFetching = true;
     try {
         const response = (await WorkspaceService.listAvailableTeamsIds({
-            workspace: $workspaceStore
+            workspace: $workspaceStore,
+            search: query
         }));
-        teams = response || [];
+        searchResults = response || [];
         isFetching = false;
-        console.log('Teams loaded:', teams.length);
-        return teams;
+        return searchResults;
     }
     catch (error) {
         isFetching = false;
         onError?.(error);
-        console.error('Error loading teams:', error);
+        console.error('Error searching teams:', error);
+        searchResults = [];
         return [];
     }
 }
+async function refreshSearch() {
+    if (searchMode && searchFilterText.length >= 2) {
+        await searchTeams(searchFilterText);
+    }
+}
 </script>
 
 <div class={containerClass}>
 	<div class="flex items-center gap-2">
 		<div class="flex-grow" style="min-width: {minWidth};">
-			<Select
-				containerStyle={'min-width: ' + minWidth}
-				items={teams?.map((team) => ({
-					label: team.team_name,
-					value: team.team_id
-				})) ?? []}
-				{placeholder}
-				clearable
-				disabled={disabled || isFetching}
-				bind:value={
-					() => selectedTeam?.team_id,
-					(value) => (selectedTeam = teams?.find((team) => team.team_id === value))
-				}
-			/>
+			{#if searchMode}
+				<Select
+					containerStyle={'min-width: ' + minWidth}
+					items={searchFilterText.length >= 1 || (searchFilterText.length === 0 && selectedTeam) ? displayTeams().map((team) => ({
+						label: team.team_name,
+						value: team.team_id
+					})) : []}
+					placeholder={isFetching ? "Searching..." : "Search teams..."}
+					clearable
+					disabled={disabled || isFetching}
+					bind:filterText={searchFilterText}
+					bind:value={
+						() => selectedTeam?.team_id,
+						(value) => {
+							selectedTeam = value ? displayTeams().find((team) => team.team_id === value) : undefined
+						}
+					}
+				/>
+			{:else}
+				<Select
+					containerStyle={'min-width: ' + minWidth}
+					items={displayTeams().map((team) => ({
+						label: team.team_name,
+						value: team.team_id
+					}))}
+					placeholder="Select a team"
+					clearable
+					disabled={disabled || isFetching}
+					bind:value={
+						() => selectedTeam?.team_id,
+						(value) => {
+							selectedTeam = value ? displayTeams().find((team) => team.team_id === value) : undefined
+						}
+					}
+				/>
+			{/if}
 		</div>
 
 		{#if showRefreshButton}
 			<button
-				onclick={loadTeams}
-				disabled={isFetching || disabled}
+				onclick={refreshSearch}
+				disabled={isFetching || disabled || (searchMode && searchFilterText.length < 2)}
 				class="flex items-center justify-center p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover disabled:opacity-50"
-				title="Refresh teams from Microsoft"
+				title={searchMode ? "Refresh search results" : "Refresh teams from Microsoft"}
 			>
 				<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
 			</button>
 		{/if}
 	</div>
 
-	{#if isFetching || ((!teams || teams.length === 0) && !isFetching)}
-		<div class="text-xs text-tertiary mt-1">
-			{#if isFetching}
-				Fetching teams from Microsoft...
-			{:else}
-				No available teams found
-			{/if}
-		</div>
-	{/if}
 </div>

package/package/components/TeamSelector.svelte.d.ts

@@ -4,7 +4,6 @@ interface TeamItem {
 }
 interface Props {
     disabled?: boolean;
-    placeholder?: string;
     selectedTeam?: TeamItem | undefined;
     containerClass?: string;
     showRefreshButton?: boolean;

package/package/components/apps/components/buttons/AppButton.svelte

@@ -70,6 +70,13 @@ async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
     $selectedComponent = [id];
+    // Show brief feedback for background mode
+    if (resolvedConfig.runInBackground) {
+        backgroundClickFeedback = true;
+        setTimeout(() => {
+            backgroundClickFeedback = false;
+        }, 300);
+    }
     const action = async () => {
         const inputOutput = { result: outputs.result.peak(), loading: true };
         if (rowContext && rowInputs) {
@@ -96,6 +103,7 @@ async function handleClick(event) {
     }
 }
 let loading = $state(false);
+let backgroundClickFeedback = $state(false);
 let css = $state(initCss($app.css?.buttoncomponent, customCss));
 $effect(() => {
     errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
@@ -150,6 +158,7 @@ let errorsMessage = $derived(Object.values(errors)
 	{render}
 	{outputs}
 	{extraKey}
+	allowConcurentRequests={resolvedConfig.runInBackground}
 	onSuccess={(r) => {
 		let inputOutput = { result: r, loading: false }
 		if (rowContext && rowInputs) {
@@ -196,7 +205,8 @@ let errorsMessage = $derived(Object.values(errors)
 				on:click={handleClick}
 				size={resolvedConfig.size}
 				color={resolvedConfig.color}
-				{loading}
+				title={resolvedConfig.tooltip && String(resolvedConfig.tooltip).length > 0 ? String(resolvedConfig.tooltip) : undefined}
+				loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
 			>
 				{#if resolvedConfig.beforeIcon}
 					{#key resolvedConfig.beforeIcon}

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -13,6 +13,7 @@ import { getPrimaryKeys } from '../dbtable/utils';
 import InitializeComponent from '../../helpers/InitializeComponent.svelte';
 import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import RunnableComponent from '../../helpers/RunnableComponent.svelte';
+import { CancelablePromise } from '../../../../../gen';
 let { id, componentInput, configuration, initializing = $bindable(undefined), render, customCss = undefined, actions = undefined } = $props();
 let runnableComponent = $state(undefined);
 function clear() {
@@ -113,6 +114,7 @@ function updateSearchInOutputs() {
 $effect(() => {
     searchValue !== undefined && untrack(() => updateSearchInOutputs());
 });
+let ignoreFirst = true;
 </script>
 
 {#each Object.keys(components['aggridinfinitecomponent'].initialData.configuration) as key (key)}
@@ -144,10 +146,17 @@ $effect(() => {
 	bind:result
 	bind:loading
 	bind:runnableComponent
-	on:recompute={() => {
-		console.log('recompute')
-		clear()
-	}}
+	preventDefaultRefresh
+	overrideCallback={() =>
+		new CancelablePromise(async (resolve) => {
+			if (ignoreFirst) {
+				ignoreFirst = false
+				resolve()
+				return
+			}
+			clear()
+			resolve()
+		})}
 	{render}
 	autoRefresh={true}
 	allowConcurentRequests

package/package/components/apps/components/display/table/SyncColumnDefs.svelte

@@ -88,10 +88,10 @@ $effect(() => {
         });
     }
 });
+let keys = $derived(Object.keys(result[0] ?? []).filter((x) => x !== '__index'));
 async function syncColumns() {
     const gridItem = findGridItem($app, id);
     if (gridItem && result) {
-        const keys = Object.keys(result[0] ?? {}) ?? [];
         const conf = gridItem.data.configuration.columnDefs;
         const newColumns = keys.map((key) => ({
             field: key,
@@ -136,7 +136,7 @@ async function updateConfiguration() {
 					<div class="flex flex-col items-start gap-2">
 						<div class="text-xs"> No columns definition found. Columns found in data: </div>
 						<div class="text-sm flex flex-row gap-2">
-							{#each Object.keys(result[0] ?? []) as key}
+							{#each keys as key}
 								<Badge small color="dark-gray">{key}</Badge>
 							{/each}
 						</div>

package/package/components/apps/components/display/table/utils.js

@@ -182,7 +182,7 @@ export function validateColumnDefs(columnDefs) {
             colDef.hideInsert = true;
         }
         // Check if 'field' property exists and is a non-empty string
-        if (noField && !(colDef.children && Array.isArray(colDef.children))) {
+        if (noField && !(colDef.children && Array.isArray(colDef.children)) && !colDef.cellRenderer) {
             isValid = false;
             errors.push(`Column at index ${index} is missing a valid 'field' property nor having any children.`);
         }

package/package/components/apps/components/helpers/RefreshButton.svelte

@@ -23,13 +23,17 @@ let cancelCallbacks = $state(undefined);
 		color="light"
 		size="xs2"
 		btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
-		on:click={() => {
+		on:click={(e) => {
 			if (buttonHover && loading) {
 				cancelCallbacks?.forEach((cb) => cb.cancel())
 			} else {
 				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) => cb())
 			}
 		}}
+		on:pointerdown={(e) => {
+			e.preventDefault()
+			e.stopPropagation()
+		}}
 		iconOnly
 	/>
 	{#snippet text()}

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -53,8 +53,6 @@ function refreshOnStaticChange() {
         refreshIfAutoRefresh('static changed');
     }
 }
-// $: sendUserToast('args' + JSON.stringify(runnableInputValues) + Boolean(extraQueryParams) || args)
-// $: console.log(runnableInputValues)
 let firstRefresh = true;
 function genCallbacks({ onDone, onCancel, onError }) {
     const callbacks = {

package/package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -75,6 +75,7 @@ interface Props {
     onSuccess?: (result: any) => void;
     children?: import('svelte').Snippet;
     nonRenderedPlaceholder?: import('svelte').Snippet;
+    preventDefaultRefresh?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/apps/components/layout/AppTabs.svelte

@@ -11,7 +11,7 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { deepEqual } from 'fast-equals';
-let { id, configuration, componentContainerHeight, tabs, customCss = undefined, render, disabledTabs, onTabChange = undefined } = $props();
+let { id, configuration, componentContainerHeight, tabs, customCss = undefined, render, disabledTabs, hiddenTabs, onTabChange = undefined } = $props();
 let resolvedConfig = $state(initConfig(components['tabscomponent'].initialData.configuration, configuration));
 let everRender = $state(render);
 $effect.pre(() => {
@@ -51,18 +51,28 @@ $componentControl[id] = {
         }
     },
     left: () => {
-        const index = tabs.indexOf(selected);
-        if (index > 0) {
-            selected = tabs[index - 1];
-            return true;
+        const currentIndex = tabs.indexOf(selected);
+        if (currentIndex > 0) {
+            // Find the next visible tab to the left
+            for (let i = currentIndex - 1; i >= 0; i--) {
+                if (!resolvedHiddenTabs[i]) {
+                    selected = tabs[i];
+                    return true;
+                }
+            }
         }
         return false;
     },
     right: () => {
-        const index = tabs.indexOf(selected);
-        if (index < tabs.length - 1) {
-            selected = tabs[index + 1];
-            return true;
+        const currentIndex = tabs.indexOf(selected);
+        if (currentIndex < tabs.length - 1) {
+            // Find the next visible tab to the right
+            for (let i = currentIndex + 1; i < tabs.length; i++) {
+                if (!resolvedHiddenTabs[i]) {
+                    selected = tabs[i];
+                    return true;
+                }
+            }
         }
         return false;
     },
@@ -88,6 +98,26 @@ $effect.pre(() => {
     selected != undefined && untrack(() => handleTabSelection());
 });
 let resolvedDisabledTabs = $state([]);
+let resolvedHiddenTabs = $state([]);
+// Filter visible tabs based on hiddenTabs configuration
+let visibleTabsIndices = $derived((tabs ?? []).map((_, index) => index).filter((index) => !resolvedHiddenTabs[index]));
+// Auto-select first visible tab if current selection is hidden or invalid
+$effect(() => {
+    if (visibleTabsIndices.length === 0) {
+        // Handle case where all tabs are hidden
+        selected = '';
+        selectedIndex = -1;
+        return;
+    }
+    const currentIndex = tabs?.indexOf(selected) ?? -1;
+    if (currentIndex === -1 || resolvedHiddenTabs[currentIndex]) {
+        const firstVisibleTab = tabs[visibleTabsIndices[0]];
+        if (selected !== firstVisibleTab) {
+            // Current selection is hidden or invalid, select first visible tab
+            selected = firstVisibleTab;
+        }
+    }
+});
 </script>
 
 <InputValue key="kind" {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
@@ -113,6 +143,15 @@ let resolvedDisabledTabs = $state([]);
 	/>
 {/each}
 
+{#each hiddenTabs ?? [] as hideTab, index}
+	<InputValue
+		key="tabHidden {index}"
+		{id}
+		input={hideTab}
+		bind:value={resolvedHiddenTabs[index]}
+	/>
+{/each}
+
 {#if everRender}
 	<div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full h-full' : 'w-full'}>
 		{#if !resolvedConfig.tabsKind || resolvedConfig.tabsKind == 'tabs' || (resolvedConfig.tabsKind == 'invisibleOnView' && $mode == 'dnd')}
@@ -123,16 +162,18 @@ let resolvedDisabledTabs = $state([]);
 					style={css?.tabRow?.style}
 				>
 					{#each tabs ?? [] as res, index}
-						<Tab
-							value={res}
-							class={twMerge(css?.allTabs?.class, 'wm-tabs-alltabs')}
-							style={css?.allTabs?.style}
-							selectedClass={twMerge(css?.selectedTab?.class, 'wm-tabs-selectedTab')}
-							selectedStyle={css?.selectedTab?.style}
-							disabled={resolvedDisabledTabs[index]}
-						>
-							<span class="font-semibold">{res}</span>
-						</Tab>
+						{#if !resolvedHiddenTabs[index]}
+							<Tab
+								value={res}
+								class={twMerge(css?.allTabs?.class, 'wm-tabs-alltabs')}
+								style={css?.allTabs?.style}
+								selectedClass={twMerge(css?.selectedTab?.class, 'wm-tabs-selectedTab')}
+								selectedStyle={css?.selectedTab?.style}
+								disabled={resolvedDisabledTabs[index]}
+							>
+								<span class="font-semibold">{res}</span>
+							</Tab>
+						{/if}
 					{/each}
 				</Tabs>
 			</div>
@@ -146,78 +187,82 @@ let resolvedDisabledTabs = $state([]);
 				style={css?.tabRow?.style}
 			>
 				{#each tabs ?? [] as res, index}
-					<button
-						onpointerdown={stopPropagation(bubble('pointerdown'))}
-						onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
-						disabled={resolvedDisabledTabs[index]}
-						class={twMerge(
-							'rounded-sm !truncate text-sm  hover:text-primary px-1 py-2',
-							css?.allTabs?.class,
-							'wm-tabs-alltabs',
-							selected == res
-								? twMerge(
-										'border-r  border-primary border-l bg-surface text-primary',
-										css?.selectedTab?.class,
-										'wm-tabs-selectedTab'
-									)
-								: '',
-							resolvedDisabledTabs[index]
-								? 'opacity-50 cursor-not-allowed hover:text-secondary'
-								: ''
-						)}
-						style={selected == res
-							? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
-							: css?.allTabs?.style}
-					>
-						{res}
-					</button>
-				{/each}
-			</div>
-		{/if}
-		{#if resolvedConfig.tabsKind == 'accordion'}
-			<div class="flex flex-col w-full">
-				{#each tabs ?? [] as res, index}
-					<div class="border-b">
+					{#if !resolvedHiddenTabs[index]}
 						<button
 							onpointerdown={stopPropagation(bubble('pointerdown'))}
 							onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
 							disabled={resolvedDisabledTabs[index]}
 							class={twMerge(
-								'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
+								'rounded-sm !truncate text-sm  hover:text-primary px-1 py-2',
 								css?.allTabs?.class,
 								'wm-tabs-alltabs',
 								selected == res
 									? twMerge(
-											'bg-surface text-primary ',
+											'border-r  border-primary border-l bg-surface text-primary',
 											css?.selectedTab?.class,
 											'wm-tabs-selectedTab'
 										)
-									: 'text-secondary',
+									: '',
 								resolvedDisabledTabs[index]
 									? 'opacity-50 cursor-not-allowed hover:text-secondary'
 									: ''
 							)}
+							style={selected == res
+								? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
+								: css?.allTabs?.style}
 						>
-							<span class="mr-2 w-8 font-mono">{selected == res ? '-' : '+'}</span>
 							{res}
 						</button>
-						<div class={selected == res ? 'border-t' : ''}>
-							<SubGridEditor
-								{id}
-								visible={render && index === selectedIndex}
-								subGridId={`${id}-${index}`}
-								class={twMerge(css?.container?.class, 'wm-tabs-container')}
-								style={css?.container?.style}
-								containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
-								onFocus={() => {
-									if (!$connectingInput.opened) {
-										$selectedComponent = [id]
-										handleTabSelection()
-									}
-								}}
-							/>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+		{#if resolvedConfig.tabsKind == 'accordion'}
+			<div class="flex flex-col w-full">
+				{#each tabs ?? [] as res, index}
+					{#if !resolvedHiddenTabs[index]}
+						<div class="border-b">
+							<button
+								onpointerdown={stopPropagation(bubble('pointerdown'))}
+								onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
+								disabled={resolvedDisabledTabs[index]}
+								class={twMerge(
+									'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
+									css?.allTabs?.class,
+									'wm-tabs-alltabs',
+									selected == res
+										? twMerge(
+												'bg-surface text-primary ',
+												css?.selectedTab?.class,
+												'wm-tabs-selectedTab'
+											)
+										: 'text-secondary',
+									resolvedDisabledTabs[index]
+										? 'opacity-50 cursor-not-allowed hover:text-secondary'
+										: ''
+								)}
+							>
+								<span class="mr-2 w-8 font-mono">{selected == res ? '-' : '+'}</span>
+								{res}
+							</button>
+							<div class={selected == res ? 'border-t' : ''}>
+								<SubGridEditor
+									{id}
+									visible={render && index === selectedIndex}
+									subGridId={`${id}-${index}`}
+									class={twMerge(css?.container?.class, 'wm-tabs-container')}
+									style={css?.container?.style}
+									containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
+									onFocus={() => {
+										if (!$connectingInput.opened) {
+											$selectedComponent = [id]
+											handleTabSelection()
+										}
+									}}
+								/>
+							</div>
 						</div>
-					</div>
+					{/if}
 				{/each}
 			</div>
 		{:else}

package/package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     customCss?: ComponentCustomCSS<'tabscomponent'> | undefined;
     render: boolean;
     disabledTabs: RichConfiguration[];
+    hiddenTabs: RichConfiguration[];
     onTabChange?: string[] | undefined;
 }
 declare const AppTabs: import("svelte").Component<Props, {}, "">;

package/package/components/apps/editor/component/ComponentInner.svelte

@@ -833,6 +833,7 @@ const chunk9Components = new Set(['verticalsplitpanescomponent']);
 				id={component.id}
 				tabs={component.tabs}
 				disabledTabs={component.disabledTabs}
+				hiddenTabs={component.hiddenTabs}
 				onTabChange={component.onTabChange}
 				customCss={component.customCss}
 				{componentContainerHeight}

package/package/components/apps/editor/component/components.d.ts

@@ -150,6 +150,7 @@ export type FileInputComponent = BaseComponent<'fileinputcomponent'> & {
 export type TabsComponent = BaseComponent<'tabscomponent'> & {
     tabs: string[];
     disabledTabs: RichConfiguration[];
+    hiddenTabs: RichConfiguration[];
     onTabChange?: string[];
 };
 export type ListComponent = BaseComponent<'listcomponent'>;
@@ -706,11 +707,23 @@ export declare const components: {
                     readonly value: undefined;
                     readonly fieldType: "icon-select";
                 };
+                readonly tooltip: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "text";
+                    readonly tooltip: "Tooltip text to show on hover";
+                };
                 readonly triggerOnAppLoad: {
                     readonly type: "static";
                     readonly value: false;
                     readonly fieldType: "boolean";
                 };
+                readonly runInBackground: {
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly fieldType: "boolean";
+                    readonly tooltip: "Run the job in the background without blocking the button. Multiple clicks will trigger multiple jobs.";
+                };
                 readonly onSuccess: {
                     readonly type: "oneOf";
                     readonly tooltip: "Action to perform on success";
@@ -3276,6 +3289,8 @@ export declare const components: {
             readonly componentInput: undefined;
             readonly numberOfSubgrids: 2;
             readonly tabs: string[];
+            readonly disabledTabs: RichConfiguration[];
+            readonly hiddenTabs: RichConfiguration[];
         };
     };
     readonly steppercomponent: {
@@ -3857,7 +3872,7 @@ export declare const components: {
                     readonly type: "static";
                     readonly fieldType: "object";
                     readonly value: {};
-                    readonly tooltip: "This enables setting form enum values dynamically using an object: keys are field names, and values are arrays of strings.";
+                    readonly tooltip: "This enables setting form enum values dynamically using an object: keys are field names, and values are arrays of strings or { \"label\": \"myLabel\", \"value\": \"myValue\" }.";
                 };
                 readonly displayType: {
                     readonly fieldType: "boolean";