@quandis/qbo4.documents 4.0.1-CI-20240712-205511

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@quandis/qbo4.documents",
+  "author": "Quandis, Inc.",
+  "license": "MIT",
+  "type": "module",
+  "version": "4.0.1-CI-20240712-205511",
+  "workspaces": [
+    "code"
+  ],
+  "main": "src/Program.js",
+  "private": false,
+  "scripts": {
+    "build": "npm run sass && tsc && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.documents.tgz",
+    "packdev": "webpack --config webpack.dev.js --no-color",
+    "packprod": "webpack --config webpack.prod.js --no-color",
+    "sass": "sass scss/:wwwroot/css && node cssshake.js"
+  },
+  "keywords": [
+    "qbo"
+  ],
+  "files": [
+    "wwwroot/js/",
+    "src/"
+  ],
+  "dependencies": {
+    "@deltablot/dropzone": "^7.1.1",
+    "@quandis/qbo4.logging": "^4.0.1-CI-20240407-122601",
+    "@quandis/qbo4.ui": "^4.0.1-CI-20240430-215338",
+    "lit": "^3.1.3",
+    "reflect-metadata": "^0.2.2",
+    "tsyringe": "^4.8.0"
+  },
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4",
+    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "autoprefixer": "^10.4.19",
+    "clean-css": "^5.3.3",
+    "glob": "^10.3.10",
+    "html-webpack-plugin": "^5.5.3",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.72.0",
+    "typescript": "^5.4.3",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.10.0"
+  }
+}

package/src/Program.d.ts

@@ -0,0 +1,5 @@
+import 'reflect-metadata';
+export { services } from '@quandis/qbo4.configuration';
+export * from './qbo-file.js';
+export * from './qbo-document-upload.js';
+export * from './qbo-icon.js';

package/src/Program.js

@@ -0,0 +1,5 @@
+import 'reflect-metadata';
+export { services } from '@quandis/qbo4.configuration';
+export * from './qbo-file.js';
+export * from './qbo-document-upload.js';
+export * from './qbo-icon.js';

package/src/Program.ts

@@ -0,0 +1,6 @@
+import 'reflect-metadata';
+
+export { services } from '@quandis/qbo4.configuration';
+export * from './qbo-file.js';
+export * from './qbo-document-upload.js';
+export * from './qbo-icon.js';

package/src/qbo-document-upload.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from "lit";
+export declare class QboDocumentUpload extends LitElement {
+    static styles: import("lit").CSSResult[];
+    url: string;
+    chunking: boolean;
+    forceChunking: boolean;
+    chunkSize: number;
+    target: string;
+    acceptedFiles: string;
+    disablePreviews: boolean;
+    connectedCallback(): void;
+    firstUpdated(changedProperties: any): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo-document-upload.js

@@ -0,0 +1,113 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { dropzoneCss } from "./styles.js";
+import { Dropzone } from "@deltablot/dropzone";
+let QboDocumentUpload = class QboDocumentUpload extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.url = 'document/upload';
+        this.chunking = true;
+        this.forceChunking = true;
+        this.chunkSize = 500000;
+        this.target = '.dropzone';
+        this.acceptedFiles = '';
+        this.disablePreviews = false;
+    }
+    static { this.styles = [
+        dropzoneCss,
+        css `/* Add any custom styles here */`
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        Dropzone.autoDiscover = false;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        const targetElement = (this.target)
+            ? this.shadowRoot.querySelector(this.target) ?? this.shadowRoot?.firstElementChild
+            // : this;
+            : this.shadowRoot?.firstElementChild;
+        targetElement?.classList.add('dropzone');
+        const options = {
+            url: this.url,
+            chunking: this.chunking,
+            forceChunking: this.forceChunking,
+            chunkSize: this.chunkSize
+        };
+        //if (this.innerHTML != '') {
+        //    options.previewTemplate = this.innerHTML;
+        //}
+        const template = this.querySelector('*[slot=preview]');
+        if (template instanceof HTMLElement) {
+            options.previewTemplate = template.outerHTML;
+        }
+        // Enable override of Dropzone's automatically added div.dz-message
+        const message = this.querySelector('*[slot=message]');
+        message?.classList.add('dz-message');
+        message?.addEventListener('click', (event) => {
+            let t = event.target;
+            if (t.matches('input[type=file]'))
+                event.preventDefault();
+            dz.hiddenFileInput.click();
+        });
+        //if (message?.querySelector('input[type=file]')) {
+        //    options.clickable = false;
+        //}
+        const dz = new Dropzone(targetElement, options);
+        const component = this;
+        dz.on('success', function (file) {
+            var json = JSON.parse(file.xhr.responseText);
+            var event = new CustomEvent("qbo4-document-upload", { "detail": json, bubbles: true, cancelable: true });
+            component.dispatchEvent(event);
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    render() {
+        return html `<div class="dropzone">
+    <slot name="message"><div class="dz-message">Click or drag-and-drop to upload</div></slot>
+</div>`;
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboDocumentUpload.prototype, "url", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Boolean)
+], QboDocumentUpload.prototype, "chunking", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Boolean)
+], QboDocumentUpload.prototype, "forceChunking", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Number)
+], QboDocumentUpload.prototype, "chunkSize", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboDocumentUpload.prototype, "target", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboDocumentUpload.prototype, "acceptedFiles", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Boolean)
+], QboDocumentUpload.prototype, "disablePreviews", void 0);
+QboDocumentUpload = __decorate([
+    customElement('qbo-document-upload')
+], QboDocumentUpload);
+export { QboDocumentUpload };

package/src/qbo-document-upload.ts

@@ -0,0 +1,94 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { dropzoneCss } from "./styles.js";
+import { Dropzone } from "@deltablot/dropzone";
+
+@customElement('qbo-document-upload')
+export class QboDocumentUpload extends LitElement {
+
+    static styles = [
+        dropzoneCss,
+        css`/* Add any custom styles here */`
+    ];
+
+    @property()
+    url: string = 'document/upload';
+
+    @property()
+    chunking: boolean = true;
+
+    @property()
+    forceChunking: boolean = true;
+
+    @property()
+    chunkSize: number = 500000;
+
+    @property()
+    target: string = '.dropzone';
+
+    @property()
+    acceptedFiles: string = '';
+
+    @property()
+    disablePreviews: boolean = false;
+
+    connectedCallback() {
+        super.connectedCallback();
+        Dropzone.autoDiscover = false;
+    }
+
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        const targetElement = (this.target)
+            ? this.shadowRoot!.querySelector(this.target) ?? this.shadowRoot?.firstElementChild
+            // : this;
+            : this.shadowRoot?.firstElementChild;
+        targetElement?.classList.add('dropzone');
+        const options: any = {
+            url: this.url,
+            chunking: this.chunking,
+            forceChunking: this.forceChunking,
+            chunkSize: this.chunkSize
+        }
+        //if (this.innerHTML != '') {
+        //    options.previewTemplate = this.innerHTML;
+        //}
+        const template = this.querySelector('*[slot=preview]');
+        if (template instanceof HTMLElement) {
+            options.previewTemplate = template.outerHTML;
+        }
+
+        // Enable override of Dropzone's automatically added div.dz-message
+        const message = this.querySelector('*[slot=message]');
+        message?.classList.add('dz-message');
+        message?.addEventListener('click', (event) => {
+            let t = event.target as HTMLElement;
+            if (t.matches('input[type=file]'))
+                event.preventDefault();
+            dz.hiddenFileInput.click();
+        });
+
+        //if (message?.querySelector('input[type=file]')) {
+        //    options.clickable = false;
+        //}
+
+        const dz = new Dropzone(targetElement, options);
+
+        const component = this;
+        dz.on('success', function (file: any) {
+            var json = JSON.parse(file.xhr.responseText);
+            var event = new CustomEvent("qbo4-document-upload", { "detail": json, bubbles: true, cancelable: true });
+            component.dispatchEvent(event);
+        });
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+
+    render() {
+        return html`<div class="dropzone">
+    <slot name="message"><div class="dz-message">Click or drag-and-drop to upload</div></slot>
+</div>`
+    }
+}

package/src/qbo-file.d.ts

@@ -0,0 +1,55 @@
+import { LitElement, TemplateResult } from "lit";
+export declare class FileWrapper {
+    file: File;
+    id: string;
+    progress: number;
+    bytesSent: number;
+    response: any;
+    status: string;
+    thumbnail: string | null;
+    constructor(file: File);
+    equals(file: File): boolean;
+}
+export declare class QboFile extends LitElement {
+    static styles: import("lit").CSSResult[];
+    url: string;
+    chunking: boolean;
+    forceChunking: boolean;
+    chunkSize: number;
+    target: string;
+    acceptedFiles: string;
+    disablePreviews: boolean;
+    multiple: boolean;
+    accept: string;
+    type: string;
+    files: FileWrapper[];
+    percent: number;
+    queuedClass: string;
+    uploadingClass: string;
+    successClass: string;
+    erroredClass: string;
+    fileInput: HTMLInputElement | undefined | null;
+    fileTemplate: HTMLTemplateElement | undefined | null;
+    fileLength: HTMLElement | null;
+    fileName: HTMLElement | null;
+    progressBar: HTMLProgressElement | null;
+    dropTarget: HTMLElement;
+    processing: boolean;
+    connectedCallback(): void;
+    firstUpdated(changedProperties: any): void;
+    disconnectedCallback(): void;
+    handleDragEnter(event: any): void;
+    handleDragOver(event: any): void;
+    handleDragLeave(event: any): void;
+    handleDrop(event: DragEvent): void;
+    addFile(file: File): void;
+    removeFile(index: number, event?: MouseEvent | null): void;
+    inputClick(event: any): void;
+    process(event: any): void;
+    setValue(element: HTMLElement | null, value: any): void;
+    updatePercent(): void;
+    render(): TemplateResult<1>;
+    replicate(template: HTMLTemplateElement): void;
+    uploadFile(wrapper: FileWrapper): Promise<void>;
+    readFileAsArrayBuffer(file: Blob): Promise<ArrayBuffer>;
+}