@genesislcap/pbc-documents-ui 15.19.0 → 15.19.1-FUI-2610.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/pbc-documents-ui",
   "description": "Genesis Document Management UI",
-  "version": "15.19.0",
+  "version": "15.19.1-FUI-2610.1",
   "private": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -76,42 +76,41 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/design-system-configurator": "15.19.0",
-    "@genesislcap/eslint-config": "15.19.0",
-    "@genesislcap/foundation-testing": "15.19.0",
-    "@genesislcap/genx": "15.19.0",
-    "@genesislcap/prettier-config": "15.19.0",
-    "@genesislcap/stylelint-config": "15.19.0",
+    "@genesislcap/design-system-configurator": "15.19.1-FUI-2610.1",
+    "@genesislcap/eslint-config": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-testing": "15.19.1-FUI-2610.1",
+    "@genesislcap/genx": "15.19.1-FUI-2610.1",
+    "@genesislcap/prettier-config": "15.19.1-FUI-2610.1",
+    "@genesislcap/stylelint-config": "15.19.1-FUI-2610.1",
     "@types/node": "^22.10.2",
     "rimraf": "^3.0.2",
     "tslib": "^2.3.1",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "15.19.0",
-    "@genesislcap/foundation-entity-management": "15.19.0",
-    "@genesislcap/foundation-events": "15.19.0",
-    "@genesislcap/foundation-forms": "15.19.0",
-    "@genesislcap/foundation-header": "15.19.0",
-    "@genesislcap/foundation-layout": "15.19.0",
-    "@genesislcap/foundation-logger": "15.19.0",
-    "@genesislcap/foundation-notifications": "15.19.0",
-    "@genesislcap/foundation-store": "15.19.0",
-    "@genesislcap/foundation-ui": "15.19.0",
-    "@genesislcap/foundation-user": "15.19.0",
-    "@genesislcap/foundation-utils": "15.19.0",
-    "@genesislcap/foundation-zero": "15.19.0",
-    "@genesislcap/foundation-zero-grid-tabulator": "15.19.0",
-    "@genesislcap/grid-tabulator": "15.19.0",
-    "@genesislcap/rapid-design-system": "15.19.0",
-    "@genesislcap/rapid-grid-tabulator": "15.19.0",
-    "@genesislcap/web-core": "15.19.0",
+    "@genesislcap/foundation-comms": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-entity-management": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-events": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-forms": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-header": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-layout": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-logger": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-notifications": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-store": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-ui": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-user": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-utils": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-zero": "15.19.1-FUI-2610.1",
+    "@genesislcap/foundation-zero-grid-tabulator": "15.19.1-FUI-2610.1",
+    "@genesislcap/grid-tabulator": "15.19.1-FUI-2610.1",
+    "@genesislcap/rapid-design-system": "15.19.1-FUI-2610.1",
+    "@genesislcap/rapid-grid-tabulator": "15.19.1-FUI-2610.1",
+    "@genesislcap/web-core": "15.19.1-FUI-2610.1",
     "rxjs": "^7.5.4",
     "tslib": "^2.3.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "customElements": "dist/custom-elements.json",
-  "gitHead": "83695de98c2288c2e89992215cb391652f6c5eec"
+  "customElements": "dist/custom-elements.json"
 }

package/dist/dts/services/document.service.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=document.service.test.d.ts.map

package/dist/dts/services/document.service.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"document.service.test.d.ts","sourceRoot":"","sources":["../../../src/services/document.service.test.ts"],"names":[],"mappings":""}

package/dist/esm/services/document.service.test.js

@@ -1,50 +0,0 @@
-import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
-import { DocumentServiceImpl } from './document.service';
-function withStubbedGlobals(run, sessionStore = {}) {
-    const original = {
-        fetch: globalThis.fetch,
-        sessionStorage: globalThis.sessionStorage,
-    };
-    let captured;
-    globalThis.fetch = ((url, init) => {
-        captured = { url, init };
-        return new Promise(() => { });
-    });
-    globalThis.sessionStorage = {
-        getItem: (key) => (key in sessionStore ? sessionStore[key] : null),
-    };
-    try {
-        run(() => captured);
-    }
-    finally {
-        globalThis.fetch = original.fetch;
-        globalThis.sessionStorage = original.sessionStorage;
-    }
-}
-function makeService(authToken) {
-    const auth = {
-        loggedUserResult: authToken === null ? null : { authToken },
-    };
-    const connect = {};
-    return new DocumentServiceImpl(connect, auth);
-}
-const Suite = createLogicSuite('DocumentServiceImpl.downloadDocument');
-Suite('sends the auth token from Auth.loggedUserResult, not raw sessionStorage', () => {
-    withStubbedGlobals((capture) => {
-        const service = makeService('valid-token-123');
-        service.downloadDocument('FILE_ID');
-        const { url, init } = capture();
-        assert.is(url, 'gwf/file-server/download?fileStorageId=FILE_ID');
-        assert.is(init.headers.get('SESSION_AUTH_TOKEN'), 'valid-token-123', 'should use the token from Auth, regardless of the sessionStorage key prefix');
-    }, { '@custxClientApp/authToken': 'valid-token-123' });
-});
-Suite('omits the auth header when there is no logged-in user', () => {
-    withStubbedGlobals((capture) => {
-        const service = makeService(null);
-        service.downloadDocument('FILE_ID');
-        const { init } = capture();
-        assert.not.ok(init.headers.get('SESSION_AUTH_TOKEN'), 'no user means no SESSION_AUTH_TOKEN header (never the string "null")');
-    });
-});
-Suite.run();
-//# sourceMappingURL=document.service.test.js.map

package/dist/esm/services/document.service.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"document.service.test.js","sourceRoot":"","sources":["../../../src/services/document.service.test.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAWzD,SAAS,kBAAkB,CACzB,GAA6C,EAC7C,eAAuC,EAAE;IAEzC,MAAM,QAAQ,GAAG;QACf,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,cAAc,EAAG,UAAkB,CAAC,cAAc;KACnD,CAAC;IAEF,IAAI,QAAyB,CAAC;IAG9B,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,GAAW,EAAE,IAAiB,EAAE,EAAE;QACrD,QAAQ,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;QACzB,OAAO,IAAI,OAAO,CAAW,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAiB,CAAC;IAIlB,UAAkB,CAAC,cAAc,GAAG;QACnC,OAAO,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;KAC3E,CAAC;IAEF,IAAI,CAAC;QACH,GAAG,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;IACtB,CAAC;YAAS,CAAC;QACT,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;QACjC,UAAkB,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC;IAC/D,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,SAAwB;IAC3C,MAAM,IAAI,GAAG;QACX,gBAAgB,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE;KACzC,CAAC;IACrB,MAAM,OAAO,GAAG,EAAwB,CAAC;IACzC,OAAO,IAAI,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,KAAK,GAAG,gBAAgB,CAAC,sCAAsC,CAAC,CAAC;AAEvE,KAAK,CAAC,yEAAyE,EAAE,GAAG,EAAE;IACpF,kBAAkB,CAChB,CAAC,OAAO,EAAE,EAAE;QACV,MAAM,OAAO,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAC/C,OAAO,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAEpC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;QAChC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,gDAAgD,CAAC,CAAC;QACjE,MAAM,CAAC,EAAE,CACN,IAAI,CAAC,OAAmB,CAAC,GAAG,CAAC,oBAAoB,CAAC,EACnD,iBAAiB,EACjB,6EAA6E,CAC9E,CAAC;IACJ,CAAC,EAED,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,CACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,KAAK,CAAC,uDAAuD,EAAE,GAAG,EAAE;IAClE,kBAAkB,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAEpC,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;QAC3B,MAAM,CAAC,GAAG,CAAC,EAAE,CACV,IAAI,CAAC,OAAmB,CAAC,GAAG,CAAC,oBAAoB,CAAC,EACnD,sEAAsE,CACvE,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,KAAK,CAAC,GAAG,EAAE,CAAC"}

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../src/globals.d.ts","../src/index.federated.ts","../src/index.ts","../src/sandbox.ts","../src/typings.d.ts","../src/components/rapid-components.ts","../src/components/zero-components.ts","../src/components/document-upload/document-upload.styles.ts","../src/components/document-upload/document-upload.template.ts","../src/components/document-upload/document-upload.ts","../src/components/document-upload/document-upload.types.ts","../src/components/template-asset-link/template-asset-link.styles.ts","../src/components/template-asset-link/template-asset-link.template.ts","../src/components/template-asset-link/template-asset-link.ts","../src/components/utils/action-cell-renderer.ts","../src/components/utils/column-config.ts","../src/components/utils/icons.ts","../src/config/config.ts","../src/config/configure.ts","../src/config/index.ts","../src/config/templates.ts","../src/main/index.ts","../src/main/main.styles.ts","../src/main/main.template.ts","../src/main/main.ts","../src/services/document.service.test.ts","../src/services/document.service.ts","../src/tags/index.ts","../src/tags/tags.ts","../src/types/index.ts","../src/types/main.types.ts","../src/types/utils.types.ts","../src/utils/formatting.ts","../src/utils/index.ts","../src/utils/logger.ts","../src/utils/misc.ts","../src/utils/notifications.ts","../src/utils/styles.ts"],"version":"5.9.2"}

package/src/components/document-upload/document-upload.styles.ts

@@ -1,183 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const DocumentUploadStyles = css`
-  :host {
-    height: 100%;
-    width: 100%;
-    padding: calc(var(--design-unit) * 3px);
-    background-color: var(--neutral-layer-4);
-    box-sizing: border-box;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    grid-gap: calc(var(--design-unit) * 3px);
-  }
-
-  div.path {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: calc(var(--design-unit) * 3px);
-    align-items: center;
-  }
-
-  div.template {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  div.config {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-gap: calc(var(--design-unit) * 3px);
-    align-items: center;
-  }
-
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    border: calc(var(--stroke-width) * 1px) dashed var(--accent-fill-rest);
-    background-color: var(--neutral-layer-3);
-    box-sizing: border-box;
-  }
-
-  .clickable {
-    cursor: pointer;
-  }
-
-  .dialog {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  .document-name {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-stroke-hover);
-    text-align: center;
-    line-height: var(--type-ramp-base-line-height);
-  }
-
-  .document-size {
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-minus-1-font-size);
-    text-align: center;
-    line-height: normal;
-  }
-
-  .drag-prompt {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-    text-align: center;
-    line-height: normal;
-  }
-
-  .drag-prompt > span {
-    color: var(--accent-fill-rest);
-  }
-
-  .progress {
-    width: 261px;
-    height: calc(var(--design-unit) * 1px);
-  }
-
-  .error-progress::part(determinate) {
-    background-color: var(--error-color);
-  }
-
-  label.type-prompt {
-    font-size: var(--type-ramp-plus-1-font-size);
-  }
-
-  .type-prompt {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    text-align: center;
-    line-height: normal;
-  }
-
-  .upload-icon,
-  .error-icon {
-    fill: var(--neutral-foreground-rest);
-    animation: animation-upload-icon 3s infinite;
-  }
-
-  .upload-successfull::part(determinate) {
-    background-color: var(--success-color);
-  }
-
-  .uploading-prompt {
-    width: 134px;
-    margin-left: 75px;
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-    line-height: normal;
-  }
-
-  .uploading-prompt::after {
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: bottom;
-    animation: ellipsis steps(4, end) 2s infinite;
-    content: '...';
-    width: 0;
-  }
-
-  .success-icon {
-    position: relative;
-    height: calc(var(--base-height-multiplier) * 5px);
-  }
-
-  .success-icon > svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  @keyframes ellipsis {
-    to {
-      width: 14px;
-    }
-  }
-
-  @keyframes ellipsis {
-    to {
-      width: 14px;
-    }
-  }
-
-  .error-icon {
-    fill: var(--error-color);
-  }
-
-  @keyframes animation-upload-icon {
-    0% {
-      opacity: 100%;
-    }
-
-    50% {
-      opacity: 30%;
-    }
-
-    100% {
-      opacity: 100%;
-    }
-  }
-  @keyframes animation-upload-icon {
-    0% {
-      opacity: 100%;
-    }
-
-    50% {
-      opacity: 30%;
-    }
-
-    100% {
-      opacity: 100%;
-    }
-  }
-`;

package/src/components/document-upload/document-upload.template.ts

@@ -1,122 +0,0 @@
-import { html, ref, repeat, sync, when } from '@genesislcap/web-core';
-import { iconTag, optionTag, progressTag, selectInputTag, textInputTag } from '../../tags';
-import { FileMetaType } from '../../types';
-import { formatBytes } from '../../utils/formatting';
-import { checkmark, checkmarkBackground, checkmarkCircle, uploadIconLarge } from '../utils/icons';
-import type { DocumentUpload } from './document-upload';
-import { UploadState } from './document-upload.types';
-
-const filePathPicker = html<DocumentUpload>`
-<div class="path">
-<label class="type-prompt">Upload path:</label>
-<${textInputTag} value=${sync((x) => x.filePath)} ?disabled=${(x) => x.currentState !== UploadState.START || x.fileStorageId}></${textInputTag}>
-</div>
-`;
-
-const templateTooltip = `
-<h3>File type</h3>
-<p>Choose the meta file type of the file you're going to upload, it can be ${Object.keys(
-  FileMetaType,
-)
-  .map((f) => `<code>${f}</code>`)
-  .join(', ')}.</p>
-<p>A user document is a standard file.</p>
-<p>When a document is marked as a template, it can be selected in the reporting component as a template file from which to generate a document.</p>
-<p>Valid templating format extensions are:</p>
-<ul>
-  <li>Excel: <code>.xls</code> or <code>.xlsx</code></li>
-  <li>PDF: <code>.html</code> or <code>.xhtml</code></li>
-</ul>
-<p>A document configured as a template asset can then be linked to that asset. This, for example, allows you to generate reports using templates that use assets, such as images.</p>
-<p>If you have uploaded an asset click on the linking button on the template and then choose the asset(s) to link to on the pop-up dialog.</p>
-`;
-
-const templateCheckbox = html<DocumentUpload>`
-<div class="template">
-  <${iconTag} tooltip="${templateTooltip}"></${iconTag}>
-  <label class="type-prompt">File type</label>
-  <${selectInputTag}
-    value=${sync((x) => x.fileMetaType)}
-    ?disabled=${(x) => x.currentState !== UploadState.START || x.fileStorageId}
-  >
-  ${repeat(
-    () => Object.keys(FileMetaType),
-    html<FileMetaType, DocumentUpload>`
-      <${optionTag} ?selected=${(x, c) => x === c.parent.fileMetaType}>${(x) => x}</${optionTag}>`,
-    { recycle: false },
-  )}
-  </${selectInputTag}>
-</div>
-`;
-
-export const DocumentUploadTemplate = html<DocumentUpload>`
-  <template>
-    <div class="config">${filePathPicker} ${templateCheckbox}</div>
-    <div class="container" ${ref('dropArea')}>
-      ${when(
-        (x) => x.currentState === UploadState.START,
-        html<DocumentUpload>`
-          <div class="dialog">
-            <span class="upload-icon">${uploadIconLarge}</span>
-            <a class="drag-prompt clickable" @click=${(x) => x.fileClick()}>
-              Drag and drop or
-              <span>select</span>
-              a file to upload.
-            </a>
-            <a class="type-prompt">
-              Allows all file types including: PDF, CSV, JPG, PNG, HTML etc.
-            </a>
-          </div>
-        `,
-      )}
-      ${when(
-        (x) => x.currentState === UploadState.UPLOADING,
-        html<DocumentUpload>`
-        <div class="dialog">
-          <span class="upload-icon">${uploadIconLarge}</span>
-          <a
-            class="${(x) =>
-              x.currentState === UploadState.UPLOADING ? 'uploading-prompt' : 'drag-prompt'}"
-          >
-            ${(x) => (x.currentState === UploadState.UPLOADING ? 'Uploading' : 'File Uploaded')}
-          </a>
-          <a class="document-name">${(x) => x.fileName}</a>
-          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
-          <${progressTag}
-            class="progress ${(x) => (x.fileUploadProgress >= 100 ? 'upload-successfull' : '')}"
-            min="0"
-            max="100"
-            value=${(x) => x.fileUploadProgress}
-          ></${progressTag}>
-        </div>
-      `,
-      )}
-      ${when(
-        (x) => x.currentState === UploadState.UPLOADED,
-        html<DocumentUpload>`
-          <div class="dialog">
-            <span class="success-icon">${checkmarkBackground} ${checkmarkCircle} ${checkmark}</span>
-            <a class="drag-prompt">Document successfully uploaded</a>
-          </div>
-        `,
-      )}
-      ${when(
-        (x) => x.currentState === UploadState.ERROR,
-        html<DocumentUpload>`
-        <div class="dialog">
-          <span class="error-icon">${uploadIconLarge}</span>
-          <a class="drag-prompt">Error uploading file. Please try again.</a>
-          <a class="document-name">${(x) => x.fileName}</a>
-          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
-          <${progressTag}
-            class="progress error-progress"
-            min="0"
-            max="100"
-            value="100"
-          ></${progressTag}>
-        </div>
-      `,
-      )}
-    </div>
-  </template>
-`;

package/src/components/document-upload/document-upload.ts

@@ -1,190 +0,0 @@
-import { EventEmitter } from '@genesislcap/foundation-events';
-import { attr, customElement, DOM, GenesisElement, observable } from '@genesislcap/web-core';
-import { IDocumentService } from '../../services/document.service';
-import {
-  DocManagerEventDetailMap,
-  DocManagerEvents,
-  FileMetaType,
-  FileUploadMode,
-} from '../../types/main.types';
-import { logger, showNotificationToast } from '../../utils';
-import { DocumentUploadStyles } from './document-upload.styles';
-import { DocumentUploadTemplate } from './document-upload.template';
-import { UploadState } from './document-upload.types';
-
-/**
- * Document upload / replace drop zone.
- * @public
- *
- * @fires handle-upload-started
- * @fires handle-replace-started
- * @fires handle-file-process-error
- * @fires handle-file-uploaded
- * @fires handle-file-replaced
- */
-@customElement({
-  name: 'document-upload',
-  template: DocumentUploadTemplate,
-  styles: DocumentUploadStyles,
-})
-export class DocumentUpload extends EventEmitter<DocManagerEventDetailMap>(GenesisElement) {
-  @IDocumentService docService: IDocumentService;
-
-  @observable currentState: UploadState = UploadState.START;
-  @observable fileName: string;
-  @observable fileSize: number;
-  @observable fileUploadProgress: number = 0;
-  @observable fileUploadMode: FileUploadMode;
-
-  @attr({ attribute: 'file-path' }) filePath = '/';
-  @attr({ attribute: 'file-meta-type' }) fileMetaType = FileMetaType.USER_DOCUMENT;
-  @attr({ attribute: 'file-storage-id' }) fileStorageId = null;
-
-  public dropArea: HTMLDivElement;
-  public fileSelect: HTMLInputElement;
-  public endpoint: string = '';
-
-  private readonly errorViewTime: number = 7000;
-  private readonly uploadingUploadedViewTime: number = 2000;
-
-  private file: any;
-
-  connectedCallback() {
-    super.connectedCallback();
-    DOM.queueUpdate(() => {
-      this.createFileUploadInput();
-
-      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-        this.dropArea.addEventListener(eventName, this.preventDefaults, false);
-      });
-      this.dropArea.addEventListener('drop', this.handleDrop.bind(this), false);
-    });
-  }
-
-  public fileClick() {
-    this.fileSelect.click();
-  }
-
-  private handleDrop(e) {
-    if (this.currentState === UploadState.START) {
-      const dt = e.dataTransfer;
-      const files = dt.files;
-
-      const firstElement = 0;
-
-      if (files[firstElement]) {
-        const file = files[firstElement];
-        this.updateSelectedFile(file);
-      }
-    }
-  }
-
-  private createFileUploadInput() {
-    this.fileSelect = document.createElement('input') as HTMLInputElement;
-    this.fileSelect.type = 'file';
-    this.fileSelect.onchange = (event) => {
-      logger.debug('file upload click');
-      this.fileSelected(event);
-    };
-  }
-
-  private fileSelected(event) {
-    // Only take the first file
-    const file = event.target.files[0];
-    this.updateSelectedFile(file);
-  }
-
-  private updateSelectedFile(file: any) {
-    if (this.fileUploadMode === FileUploadMode.DISABLED) {
-      throw new Error('File upload is disabled and cannot be operated');
-    }
-    if (file.size === 0) {
-      showNotificationToast({
-        title: 'Invalid File',
-        body: `Cannot upload empty file "${file.name}."\nUploaded files must be non-empty.`,
-        toast: { type: 'critical' as any },
-      });
-      this.cleanData();
-      return;
-    }
-    this.file = file;
-    this.fileName = this.file.name;
-    this.fileSize = this.file.size;
-    this.fileSelect.value = '';
-    this.fileUploadProgress = 0;
-    if (this.fileUploadMode === FileUploadMode.REPLACE) {
-      this.replaceFile();
-    } else if (this.fileUploadMode === FileUploadMode.UPLOAD) {
-      this.uploadedFile();
-    }
-  }
-
-  private uploadedFile() {
-    this.currentState = UploadState.UPLOADING;
-    this.$emit(DocManagerEvents.HandleUploadStarted);
-    this.docService
-      .uploadDocument({ file: this.file, path: this.filePath, fileMetaType: this.fileMetaType })
-      .then((x) => {
-        if (x.ok) {
-          this.fileUploadProgress = 100;
-          this.handleFinishUpload();
-        } else {
-          this.handleError(); // Add logging later
-        }
-      });
-  }
-  private replaceFile() {
-    this.currentState = UploadState.UPLOADING;
-    this.$emit(DocManagerEvents.HandleReplaceStarted);
-    this.docService
-      .replaceDocument({
-        file: this.file,
-        fileStorageId: this.fileStorageId,
-      })
-      .then((x) => {
-        if (x.ok) {
-          this.fileUploadProgress = 100;
-          this.handleFinishUpload();
-        } else {
-          this.handleError(); // Add logging later
-        }
-      });
-  }
-
-  public cleanData() {
-    this.file = undefined;
-    this.fileName = undefined;
-    this.fileSize = undefined;
-    this.fileSelect.value = '';
-    this.fileUploadProgress = 0;
-    this.currentState = UploadState.START;
-  }
-
-  private preventDefaults(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  private handleError() {
-    this.$emit(DocManagerEvents.HandleFileProcessError);
-    this.currentState = UploadState.ERROR;
-    setTimeout(() => {
-      this.currentState = UploadState.START;
-    }, this.errorViewTime);
-  }
-
-  private handleFinishUpload() {
-    setTimeout(() => {
-      const isReplace = this.fileUploadMode === FileUploadMode.REPLACE;
-      this.$emit(
-        isReplace ? DocManagerEvents.HandleFileReplaced : DocManagerEvents.HandleFileUploaded,
-      );
-      showNotificationToast({
-        title: isReplace ? 'Replace Document' : 'Upload Document',
-        body: `Document was ${isReplace ? 'replaced' : 'uploaded'} successfully`,
-        toast: { type: 'success' as any },
-      });
-      this.cleanData();
-    }, this.uploadingUploadedViewTime);
-  }
-}

package/src/components/document-upload/document-upload.types.ts

@@ -1,6 +0,0 @@
-export enum UploadState {
-  START = 'START',
-  ERROR = 'ERROR',
-  UPLOADING = 'UPLOADING',
-  UPLOADED = 'UPLOADED',
-}