@wilshop/dashboard 3.5.2

package/package.json

@@ -0,0 +1,178 @@
+{
+    "name": "@wilshop/dashboard",
+    "private": false,
+    "version": "3.5.2",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/wilshop/vendure"
+    },
+    "homepage": "https://www.vendure.io",
+    "funding": "https://github.com/sponsors/michaelbromley",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "dev": "vite",
+        "check-types": "tsc --project tsconfig.check.json --noEmit",
+        "build:standalone": "vite build",
+        "build:vite": "tsc --project tsconfig.vite.json",
+        "build:plugin": "tsc --project tsconfig.plugin.json && node scripts/build-plugin.js",
+        "build": "npm run check-types && npm run build:vite && npm run build:plugin",
+        "watch": "tsc --project tsconfig.vite.json --watch",
+        "test": "vitest run",
+        "lint": "eslint .",
+        "preview": "vite preview",
+        "generate-index": "node scripts/generate-index.js",
+        "i18n:extract": "lingui extract && node ./scripts/translate/i18n-tool.js extract",
+        "i18n:apply": "node ./scripts/translate/i18n-tool.js apply",
+        "storybook": "storybook dev -p 6006",
+        "storybook:build": "storybook build",
+        "storybook:deploy": "npm run build --prefix ../common && npm run build --prefix ../core && npm run build:vite && storybook build"
+    },
+    "module": "./src/lib/index.ts",
+    "main": "./src/lib/index.ts",
+    "types": "./src/lib/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./src/lib/index.d.ts",
+            "import": "./src/lib/index.ts",
+            "require": "./src/lib/index.ts"
+        },
+        "./plugin": {
+            "types": "./dist/plugin/index.d.ts",
+            "import": "./dist/plugin/index.js",
+            "require": "./dist/plugin/index.js"
+        },
+        "./vite": {
+            "types": "./dist/vite/index.d.ts",
+            "import": "./dist/vite/index.js",
+            "require": "./dist/vite/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src",
+        "lingui.config.js",
+        "index.html"
+    ],
+    "dependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-typescript": "^7.26.0",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@hookform/resolvers": "^4.1.3",
+        "@lingui/babel-plugin-lingui-macro": "^5.7.0",
+        "@lingui/cli": "^5.7.0",
+        "@lingui/core": "^5.7.0",
+        "@lingui/react": "^5.7.0",
+        "@lingui/vite-plugin": "^5.7.0",
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-alert-dialog": "^1.1.14",
+        "@radix-ui/react-aspect-ratio": "^1.1.7",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-collapsible": "^1.1.11",
+        "@radix-ui/react-context-menu": "^2.2.15",
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-hover-card": "^1.1.14",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-menubar": "^1.1.15",
+        "@radix-ui/react-navigation-menu": "^1.2.13",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-radio-group": "^1.3.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
+        "@radix-ui/react-select": "^2.2.5",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slider": "^1.3.5",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
+        "@radix-ui/react-tabs": "^1.1.12",
+        "@radix-ui/react-toggle": "^1.1.9",
+        "@radix-ui/react-toggle-group": "^1.1.10",
+        "@radix-ui/react-tooltip": "^1.2.7",
+        "@tailwindcss/vite": "^4.1.5",
+        "@tanstack/eslint-plugin-query": "^5.66.1",
+        "@tanstack/react-query": "^5.66.7",
+        "@tanstack/react-query-devtools": "^5.68.0",
+        "@tanstack/react-router": "^1.105.0",
+        "@tanstack/react-table": "^8.21.2",
+        "@tanstack/router-devtools": "^1.105.0",
+        "@tanstack/router-plugin": "^1.105.0",
+        "@tiptap/extension-floating-menu": "^3.4.4",
+        "@tiptap/extension-image": "^3.4.4",
+        "@tiptap/extension-table": "^3.4.4",
+        "@tiptap/extension-text-style": "^3.4.4",
+        "@tiptap/pm": "^3.4.4",
+        "@tiptap/react": "^3.4.4",
+        "@tiptap/starter-kit": "^3.4.4",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
+        "@uidotdev/usehooks": "^2.4.1",
+        "@vitejs/plugin-react": "^5.0.4",
+        "acorn": "^8.11.3",
+        "acorn-walk": "^8.3.2",
+        "awesome-graphql-client": "^2.1.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.0.0",
+        "embla-carousel-react": "^8.6.0",
+        "express-rate-limit": "^7.5.0",
+        "fast-glob": "^3.3.2",
+        "fs-extra": "^11.2.0",
+        "gql.tada": "^1.8.13",
+        "graphql": "^16.11.0",
+        "input-otp": "^1.4.2",
+        "json-edit-react": "^1.23.1",
+        "lucide-react": "^0.475.0",
+        "motion": "^12.6.2",
+        "next-themes": "^0.4.6",
+        "react": "^19.0.0",
+        "react-day-picker": "^9.8.0",
+        "react-dom": "^19.0.0",
+        "react-dropzone": "^14.3.8",
+        "react-hook-form": "^7.60.0",
+        "react-resizable-panels": "^3.0.3",
+        "recharts": "^2.15.4",
+        "sonner": "^2.0.6",
+        "strip-json-comments": "^5.0.3",
+        "tailwind-merge": "^3.2.0",
+        "tailwindcss": "^4.1.5",
+        "tailwindcss-animate": "^1.0.7",
+        "tsconfig-paths": "^4.2.0",
+        "tw-animate-css": "^1.2.9",
+        "vaul": "^1.1.2",
+        "vite": "^6.3.6",
+        "zod": "^3.25.76"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.19.0",
+        "@storybook/addon-a11y": "^10.0.0-beta.9",
+        "@storybook/addon-docs": "^10.0.0-beta.9",
+        "@storybook/addon-vitest": "^10.0.0-beta.9",
+        "@storybook/react-vite": "^10.0.0-beta.9",
+        "@types/node": "^22.13.4",
+        "@vendure/common": "3.5.2",
+        "@vendure/core": "3.5.2",
+        "@vitest/browser": "^3.2.4",
+        "@vitest/coverage-v8": "^3.2.4",
+        "eslint": "^9.19.0",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.18",
+        "eslint-plugin-storybook": "^10.0.0-beta.9",
+        "globals": "^15.14.0",
+        "playwright": "^1.55.1",
+        "storybook": "^10.0.0-beta.9",
+        "vite-plugin-dts": "^4.5.4"
+    },
+    "optionalDependencies": {
+        "lightningcss-linux-arm64-musl": "^1.29.3",
+        "lightningcss-linux-x64-musl": "^1.29.1"
+    }
+}

package/src/app/app-providers.tsx

@@ -0,0 +1,31 @@
+import { AlertsProvider } from '@/vdb/providers/alerts-provider.js';
+import { AuthProvider } from '@/vdb/providers/auth.js';
+import { ChannelProvider } from '@/vdb/providers/channel-provider.js';
+import { I18nProvider } from '@/vdb/providers/i18n-provider.js';
+import { ServerConfigProvider } from '@/vdb/providers/server-config.js';
+import { ThemeProvider } from '@/vdb/providers/theme-provider.js';
+import { UserSettingsProvider } from '@/vdb/providers/user-settings.js';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+export const queryClient = new QueryClient();
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+    return (
+        <I18nProvider>
+            <QueryClientProvider client={queryClient}>
+                <UserSettingsProvider queryClient={queryClient}>
+                    <ThemeProvider defaultTheme="system">
+                        <AuthProvider>
+                            <ServerConfigProvider>
+                                <ChannelProvider>
+                                    <AlertsProvider>{children}</AlertsProvider>
+                                </ChannelProvider>
+                            </ServerConfigProvider>
+                        </AuthProvider>
+                    </ThemeProvider>
+                </UserSettingsProvider>
+            </QueryClientProvider>
+        </I18nProvider>
+    );
+}

package/src/app/common/delete-bulk-action.tsx

@@ -0,0 +1,149 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { TrashIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { getMutationName } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+
+interface DeleteBulkActionProps {
+    /** The GraphQL mutation document to execute */
+    mutationDocument: any;
+    /** The entity name for localization (e.g., "products", "administrators") */
+    entityName: string;
+    /** The required permissions for this action */
+    requiredPermissions: string[];
+    /** Optional callback for additional cleanup after successful deletion */
+    onSuccess?: () => void;
+    /** Optional query keys to invalidate after successful deletion */
+    invalidateQueries?: string[];
+    /** The selected items to delete */
+    selection: any[];
+    /** The table instance */
+    table: any;
+}
+
+/**
+ * A reusable delete bulk action component that can be used across all bulk action files.
+ *
+ * This component handles the common pattern of deleting multiple entities:
+ * - Executes the provided GraphQL mutation
+ * - Shows success/error toasts with localized messages
+ * - Refetches the paginated list
+ * - Resets table selection
+ * - Optionally invalidates additional queries
+ * - Optionally calls additional success callbacks
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *     return (
+ *         <DeleteBulkAction
+ *             mutationDocument={deleteProductsDocument}
+ *             entityName="products"
+ *             requiredPermissions={['DeleteCatalog', 'DeleteProduct']}
+ *             selection={selection}
+ *             table={table}
+ *         />
+ *     );
+ * };
+ *
+ * // With additional cleanup
+ * export const DeleteCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *     return (
+ *         <DeleteBulkAction
+ *             mutationDocument={deleteCollectionsDocument}
+ *             entityName="collections"
+ *             requiredPermissions={['DeleteCatalog', 'DeleteCollection']}
+ *             invalidateQueries={['childCollections']}
+ *             onSuccess={() => {
+ *                 // Additional cleanup logic
+ *             }}
+ *             selection={selection}
+ *             table={table}
+ *         />
+ *     );
+ * };
+ * ```
+ */
+export function DeleteBulkAction({
+    mutationDocument,
+    entityName,
+    requiredPermissions,
+    onSuccess,
+    invalidateQueries = [],
+    selection,
+    table,
+}: Readonly<DeleteBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { t } = useLingui();
+    const queryClient = useQueryClient();
+
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(mutationDocument),
+        onSuccess: (result: any) => {
+            let deleted = 0;
+            let failed = 0;
+            const errors: string[] = [];
+
+            // Get the mutation result field name from the document
+            const mutationResultFieldName = getMutationName(mutationDocument);
+            const deleteResults = result[mutationResultFieldName];
+
+            for (const item of deleteResults) {
+                if (item.result === 'DELETED') {
+                    deleted++;
+                } else {
+                    failed++;
+                    if (item.message) {
+                        errors.push(item.message);
+                    }
+                }
+            }
+
+            if (0 < deleted) {
+                toast.success(t`Deleted ${deleted} ${entityName}`);
+            }
+            if (0 < failed) {
+                const allErrors = errors.join(', ');
+                const errorMessage =
+                    errors.length > 0
+                        ? t`Failed to delete ${failed} ${entityName}: ${allErrors}`
+                        : t`Failed to delete ${failed} ${entityName}`;
+                toast.error(errorMessage);
+            }
+
+            refetchPaginatedList();
+            table.resetRowSelection();
+
+            // Invalidate additional queries if specified
+            invalidateQueries.forEach(queryKey => {
+                queryClient.invalidateQueries({ queryKey: [queryKey] });
+            });
+
+            // Call additional success callback if provided
+            onSuccess?.();
+        },
+        onError: () => {
+            toast.error(`Failed to delete ${selection.length} ${entityName}`);
+        },
+    });
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={requiredPermissions}
+            onClick={() => mutate({ ids: selection.map(s => s.id) })}
+            label={<Trans>Delete</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to delete {selection.length} {entityName}?
+                </Trans>
+            }
+            icon={TrashIcon}
+            className="text-destructive"
+        />
+    );
+}

package/src/app/common/duplicate-bulk-action.tsx

@@ -0,0 +1,147 @@
+import { useMutation } from '@tanstack/react-query';
+import { ConfigurableOperationInput } from '@vendure/common/lib/generated-types';
+import { CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { duplicateEntityDocument } from '@/vdb/graphql/common-operations.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { DuplicateEntityDialog } from './duplicate-entity-dialog.js';
+
+interface DuplicateBulkActionProps {
+    entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
+    duplicatorCode: string;
+    requiredPermissions: string[];
+    entityName: string;
+    onSuccess?: () => void;
+    selection: any[];
+    table: any;
+}
+
+export function DuplicateBulkAction({
+    entityType,
+    duplicatorCode,
+    requiredPermissions,
+    entityName,
+    onSuccess,
+    selection,
+    table,
+}: Readonly<DuplicateBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { t } = useLingui();
+    const [isDuplicating, setIsDuplicating] = useState(false);
+    const [progress, setProgress] = useState({ completed: 0, total: 0 });
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    const { mutateAsync } = useMutation({
+        mutationFn: api.mutate(duplicateEntityDocument),
+    });
+
+    const handleStartDuplication = () => {
+        if (isDuplicating) return;
+        setDialogOpen(true);
+    };
+
+    const handleConfirmDuplication = async (duplicatorInput: ConfigurableOperationInput) => {
+        if (isDuplicating) return;
+
+        setIsDuplicating(true);
+        setProgress({ completed: 0, total: selection.length });
+
+        const results = {
+            success: 0,
+            failed: 0,
+            errors: [] as string[],
+        };
+
+        try {
+            // Process entities sequentially to avoid overwhelming the server
+            for (let i = 0; i < selection.length; i++) {
+                const entity = selection[i];
+
+                try {
+                    const result = await mutateAsync({
+                        input: {
+                            entityName: entityType,
+                            entityId: entity.id,
+                            duplicatorInput,
+                        },
+                    });
+
+                    if ('newEntityId' in result.duplicateEntity) {
+                        results.success++;
+                    } else {
+                        results.failed++;
+                        const errorMsg =
+                            result.duplicateEntity.message ||
+                            result.duplicateEntity.duplicationError ||
+                            'Unknown error';
+                        results.errors.push(`${entityName} ${entity.name || entity.id}: ${errorMsg}`);
+                    }
+                } catch (error) {
+                    results.failed++;
+                    results.errors.push(
+                        `${entityName} ${entity.name || entity.id}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    );
+                }
+
+                setProgress({ completed: i + 1, total: selection.length });
+            }
+
+            // Show results
+            if (results.success > 0) {
+                const count = results.success;
+                toast.success(t`Successfully duplicated ${count} ${entityName}`);
+            }
+            if (results.failed > 0) {
+                const errorMessage =
+                    results.errors.length > 3
+                        ? `${results.errors.slice(0, 3).join(', ')}... and ${results.errors.length - 3} more`
+                        : results.errors.join(', ');
+                toast.error(
+                    `Failed to duplicate ${results.failed} ${entityName.toLowerCase()}s: ${errorMessage}`,
+                );
+            }
+
+            if (results.success > 0) {
+                refetchPaginatedList();
+                table.resetRowSelection();
+                onSuccess?.();
+            }
+        } finally {
+            setIsDuplicating(false);
+            setProgress({ completed: 0, total: 0 });
+        }
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={requiredPermissions}
+                onClick={handleStartDuplication}
+                label={
+                    isDuplicating ? (
+                        <Trans>
+                            Duplicating... ({progress.completed}/{progress.total})
+                        </Trans>
+                    ) : (
+                        <Trans>Duplicate</Trans>
+                    )
+                }
+                icon={CopyIcon}
+            />
+            <DuplicateEntityDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityType={entityType}
+                entityName={entityName}
+                entities={selection}
+                duplicatorCode={duplicatorCode}
+                onConfirm={handleConfirmDuplication}
+            />
+        </>
+    );
+}

package/src/app/common/duplicate-entity-dialog.tsx

@@ -0,0 +1,117 @@
+import { ConfigurableOperationInput as ConfigurableOperationInputComponent } from '@/vdb/components/shared/configurable-operation-input.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { getEntityDuplicatorsDocument } from '@/vdb/graphql/common-operations.js';
+import { Trans } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationInput } from '@vendure/common/lib/generated-types';
+import React, { useState } from 'react';
+
+interface DuplicateEntityDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
+    entityName: string;
+    entities: Array<{ id: string; name?: string }>;
+    duplicatorCode: string;
+    onConfirm: (duplicatorInput: ConfigurableOperationInput) => void;
+}
+
+export function DuplicateEntityDialog({
+    open,
+    onOpenChange,
+    entityType,
+    entityName,
+    duplicatorCode,
+    onConfirm,
+}: Readonly<DuplicateEntityDialogProps>) {
+    const [selectedDuplicator, setSelectedDuplicator] = useState<ConfigurableOperationInput | undefined>();
+
+    const { data } = useQuery({
+        queryKey: ['entityDuplicators'],
+        queryFn: () => api.query(getEntityDuplicatorsDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    // Find the duplicator that matches the provided code and supports this entity type
+    const matchingDuplicator = data?.entityDuplicators?.find(
+        duplicator => duplicator.code === duplicatorCode && duplicator.forEntities.includes(entityType),
+    );
+
+    // Auto-initialize the duplicator when found
+    React.useEffect(() => {
+        if (matchingDuplicator && !selectedDuplicator) {
+            setSelectedDuplicator({
+                code: matchingDuplicator.code,
+                arguments:
+                    matchingDuplicator.args?.map(arg => ({
+                        name: arg.name,
+                        value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                    })) || [],
+            });
+        }
+    }, [matchingDuplicator, selectedDuplicator]);
+
+    const onDuplicatorValueChange = (newVal: ConfigurableOperationInput) => {
+        setSelectedDuplicator(newVal);
+    };
+
+    const handleConfirm = () => {
+        if (!selectedDuplicator) return;
+        onConfirm(selectedDuplicator);
+        onOpenChange(false);
+        setSelectedDuplicator(undefined);
+    };
+
+    const handleCancel = () => {
+        onOpenChange(false);
+        setSelectedDuplicator(undefined);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Duplicate {entityName.toLowerCase()}s</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    {selectedDuplicator && matchingDuplicator && (
+                        <ConfigurableOperationInputComponent
+                            operationDefinition={matchingDuplicator}
+                            value={selectedDuplicator}
+                            onChange={onDuplicatorValueChange}
+                            removable={false}
+                        />
+                    )}
+
+                    {!matchingDuplicator && (
+                        <div className="text-sm text-muted-foreground">
+                            <Trans>
+                                No duplicator found with code "{duplicatorCode}" for {entityName}s
+                            </Trans>
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={handleCancel}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleConfirm} disabled={!selectedDuplicator}>
+                        <Trans>Duplicate</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/common/map-faceted-filter-fields.ts

@@ -0,0 +1,21 @@
+/**
+ * Maps filter fields to their corresponding ID fields in faceted filters.
+ * For example, transforms { category: '5' } to { categoryId: { eq: '5' } }
+ *
+ * @param facetedFilters - Array of filter objects to transform
+ * @param fieldMapping - Record mapping source field names to target field names
+ */
+export function mapFacetedFilterFields(
+    facetedFilters: Array<Record<string, any>>,
+    fieldMapping: Record<string, string>,
+) {
+    for (const [index, filter] of Object.entries(facetedFilters)) {
+        for (const [sourceField, targetField] of Object.entries(fieldMapping)) {
+            if (filter[sourceField]) {
+                facetedFilters[index as unknown as number] = {
+                    [targetField]: filter[sourceField],
+                };
+            }
+        }
+    }
+}

package/src/app/common/set-document-direction.ts

@@ -0,0 +1,7 @@
+/**
+ * @description
+ * Sets the `dir` attribute on the HTML tag, which sets the global text direction
+ */
+export function setDocumentDirection(direction: 'rtl' | 'ltr') {
+    document.documentElement.setAttribute('dir', direction);
+}