windmill-components 1.309.7 → 1.352.0

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

@@ -20,6 +20,7 @@ export let moving = undefined;
 export let duration_ms = undefined;
 export let disableAi = false;
 export let wrapperId = undefined;
+export let retries = undefined;
 $: idx = modules.findIndex((m) => m.id === mod.id);
 const { selectedId } = getContext('FlowGraphContext');
 const dispatch = createEventDispatcher();
@@ -147,6 +148,7 @@ let openMenu2 = undefined;
 				</FlowModuleSchemaItem>
 			{:else}
 				<FlowModuleSchemaItem
+					{retries}
 					on:click={() => dispatch('select', mod.id)}
 					on:delete={onDelete}
 					on:move={() => dispatch('move')}

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         duration_ms?: number | undefined;
         disableAi?: boolean | undefined;
         wrapperId?: string | undefined;
+        retries?: number | undefined;
     };
     events: {
         delete: CustomEvent<CustomEvent<MouseEvent>>;

package/package/components/flows/types.d.ts

@@ -5,6 +5,9 @@ import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
 import type { FlowState } from './flowState';
 import type { Schedule } from './scheduleUtils';
+export type FlowInput = Record<string, {
+    requiredInputsFilled?: Record<string, boolean>;
+}>;
 export type FlowEditorContext = {
     selectedId: Writable<string>;
     moving: Writable<{
@@ -26,4 +29,5 @@ export type FlowEditorContext = {
     testStepStore: Writable<Record<string, any>>;
     saveDraft: () => void;
     initialPath: string;
+    flowInputsStore: Writable<FlowInput | undefined>;
 };

package/package/components/flows/utils.d.ts

@@ -1,6 +1,7 @@
-import { type FlowModule, type Job, type RestartedFrom, type OpenFlow } from '../../gen';
+import { type FlowModule, type InputTransform, type Job, type RestartedFrom, type OpenFlow, type FlowModuleValue } from '../../gen';
 import type { FlowModuleState } from './flowState';
 import type { PickableProperties } from './previousResults';
+import type { Schema } from '../../common';
 export declare function evalValue(k: string, mod: FlowModule, testStepStore: Record<string, any>, pickableProperties: PickableProperties | undefined, showError: boolean): any;
 export declare function cleanInputs(flow: OpenFlow | any): OpenFlow & {
     tag?: string;
@@ -15,3 +16,6 @@ export declare function runFlowPreview(args: Record<string, any>, flow: OpenFlow
 }, path: string, restartedFrom: RestartedFrom | undefined): Promise<string>;
 export declare function codeToStaticTemplate(code?: string): string | undefined;
 export declare function emptyFlowModuleState(): FlowModuleState;
+export declare function isInputFilled(inputTransforms: Record<string, InputTransform>, key: string, schema: Schema): boolean;
+export declare function setRequiredInputFilled(argName: string, flowModuleValue: FlowModuleValue, requiredInputsFilled: Record<string, boolean>, schema: Schema): Record<string, boolean>;
+export declare function initRequiredInputFilled(flowModuleValue: FlowModuleValue, schema: Schema): Record<string, boolean>;

package/package/components/flows/utils.js

@@ -118,3 +118,39 @@ export function emptyFlowModuleState() {
         previewResult: NEVER_TESTED_THIS_FAR
     };
 }
+export function isInputFilled(inputTransforms, key, schema) {
+    const required = schema?.required?.includes(key) ?? false;
+    if (!required) {
+        return true;
+    }
+    if (inputTransforms.hasOwnProperty(key)) {
+        const transform = inputTransforms[key];
+        if (transform?.type === 'static' &&
+            (transform?.value === undefined || transform?.value === '' || transform?.value === null)) {
+            return false;
+        }
+        else if (transform?.type === 'javascript' &&
+            (transform?.expr === undefined || transform?.expr === '' || transform?.expr === null)) {
+            return false;
+        }
+    }
+    return true;
+}
+export function setRequiredInputFilled(argName, flowModuleValue, requiredInputsFilled, schema) {
+    const type = flowModuleValue.type;
+    if (type == 'rawscript' || type == 'script' || type == 'flow') {
+        requiredInputsFilled[argName] = isInputFilled(flowModuleValue.input_transforms, argName, schema ?? {});
+    }
+    return requiredInputsFilled;
+}
+export function initRequiredInputFilled(flowModuleValue, schema) {
+    const requiredInputsFilled = {};
+    const type = flowModuleValue.type;
+    if (type == 'rawscript' || type == 'script' || type == 'flow') {
+        const keys = Object.keys(flowModuleValue.input_transforms);
+        for (const key of keys) {
+            requiredInputsFilled[key] = isInputFilled(flowModuleValue.input_transforms, key, schema ?? {});
+        }
+    }
+    return requiredInputsFilled;
+}

package/package/components/graph/FlowGraph.svelte

@@ -25,7 +25,8 @@ export let scroll = false;
 export let download = false;
 export let fullSize = false;
 export let disableAi = false;
-setContext('FlowGraphContext', { selectedId });
+export let flowInputsStore = writable(undefined);
+setContext('FlowGraphContext', { selectedId, flowInputsStore });
 let idGenerator;
 let nestedNodes;
 let nodes = [];
@@ -33,6 +34,7 @@ let edges = [];
 let width, height;
 let fullWidth;
 let errorHandlers = {};
+let containerHeight = window.innerHeight;
 let error = undefined;
 $: showDataflow =
     $selectedId != undefined &&
@@ -95,7 +97,7 @@ async function createGraph() {
         nodes = layered.nodes;
         let hfull = Math.max(layered.height, minHeight);
         fullWidth = layered.width;
-        height = fullSize ? hfull : Math.min(hfull, maxHeight ?? window.innerHeight * 1.5);
+        height = fullSize ? hfull : Math.max(hfull, maxHeight ?? containerHeight);
         let useDataflow = dataflow && showDataflow;
         edges = useDataflow ? [] : createEdges(nodes);
         if (useDataflow && $selectedId) {
@@ -213,6 +215,7 @@ function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, inse
                     insertable,
                     insertableEnd,
                     branchable,
+                    retries: flowModuleStates?.[mod.id]?.retries,
                     duration_ms: flowModuleStates?.[mod.id]?.duration_ms,
                     bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
                     annotation,
@@ -524,6 +527,7 @@ onMount(() => {
 <!-- {JSON.stringify(flowModuleStates)} -->
 <div
 	bind:clientWidth={width}
+	bind:clientHeight={containerHeight}
 	class={fullSize ? '' : 'w-full h-full overflow-hidden relative'}
 	id="flow-graph"
 >

package/package/components/graph/FlowGraph.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type FlowModule } from '../../gen';
 import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
+import type { FlowInput } from '../flows/types';
 declare const __propDef: {
     props: {
         success?: boolean | undefined;
@@ -19,6 +20,7 @@ declare const __propDef: {
         download?: boolean | undefined;
         fullSize?: boolean | undefined;
         disableAi?: boolean | undefined;
+        flowInputsStore?: Writable<FlowInput | undefined> | undefined;
     };
     events: {
         delete: CustomEvent<any>;

package/package/components/graph/svelvet/container/models/index.d.ts

@@ -1,5 +0,0 @@
-export declare const SVELVET_CONTEXT_KEY: "svelvet_settings_context";
-export type SvelvetSettingsContext = {
-    /** Sets the height of the canvas to `100%` instead of an arbitrary value in pixels */
-    fullHeight: boolean;
-};

package/package/components/graph/svelvet/container/models/index.js

@@ -1 +1 @@
-export const SVELVET_CONTEXT_KEY = 'svelvet_settings_context';
+"use strict";

package/package/components/graph/svelvet/container/views/Svelvet.svelte

@@ -1,10 +1,8 @@
 <script>const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
 import { createStoreEmpty, populateSvelvetStoreFromUserInput } from '../../store/controllers/storeApi';
-import { afterUpdate, onMount, getContext } from 'svelte';
+import { afterUpdate, onMount } from 'svelte';
 import GraphView from './GraphView.svelte';
 import { sanitizeUserNodesAndEdges } from '../controllers/middleware';
-import { SVELVET_CONTEXT_KEY } from '../models';
-const settings = getContext(SVELVET_CONTEXT_KEY);
 export let nodes;
 export let edges;
 export let width = 600;
@@ -23,7 +21,6 @@ export let scroll = false;
 export let download = false;
 export let dataflow = false;
 export let nodeSelected = false;
-const fullHeight = settings?.fullHeight ?? false;
 // generates a unique string for each svelvet component's unique store instance
 // creates a store that uses the unique sting as the key to create and look up the corresponding store
 // this way we can have multiple Svelvet Components on the same page and prevent overlap of information
@@ -95,7 +92,7 @@ afterUpdate(() => {
 <!-- Now that a store has been created from the initial nodes and initial edges we drill props from the store down to the D3 GraphView along with the unique key -->
 <div
 	class="Svelvet bg-surface-secondary"
-	style={`width: ${width}px; height: ${fullHeight ? '100%' : height + 'px'};`}
+	style={`width: ${width}px; min-height: 100%; height: ${height}px;`}
 >
 	{#if error != ''}
 		<div class="error text-red-600 center-center p-4">{error}</div>

package/package/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte

@@ -4,7 +4,7 @@ import { findStore } from '../../../store/models/store';
 import { getAnchorFromEdge } from '../../../edges/controllers/util';
 function calculateControlOffset(distance, curvature) {
     if (distance >= 0) {
-        return 0.5 * distance;
+        return 0.9 * distance;
     }
     else {
         return curvature * 25 * Math.sqrt(-distance);
@@ -62,6 +62,10 @@ function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Botto
     });
     return `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`;
 }
+// returns string to pass into edge 'path' svg d attribute for the straight line
+function getStraightLinePath({ sourceX, sourceY, targetX, targetY }) {
+    return `M${sourceX},${sourceY} L${sourceX},${targetY - 50}`;
+}
 // determining center of the bezier curve to know where to place the bezier edge text label
 function getSimpleBezierCenter({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25 }) {
     const [sourceControlX, sourceControlY] = getControlWithCurvature({
@@ -94,32 +98,53 @@ const store = findStore(canvasId);
 const { edgesStore } = store;
 let edge;
 $: edge = $edgesStore[edgeId];
-let params;
+let bezierParams, lineParams;
 $: {
     const store = findStore(canvasId);
     const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source');
     const targetAnchor = getAnchorFromEdge(store, edge.id, 'target');
     const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' };
-    params = {
-        sourceX: edge.sourceX + (edge.offset ?? 0),
-        sourceY: edge.sourceY,
-        sourcePosition: mapAngle[sourceAnchor.angle],
-        targetX: edge.targetX + (edge.offset ?? 0),
-        targetY: edge.targetY,
-        targetPosition: mapAngle[targetAnchor.angle],
-        curvature: 0.25
-    };
+    if (edge.targetY - edge.sourceY > 100) {
+        bezierParams = {
+            sourceX: edge.sourceX + (edge.offset ?? 0),
+            sourceY: edge.targetY - 100,
+            sourcePosition: mapAngle[sourceAnchor.angle],
+            targetX: edge.targetX + (edge.offset ?? 0),
+            targetY: edge.targetY,
+            targetPosition: mapAngle[targetAnchor.angle],
+            curvature: 0.25
+        };
+        lineParams = {
+            sourceX: edge.sourceX + (edge.offset ?? 0),
+            sourceY: edge.sourceY,
+            targetX: edge.targetX + (edge.offset ?? 0),
+            targetY: edge.targetY - 50
+        };
+    }
+    else {
+        bezierParams = {
+            sourceX: edge.sourceX + (edge.offset ?? 0),
+            sourceY: edge.sourceY,
+            sourcePosition: mapAngle[sourceAnchor.angle],
+            targetX: edge.targetX + (edge.offset ?? 0),
+            targetY: edge.targetY,
+            targetPosition: mapAngle[targetAnchor.angle],
+            curvature: 0.25
+        };
+        lineParams = {};
+    }
 }
 // pass in params to function that returns a string value for SVG path d attribute (where to be drawn)
-$: path = getSimpleBezierPath(params);
-$: [centerX, centerY] = getSimpleBezierCenter(params);
+$: bezierPath = getSimpleBezierPath(bezierParams);
+$: linePath = lineParams ? getStraightLinePath(lineParams) : '';
+$: [bezierCenterX, bezierCenterY] = getSimpleBezierCenter(bezierParams);
 // pass necessary values to BaseEdge component
 // BaseEdge renders a 'base' path that can be customized by parent Edge components
 $: baseEdgeProps = {
     ...edge,
-    path: path,
-    centerX: centerX,
-    centerY: centerY
+    path: `${bezierPath} ${linePath}`,
+    centerX: bezierCenterX,
+    centerY: bezierCenterY
 };
 </script>
 

package/package/components/graph/util.d.ts

@@ -1,6 +1,4 @@
-import type { FlowStatusModule, FlowModule } from '../../gen';
-import MapItem from '../flows/map/MapItem.svelte';
-import type { GraphModuleState } from './model';
+import type { FlowStatusModule } from '../../gen';
 export declare const NODE: {
     width: number;
     height: number;
@@ -11,37 +9,3 @@ export declare const NODE: {
 };
 export declare function createIdGenerator(): Generator<number, number, unknown>;
 export declare function getStateColor(state: FlowStatusModule['type'] | undefined): string;
-export declare function flowModuleToNode(parentIds: string[], mod: FlowModule, edgeLabel: string | undefined, annotation: string | undefined, loopDepth: number, insertableEnd: boolean, branchable: boolean, modules: FlowModule[], callbackHandler: (event: string, detail: any) => void, flowModuleStates: Record<string, GraphModuleState>, insertable: boolean, moving: boolean, disableAi: boolean): {
-    type: string;
-    id: string;
-    position: {
-        x: number;
-        y: number;
-    };
-    data: {
-        custom: {
-            component: typeof MapItem;
-            props: {
-                trigger: boolean;
-                mod: FlowModule;
-                insertable: boolean;
-                insertableEnd: boolean;
-                branchable: boolean;
-                duration_ms: number | undefined;
-                bgColor: string;
-                annotation: string | undefined;
-                modules: FlowModule[];
-                moving: boolean;
-                disableAi: boolean;
-            };
-            cb: (event: string, detail: any) => void;
-        };
-    };
-    width: number;
-    height: number;
-    parentIds: string[];
-    sourcePosition: string;
-    targetPosition: string;
-    edgeLabel: string | undefined;
-    loopDepth: number;
-};

package/package/components/graph/util.js

@@ -1,4 +1,3 @@
-import MapItem from '../flows/map/MapItem.svelte';
 export const NODE = {
     width: 275,
     height: 34,
@@ -30,36 +29,3 @@ export function getStateColor(state) {
             return isDark ? '#2e3440' : '#fff';
     }
 }
-export function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules, callbackHandler, flowModuleStates, insertable, moving, disableAi) {
-    return {
-        type: 'node',
-        id: mod.id,
-        position: { x: -1, y: -1 },
-        data: {
-            custom: {
-                component: MapItem,
-                props: {
-                    trigger: parentIds.length == 0,
-                    mod,
-                    insertable,
-                    insertableEnd,
-                    branchable,
-                    duration_ms: flowModuleStates?.[mod.id]?.duration_ms,
-                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
-                    annotation,
-                    modules,
-                    moving,
-                    disableAi
-                },
-                cb: callbackHandler
-            }
-        },
-        width: NODE.width,
-        height: NODE.height,
-        parentIds,
-        sourcePosition: 'bottom',
-        targetPosition: 'top',
-        edgeLabel,
-        loopDepth
-    };
-}

package/package/components/home/ItemsList.svelte

@@ -3,7 +3,7 @@ import { Button, Skeleton } from '../common';
 import Toggle from '../Toggle.svelte';
 import { AppService, FlowService, ScriptService, RawAppService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { Code2, FoldVertical, LayoutDashboard, SearchCode, UnfoldVertical } from 'lucide-svelte';
+import { Code2, FoldVertical, LayoutDashboard, SearchCode, SlidersHorizontal, UnfoldVertical } from 'lucide-svelte';
 export let filter = '';
 export let subtab = 'script';
 import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '../../consts';
@@ -22,6 +22,7 @@ import HighlightCode from '../HighlightCode.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import Item from './Item.svelte';
 import TreeViewRoot from './TreeViewRoot.svelte';
+import { Popup } from '../common';
 let scripts;
 let flows;
 let apps;
@@ -30,10 +31,11 @@ let filteredItems = [];
 let itemKind = $page.url.searchParams.get('kind') ?? 'all';
 let loading = true;
 let nbDisplayed = 15;
-async function loadScripts() {
+async function loadScripts(hideWithoutMain) {
     const loadedScripts = await ScriptService.listScripts({
         workspace: $workspaceStore,
-        showArchived: archived ? true : undefined
+        showArchived: archived ? true : undefined,
+        hideWithoutMain: hideWithoutMain ? true : undefined
     });
     scripts = loadedScripts.map((script) => {
         return {
@@ -129,7 +131,7 @@ $: if ($workspaceStore) {
 }
 $: {
     if ($userStore && $workspaceStore) {
-        loadScripts();
+        loadScripts(hideWithoutMain);
         loadFlows();
         if (!archived) {
             loadApps();
@@ -185,10 +187,13 @@ $: items && resetScroll();
 let archived = false;
 const TREE_VIEW_SETTING_NAME = 'treeView';
 const FILTER_USER_FOLDER_SETTING_NAME = 'filterUserFolders';
+const HIDE_WITHOUT_MAIN_SETTING = 'hideWithoutMain';
 let treeView = getLocalSetting(TREE_VIEW_SETTING_NAME) == 'true';
 let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true';
+let hideWithoutMain = getLocalSetting(HIDE_WITHOUT_MAIN_SETTING) == 'true';
 $: storeLocalSetting(TREE_VIEW_SETTING_NAME, treeView ? 'true' : undefined);
 $: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined);
+$: storeLocalSetting(HIDE_WITHOUT_MAIN_SETTING, hideWithoutMain ? 'true' : undefined);
 let contentSearch;
 let viewCodeDrawer;
 let viewCodeTitle;
@@ -320,7 +325,37 @@ let collapseAll = true;
 		{/if}
 		{#if !loading}
 			<div class="flex w-full flex-row-reverse gap-2 mt-4 mb-1 items-center h-6">
-				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} />
+				<Popup
+					floatingConfig={{ placement: 'bottom-end' }}
+					containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+				>
+					<svelte:fragment slot="button">
+						<Button
+							startIcon={{
+								icon: SlidersHorizontal
+							}}
+							nonCaptureEvent
+							iconOnly
+							size="xs"
+							color="light"
+							variant="border"
+							spacingSize="xs2"
+						/>
+					</svelte:fragment>
+					<div>
+						<span class="text-sm font-semibold">Filters</span>
+						<div class="flex flex-col gap-2 mt-2">
+							<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} />
+							{#if $userStore && !$userStore.operator}
+								<Toggle
+									size="xs"
+									bind:checked={hideWithoutMain}
+									options={{ right: 'Hide without main function' }}
+								/>
+							{/if}
+						</div>
+					</div>
+				</Popup>
 				{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
 					<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
 				{:else if $userStore?.is_admin || $userStore?.is_super_admin}
@@ -367,12 +402,12 @@ let collapseAll = true;
 				{nbDisplayed}
 				{collapseAll}
 				isSearching={filter !== ''}
-				on:scriptChanged={loadScripts}
+				on:scriptChanged={() => loadScripts(hideWithoutMain)}
 				on:flowChanged={loadFlows}
 				on:appChanged={loadApps}
 				on:rawAppChanged={loadRawApps}
 				on:reload={() => {
-					loadScripts()
+					loadScripts(hideWithoutMain)
 					loadFlows()
 					loadApps()
 					loadRawApps()
@@ -384,12 +419,12 @@ let collapseAll = true;
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
 					<Item
 						{item}
-						on:scriptChanged={loadScripts}
+						on:scriptChanged={() => loadScripts(hideWithoutMain)}
 						on:flowChanged={loadFlows}
 						on:appChanged={loadApps}
 						on:rawAppChanged={loadRawApps}
 						on:reload={() => {
-							loadScripts()
+							loadScripts(hideWithoutMain)
 							loadFlows()
 							loadApps()
 							loadRawApps()

package/package/components/home/TreeView.svelte

@@ -70,6 +70,7 @@ let showMax = 15;
 						on:appChanged
 						on:rawAppChanged
 						on:reload
+						{showCode}
 						depth={depth + 1}
 					/>
 				{/each}
@@ -135,6 +136,7 @@ let showMax = 15;
 						on:appChanged
 						on:rawAppChanged
 						on:reload
+						{showCode}
 						depth={depth + 1}
 					/>
 				{/each}

package/package/components/icons/AzureIcon.svelte

@@ -2,4 +2,28 @@
 export let width = '24px';
 </script>
 
-<svg id="svg1035" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.5 377.3" width="20" height="20"><style>.st0{fill:#00bef2}.st1{fill:#fff;stroke:#fff;stroke-width:1.2357;stroke-linecap:round;stroke-linejoin:round}</style><g id="layer1" transform="translate(-39.022 -78.115)"><g id="g1016" transform="translate(-63.947 -88.179)"><path id="path1008" class="st0" d="M290 166.3c.4 0 .8.5 1.4 1.4.5.8 42.6 51.3 93.6 112.2 51 60.9 92.6 111 92.4 111.3-.1.3-40.7 33.6-90.2 73.9s-91.6 74.6-93.5 76.2c-3.3 2.7-3.5 2.8-4.7 1.6-.7-.7-42.9-35.2-93.8-76.7S102.8 390.5 103 390c.2-.5 42-50.4 93.1-111s92.9-110.7 93.1-111.5c.2-.8.5-1.2.8-1.2z"/><path id="path923" class="st1" d="M283.1 483.6c-5.8-2.1-12.8-8.1-15.7-13.7-3.6-6.9-3.3-17.7.7-26.3 3.1-6.4 3.1-6.6 1.1-8.1-1.1-.8-14.4-8.2-29.4-16.3-15-8.1-28.1-15.2-29-15.7-1.2-.7-3.2 0-6.8 2.3-11.7 7.4-23.9 6.6-33.5-2.3-6.9-6.4-8.9-10.9-8.9-20.1 0-8.9 1.8-13.5 7.5-19.2 7.7-7.7 18-10.3 27.9-7 5.4 1.8 5.5 1.8 8.9-.8 4-3 36.1-32.3 51.6-47l10.7-10.2-3.2-6.7c-6.5-13.5-3.2-28.5 8.2-37.5 6.2-4.9 10.8-6.4 19.7-6.4 20.8 0 35.3 21.8 27.5 41.3-2.1 5.4-2.1 5.5-.1 8.8 1.7 2.9 30.6 37.8 45.9 55.6 2.7 3.1 5.7 5.6 6.7 5.6s4.4-1 7.6-2.2c14.9-5.9 30.6.7 36.8 15.5 4 9.5.5 22.3-8 30-6 5.4-10.4 7.1-18.4 7.1-5.6 0-7.7-.6-13.6-3.8-4.4-2.4-7.8-3.6-9.2-3.2-2.4.6-39.3 25.9-47.5 32.5-5 4.1-5.4 5.6-2.8 11.7 2.5 6 2.2 15.4-.6 21.3-3.1 6.5-10.8 13-17.5 15-6.8 1.9-10.9 1.9-16.6-.2zm1.7-110.2v-57l-3.2-4.4c-1.8-2.4-3.5-4.4-3.8-4.4-1.3 0-65.9 58.7-65.9 59.9 0 .3 1 3.3 2.2 6.5 1.2 3.3 2.1 8 2 10.7-.1 2.7-.1 5.7-.1 6.7.1 2.3 21.7 16.1 54.1 34.8 8.9 5.2 12 6.5 13.1 5.6 1.3-1.1 1.6-12.2 1.6-58.4zm27.4 50.4c42.8-26.9 50.8-32.3 51.3-34.3.3-1.2.7-5.9.8-10.6l.3-8.4-21.8-25.9c-23.4-27.7-32-37.1-34-37.1-.7 0-4.2 2-7.8 4.4l-6.6 4.4.3 56.9c.3 51 .7 59.6 2.6 59.6.2.1 7-4 14.9-9z"/></g></g></svg>
+<svg id="azure" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.5 377.3" width="20" height="20"
+	><style>
+		.st0-azure {
+			fill: #00bef2;
+		}
+		.st1-azure {
+			fill: #fff;
+			stroke: #fff;
+			stroke-width: 1.2357;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+		}</style><g id="layer1" transform="translate(-39.022 -78.115)"
+		><g id="g1016" transform="translate(-63.947 -88.179)"
+			><path
+				id="path1008"
+				class="st0-azure"
+				d="M290 166.3c.4 0 .8.5 1.4 1.4.5.8 42.6 51.3 93.6 112.2 51 60.9 92.6 111 92.4 111.3-.1.3-40.7 33.6-90.2 73.9s-91.6 74.6-93.5 76.2c-3.3 2.7-3.5 2.8-4.7 1.6-.7-.7-42.9-35.2-93.8-76.7S102.8 390.5 103 390c.2-.5 42-50.4 93.1-111s92.9-110.7 93.1-111.5c.2-.8.5-1.2.8-1.2z"
+			/><path
+				id="path923"
+				class="st1-azure"
+				d="M283.1 483.6c-5.8-2.1-12.8-8.1-15.7-13.7-3.6-6.9-3.3-17.7.7-26.3 3.1-6.4 3.1-6.6 1.1-8.1-1.1-.8-14.4-8.2-29.4-16.3-15-8.1-28.1-15.2-29-15.7-1.2-.7-3.2 0-6.8 2.3-11.7 7.4-23.9 6.6-33.5-2.3-6.9-6.4-8.9-10.9-8.9-20.1 0-8.9 1.8-13.5 7.5-19.2 7.7-7.7 18-10.3 27.9-7 5.4 1.8 5.5 1.8 8.9-.8 4-3 36.1-32.3 51.6-47l10.7-10.2-3.2-6.7c-6.5-13.5-3.2-28.5 8.2-37.5 6.2-4.9 10.8-6.4 19.7-6.4 20.8 0 35.3 21.8 27.5 41.3-2.1 5.4-2.1 5.5-.1 8.8 1.7 2.9 30.6 37.8 45.9 55.6 2.7 3.1 5.7 5.6 6.7 5.6s4.4-1 7.6-2.2c14.9-5.9 30.6.7 36.8 15.5 4 9.5.5 22.3-8 30-6 5.4-10.4 7.1-18.4 7.1-5.6 0-7.7-.6-13.6-3.8-4.4-2.4-7.8-3.6-9.2-3.2-2.4.6-39.3 25.9-47.5 32.5-5 4.1-5.4 5.6-2.8 11.7 2.5 6 2.2 15.4-.6 21.3-3.1 6.5-10.8 13-17.5 15-6.8 1.9-10.9 1.9-16.6-.2zm1.7-110.2v-57l-3.2-4.4c-1.8-2.4-3.5-4.4-3.8-4.4-1.3 0-65.9 58.7-65.9 59.9 0 .3 1 3.3 2.2 6.5 1.2 3.3 2.1 8 2 10.7-.1 2.7-.1 5.7-.1 6.7.1 2.3 21.7 16.1 54.1 34.8 8.9 5.2 12 6.5 13.1 5.6 1.3-1.1 1.6-12.2 1.6-58.4zm27.4 50.4c42.8-26.9 50.8-32.3 51.3-34.3.3-1.2.7-5.9.8-10.6l.3-8.4-21.8-25.9c-23.4-27.7-32-37.1-34-37.1-.7 0-4.2 2-7.8 4.4l-6.6 4.4.3 56.9c.3 51 .7 59.6 2.6 59.6.2.1 7-4 14.9-9z"
+			/></g
+		></g
+	></svg
+>