@exmg/exm-upload 1.0.0

package/src/exm-upload-item-base.d.ts

@@ -0,0 +1,45 @@
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/progress/linear-progress.js';
+import { FileData } from './types.js';
+import { UploadService } from './upload/index.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare class ExmgUploadItemBase extends ExmgElement {
+    /**
+     * Optional property. If not set it will look for the window.emconfig.backendHost
+     */
+    uploadUrl?: string;
+    customAdapterPath?: string;
+    /**
+     * The upload response type
+     */
+    serverType: 'xhr' | 'local' | 'custom';
+    /**
+     * The upload response type
+     */
+    responseType?: '' | 'json' | 'text' | 'blob' | 'arraybuffer';
+    uploadService?: UploadService;
+    item?: FileData;
+    allowCropping?: boolean;
+    aspectRatio?: number;
+    firstUpdated(): Promise<void>;
+    private _handleEditClick;
+    private _handleRemoveClick;
+    /**
+     * Error handling helper function used for all validation
+     * @param message
+     * @param item
+     */
+    handleError(message: string): void;
+    /**
+     * Handle upload from added files
+     */
+    handleFileUpload(): Promise<void>;
+    private renderStatus;
+    private renderActions;
+    private _renderWarning;
+    private renderUploading;
+    private renderUploaded;
+    private renderInvalid;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-upload-item-base.js

@@ -0,0 +1,177 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/progress/linear-progress.js';
+import { formatBytes, isImage } from './utils.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { UploadService } from './upload/index.js';
+import { ExmgElement } from '@exmg/lit-base';
+export class ExmgUploadItemBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The upload response type
+         */
+        this.serverType = 'xhr';
+    }
+    async firstUpdated() {
+        var _a;
+        // @ts-ignore
+        const uploadUrl = this.uploadUrl;
+        const headers = window.uploadDefaults ? window.uploadDefaults.headers || {} : {};
+        const payload = {
+            uploadUrl: uploadUrl || ((_a = window.uploadDefaults) === null || _a === void 0 ? void 0 : _a.uploadUrl) || undefined,
+            headers,
+            responseType: this.responseType,
+        };
+        if (this.customAdapterPath) {
+            payload.customAdapterPath = this.customAdapterPath || window.uploadDefaults.customAdapterPath;
+        }
+        this.uploadService = await UploadService.create(this.serverType, payload);
+        this.handleFileUpload();
+    }
+    _handleEditClick() {
+        this.fire('edit-image', this.item, true);
+    }
+    _handleRemoveClick() {
+        var _a, _b;
+        (_a = this.uploadService) === null || _a === void 0 ? void 0 : _a.abort();
+        this.fire('remove-item', (_b = this.item) === null || _b === void 0 ? void 0 : _b.id, true);
+    }
+    /**
+     * Error handling helper function used for all validation
+     * @param message
+     * @param item
+     */
+    handleError(message) {
+        this.item.invalid = true;
+        this.item.status = 'INVALID';
+        this.item.error = message;
+        this.requestUpdate('item');
+    }
+    /**
+     * Handle upload from added files
+     */
+    async handleFileUpload() {
+        var _a;
+        if (!this.item) {
+            return;
+        }
+        // Check if file is valid before attempting the upload
+        if (!this.item.invalid) {
+            try {
+                const url = await ((_a = this.uploadService) === null || _a === void 0 ? void 0 : _a.upload(this.item.file, (progress) => {
+                    this.item.progress = progress;
+                    this.requestUpdate('item');
+                }));
+                this.item.url = url;
+                this.item.status = 'UPLOADED';
+                this.requestUpdate('item');
+                this.fire('upload-success', this.item, true);
+            }
+            catch (error) {
+                this.handleError(error);
+                throw new Error(error);
+            }
+        }
+    }
+    renderStatus() {
+        const { status } = this.item;
+        switch (status) {
+            case 'UPLOADING':
+                return this.renderUploading();
+            case 'UPLOADED':
+                return this.renderUploaded();
+            case 'INVALID':
+                return this.renderInvalid();
+            case 'WARNING':
+                return this._renderWarning();
+            default:
+                return nothing;
+        }
+    }
+    renderActions() {
+        const { item, allowCropping } = this;
+        const { status } = item;
+        return html `${status === 'UPLOADED' && isImage(item.file) && allowCropping
+            ? html `<md-icon-button @click=${this._handleEditClick}>
+            <md-icon>edit</md-icon>
+          </md-icon-button>`
+            : nothing}
+      <md-icon-button @click=${this._handleRemoveClick}>
+        <md-icon>delete</md-icon>
+      </md-icon-button>`;
+    }
+    _renderWarning() {
+        return html `<md-icon class="warning-icon">warning</md-icon>`;
+    }
+    renderUploading() {
+        return html `<span class="loader"></span> `;
+    }
+    renderUploaded() {
+        return html `<md-icon class="success-icon">check</md-icon>`;
+    }
+    renderInvalid() {
+        return html `<md-icon class="error-icon">error</md-icon>`;
+    }
+    render() {
+        var _a, _b, _c;
+        const file = (_a = this.item) === null || _a === void 0 ? void 0 : _a.file;
+        const { progress, status } = this.item;
+        const originalName = file === null || file === void 0 ? void 0 : file.name;
+        const fileName = originalName.substring(0, originalName.lastIndexOf('.'));
+        const fileType = originalName.substring(originalName.lastIndexOf('.') + 1, originalName.length);
+        return html `
+      <div class="item">
+        <div class="status vertical-center">${this.renderStatus()}</div>
+        <div class="name-container">
+          <span class="file-name">${fileName}</span>
+          ${status !== 'INVALID' && status !== 'WARNING'
+            ? html ` <md-linear-progress
+                max="100"
+                class="progress"
+                value="${ifDefined(progress || 0)}"
+              ></md-linear-progress>`
+            : nothing}
+          ${((_b = this.item) === null || _b === void 0 ? void 0 : _b.error)
+            ? html ` <span class="file-error">${(_c = this.item) === null || _c === void 0 ? void 0 : _c.error}</span> `
+            : html ` <div class="file-details vertical-center">
+                <div class="vertical-center">
+                  <span class="file-size badge">${fileType.toUpperCase()}</span>
+                  <span class="file-type badge">${formatBytes(file === null || file === void 0 ? void 0 : file.size)}</span>
+                </div>
+                <span class="progress">${Math.round((progress || 0) * 10) / 10}%</span>
+              </div>`}
+        </div>
+        <div class="actions vertical-center">${this.renderActions()}</div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmgUploadItemBase.prototype, "uploadUrl", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadItemBase.prototype, "customAdapterPath", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadItemBase.prototype, "serverType", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadItemBase.prototype, "responseType", void 0);
+__decorate([
+    property({ type: Object })
+], ExmgUploadItemBase.prototype, "uploadService", void 0);
+__decorate([
+    property({ type: Object })
+], ExmgUploadItemBase.prototype, "item", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadItemBase.prototype, "allowCropping", void 0);
+__decorate([
+    property({ type: Number })
+], ExmgUploadItemBase.prototype, "aspectRatio", void 0);
+//# sourceMappingURL=exm-upload-item-base.js.map

package/src/exm-upload-item.d.ts

@@ -0,0 +1,9 @@
+import { ExmgUploadItemBase } from './exm-upload-item-base.js';
+export declare class ExmgUploadItem extends ExmgUploadItemBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-upload-item': ExmgUploadItem;
+    }
+}

package/src/exm-upload-item.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-upload-item-styles-css.js';
+import { ExmgUploadItemBase } from './exm-upload-item-base.js';
+let ExmgUploadItem = class ExmgUploadItem extends ExmgUploadItemBase {
+};
+ExmgUploadItem.styles = style;
+ExmgUploadItem = __decorate([
+    customElement('exm-upload-item')
+], ExmgUploadItem);
+export { ExmgUploadItem };
+//# sourceMappingURL=exm-upload-item.js.map

package/src/exm-upload.d.ts

@@ -0,0 +1,19 @@
+import { ExmgUploadBase } from './exm-upload-base.js';
+/**
+ * `exm-upload`
+ * Example:
+ * ```html
+ *  <div>
+ *    <input id="imageUpload" name="imageUrl" />
+ *    <exm-upload for="imageUpload"> </exm-upload>
+ *  </div>
+ * ```
+ */
+export declare class ExmgUpload extends ExmgUploadBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-upload': ExmgUpload;
+    }
+}

package/src/exm-upload.js

@@ -0,0 +1,22 @@
+import { __decorate } from "tslib";
+import { style } from './styles/exm-upload-styles-css.js';
+import { ExmgUploadBase } from './exm-upload-base.js';
+import { customElement } from 'lit/decorators.js';
+/**
+ * `exm-upload`
+ * Example:
+ * ```html
+ *  <div>
+ *    <input id="imageUpload" name="imageUrl" />
+ *    <exm-upload for="imageUpload"> </exm-upload>
+ *  </div>
+ * ```
+ */
+let ExmgUpload = class ExmgUpload extends ExmgUploadBase {
+};
+ExmgUpload.styles = style;
+ExmgUpload = __decorate([
+    customElement('exm-upload')
+], ExmgUpload);
+export { ExmgUpload };
+//# sourceMappingURL=exm-upload.js.map

package/src/mixins/exm-upload-drag-drop-mixin.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class DragAndDropInterface {
+    dragOver: boolean;
+    onDragOver(): void;
+    onDragLeave(): void;
+    onDrop(): void;
+}
+export declare const DragAndDropMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DragAndDropInterface> & T;
+export {};

package/src/mixins/exm-upload-drag-drop-mixin.js

@@ -0,0 +1,28 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+export const DragAndDropMixin = (superClass) => {
+    class DragAndDropMixin extends superClass {
+        constructor() {
+            super(...arguments);
+            this.dragOver = false;
+        }
+        onDragOver(event) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.dragOver = true;
+        }
+        onDragLeave(event) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.dragOver = false;
+        }
+        onDrop() {
+            this.dragOver = false;
+        }
+    }
+    __decorate([
+        property({ type: Boolean })
+    ], DragAndDropMixin.prototype, "dragOver", void 0);
+    return DragAndDropMixin;
+};
+//# sourceMappingURL=exm-upload-drag-drop-mixin.js.map

package/src/styles/exm-dialog-upload-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-dialog-upload-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}[slot=headline]{display:flex;flex-direction:row-reverse;align-items:center}[showing-fullscreen] [slot=headline]{flex-direction:row}.headline{flex:1;display:block;text-align:left}exm-upload,::slotted(exm-upload){width:460px}`;
+export default style;
+//# sourceMappingURL=exm-dialog-upload-css.js.map

package/src/styles/exm-dialog-upload.scss

@@ -0,0 +1,22 @@
+@use '@material/web/dialog/internal/dialog-styles';
+
+[slot='headline'] {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+[showing-fullscreen] [slot='headline'] {
+  flex-direction: row;
+}
+
+.headline {
+  flex: 1;
+  display: block;
+  text-align: left;
+}
+
+exm-upload,
+::slotted(exm-upload) {
+  width: 460px;
+}

package/src/styles/exm-upload-crop-styles-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-upload-crop-styles-css.js

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+export const style = css `#image{z-index:99999;display:flex;max-width:100%}.image-container{max-width:300px;max-height:300px}.actions{margin-top:8px;display:flex;justify-content:flex-end}/*!
+ * Cropper.js v1.5.13
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2022-11-20T05:30:43.444Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none !important;max-width:none !important;min-height:0 !important;min-width:0 !important;width:100%}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.3333333333%;left:0;top:33.3333333333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.3333333333%;top:0;width:33.3333333333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center::before,.cropper-center::after{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center::before{height:1px;left:-3px;top:0;width:7px}.cropper-center::after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media(min-width: 768px){.cropper-point.point-se{height:15px;width:15px}}@media(min-width: 992px){.cropper-point.point-se{height:10px;width:10px}}@media(min-width: 1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se::before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none !important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}`;
+export default style;
+//# sourceMappingURL=exm-upload-crop-styles-css.js.map