windmill-components 1.46.3 → 1.52.0

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,10 +1,8 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
-import Button from '../../common/button/Button.svelte';
 import { classNames } from '../../../utils';
-import { faBed, faRepeat, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faBed, faRepeat, faStop, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-export let color = 'blue';
 export let isFirst = false;
 export let isLast = false;
 export let hasLine = true;
@@ -13,6 +11,7 @@ export let deletable = false;
 export let retry = false;
 export let earlyStop = false;
 export let suspend = false;
+export let sleep = false;
 export let bold = false;
 export let id = undefined;
 export let label;
@@ -24,28 +23,14 @@ const dispatch = createEventDispatcher();
 <div class="flex relative" on:click>
 	<div
 		class={classNames(
-			'flex mr-2 ml-0.5',
+			'flex pl-6 ml-0.5',
 			hasLine ? 'line' : '',
 			isFirst ? 'justify-center items-start' : 'justify-center items-center'
 		)}
-	>
-		<div
-			class={classNames(
-				'flex justify-center items-center w-6 h-6 border rounded-full text-xs font-bold',
-				color === 'blue'
-					? 'bg-blue-200 text-blue-800'
-					: color === 'orange'
-					? 'bg-orange-200 text-orange-800'
-					: 'bg-blue-100 text-blue-600',
-				''
-			)}
-		>
-			<slot name="icon" />
-		</div>
-	</div>
+	/>
 	<div
 		class={classNames(
-			'w-full flex overflow-hidden rounded-sm cursor-pointer',
+			'w-full flex overflow-hidden rounded-sm cursor-pointer mr-2',
 			selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
 			margin
 		)}
@@ -61,29 +46,36 @@ const dispatch = createEventDispatcher();
 					<Icon scale={0.8} data={faStop} />
 				</div>
 			{/if}
-			{#if suspend}
+			{#if suspend || sleep}
 				<div class="bg-white rounded border text-gray-600 px-1">
 					<Icon scale={0.8} data={faBed} />
 				</div>
 			{/if}
 		</div>
 		<div
-			class="flex justify-between items-center w-full overflow-hidden border p-2 bg-white text-sm"
+			class="flex justify-between items-center w-full overflow-hidden rounded-sm border border-gray-400 p-2 bg-white text-2xs module"
 		>
+			{#if $$slots.icon}
+				<slot name="icon" />
+				<span class="mr-2" />
+			{/if}
 			<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
 			<div class="flex items-center space-x-2">
 				{#if id}
 					<Badge color="indigo">{id}</Badge>
 				{/if}
 				{#if deletable}
-					<Button
+					<button
+						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center bg-white {selected
+							? ''
+							: '!hidden'}"
 						on:click={(event) => dispatch('delete', event)}
-						startIcon={{ icon: faTrashAlt, classes: 'text-gray-500' }}
-						iconOnly={true}
-						color="light"
-						variant="border"
-						size="xs"
-					/>
+						><Icon
+							data={faTimesCircle}
+							class="text-gray-600 hover:text-red-600"
+							scale={0.9}
+						/></button
+					>
 				{/if}
 			</div>
 		</div>
@@ -91,7 +83,10 @@ const dispatch = createEventDispatcher();
 </div>
 
 <style>
+	.module:hover .trash {
+		display: flex !important;
+	}
 	.line {
-		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
-			no-repeat;
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, rgb(120, 120, 120) 4px 8px)
+			50%/1px 100% no-repeat;
 	}</style>

package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        color?: "blue" | "indigo" | "orange" | undefined;
         isFirst?: boolean | undefined;
         isLast?: boolean | undefined;
         hasLine?: boolean | undefined;
@@ -10,13 +9,14 @@ declare const __propDef: {
         retry?: boolean | undefined;
         earlyStop?: boolean | undefined;
         suspend?: boolean | undefined;
+        sleep?: boolean | undefined;
         bold?: boolean | undefined;
         id?: string | undefined;
         label: string;
     };
     events: {
         click: MouseEvent;
-        delete: CustomEvent<CustomEvent<MouseEvent>>;
+        delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,9 +24,9 @@ declare const __propDef: {
         icon: {};
     };
 };
-export declare type FlowModuleSchemaItemProps = typeof __propDef.props;
-export declare type FlowModuleSchemaItemEvents = typeof __propDef.events;
-export declare type FlowModuleSchemaItemSlots = typeof __propDef.slots;
+export type FlowModuleSchemaItemProps = typeof __propDef.props;
+export type FlowModuleSchemaItemEvents = typeof __propDef.events;
+export type FlowModuleSchemaItemSlots = typeof __propDef.slots;
 export default class FlowModuleSchemaItem extends SvelteComponentTyped<FlowModuleSchemaItemProps, FlowModuleSchemaItemEvents, FlowModuleSchemaItemSlots> {
 }
 export {};

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
+import { createBranchAll, createBranches, createLoop, deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
 import { flowStateStore } from '../flowState';
 import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
 import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
@@ -8,17 +8,31 @@ import MapItem from './MapItem.svelte';
 import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowInputsItem from './FlowInputsItem.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
+import { slide } from 'svelte/transition';
 export let root = false;
-export let color = 'blue';
 export let modules;
 let indexToRemove = undefined;
 const { select } = getContext('FlowEditorContext');
-async function insertNewModuleAtIndex(index) {
+async function insertNewModuleAtIndex(index, kind) {
     await idMutex.runExclusive(async () => {
-        const flowModule = emptyModule();
+        var module = emptyModule();
+        var state = emptyFlowModuleState();
+        if (kind == 'forloop') {
+            ;
+            [module, state] = await createLoop(module.id);
+        }
+        else if (kind == 'branchone') {
+            ;
+            [module, state] = await createBranches(module.id);
+        }
+        else if (kind == 'branchall') {
+            ;
+            [module, state] = await createBranchAll(module.id);
+        }
+        const flowModule = module;
         modules.splice(index, 0, flowModule);
         modules = modules;
-        $flowStateStore[flowModule.id] = emptyFlowModuleState();
+        $flowStateStore[flowModule.id] = state;
         select(flowModule.id);
     });
 }
@@ -58,35 +72,45 @@ function findLeaves(flowModule) {
 $: confirmationModalOpen = indexToRemove !== undefined;
 </script>
 
-<div class="flex flex-col justify-between w-full">
-	<ul class="w-full">
-		{#if root}
+<div class="flex flex-col h-full relative">
+	{#if root}
+		<div
+			class="z-10 sticky top-0 bg-gray-50 flex-initial inline-flex px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+		>
 			<FlowSettingsItem />
-			<FlowInputsItem />
+		</div>
+	{/if}
+	<ul class="w-full flex-auto   {root ? 'px-2 pb-2 pt-3' : ''} py-1">
+		{#if root}
+			<li>
+				<FlowInputsItem />
+			</li>
 		{/if}
 
 		{#each modules as mod, index (mod.id ?? index)}
-			<MapItem
-				{color}
-				{index}
-				bind:mod
-				on:delete={(event) => {
-					if (event.detail.detail.shiftKey || isEmptyFlowModule(mod)) {
-						removeAtIndex(index)
-					} else {
-						indexToRemove = index
-					}
-				}}
-				on:insert={() => {
-					insertNewModuleAtIndex(index)
-				}}
-			/>
+			<div transition:slide|local>
+				<MapItem
+					bind:mod
+					on:delete={(event) => {
+						if (event.detail.detail.shiftKey || isEmptyFlowModule(mod)) {
+							removeAtIndex(index)
+						} else {
+							indexToRemove = index
+						}
+					}}
+					on:insert={(e) => {
+						insertNewModuleAtIndex(index, e.detail)
+					}}
+				/>
+			</div>
 		{/each}
 
-		<InsertModuleButton on:click={() => insertNewModuleAtIndex(modules.length)} />
+		<InsertModuleButton on:new={(e) => insertNewModuleAtIndex(modules.length, e.detail)} />
 	</ul>
 	{#if root}
-		<FlowErrorHandlerItem />
+		<div class="sticky bottom-0 bg-gray-50 flex-none px-4 py-1 pb-2 border-t">
+			<FlowErrorHandlerItem />
+		</div>
 	{/if}
 </div>
 
@@ -102,69 +126,3 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 		}
 	}}
 />
-
-<style>
-	.badge {
-
-    display: flex;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    white-space: nowrap;
-
-    border-radius: 0.25rem;
-
-    border-width: 1px;
-
-    padding-left: 0.625rem;
-
-    padding-right: 0.625rem;
-
-    padding-top: 0.125rem;
-
-    padding-bottom: 0.125rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    font-weight: 500
-}
-
-	.badge-on {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(30 64 175 / var(--tw-text-opacity))
-}
-
-	.badge-on:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
-}
-
-	.badge-off {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(31 41 55 / var(--tw-text-opacity))
-}
-
-	.badge-off:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
-}</style>

package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -3,7 +3,6 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         root?: boolean | undefined;
-        color?: "blue" | "indigo" | "orange" | undefined;
         modules: FlowModule[];
     };
     events: {
@@ -11,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowModuleSchemaMapProps = typeof __propDef.props;
-export declare type FlowModuleSchemaMapEvents = typeof __propDef.events;
-export declare type FlowModuleSchemaMapSlots = typeof __propDef.slots;
+export type FlowModuleSchemaMapProps = typeof __propDef.props;
+export type FlowModuleSchemaMapEvents = typeof __propDef.events;
+export type FlowModuleSchemaMapSlots = typeof __propDef.slots;
 export default class FlowModuleSchemaMap extends SvelteComponentTyped<FlowModuleSchemaMapProps, FlowModuleSchemaMapEvents, FlowModuleSchemaMapSlots> {
 }
 export {};

package/components/flows/map/FlowSettingsItem.svelte

@@ -3,27 +3,28 @@ import Icon from 'svelte-awesome';
 import { faCalendarAlt, faSliders } from '@fortawesome/free-solid-svg-icons';
 import { classNames } from '../../../utils';
 import { Badge } from '../../common';
+import { flowStore } from '../flowStore';
 const { select, selectedId, schedule } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4 sticky top-0 z-10', $selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click={() => select('settings')} class={settingsClass}>
 	<Icon data={faSliders} class="mr-2" />
-	<span
-		class="text-xs font-bold flex flex-row justify-between w-full  gap-2 items-center flex-wrap"
-	>
+	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate">
 		Settings
 		<span
 			class={classNames('badge', $schedule?.enabled ? 'badge-on' : 'badge-off')}
 			on:click|stopPropagation={() => select('settings-schedule')}
 		>
 			{#if $schedule?.enabled}
-				<Badge color="gray"
-					>{$schedule.cron}
-					<Icon class={$schedule.cron ? 'ml-2' : ''} data={faCalendarAlt} scale={0.8} />
+				<Badge color="gray" baseClass="truncate">
+					<Icon data={faCalendarAlt} scale={0.8} />
 				</Badge>
 			{/if}
+			{#if $flowStore.value.same_worker}
+				<Badge color="blue" baseClass="truncate">same worker</Badge>
+			{/if}
 		</span>
 	</span>
 </div>

package/components/flows/map/FlowSettingsItem.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowSettingsItemProps = typeof __propDef.props;
-export declare type FlowSettingsItemEvents = typeof __propDef.events;
-export declare type FlowSettingsItemSlots = typeof __propDef.slots;
+export type FlowSettingsItemProps = typeof __propDef.props;
+export type FlowSettingsItemEvents = typeof __propDef.events;
+export type FlowSettingsItemSlots = typeof __propDef.slots;
 export default class FlowSettingsItem extends SvelteComponentTyped<FlowSettingsItemProps, FlowSettingsItemEvents, FlowSettingsItemSlots> {
 }
 export {};

package/components/flows/map/InsertModuleButton.svelte

@@ -1,11 +1,65 @@
-<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { Menu } from '../../common';
+import { faCode, faCodeBranch, faPlus, faRepeat } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
+const dispatch = createEventDispatcher();
 </script>
 
-<button
-	on:click
-	type="button"
-	class="text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
->
-	<Icon data={faPlus} scale={0.8} />
-</button>
+<Menu noMinW placement="bottom-start" let:close>
+	<button
+		slot="trigger"
+		type="button"
+		class="text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+	>
+		<Icon data={faPlus} scale={0.8} />
+	</button>
+	<div class="divide-y divide-gray-100 text-xs w-40">
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'script')
+			}}
+			role="menuitem"
+			tabindex="-1"
+		>
+			<Icon data={faCode} scale={0.8} class="mr-1" />
+			Script or Module
+		</button>
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'forloop')
+			}}
+			role="menuitem"
+		>
+			<Icon data={faRepeat} scale={0.8} class="mr-1" />
+			For Loop
+		</button>
+
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'branchone')
+			}}
+			role="menuitem"
+		>
+			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			Branch to one
+		</button>
+
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'branchall')
+			}}
+			role="menuitem"
+		>
+			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			Branch to all
+		</button>
+	</div>
+</Menu>

package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -2,15 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {};
     events: {
-        click: MouseEvent;
+        new: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type InsertModuleButtonProps = typeof __propDef.props;
-export declare type InsertModuleButtonEvents = typeof __propDef.events;
-export declare type InsertModuleButtonSlots = typeof __propDef.slots;
+export type InsertModuleButtonProps = typeof __propDef.props;
+export type InsertModuleButtonEvents = typeof __propDef.events;
+export type InsertModuleButtonSlots = typeof __propDef.slots;
 export default class InsertModuleButton extends SvelteComponentTyped<InsertModuleButtonProps, InsertModuleButtonEvents, InsertModuleButtonSlots> {
 }
 export {};

package/components/flows/map/MapItem.svelte

@@ -4,24 +4,27 @@ import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
 import FlowBranchOneMap from './FlowBranchOneMap.svelte';
 import FlowBranchAllMap from './FlowBranchAllMap.svelte';
+import { faArrowRotateForward, faBuilding, faCode, faCodeBranch, faLongArrowDown, faRepeat } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import IconedResourceType from '../../IconedResourceType.svelte';
+import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
 export let mod;
-export let index;
-export let color = 'blue';
 const { select, selectedId } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 $: itemProps = {
     selected: $selectedId === mod.id,
     retry: mod.retry?.constant != undefined || mod.retry?.exponential != undefined,
     earlyStop: mod.stop_after_if != undefined,
-    suspend: Boolean(mod.suspend)
+    suspend: Boolean(mod.suspend),
+    sleep: Boolean(mod.sleep)
 };
 function onDelete(event) {
-    dispatch('delete', event.detail);
+    dispatch('delete', event);
 }
 </script>
 
 {#if mod}
-	<InsertModuleButton on:click={() => dispatch('insert')} />
+	<InsertModuleButton on:new={(e) => dispatch('insert', e.detail)} />
 	{#if mod.value.type === 'forloopflow'}
 		<li class="w-full">
 			<FlowModuleSchemaItem
@@ -33,14 +36,14 @@ function onDelete(event) {
 				{...itemProps}
 			>
 				<div slot="icon">
-					<span>{index + 1}</span>
+					<Icon data={faArrowRotateForward} scale={1.1} />
 				</div>
 			</FlowModuleSchemaItem>
 			<div class="flex flex-row w-full">
-				<div class="w-8 shrink-0 line" />
-				<div class="grow my-4 overflow-auto">
-					<div class="w-full pr-1">
-						<FlowModuleSchemaMap bind:modules={mod.value.modules} color="orange" />
+				<div class="w-7 shrink-0 line" />
+				<div class="grow my-1 min-w-0">
+					<div class="w-full">
+						<FlowModuleSchemaMap bind:modules={mod.value.modules} />
 					</div>
 				</div>
 			</div>
@@ -56,7 +59,7 @@ function onDelete(event) {
 				label={mod.summary || 'Run one branch'}
 			>
 				<div slot="icon">
-					<span>{index + 1}</span>
+					<Icon data={faCodeBranch} scale={1} />
 				</div>
 			</FlowModuleSchemaItem>
 			<FlowBranchOneMap bind:module={mod} />
@@ -72,7 +75,7 @@ function onDelete(event) {
 				label={mod.summary || 'Run all branches'}
 			>
 				<div slot="icon">
-					<span>{index + 1}</span>
+					<Icon data={faCodeBranch} scale={1} />
 				</div>
 			</FlowModuleSchemaItem>
 			<FlowBranchAllMap bind:module={mod} />
@@ -82,7 +85,6 @@ function onDelete(event) {
 			<FlowModuleSchemaItem
 				on:click={() => select(mod.id)}
 				on:delete={onDelete}
-				{color}
 				deletable
 				id={mod.id}
 				{...itemProps}
@@ -91,7 +93,19 @@ function onDelete(event) {
 					(mod.value.type === 'rawscript' ? `Inline ${mod.value.language}` : 'To be defined')}
 			>
 				<div slot="icon">
-					<span>{index + 1}</span>
+					{#if mod.value.type === 'rawscript'}
+						<LanguageIcon lang={mod.value.language} width={16} height={16} />
+					{:else if mod.value.type === 'identity'}
+						<Icon data={faLongArrowDown} scale={1.1} />
+					{:else if mod.value.type === 'script'}
+						{#if mod.value.path.startsWith('hub/')}
+							<div class="w-5">
+								<IconedResourceType name={mod.value.path.split('/')[2]} silent={true} />
+							</div>
+						{:else}
+							<Icon data={faBuilding} scale={1.1} />
+						{/if}
+					{/if}
 				</div>
 			</FlowModuleSchemaItem>
 		</li>
@@ -100,6 +114,6 @@ function onDelete(event) {
 
 <style>
 	.line {
-		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
-			no-repeat;
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, rgb(120, 120, 120) 4px 8px)
+			50%/1px 100% no-repeat;
 	}</style>

package/components/flows/map/MapItem.svelte.d.ts

@@ -3,20 +3,18 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         mod: FlowModule;
-        index: number;
-        color?: "blue" | "indigo" | "orange" | undefined;
     };
     events: {
         delete: CustomEvent<CustomEvent<MouseEvent>>;
-        insert: CustomEvent<void>;
+        insert: CustomEvent<"branchone" | "script" | "branchall" | "forloop">;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type MapItemProps = typeof __propDef.props;
-export declare type MapItemEvents = typeof __propDef.events;
-export declare type MapItemSlots = typeof __propDef.slots;
+export type MapItemProps = typeof __propDef.props;
+export type MapItemEvents = typeof __propDef.events;
+export type MapItemSlots = typeof __propDef.slots;
 export default class MapItem extends SvelteComponentTyped<MapItemProps, MapItemEvents, MapItemSlots> {
 }
 export {};

package/components/flows/pickers/FlowScriptPicker.svelte

@@ -1,13 +1,15 @@
 <script>import Button from '../../common/button/Button.svelte';
-import Icon from 'svelte-awesome';
+import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
 export let disabled = false;
-export let icon;
 export let label;
-export let iconColor;
+export let lang = undefined;
+export let icon = undefined;
+export let iconColor = undefined;
 </script>
 
 <Button
 	{disabled}
+	btnClasses="w-24 truncate"
 	on:click
 	size="sm"
 	spacingSize="md"
@@ -18,5 +20,10 @@ export let iconColor;
 		classes: iconColor
 	}}
 >
-	{label}
+	<div class="flex justify-center flex-col items-center gap-2">
+		{#if lang}
+			<LanguageIcon {lang} />
+		{/if}
+		<span class="text-xs">{label}</span>
+	</div>
 </Button>