feat(file-upload): added dropzone area (#DS-2356)

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

@@ -40,7 +40,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqInputModule } from '@koobiq/components/input';
 import { KbqRadioModule } from '@koobiq/components/radio';
 import { interval, takeWhile, timer } from 'rxjs';
-import { E2eFileUploadStateAndStyle } from '../../components/file-upload/e2e';
+import { E2eFileUploadDropzone, E2eFileUploadStateAndStyle } from '../../components/file-upload/e2e';
 import { FileUploadExamplesModule } from '../../docs-examples/components/file-upload';
 import { DevLocaleSelector } from '../locale-selector';
 
@@ -104,6 +104,8 @@ export class DevCustomTextDirective {}
     selector: 'dev-examples',
     imports: [FileUploadExamplesModule],
     template: `
+        <file-upload-dropzone-example />
+        <hr />
         <file-upload-allowed-example />
         <hr />
         <file-upload-cva-overview-example />
@@ -209,7 +211,8 @@ export class DevMultipleFileUploadCompact {
         KbqRadioModule,
         DevMultipleFileUploadCompact,
         DevCustomTextDirective,
-        E2eFileUploadStateAndStyle
+        E2eFileUploadStateAndStyle,
+        E2eFileUploadDropzone
     ],
     templateUrl: 'template.html',
     styleUrls: ['./styles.scss'],

packages/components-dev/file-upload/template.html

@@ -1,5 +1,7 @@
 <e2e-file-upload-state-and-style class="layout-margin-top-l layout-margin-bottom-l layout-column" />
 
+<e2e-file-upload-dropzone />
+
 <button kbq-button (click)="toggleDisabled()">Toggle Disabled</button>
 
 <button kbq-button (click)="startLoading()">Loading imitation for single and multiple</button>

packages/components/core/utils/utils.ts

@@ -12,6 +12,16 @@ export const isNull = (value: unknown): value is null => {
     return value === null;
 };
 
+/** Whether the value is HTMLElement. */
+export const isHtmlElement = (value: unknown): value is HTMLElement => {
+    return value instanceof HTMLElement;
+};
+
+/** Whether the value is HTMLElement or null. */
+export const isHtmlElementOrNull = (value: unknown): value is HTMLElement | null => {
+    return isHtmlElement(value) || isNull(value);
+};
+
 /**
  * Will be removed in the next major release
  *

packages/components/file-upload/dropzone.scss

@@ -0,0 +1,57 @@
+.kbq-dropzone-overlay {
+    --kbq-dropzone-padding: var(--kbq-size-s);
+    --kbq-dropzone-overlay-background: var(--kbq-background-overlay-theme);
+    --kbq-dropzone-component-background: var(--kbq-background-overlay-theme);
+    --kbq-dropzone-border-color: var(--kbq-line-theme-fade);
+
+    padding: var(--kbq-dropzone-padding);
+    background-color: var(--kbq-dropzone-overlay-background);
+
+    opacity: 0;
+    transition: opacity 100ms ease-in-out;
+
+    &.kbq-dropzone-overlay__attached {
+        opacity: 1;
+    }
+
+    .kbq-dropzone-content {
+        display: flex;
+        width: 100%;
+
+        align-items: center;
+        justify-content: center;
+
+        border-radius: var(--kbq-size-border-radius);
+        border: var(--kbq-size-border-width) dashed var(--kbq-dropzone-border-color);
+        background-color: var(--kbq-dropzone-component-background);
+
+        outline: none;
+    }
+}
+
+.kbq-fullscreen-dropzone {
+    --kbq-dropzone-component-background: transparent;
+}
+
+.kbq-local-dropzone {
+    --kbq-dropzone-overlay-background: transparent;
+
+    .kbq-empty-state.kbq-multiple-file-upload__empty-state {
+        --kbq-empty-state-size-compact-padding-top: 0;
+        --kbq-empty-state-size-compact-padding-horizontal: 0;
+        --kbq-empty-state-size-compact-padding-bottom: 0;
+
+        --kbq-empty-state-size-normal-padding-top: 0;
+        --kbq-empty-state-size-normal-padding-horizontal: 0;
+        --kbq-empty-state-size-normal-padding-bottom: 0;
+
+        --kbq-empty-state-size-big-padding-top: 0;
+        --kbq-empty-state-size-big-padding-horizontal: 0;
+        --kbq-empty-state-size-big-padding-bottom: 0;
+    }
+}
+
+.kbq-empty-state.kbq-multiple-file-upload__empty-state {
+    --kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-m);
+    --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xs);
+}