@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202509261210

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$productOptionGroupId.options_.$id.tsx

@@ -0,0 +1,208 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    createProductOptionDocument,
+    productIdNameDocument,
+    productOptionDetailDocument,
+    productOptionGroupIdNameDocument,
+    updateProductOptionDocument,
+} from './product-option-groups.graphql.js';
+
+const pageId = 'product-option-detail';
+
+export const Route = createFileRoute(
+    '/_authenticated/_products/products_/$productId/option-groups/$productOptionGroupId/options_/$id',
+)({
+    component: ProductOptionDetailPage,
+    loader: async ({ context, params }: { context: any; params: any; location: ParsedLocation }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const isNew = params.id === NEW_ENTITY_PATH;
+        let optionGroupName: string | undefined;
+        let optionGroupId = params.productOptionGroupId;
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(productOptionDetailDocument),
+            pageId,
+        );
+
+        const result = isNew
+            ? null
+            : await context.queryClient.ensureQueryData(
+                  getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+              );
+        const productResult = await context.queryClient.fetchQuery({
+            queryKey: [pageId, 'productIdName', params.productId],
+            queryFn: () => api.query(productIdNameDocument, { id: params.productId }),
+        });
+        const entityName = 'ProductOption';
+
+        if (!result?.productOption && !isNew) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        if (isNew) {
+            const optionGroupResult = await context.queryClient.fetchQuery({
+                queryKey: [pageId, 'optionGroupIdName', optionGroupId],
+                queryFn: () => api.query(productOptionGroupIdNameDocument, { id: optionGroupId }),
+            });
+            optionGroupName = optionGroupResult.productOptionGroup?.name;
+        } else {
+            optionGroupName = result.productOption.group.name;
+        }
+        const productId = params.productId;
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${productId}`, label: productResult.product.name },
+                { path: `/products/${productId}`, label: <Trans>Option Groups</Trans> },
+                {
+                    path: `/products/${productId}/option-groups/${optionGroupId}`,
+                    label: optionGroupName,
+                },
+                isNew ? <Trans>New option</Trans> : result.productOption?.name,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProductOptionDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: productOptionDetailDocument,
+        createDocument: createProductOptionDocument,
+        updateDocument: updateProductOptionDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                name: entity.name,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                customFields: entity.customFields as any,
+            };
+        },
+        transformCreateInput: (value): any => {
+            return {
+                ...value,
+                productOptionGroupId: params.productOptionGroupId,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(
+                i18n.t(
+                    creatingNewEntity
+                        ? 'Successfully created product option'
+                        : 'Successfully updated product option',
+                ),
+            );
+            resetForm();
+            const created = Array.isArray(data) ? data[0] : data;
+            if (creatingNewEntity && created) {
+                await navigate({ to: `../$id`, params: { id: (created as any).id } });
+            }
+        },
+        onError: err => {
+            toast(
+                i18n.t(
+                    creatingNewEntity ? 'Failed to create product option' : 'Failed to update product option',
+                ),
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New product option</Trans> : ((entity as any)?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="option-group-info">
+                    {entity?.group && (
+                        <div className="space-y-2">
+                            <div className="text-sm font-medium">
+                                <Trans>Product Option Group</Trans>
+                            </div>
+                            <div className="text-sm text-muted-foreground">{entity?.group.name}</div>
+                            <div className="text-xs text-muted-foreground">{entity?.group.code}</div>
+                        </div>
+                    )}
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="ProductOption"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="ProductOption" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_zones/components/zone-countries-sheet.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/vdb/components/ui/sheet.js';
+import { FullWidthPageBlock } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ZoneCountriesTable } from './zone-countries-table.js';
 
 interface ZoneCountriesSheetProps {
@@ -23,7 +24,9 @@ export function ZoneCountriesSheet({ zoneId, zoneName, children }: Readonly<Zone
                 </SheetHeader>
                 <div className="flex items-center gap-2"></div>
                 <ScrollArea className="px-6 max-h-[600px]">
-                    <ZoneCountriesTable zoneId={zoneId} />
+                    <FullWidthPageBlock blockId="zone-countries">
+                        <ZoneCountriesTable zoneId={zoneId} />
+                    </FullWidthPageBlock>
                 </ScrollArea>
             </SheetContent>
         </Sheet>

package/src/app/routes/_authenticated/index.tsx

@@ -1,3 +1,4 @@
+import { DateRangePicker } from '@/vdb/components/date-range-picker.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import type { GridLayout as GridLayoutType } from '@/vdb/components/ui/grid-layout.js';
 import { GridLayout } from '@/vdb/components/ui/grid-layout.js';
@@ -5,6 +6,10 @@ import {
     getDashboardWidget,
     getDashboardWidgetRegistry,
 } from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import {
+    DefinedDateRange,
+    WidgetFiltersProvider,
+} from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
 import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
 import {
     FullWidthPageBlock,
@@ -16,7 +21,8 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { createFileRoute } from '@tanstack/react-router';
-import { useEffect, useState, useRef } from 'react';
+import { endOfDay, startOfMonth } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
 
 export const Route = createFileRoute('/_authenticated/')({
     component: DashboardPage,
@@ -67,12 +73,16 @@ function DashboardPage() {
     const [editMode, setEditMode] = useState(false);
     const [isInitialized, setIsInitialized] = useState(false);
     const prevEditModeRef = useRef(editMode);
+    const [dateRange, setDateRange] = useState<DefinedDateRange>({
+        from: startOfMonth(new Date()),
+        to: endOfDay(new Date()),
+    });
 
     const { settings, setWidgetLayout } = useUserSettings();
 
     useEffect(() => {
         const savedLayouts = settings.widgetLayout || {};
-        
+
         const initialWidgets = Array.from(getDashboardWidgetRegistry().entries()).reduce(
             (acc: DashboardWidgetInstance[], [id, widget]) => {
                 const defaultSize = {
@@ -88,7 +98,7 @@ function DashboardPage() {
 
                 // Check if we have a saved layout for this widget
                 const savedLayout = savedLayouts[id];
-                
+
                 const layout = {
                     w: savedLayout?.w ?? defaultSize.w,
                     h: savedLayout?.h ?? defaultSize.h,
@@ -125,7 +135,7 @@ function DashboardPage() {
         setWidgets(initialWidgets);
         setIsInitialized(true);
     }, [settings.widgetLayout]);
-    
+
     // Save layout when edit mode is turned off
     useEffect(() => {
         // Only save when transitioning from edit mode ON to OFF
@@ -141,7 +151,7 @@ function DashboardPage() {
             });
             setWidgetLayout(layoutConfig);
         }
-        
+
         // Update the ref for next render
         prevEditModeRef.current = editMode;
     }, [editMode, isInitialized, widgets, setWidgetLayout]);
@@ -168,11 +178,16 @@ function DashboardPage() {
             <PageTitle>Insights</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
-                    <Button 
-                        variant={editMode ? "default" : "outline"} 
+                    <DateRangePicker
+                        dateRange={dateRange}
+                        onDateRangeChange={setDateRange}
+                        className="mr-2"
+                    />
+                    <Button
+                        variant={editMode ? 'default' : 'outline'}
                         onClick={() => setEditMode(prev => !prev)}
                     >
-                        {editMode ? "Save Layout" : "Edit Layout"}
+                        {editMode ? 'Save Layout' : 'Edit Layout'}
                     </Button>
                 </PageActionBarRight>
             </PageActionBar>
@@ -180,22 +195,24 @@ function DashboardPage() {
                 <FullWidthPageBlock blockId="widgets">
                     <div className="w-full">
                         {widgets.length > 0 ? (
-                            <GridLayout
-                                layouts={widgets.map(w => ({ ...w.layout, i: w.id }))}
-                                onLayoutChange={handleLayoutChange}
-                                cols={12}
-                                rowHeight={100}
-                                isDraggable={editMode}
-                                isResizable={editMode}
-                                className="min-h-[400px]"
-                                gutter={10}
-                            >
-                                {
-                                    widgets
-                                        .map(widget => renderWidget(widget))
-                                        .filter(Boolean) as React.ReactElement[]
-                                }
-                            </GridLayout>
+                            <WidgetFiltersProvider filters={{ dateRange }}>
+                                <GridLayout
+                                    layouts={widgets.map(w => ({ ...w.layout, i: w.id }))}
+                                    onLayoutChange={handleLayoutChange}
+                                    cols={12}
+                                    rowHeight={100}
+                                    isDraggable={editMode}
+                                    isResizable={editMode}
+                                    className="min-h-[400px]"
+                                    gutter={10}
+                                >
+                                    {
+                                        widgets
+                                            .map(widget => renderWidget(widget))
+                                            .filter(Boolean) as React.ReactElement[]
+                                    }
+                                </GridLayout>
+                            </WidgetFiltersProvider>
                         ) : (
                             <div
                                 className="flex items-center justify-center text-muted-foreground"

package/src/lib/components/data-display/json.tsx

@@ -1,5 +1,20 @@
 import { JsonEditor } from 'json-edit-react';
+import { FileJson } from 'lucide-react';
+
+import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../ui/dropdown-menu.js';
 
 export function Json({ value }: Readonly<{ value: any }>) {
-    return <JsonEditor data={value} />;
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="secondary" size="icon">
+                    <FileJson />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-96 max-h-96 overflow-auto p-2">
+                <JsonEditor viewOnly data={value} collapse={1} rootFontSize={12} />
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
 }

package/src/lib/components/data-input/index.ts

@@ -15,3 +15,6 @@ export * from './product-multi-selector-input.js';
 // Relation selector components
 export * from './relation-input.js';
 export * from './relation-selector.js';
+
+// Slug input component
+export * from './slug-input.js';

package/src/lib/components/data-input/slug-input.tsx

@@ -0,0 +1,296 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { Edit, Lock, RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+const slugForEntityDocument = graphql(`
+    query SlugForEntity($input: SlugForEntityInput!) {
+        slugForEntity(input: $input)
+    }
+`);
+
+function resolveWatchFieldPath(
+    currentFieldName: string,
+    watchFieldName: string,
+    formValues: any,
+    contentLanguage: string,
+): string {
+    const translationsMatch = currentFieldName.match(/^translations\.(\d+)\./);
+
+    if (translationsMatch) {
+        const index = translationsMatch[1];
+
+        if (formValues?.translations?.[index]?.hasOwnProperty(watchFieldName)) {
+            return `translations.${index}.${watchFieldName}`;
+        }
+
+        if (formValues?.hasOwnProperty(watchFieldName)) {
+            return watchFieldName;
+        }
+
+        return `translations.${index}.${watchFieldName}`;
+    }
+
+    if (formValues?.translations && Array.isArray(formValues.translations)) {
+        const translations = formValues.translations;
+        const existingIndex = translations.findIndex(
+            (translation: any) => translation?.languageCode === contentLanguage,
+        );
+        const index = existingIndex === -1 ? (translations.length > 0 ? 0 : -1) : existingIndex;
+
+        if (index >= 0 && translations[index]?.hasOwnProperty(watchFieldName)) {
+            return `translations.${index}.${watchFieldName}`;
+        }
+    }
+
+    return watchFieldName;
+}
+
+export interface SlugInputProps extends DashboardFormComponentProps {
+    /**
+     * @description
+     * The name of the entity (e.g., 'Product', 'Collection')
+     */
+    entityName: string;
+    /**
+     * @description
+     * The name of the field to check for uniqueness (e.g., 'slug', 'code')
+     */
+    fieldName: string;
+    /**
+     * @description
+     * The name of the field to watch for changes (e.g., 'name', 'title', 'enabled').
+     * The component automatically resolves whether this field exists in translations
+     * or on the base entity. For translatable fields like 'name', it will watch
+     * 'translations.X.name'. For non-translatable fields like 'enabled', it will
+     * watch 'enabled' directly.
+     */
+    watchFieldName: string;
+    /**
+     * @description
+     * Optional entity ID for updates (excludes from uniqueness check)
+     */
+    entityId?: string | number;
+    /**
+     * @description
+     * Whether the input should start in readonly mode. Default: true
+     */
+    defaultReadonly?: boolean;
+
+    /**
+     * @description Class name for the <Input> component
+     */
+    className?: string;
+}
+
+/**
+ * @description
+ * A component for generating and displaying slugs based on a watched field.
+ * The component watches a source field for changes, debounces the input,
+ * and generates a unique slug via the Admin API. The slug is only auto-generated
+ * when it's empty. For existing slugs, a regenerate button allows manual regeneration.
+ * The input is readonly by default but can be made editable with a toggle button.
+ *
+ * @example
+ * ```tsx
+ * // In a TranslatableFormFieldWrapper context with translatable field
+ * <SlugInput
+ *     {...field}
+ *     entityName="Product"
+ *     fieldName="slug"
+ *     watchFieldName="name" // Automatically resolves to "translations.X.name"
+ *     entityId={productId}
+ * />
+ *
+ * // In a TranslatableFormFieldWrapper context with non-translatable field
+ * <SlugInput
+ *     {...field}
+ *     entityName="Product"
+ *     fieldName="slug"
+ *     watchFieldName="enabled" // Uses "enabled" directly (base entity field)
+ *     entityId={productId}
+ * />
+ *
+ * // For non-translatable entities
+ * <SlugInput
+ *     {...field}
+ *     entityName="Channel"
+ *     fieldName="code"
+ *     watchFieldName="name" // Uses "name" directly
+ *     entityId={channelId}
+ * />
+ * ```
+ *
+ * @docsCategory form-components
+ * @docsPage SlugInput
+ */
+export function SlugInput({
+    value,
+    onChange,
+    fieldDef,
+    entityName,
+    fieldName,
+    watchFieldName,
+    entityId,
+    defaultReadonly = true,
+    className,
+    name,
+    ...props
+}: SlugInputProps) {
+    const { i18n } = useLingui();
+    const form = useFormContext();
+    const { contentLanguage } = useUserSettings().settings;
+    const isFormReadonly = isReadonlyField(fieldDef);
+    const [isManuallyReadonly, setIsManuallyReadonly] = useState(defaultReadonly);
+    const isReadonly = isFormReadonly || isManuallyReadonly;
+
+    const actualWatchFieldName = resolveWatchFieldPath(
+        name || '',
+        watchFieldName,
+        form?.getValues(),
+        contentLanguage,
+    );
+
+    const watchedValue = useWatch({
+        control: form?.control,
+        name: actualWatchFieldName,
+    });
+
+    const watchFieldState = form.getFieldState(actualWatchFieldName);
+    const debouncedWatchedValue = useDebounce(watchedValue, 500);
+
+    const shouldAutoGenerate = isReadonly && !value && watchFieldState.isDirty;
+
+    const {
+        data: generatedSlug,
+        isLoading,
+        refetch,
+    } = useQuery({
+        queryKey: ['slugForEntity', entityName, fieldName, debouncedWatchedValue, entityId],
+        queryFn: async () => {
+            if (!debouncedWatchedValue) {
+                return '';
+            }
+
+            const result = await api.query(slugForEntityDocument, {
+                input: {
+                    entityName,
+                    fieldName,
+                    inputValue: debouncedWatchedValue,
+                    entityId: entityId?.toString(),
+                },
+            });
+
+            return result.slugForEntity;
+        },
+        enabled: !!debouncedWatchedValue && shouldAutoGenerate,
+    });
+
+    useEffect(() => {
+        if (isReadonly && generatedSlug && generatedSlug !== value) {
+            onChange?.(generatedSlug);
+        }
+    }, [generatedSlug, isReadonly, value, onChange]);
+
+    const toggleReadonly = () => {
+        if (!isFormReadonly) {
+            setIsManuallyReadonly(!isManuallyReadonly);
+        }
+    };
+
+    const handleRegenerate = async () => {
+        if (watchedValue) {
+            const result = await refetch();
+            if (result.data) {
+                onChange?.(result.data);
+            }
+        }
+    };
+
+    const handleChange = (newValue: string) => {
+        onChange?.(newValue);
+    };
+
+    const displayValue = isReadonly && generatedSlug ? generatedSlug : value || '';
+    const showLoading = isLoading && isReadonly;
+
+    return (
+        <div className="relative flex items-center gap-2">
+            <div className="flex-1 relative">
+                <Input
+                    value={displayValue}
+                    onChange={e => handleChange(e.target.value)}
+                    disabled={isReadonly}
+                    placeholder={
+                        isReadonly
+                            ? value
+                                ? i18n.t('Slug is set')
+                                : i18n.t('Slug will be generated automatically...')
+                            : i18n.t('Enter slug manually')
+                    }
+                    className={cn(
+                        'pr-8',
+                        isReadonly && 'bg-muted text-muted-foreground',
+                        showLoading && 'text-muted-foreground',
+                        className,
+                    )}
+                    {...props}
+                />
+                {showLoading && (
+                    <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
+                    </div>
+                )}
+            </div>
+
+            {!isFormReadonly && (
+                <>
+                    {isManuallyReadonly && value && (
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={handleRegenerate}
+                            className="shrink-0"
+                            title={i18n.t('Regenerate slug from source field')}
+                            aria-label={i18n.t('Regenerate slug from source field')}
+                            disabled={!watchedValue || isLoading}
+                        >
+                            <RefreshCw className="h-4 w-4" />
+                        </Button>
+                    )}
+
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={toggleReadonly}
+                        className="shrink-0"
+                        title={
+                            isManuallyReadonly
+                                ? i18n.t('Edit slug manually')
+                                : i18n.t('Generate slug automatically')
+                        }
+                        aria-label={
+                            isManuallyReadonly
+                                ? i18n.t('Edit slug manually')
+                                : i18n.t('Generate slug automatically')
+                        }
+                    >
+                        {isManuallyReadonly ? <Edit className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+                    </Button>
+                </>
+            )}
+        </div>
+    );
+}