feat(file-upload)!: folder picker

packages/components-dev/file-upload/module.ts

@@ -22,7 +22,12 @@ import {
 } from '@angular/forms';
 import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqCheckboxModule } from '@koobiq/components/checkbox';
-import { FileValidators, KbqLocaleServiceModule, ShowOnFormSubmitErrorStateMatcher } from '@koobiq/components/core';
+import {
+    FileValidators,
+    KbqLocaleServiceModule,
+    KbqMultipleFileUploadLocaleConfig,
+    ShowOnFormSubmitErrorStateMatcher
+} from '@koobiq/components/core';
 import {
     KBQ_FILE_UPLOAD_CONFIGURATION,
     KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION,
@@ -80,16 +85,20 @@ const maxFileSize = (control: AbstractControl): ValidationErrors | null => {
         {
             provide: KBQ_FILE_UPLOAD_CONFIGURATION,
             useValue: {
-                captionText: 'Перетащите сюда или ',
-                captionTextWhenSelected: 'Перетащите еще или ',
-                captionTextForCompactSize: 'Перетащите файлы или ',
-                browseLink: 'выберите',
+                captionText: 'Перетащите сюда или {{ browseLink }}',
+                captionTextOnlyFolder: 'Перетащите сюда или {{ browseLinkFolder }}',
+                captionTextWithFolder: 'Перетащите сюда или {{ browseLink }} или {{ browseLinkFolderMixed }}',
+                captionTextWhenSelected: 'Перетащите еще или {{ browseLink }}',
+                captionTextForCompactSize: 'Перетащите сюда или {{ browseLink }}',
+                browseLink: 'выберите файлы',
+                browseLinkFolder: 'выберите папку',
+                browseLinkFolderMixed: 'папку',
                 title: 'Загрузите фотографии',
                 gridHeaders: {
                     file: 'Файл',
                     size: 'Размер'
                 }
-            }
+            } satisfies KbqMultipleFileUploadLocaleConfig
         }
     ]
 })
@@ -99,6 +108,8 @@ export class DevCustomTextDirective {}
     selector: 'dev-examples',
     imports: [FileUploadExamplesModule],
     template: `
+        <file-upload-allowed-example />
+        <hr />
         <file-upload-cva-overview-example />
         <hr />
         <file-upload-indeterminate-loading-overview-example />

packages/components/core/locales/en-US.ts

@@ -2,6 +2,7 @@ import {
     KbqActionsPanelLocaleConfiguration,
     KbqClampedTextLocaleConfig,
     KbqCodeBlockLocaleConfiguration,
+    KbqFileUploadLocaleConfig,
     KbqTimeRangeLocaleConfig
 } from './types';
 
@@ -20,20 +21,28 @@ export const enUSLocaleData = {
     fileUpload: {
         single: {
             captionText: 'Drag file here or {{ browseLink }}',
-            browseLink: 'choose'
+            captionTextOnlyFolder: 'Drag here or {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Drag here or {{ browseLink }} or {{ browseLinkFolderMixed }}',
+            browseLink: 'choose file',
+            browseLinkFolder: 'choose folder',
+            browseLinkFolderMixed: 'folder'
         },
         multiple: {
             captionText: 'Drag here or {{ browseLink }}',
-            captionTextWhenSelected: 'Drag more files or {{ browseLink }}',
+            captionTextOnlyFolder: 'Drag here or {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Drag here or {{ browseLink }} or {{ browseLinkFolderMixed }}',
+            captionTextWhenSelected: 'Drag more or {{ browseLink }}',
             captionTextForCompactSize: 'Drag files or {{ browseLink }}',
-            browseLink: 'choose',
+            browseLink: 'choose files',
+            browseLinkFolder: 'choose folder',
+            browseLinkFolderMixed: 'folder',
             title: 'Upload files',
             gridHeaders: {
                 file: 'File',
                 size: 'Size'
             }
         }
-    },
+    } satisfies KbqFileUploadLocaleConfig,
     codeBlock: {
         softWrapOnTooltip: 'Enable word wrap',
         softWrapOffTooltip: 'Disable word wrap',

packages/components/core/locales/es-LA.ts

@@ -2,6 +2,7 @@ import {
     KbqActionsPanelLocaleConfiguration,
     KbqClampedTextLocaleConfig,
     KbqCodeBlockLocaleConfiguration,
+    KbqFileUploadLocaleConfig,
     KbqTimeRangeLocaleConfig
 } from './types';
 
@@ -19,20 +20,28 @@ export const esLALocaleData = {
     fileUpload: {
         single: {
             captionText: 'Arrastre el archivo aquí o {{ browseLink }}',
-            browseLink: 'elija'
+            captionTextOnlyFolder: 'Arrastre el archivo aquí o {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Arrastre el archivo aquí o {{ browseLink }} o {{ browseLinkFolderMixed }}',
+            browseLink: 'elija',
+            browseLinkFolder: 'carpeta',
+            browseLinkFolderMixed: 'carpeta'
         },
         multiple: {
             captionText: 'Arrastre aquí o {{ browseLink }}',
+            captionTextOnlyFolder: 'Arrastre aquí o {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Arrastre aquí o {{ browseLink }} o {{ browseLinkFolderMixed }}',
             captionTextWhenSelected: 'Arrastre más archivos aquí o {{ browseLink }}',
             captionTextForCompactSize: 'Arrastre archivos o {{ browseLink }}',
             browseLink: 'elija',
+            browseLinkFolder: 'carpeta',
+            browseLinkFolderMixed: 'carpeta',
             title: 'Cargue los archivos',
             gridHeaders: {
                 file: 'Archivo',
                 size: 'Tamaño'
             }
         }
-    },
+    } satisfies KbqFileUploadLocaleConfig,
     codeBlock: {
         softWrapOnTooltip: 'Activar el ajuste de texto',
         softWrapOffTooltip: 'Desactivar el ajuste de texto',

packages/components/core/locales/pt-BR.ts

@@ -2,6 +2,7 @@ import {
     KbqActionsPanelLocaleConfiguration,
     KbqClampedTextLocaleConfig,
     KbqCodeBlockLocaleConfiguration,
+    KbqFileUploadLocaleConfig,
     KbqTimeRangeLocaleConfig
 } from './types';
 
@@ -19,20 +20,28 @@ export const ptBRLocaleData = {
     fileUpload: {
         single: {
             captionText: 'Arrastar o arquivo aqui ou {{ browseLink }}',
-            browseLink: 'escolher'
+            captionTextOnlyFolder: 'Arrastar o arquivo aqui ou {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Arrastar o arquivo aqui ou {{ browseLink }} ou {{ browseLinkFolderMixed }}',
+            browseLink: 'escolher',
+            browseLinkFolder: 'pasta',
+            browseLinkFolderMixed: 'pasta'
         },
         multiple: {
             captionText: 'Arrastar aqui ou {{ browseLink }}',
+            captionTextOnlyFolder: 'Arrastar aqui ou {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Arrastar aqui ou {{ browseLink }} ou {{ browseLinkFolderMixed }}',
             captionTextWhenSelected: 'Arrastar mais arquivos aqui ou {{ browseLink }}',
             captionTextForCompactSize: 'Arrastar arquivos ou {{ browseLink }}',
             browseLink: 'escolher',
+            browseLinkFolder: 'pasta',
+            browseLinkFolderMixed: 'pasta',
             title: 'Carregar arquivos',
             gridHeaders: {
                 file: 'Arquivo',
                 size: 'Tamanho'
             }
         }
-    },
+    } satisfies KbqFileUploadLocaleConfig,
     codeBlock: {
         softWrapOnTooltip: 'Ativar quebra de linha',
         softWrapOffTooltip: 'Desativar quebra de linha',

packages/components/core/locales/ru-RU.ts

@@ -2,6 +2,7 @@ import {
     KbqActionsPanelLocaleConfiguration,
     KbqClampedTextLocaleConfig,
     KbqCodeBlockLocaleConfiguration,
+    KbqFileUploadLocaleConfig,
     KbqTimeRangeLocaleConfig
 } from './types';
 
@@ -19,21 +20,29 @@ export const ruRULocaleData = {
     },
     fileUpload: {
         single: {
-            captionText: 'Перетащите файл или {{ browseLink }}',
-            browseLink: 'выберите'
+            captionText: 'Перетащите сюда или {{ browseLink }}',
+            captionTextOnlyFolder: 'Перетащите сюда или {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Перетащите сюда или {{ browseLink }} или {{ browseLinkFolderMixed }}',
+            browseLink: 'выберите файл',
+            browseLinkFolder: 'выберите папку',
+            browseLinkFolderMixed: 'папку'
         },
         multiple: {
             captionText: 'Перетащите сюда или {{ browseLink }}',
+            captionTextOnlyFolder: 'Перетащите сюда или {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Перетащите сюда или {{ browseLink }} или {{ browseLinkFolderMixed }}',
             captionTextWhenSelected: 'Перетащите еще или {{ browseLink }}',
-            captionTextForCompactSize: 'Перетащите файлы или {{ browseLink }}',
-            browseLink: 'выберите',
+            captionTextForCompactSize: 'Перетащите сюда или {{ browseLink }}',
+            browseLink: 'выберите файлы',
+            browseLinkFolder: 'выберите папку',
+            browseLinkFolderMixed: 'папку',
             title: 'Загрузите файлы',
             gridHeaders: {
                 file: 'Файл',
                 size: 'Размер'
             }
         }
-    },
+    } satisfies KbqFileUploadLocaleConfig,
     codeBlock: {
         softWrapOnTooltip: 'Включить перенос по словам',
         softWrapOffTooltip: 'Выключить перенос по словам',

packages/components/core/locales/tk-TM.ts

@@ -2,6 +2,7 @@ import {
     KbqActionsPanelLocaleConfiguration,
     KbqClampedTextLocaleConfig,
     KbqCodeBlockLocaleConfiguration,
+    KbqFileUploadLocaleConfig,
     KbqTimeRangeLocaleConfig
 } from './types';
 
@@ -19,21 +20,29 @@ export const tkTMLocaleData = {
     },
     fileUpload: {
         single: {
-            captionText: 'Faýly geçiriň ýa-da {{ browseLink }} ',
-            browseLink: 'saýlaň'
+            captionText: 'Faýly geçiriň ýa-da {{ browseLink }}',
+            captionTextOnlyFolder: 'Faýly geçiriň ýa-da {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Faýly geçiriň ýa-da {{ browseLink }} ýa-da {{ browseLinkFolderMixed }}',
+            browseLink: 'saýlaň',
+            browseLinkFolder: 'bukja',
+            browseLinkFolderMixed: 'bukja'
         },
         multiple: {
             captionText: 'Şu ýere geçiriň ýa-da {{ browseLink }}',
+            captionTextOnlyFolder: 'Şu ýere geçiriň ýa-da {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Şu ýere geçiriň ýa-da {{ browseLink }} ýa-da {{ browseLinkFolderMixed }}',
             captionTextWhenSelected: 'Ýene geçiriň ýa-da {{ browseLink }}',
             captionTextForCompactSize: 'Faýllary geçiriň ýa-da {{ browseLink }}',
             browseLink: 'saýlaň',
+            browseLinkFolder: 'bukja',
+            browseLinkFolderMixed: 'bukja',
             title: 'Faýl ýükläň',
             gridHeaders: {
                 file: 'Faýl',
                 size: 'Ölçegi'
             }
         }
-    },
+    } satisfies KbqFileUploadLocaleConfig,
     codeBlock: {
         softWrapOnTooltip: 'Sözler boýunça geçirmäni işjeňleşdirmek',
         softWrapOffTooltip: 'Sözler boýunça geçirmäni öçürmek',

packages/components/core/locales/types.ts

@@ -66,3 +66,27 @@ export type KbqTimeRangeLocaleConfig = {
         option: FormatterDurationTemplate;
     };
 };
+
+export interface KbqBaseFileUploadLocaleConfig {
+    captionText: string;
+    captionTextOnlyFolder: string;
+    captionTextWithFolder: string;
+    browseLink: string;
+    browseLinkFolder: string;
+    browseLinkFolderMixed?: string;
+}
+
+export interface KbqMultipleFileUploadLocaleConfig extends KbqBaseFileUploadLocaleConfig {
+    captionTextWhenSelected: string;
+    captionTextForCompactSize: string;
+    title: string;
+    gridHeaders: {
+        file: string;
+        size: string;
+    };
+}
+
+export type KbqFileUploadLocaleConfig = {
+    single: KbqBaseFileUploadLocaleConfig;
+    multiple: KbqMultipleFileUploadLocaleConfig;
+};

packages/components/file-upload/__snapshots__/file-upload.spec.ts.snap

@@ -2,10 +2,14 @@
 
 exports[`KbqMultipleFileUploadComponent with localeConfig input property should use default properties if they not provided with localeConfig 1`] = `
 {
-  "browseLink": "выберите",
+  "browseLink": "выберите файлы",
+  "browseLinkFolder": "выберите папку",
+  "browseLinkFolderMixed": "папку",
   "captionText": "TEST {{ browseLink }}",
-  "captionTextForCompactSize": "Перетащите файлы или {{ browseLink }}",
+  "captionTextForCompactSize": "Перетащите сюда или {{ browseLink }}",
+  "captionTextOnlyFolder": "Перетащите сюда или {{ browseLinkFolder }}",
   "captionTextWhenSelected": "Перетащите еще или {{ browseLink }}",
+  "captionTextWithFolder": "Перетащите сюда или {{ browseLink }} или {{ browseLinkFolderMixed }}",
   "gridHeaders": {
     "file": "Файл",
     "size": "Размер",
@@ -16,7 +20,11 @@ exports[`KbqMultipleFileUploadComponent with localeConfig input property should
 
 exports[`KbqSingleFileUploadComponent with localeConfig input property should use default properties if they not provided with localeConfig 1`] = `
 {
-  "browseLink": "выберите",
+  "browseLink": "выберите файл",
+  "browseLinkFolder": "выберите папку",
+  "browseLinkFolderMixed": "папку",
   "captionText": "TEST {{ browseLink }}",
+  "captionTextOnlyFolder": "Перетащите сюда или {{ browseLinkFolder }}",
+  "captionTextWithFolder": "Перетащите сюда или {{ browseLink }} или {{ browseLinkFolderMixed }}",
 }
 `;

packages/components/file-upload/e2e.playwright-spec.ts

@@ -10,6 +10,8 @@ test.describe('KbqFileUploadModule', () => {
 
         test('KbqSingleFileUploadComponent states', async ({ page }) => {
             await page.goto('/E2eFileUploadStateAndStyle');
+            await page.setViewportSize({ width: 1400, height: 320 });
+
             const locator = getComponent(page);
 
             const screenshotTarget = getSingleFileUploadTable(locator);
@@ -19,7 +21,9 @@ test.describe('KbqFileUploadModule', () => {
 
         test(`KbqSingleFileUploadComponent states (dark theme)`, async ({ page }) => {
             await page.goto('/E2eFileUploadStateAndStyle');
+            await page.setViewportSize({ width: 1400, height: 320 });
             await e2eEnableDarkTheme(page);
+            await page.setViewportSize({ width: 1400, height: 320 });
 
             const locator = getComponent(page);
 
@@ -32,6 +36,8 @@ test.describe('KbqFileUploadModule', () => {
             await page.goto('/E2eFileUploadStateAndStyle');
             const locator = getComponent(page);
 
+            await page.setViewportSize({ width: 1400, height: 900 });
+
             const screenshotTarget = getMultipleFileUploadTable(locator);
 
             await expect(screenshotTarget).toHaveScreenshot();
@@ -40,6 +46,7 @@ test.describe('KbqFileUploadModule', () => {
         test(`KbqMultipleFileUploadComponent states (dark theme)`, async ({ page }) => {
             await page.goto('/E2eFileUploadStateAndStyle');
             await e2eEnableDarkTheme(page);
+            await page.setViewportSize({ width: 1400, height: 900 });
 
             const locator = getComponent(page);