windmill-components 1.309.7 → 1.339.2

package/package/components/apps/editor/component/components.js

@@ -96,7 +96,7 @@ const onSuccessClick = {
         },
         sendToast: {
             message: {
-                tooltip: 'The message of the toast to diplay',
+                tooltip: 'The message of the toast to display',
                 fieldType: 'text',
                 type: 'static',
                 value: '',
@@ -183,10 +183,10 @@ const onErrorClick = {
         },
         sendErrorToast: {
             message: {
-                tooltip: 'The message of the toast to diplay',
+                tooltip: 'The message of the toast to display',
                 fieldType: 'text',
                 type: 'static',
-                value: '',
+                value: 'An error occured',
                 placeholder: 'Hello there',
                 onDemandOnly: true
             },
@@ -319,6 +319,12 @@ const aggridcomponentconst = {
                 fieldType: 'boolean',
                 value: false,
                 tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
+            },
+            footer: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'Allow visible footer for pagination and download'
             }
         },
         componentInput: {
@@ -340,6 +346,93 @@ const aggridcomponentconst = {
         }
     }
 };
+const aggridinfinitecomponentconst = {
+    name: 'AgGrid Infinite Table',
+    icon: Table2,
+    documentationLink: `${documentationBaseUrl}/aggrid_table#aggrid-infinite-table`,
+    dims: '3:10-6:10',
+    customCss: {
+        container: { class: '', style: '' }
+    },
+    initialData: {
+        configuration: {
+            columnDefs: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'ag-grid',
+                value: []
+            },
+            flex: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'default col flex is 1 (see ag-grid docs)'
+            },
+            allEditable: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                hide: true,
+                tooltip: 'Configure all columns as Editable by users'
+            },
+            multipleSelectable: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'Make multiple rows selectable at once'
+            },
+            rowMultiselectWithClick: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'If multiple selectable, allow multiselect with click'
+            },
+            selectFirstRowByDefault: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'Select the first row by default on start'
+            },
+            extraConfig: {
+                type: 'static',
+                fieldType: 'object',
+                value: {},
+                tooltip: 'any configuration that can be passed to ag-grid top level'
+            },
+            compactness: {
+                type: 'static',
+                fieldType: 'select',
+                value: 'normal',
+                selectOptions: ['normal', 'compact', 'comfortable'],
+                tooltip: 'Change the row height'
+            },
+            wrapActions: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
+            },
+            searchEnabled: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'Enable search in the table'
+            },
+            footer: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'Allow visible footer for pagination and download'
+            }
+        },
+        componentInput: {
+            type: 'runnable',
+            fieldType: 'any',
+            fields: {},
+            runnable: undefined
+        }
+    }
+};
 const agchartscomponentconst = {
     name: 'AgCharts',
     icon: BarChart4,
@@ -627,7 +720,7 @@ export const components = {
                     type: 'static',
                     selectOptions: selectOptions.buttonColorOptions,
                     value: 'blue',
-                    tooltip: 'Theses presets can be overwritten with custom styles.'
+                    tooltip: 'These presets can be overwritten with custom styles.'
                 },
                 size: {
                     fieldType: 'select',
@@ -836,7 +929,7 @@ export const components = {
                     type: 'static',
                     value: 'dark',
                     selectOptions: buttonColorOptions,
-                    tooltip: 'Theses presets can be overwritten with custom styles.'
+                    tooltip: 'These presets can be overwritten with custom styles.'
                 },
                 size: {
                     fieldType: 'select',
@@ -1260,7 +1353,7 @@ This is a paragraph.
         }
     },
     tablecomponent: {
-        name: 'Table',
+        name: 'TanStack Table',
         icon: Table2,
         documentationLink: `${documentationBaseUrl}/table`,
         dims: '3:10-6:10',
@@ -1320,13 +1413,16 @@ This is a paragraph.
                         name: 'A briefer cell',
                         age: 84
                     }
-                ]
+                ],
+                hideRefreshButton: true
             },
             actionButtons: true
         }
     },
     aggridcomponent: aggridcomponentconst,
     aggridcomponentee: { ...aggridcomponentconst, name: 'AgGrid Table EE' },
+    aggridinfinitecomponent: aggridinfinitecomponentconst,
+    aggridinfinitecomponentee: { ...aggridinfinitecomponentconst, name: 'AgGrid Infinite Table EE' },
     checkboxcomponent: {
         name: 'Toggle',
         icon: ToggleLeft,
@@ -1527,6 +1623,55 @@ This is a paragraph.
         },
         initialData: {
             componentInput: undefined,
+            verticalAlignment: 'center',
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'text',
+                    value: ['Foo', 'Bar']
+                },
+                defaultItems: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'text',
+                    value: []
+                },
+                placeholder: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Select items'
+                },
+                create: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Allows user to manually add new value',
+                    customTitle: 'User creatable'
+                },
+                allowOverflow: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'If too many items, the box overflow its container instead of having an internal scroll'
+                }
+            }
+        }
+    },
+    multiselectcomponentv2: {
+        name: 'Multi Select',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/multiselect`,
+        dims: '2:1-3:1',
+        customCss: {
+            multiselect: {
+                style: '',
+                tooltip: 'See https://multiselect.janosh.dev/#with-css-variables for the available variables'
+            }
+        },
+        initialData: {
+            componentInput: undefined,
+            verticalAlignment: 'center',
             configuration: {
                 items: {
                     type: 'static',
@@ -1577,6 +1722,7 @@ This is a paragraph.
                     type: 'static',
                     fieldType: 'array',
                     subFieldType: 'labeledresource',
+                    allowTypeChange: false,
                     value: []
                 },
                 placeholder: {
@@ -1717,6 +1863,12 @@ This is a paragraph.
                     type: 'static',
                     value: false,
                     fieldType: 'boolean'
+                },
+                axisStep: {
+                    type: 'static',
+                    value: 10,
+                    fieldType: 'number',
+                    tooltip: 'Spread between each number suggestion when using the arrow keys'
                 }
             }
         }
@@ -1823,6 +1975,12 @@ This is a paragraph.
                     value: false,
                     fieldType: 'boolean',
                     tooltip: 'Determine if the slider is disabled, or enabled (only disables interactions, and events)'
+                },
+                axisStep: {
+                    type: 'static',
+                    value: 10,
+                    fieldType: 'number',
+                    tooltip: 'Spread between each number suggestion when using the arrow keys'
                 }
             }
         }
@@ -1933,10 +2091,10 @@ This is a paragraph.
                 },
                 outputFormat: {
                     type: 'static',
-                    value: undefined,
+                    value: 'yyyy-MM-dd',
                     fieldType: 'text',
                     markdownTooltip: `### Output format				
-See date-fns format for more information. By default, it is 'dd.MM.yyyy'
+See date-fns format for more information. By default, it is 'yyyy-MM-dd'
 
 | Format      | Result | Description |
 | ----------- | ----------- | ----------- |
@@ -1948,7 +2106,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy'
 | yyyy 				| 2021, 2022, ... | Year |
 `,
                     documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
-                    placeholder: 'dd.MM.yyyy'
+                    placeholder: 'yyyy-MM-dd'
                 }
             }
         }
@@ -2519,7 +2677,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     type: 'static',
                     selectOptions: buttonColorOptions,
                     value: 'blue',
-                    tooltip: 'Theses presets can be overwritten with custom styles.'
+                    tooltip: 'These presets can be overwritten with custom styles.'
                 },
                 buttonSize: {
                     fieldType: 'select',
@@ -2585,7 +2743,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     fieldType: 'boolean',
                     type: 'static',
                     value: false,
-                    tooltip: 'This will diplay the type and/or the format on the field next to the label.'
+                    tooltip: 'This will display the type and/or the format on the field next to the label.'
                 },
                 largeGap: {
                     fieldType: 'boolean',
@@ -3080,6 +3238,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     fieldType: 'boolean',
                     value: false,
                     tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
+                },
+                footer: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'Allow visible footer for pagination and download'
                 }
             },
             componentInput: undefined

package/package/components/apps/editor/component/default-codes.d.ts

@@ -1,3 +1,3 @@
 import type { AppComponent } from '.';
 export declare function defaultCode(component: string, language: string): string | undefined;
-export declare const DEFAULT_CODES: Partial<Record<AppComponent['type'], Partial<Record<'deno' | 'python3' | 'go' | 'bash' | 'pgsql' | 'mysql', string>>>>;
+export declare const DEFAULT_CODES: Partial<Record<AppComponent['type'], Partial<Record<'deno' | 'python3' | 'go' | 'bash' | 'pgsql' | 'mysql' | 'postgresql' | 'snowflake' | 'mssql' | 'bigquery', string>>>>;

package/package/components/apps/editor/component/default-codes.js

@@ -33,15 +33,7 @@ export const DEFAULT_CODES = {
             "name": "A briefer cell",
             "age": 84
         }
-    ]`,
-        pgsql: `import { pgSql } from "npm:windmill-client@${__pkg__.version}";
-
-type Postgresql = object
-
-export async function main(db: Postgresql) {
-    const query = await pgSql(db)\`SELECT * FROM demo;\`;
-    return query.rows;
-}`
+    ]`
     },
     aggridcomponent: {
         deno: `export async function main() {
@@ -92,6 +84,246 @@ export async function main(db: Postgresql) {
 #         raise Exception("first step invalid")
 # elif ...
 `
+    },
+    aggridinfinitecomponent: {
+        deno: `type User = {
+    id: number;
+    name: string;
+    email: string;
+    created_at: string;
+    };
+    const GLOBAL_COUNT = 25000;
+
+    function getUsers(limit: number, offset: number): User[] {
+
+    if (offset > GLOBAL_COUNT) {
+        return []
+    }
+
+    // In this example, we have 25000 users at most
+    return Array.from({ length: offset + limit >= GLOBAL_COUNT ? GLOBAL_COUNT - offset : limit }, (_, index) => ({
+        id: offset + index,
+        name: \`User \${offset + index}\`,
+        email: \`user\${offset + index}@example.com\`,
+        created_at: new Date().toISOString(),
+    }));
+    }
+
+    export async function main(offset: number, limit: number, orderBy: string, isDesc: boolean, search: string): Promise<User[]> {
+    let users = getUsers(limit, offset);
+
+    if (orderBy && Object.keys(users[0]).includes(orderBy)) {
+        users.sort((a, b) => {
+        const aValue = a[orderBy as keyof User];
+        const bValue = b[orderBy as keyof User];
+
+        if (typeof aValue === 'string' && typeof bValue === 'string') {
+            return isDesc ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue);
+        }
+        return 0;
+        });
+    }
+
+    if (search) {
+        return users.filter(user =>
+        Object.values(user).some(value =>
+            typeof value === 'string' && value.toLowerCase().includes(search.toLowerCase())
+        )
+        );
+    }
+
+    return users;
+}`,
+        python3: `from datetime import datetime, timezone
+from typing import List
+
+GLOBAL_COUNT = 25000
+
+def get_users(limit: int, offset: int) -> List:
+    if offset > GLOBAL_COUNT:
+        return []
+    else:
+        return [
+            {
+                "id": offset + index,
+                "name": f"User {offset + index}",
+                "email": f"user{offset + index}@example.com",
+                "created_at": datetime.now(timezone.utc).isoformat(),
+            }
+            for index in range(
+                GLOBAL_COUNT - offset if offset + limit >= GLOBAL_COUNT else limit
+            )
+        ]
+
+
+def main(offset: int, limit: int, order_by: str, is_desc: bool, search: str) -> List:
+    users = get_users(limit, offset)
+
+    if order_by:
+        users.sort(key=lambda user: getattr(user, order_by, ""), reverse=is_desc)
+
+    if search:
+        search_lower = search.lower()
+        users = [
+            user
+            for user in users
+            if search_lower in user["name"].lower()
+            or search_lower in user["email"].lower()
+        ]
+
+    return users        
+`,
+        postgresql: `-- $1 limit
+-- $2 offset
+-- $3 search
+SELECT * FROM demo 
+WHERE COALESCE($3, '') = '' OR CONCAT(col1, col2) ILIKE '%' || $3::text || '%' 
+LIMIT $1::INT OFFSET $2::INT;`,
+        mysql: `-- :limit (int)
+-- :offset (int)
+-- :search (string)
+SELECT * FROM demo
+WHERE COALESCE(:search, '') = '' OR CONCAT(col1, col2) LIKE CONCAT('%', :search, '%')
+LIMIT :limit OFFSET :offset;`,
+        bigquery: `-- @limit (integer)
+-- @offset (integer)
+-- @search (string)
+SELECT * FROM demo
+WHERE COALESCE(@search, '') = '' OR REGEXP_CONTAINS(CONCAT(CAST(\`col1\` AS STRING),CAST(\`col2\` AS STRING)), '(?i)' || @search)
+LIMIT @limit OFFSET @offset;`,
+        snowflake: `-- ? search (text)
+-- ? search (text)
+-- ? search (text)
+
+SELECT * FROM demo 
+WHERE LENGTH(?) = 0 OR CONCAT("ID") ILIKE CONCAT('%', ?, '%') OR CONCAT("NAME") ILIKE CONCAT('%', ?, '%') 
+LIMIT 100 OFFSET 0`,
+        mssql: `-- @p1 limit (int)
+-- @p2 offset (int)
+-- @p3 search (text)
+SELECT * FROM Demo WHERE (@p3 = '' OR CONCAT([col1], [col2], [col3]) LIKE '%' + @p3 + '%') 
+ORDER BY col1
+OFFSET @p2 ROWS FETCH NEXT @p1 ROWS ONLY`
+    },
+    aggridinfinitecomponentee: {
+        deno: `type User = {
+    id: number;
+    name: string;
+    email: string;
+    created_at: string;
+    };
+    const GLOBAL_COUNT = 25000;
+
+    function getUsers(limit: number, offset: number): User[] {
+
+    if (offset > GLOBAL_COUNT) {
+        return []
+    }
+
+    // In this example, we have 25000 users at most
+    return Array.from({ length: offset + limit >= GLOBAL_COUNT ? GLOBAL_COUNT - offset : limit }, (_, index) => ({
+        id: offset + index,
+        name: \`User \${offset + index}\`,
+        email: \`user\${offset + index}@example.com\`,
+        created_at: new Date().toISOString(),
+    }));
+    }
+
+    export async function main(offset: number, limit: number, orderBy: string, isDesc: boolean, search: string): Promise<User[]> {
+    let users = getUsers(limit, offset);
+
+    if (orderBy && Object.keys(users[0]).includes(orderBy)) {
+        users.sort((a, b) => {
+        const aValue = a[orderBy as keyof User];
+        const bValue = b[orderBy as keyof User];
+
+        if (typeof aValue === 'string' && typeof bValue === 'string') {
+            return isDesc ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue);
+        }
+        return 0;
+        });
+    }
+
+    if (search) {
+        return users.filter(user =>
+        Object.values(user).some(value =>
+            typeof value === 'string' && value.toLowerCase().includes(search.toLowerCase())
+        )
+        );
+    }
+
+    return users;
+        }`,
+        python3: `from datetime import datetime, timezone
+from typing import List
+
+GLOBAL_COUNT = 25000
+
+def get_users(limit: int, offset: int) -> List:
+    if offset > GLOBAL_COUNT:
+        return []
+    else:
+        return [
+            {
+                "id": offset + index,
+                "name": f"User {offset + index}",
+                "email": f"user{offset + index}@example.com",
+                "created_at": datetime.now(timezone.utc).isoformat(),
+            }
+            for index in range(
+                GLOBAL_COUNT - offset if offset + limit >= GLOBAL_COUNT else limit
+            )
+        ]
+
+
+def main(offset: int, limit: int, order_by: str, is_desc: bool, search: str) -> List:
+    users = get_users(limit, offset)
+
+    if order_by:
+        users.sort(key=lambda user: getattr(user, order_by, ""), reverse=is_desc)
+
+    if search:
+        search_lower = search.lower()
+        users = [
+            user
+            for user in users
+            if search_lower in user["name"].lower()
+            or search_lower in user["email"].lower()
+        ]
+
+    return users        
+`,
+        postgresql: `-- $1 limit
+-- $2 offset
+-- $3 search
+SELECT * FROM demo 
+WHERE COALESCE($3, '') = '' OR CONCAT(col1, col2) ILIKE '%' || $3::text || '%' 
+LIMIT $1::INT OFFSET $2::INT;`,
+        mysql: `-- :limit (int)
+-- :offset (int)
+-- :search (string)
+SELECT * FROM demo
+WHERE COALESCE(:search, '') = '' OR CONCAT(col1, col2) LIKE CONCAT('%', :search, '%')
+LIMIT :limit OFFSET :offset;`,
+        bigquery: `-- @limit (integer)
+-- @offset (integer)
+-- @search (string)
+SELECT * FROM demo
+WHERE COALESCE(@search, '') = '' OR REGEXP_CONTAINS(CONCAT(CAST(\`col1\` AS STRING),CAST(\`col2\` AS STRING)), '(?i)' || @search)
+LIMIT @limit OFFSET @offset;`,
+        snowflake: `-- ? search (text)
+-- ? search (text)
+-- ? search (text)
+
+SELECT * FROM demo 
+WHERE LENGTH(?) = 0 OR CONCAT("ID") ILIKE CONCAT('%', ?, '%') OR CONCAT("NAME") ILIKE CONCAT('%', ?, '%') 
+LIMIT 100 OFFSET 0`,
+        mssql: `-- @p1 limit (int)
+-- @p2 offset (int)
+-- @p3 search (text)
+SELECT * FROM Demo WHERE (@p3 = '' OR CONCAT([col1], [col2], [col3]) LIKE '%' + @p3 + '%') 
+ORDER BY col1
+OFFSET @p2 ROWS FETCH NEXT @p1 ROWS ONLY`
     },
     textcomponent: {
         deno: `export async function main() {

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

@@ -1,2 +1,5 @@
 import type { ComponentSet } from '../../types';
 export declare const COMPONENT_SETS: readonly [ComponentSet, ComponentSet, ComponentSet, ComponentSet, ComponentSet, ComponentSet, ComponentSet];
+export declare const DEPRECATED_COMPONENTS: {
+    tablecomponent: string;
+};

package/package/components/apps/editor/component/sets.js

@@ -45,7 +45,7 @@ const inputs = {
         'checkboxcomponent',
         'selectcomponent',
         'resourceselectcomponent',
-        'multiselectcomponent',
+        'multiselectcomponentv2',
         'selecttabcomponent',
         'selectstepcomponent'
     ]
@@ -70,7 +70,14 @@ const display = {
 };
 const tables = {
     title: 'Tables',
-    components: ['tablecomponent', 'aggridcomponent', 'aggridcomponentee', 'dbexplorercomponent']
+    components: [
+        'aggridcomponent',
+        'aggridcomponentee',
+        'dbexplorercomponent',
+        'aggridinfinitecomponent',
+        'aggridinfinitecomponentee',
+        'tablecomponent'
+    ]
 };
 const charts = {
     title: 'Charts',
@@ -83,3 +90,6 @@ const charts = {
     ]
 };
 export const COMPONENT_SETS = [layout, tabs, buttons, inputs, tables, display, charts];
+export const DEPRECATED_COMPONENTS = {
+    tablecomponent: 'We will be removing this component in the future. we recommend using the AgGrid table instead.'
+};

package/package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext, tick } from 'svelte';
-import { components as componentsRecord, presets as presetsRecord, COMPONENT_SETS } from '../component';
+import { components as componentsRecord, presets as presetsRecord, COMPONENT_SETS, DEPRECATED_COMPONENTS } from '../component';
 import ListItem from './ListItem.svelte';
 import { appComponentFromType, copyComponent, insertNewGridItem } from '../appUtils';
 import { push } from '../../../../history';
@@ -10,6 +10,7 @@ import { LayoutDashboard, Plus } from 'lucide-svelte';
 import { ResourceService } from '../../../../gen';
 import { sendUserToast } from '../../../../toast';
 import ComponentsList from './CustomComponentsList.svelte';
+import Popover from '../../../Popover.svelte';
 const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
 const { history, dndItem, yTop } = getContext('AppEditorContext');
 let groups = [];
@@ -137,7 +138,19 @@ let ccDrawer;
 						<ListItem title={`${title}`} subtitle={`(${components.length})`}>
 							<div class="flex flex-wrap gap-3 py-2">
 								{#each components as item (item)}
-									<div class="w-20">
+									<div class="w-20 relative">
+										{#if DEPRECATED_COMPONENTS[item]}
+											<div
+												class="absolute -top-2 -right-2 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100 rounded-md py-0.5 px-1 flex flex-row gap-1 items-center"
+											>
+												<Popover>
+													<div slot="text">
+														{DEPRECATED_COMPONENTS[item]}
+													</div>
+													<div class="font-normal text-2xs"> Deprecated </div>
+												</Popover>
+											</div>
+										{/if}
 										<button
 											id={item}
 											on:pointerdown={async (e) => {

package/package/components/apps/editor/componentsPanel/componentControlUtils.js

@@ -39,7 +39,7 @@ const clearFiles = {
     title: 'clearFiles',
     description: 'Clear the files of a file input component.',
     example: 'clearFiles(id: string)',
-    documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#clearFiles'
+    documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#clearfiles'
 };
 const close = {
     title: 'close',
@@ -78,8 +78,9 @@ export function getComponentControl(type) {
         case 'drawercomponent':
             return [open, close];
         case 'aggridcomponent':
-            return [getAgGrid, setSelectedIndex];
         case 'aggridcomponentee':
+        case 'aggridinfinitecomponent':
+        case 'aggridinfinitecomponentee':
             return [getAgGrid, setSelectedIndex];
         case 's3fileinputcomponent':
             return [clearFiles];
@@ -93,6 +94,7 @@ export function getComponentControl(type) {
         case 'checkboxcomponent':
         case 'rangecomponent':
         case 'multiselectcomponent':
+        case 'multiselectcomponentv2':
         case 'selectcomponent':
         case 'slidercomponent':
         case 'dateslidercomponent':

package/package/components/apps/editor/componentsPanel/cssUtils.js

@@ -570,7 +570,7 @@ export const customisationByComponent = [
         variables: []
     },
     {
-        components: ['multiselectcomponent'],
+        components: ['multiselectcomponent', 'multiselectcomponentv2'],
         selectors: [
             {
                 selector: '.multiselect',