@exmg/exm-upload 1.1.9 → 1.1.10-alpha.26

package/.rollup.cache/root/repo/packages/exm-upload/dist/exm-dialog-upload-base.d.ts

@@ -0,0 +1,90 @@
+import '@material/web/dialog/dialog.js';
+import { MdDialog } from '@material/web/dialog/dialog.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { ExmUpload } from './exm-upload.js';
+import { FileData } from './types.js';
+export declare const CLOSE_ACTION = "close";
+export declare class ExmDialogUploadBase extends ExmgElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    open: boolean;
+    /**
+     * Set to make the dialog position draggable.
+     */
+    draggable: boolean;
+    /**
+     * Title of the dialog
+     */
+    title: string;
+    type?: 'alert' | undefined;
+    /**
+     * Submit button copy
+     */
+    submitBtn: string;
+    /**
+     * Cancel button copy
+     */
+    cancelBtn: string;
+    /**
+     * Icon of the dialog
+     */
+    icon: string;
+    /**
+     * Internall used to show button spinner.
+     */
+    submitting: boolean;
+    protected dialog: MdDialog;
+    _cropMode: boolean;
+    _hasItems: boolean;
+    protected getUploadElement(): ExmUpload;
+    /**
+     * Copy for done button
+     */
+    buttonSaveCopy: string;
+    /**
+     * Copy for image crop done button
+     */
+    buttonCropDoneCopy: string;
+    firstUpdated(): void;
+    _startCrop(): void;
+    _stopCrop(): void;
+    /**
+     * Opens and shows the dialog. This is equivalent to setting the `open`
+     * property to true.
+     */
+    show(): void;
+    /**
+     * Closes the dialog. This is equivalent to setting the `open`
+     * property to false.
+     */
+    close(): void;
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow(): void;
+    _getImageUploadElement(): ExmUpload | null;
+    _handleSuccess(): void;
+    _handleClose(): void;
+    _handleFilesChanged(e: CustomEvent<{
+        files: FileData[];
+    }>): void;
+    /**
+     * Action method that needs to be implemented
+     * @param {CustomEvent} e
+     */
+    doAction?(url?: string): Promise<void> | void;
+    protected _handleSubmit(): Promise<void>;
+    _cancelActiveCrop(): void;
+    _saveActiveCrop(): void;
+    /**
+     * Method should be overriden to render upload element
+     */
+    protected renderContent(): import("lit-html").TemplateResult<1>;
+    renderActions(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/.rollup.cache/root/repo/packages/exm-upload/dist/exm-dialog-upload-base.js

@@ -0,0 +1,226 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import '@material/web/dialog/dialog.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import { property, query, state } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base';
+export const CLOSE_ACTION = 'close';
+export class ExmDialogUploadBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opens the dialog when set to `true` and closes it when set to `false`.
+         */
+        this.open = false;
+        /**
+         * Set to make the dialog position draggable.
+         */
+        this.draggable = false;
+        /**
+         * Title of the dialog
+         */
+        this.title = 'Upload files';
+        this.type = 'alert';
+        /**
+         * Submit button copy
+         */
+        this.submitBtn = 'Save';
+        /**
+         * Cancel button copy
+         */
+        this.cancelBtn = 'Cancel';
+        /**
+         * Icon of the dialog
+         */
+        this.icon = 'close';
+        /**
+         * Internall used to show button spinner.
+         */
+        this.submitting = false;
+        this._cropMode = false;
+        this._hasItems = false;
+        /**
+         * Copy for done button
+         */
+        this.buttonSaveCopy = 'Save';
+        /**
+         * Copy for image crop done button
+         */
+        this.buttonCropDoneCopy = 'Done';
+    }
+    getUploadElement() {
+        return this.shadowRoot.querySelector('exm-upload');
+    }
+    firstUpdated() {
+        const uploadElement = this.getUploadElement();
+        if (uploadElement) {
+            uploadElement.isModeDialog = true;
+        }
+    }
+    _startCrop() {
+        this._cropMode = true;
+    }
+    _stopCrop() {
+        this._cropMode = false;
+    }
+    /**
+     * Opens and shows the dialog. This is equivalent to setting the `open`
+     * property to true.
+     */
+    show() {
+        this.open = true;
+    }
+    /**
+     * Closes the dialog. This is equivalent to setting the `open`
+     * property to false.
+     */
+    close() {
+        this.open = false;
+    }
+    /**
+     * Opens and shows the dialog if it is closed; otherwise closes it.
+     */
+    toggleShow() {
+        if (this.open) {
+            this.close();
+        }
+        else {
+            this.show();
+        }
+    }
+    _getImageUploadElement() {
+        return this.querySelector('exm-upload');
+    }
+    _handleSuccess() {
+        this._hasItems = true;
+    }
+    _handleClose() {
+        const uploadElement = this.getUploadElement();
+        if (uploadElement) {
+            uploadElement.reset();
+        }
+        this.open = false;
+    }
+    _handleFilesChanged(e) {
+        const hasFiles = (e.detail.files || []).filter((f) => f.status === 'UPLOADED').length > 0;
+        this._hasItems = hasFiles;
+    }
+    async _handleSubmit() {
+        const uploadElement = this.getUploadElement();
+        const [url] = uploadElement.getValues() || [];
+        if (this.doAction) {
+            try {
+                this.submitting = true;
+                await this.doAction(url);
+                this.fire('action-success');
+            }
+            catch (error) {
+                this.fire('action-error', { message: error instanceof Error ? error.message : 'Unkbnown error' }, true);
+            }
+            finally {
+                this.submitting = false;
+                this.close();
+            }
+        }
+        else {
+            this.fire('action-submit', { url }, true);
+        }
+    }
+    _cancelActiveCrop() {
+        const uploadElement = this.getUploadElement();
+        if (uploadElement) {
+            uploadElement.cancelActiveCrop();
+        }
+    }
+    _saveActiveCrop() {
+        const uploadElement = this.getUploadElement();
+        if (uploadElement) {
+            uploadElement.saveActiveCrop();
+        }
+    }
+    /**
+     * Method should be overriden to render upload element
+     */
+    renderContent() {
+        return html `<slot></slot>`;
+    }
+    renderActions() {
+        if (this._cropMode) {
+            return html `
+        <md-text-button slot="footer" dialogFocus @click=${this._cancelActiveCrop}>Back</md-text-button>
+        <md-filled-button slot="footer" @click=${this._saveActiveCrop}>${this.buttonCropDoneCopy}</md-filled-button>
+      `;
+        }
+        return html `
+      <md-text-button slot="footer" dialogFocus @click=${() => this.close()}>${this.cancelBtn}</md-text-button>
+      <md-filled-button slot="footer" @click=${this._handleSubmit} ?disabled=${!this._hasItems || this.submitting}
+        >${this.buttonSaveCopy}</md-filled-button
+      >
+    `;
+    }
+    render() {
+        const { type, draggable } = this;
+        return html ` <md-dialog .draggable=${draggable} .type=${type} .open=${this.open} @closed=${this._handleClose}>
+      <span slot="headline">
+        <md-icon-button @click=${() => this.close()}><md-icon>close</md-icon></md-icon-button>
+        <span class="headline">${this.title}</span>
+      </span>
+      <div slot="content">
+        <div class="content">
+          <span
+            @files-changed=${this._handleFilesChanged}
+            @upload-success=${this._handleSuccess}
+            @crop-cancel=${this._stopCrop}
+            @crop-done=${this._stopCrop}
+            @crop-start=${this._startCrop}
+            >${this.renderContent()}</span
+          >
+        </div>
+      </div>
+      <div slot="actions">${this.renderActions()}</div>
+    </md-dialog>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], ExmDialogUploadBase.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmDialogUploadBase.prototype, "draggable", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogUploadBase.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogUploadBase.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogUploadBase.prototype, "submitBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogUploadBase.prototype, "cancelBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogUploadBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmDialogUploadBase.prototype, "submitting", void 0);
+__decorate([
+    query('md-dialog')
+], ExmDialogUploadBase.prototype, "dialog", void 0);
+__decorate([
+    state()
+], ExmDialogUploadBase.prototype, "_cropMode", void 0);
+__decorate([
+    state()
+], ExmDialogUploadBase.prototype, "_hasItems", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogUploadBase.prototype, "buttonSaveCopy", void 0);
+__decorate([
+    property({ type: String })
+], ExmDialogUploadBase.prototype, "buttonCropDoneCopy", void 0);
+//# sourceMappingURL=exm-dialog-upload-base.js.map

package/.rollup.cache/root/repo/packages/exm-upload/dist/exm-dialog-upload.d.ts

@@ -0,0 +1,11 @@
+import { ExmDialogUploadBase } from './exm-dialog-upload-base.js';
+import { ExmUpload } from './exm-upload.js';
+export declare class ExmDialogUpload extends ExmDialogUploadBase {
+    static styles: import("lit").CSSResult[];
+    protected getUploadElement(): ExmUpload;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-dialog-upload': ExmDialogUpload;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-upload/dist/exm-dialog-upload.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-dialog-upload-css.js';
+import { ExmDialogUploadBase } from './exm-dialog-upload-base.js';
+let ExmDialogUpload = class ExmDialogUpload extends ExmDialogUploadBase {
+    getUploadElement() {
+        return this.querySelector('exm-upload');
+    }
+};
+ExmDialogUpload.styles = [style];
+ExmDialogUpload = __decorate([
+    customElement('exm-dialog-upload')
+], ExmDialogUpload);
+export { ExmDialogUpload };
+//# sourceMappingURL=exm-dialog-upload.js.map

package/.rollup.cache/root/repo/packages/exm-upload/dist/exm-upload-base.d.ts

@@ -0,0 +1,148 @@
+import '@material/web/icon/icon.js';
+import { ExmUploadCrop } from './exm-upload-crop.js';
+import { FileData } from './types.js';
+import './exm-upload-item.js';
+import './exm-upload-crop.js';
+import './exm-upload-drop-area.js';
+import { ExmgElement } from '@exmg/lit-base';
+import Cropper from 'cropperjs';
+export declare class ExmUploadBase extends ExmgElement {
+    /**
+     * The id of the element that the upload is anchored to. This element
+     * must be a sibling of the upload.
+     */
+    for?: string;
+    /**
+     * Files addded to component
+     */
+    files: FileData[];
+    /**
+     * Accepted file types seperated by comma
+     */
+    accept?: string | undefined;
+    /**
+     * The max file size allowed to upload e.g. '20mb'
+     */
+    maxSize: string;
+    /**
+     * Determines if multiple files can be selected. When false maxAmount is set to 1 automatically
+     */
+    multiple: boolean;
+    /**
+     * The max amount of items allowed to upload when in multiple mode
+     */
+    maxAmount?: number;
+    /**
+     * Disable the upload component useful for forms
+     */
+    disabled: boolean;
+    /**
+     * Admin User session will be set on request header for authentication
+     */
+    customAdapterPath?: string;
+    /**
+     * Optional property. If not set it will look for the window.emconfig.backendHost
+     */
+    uploadUrl?: string;
+    /**
+     * The upload response type
+     */
+    responseType: '' | 'json' | 'text' | 'blob' | 'arraybuffer';
+    /**
+     * The upload response type
+     */
+    serverType: 'xhr' | 'local' | 'form-data' | 'custom';
+    /**
+     * The CropperJS config see: https://github.com/fengyuanchen/cropperjs#options
+     */
+    cropperConfig: Cropper.Options;
+    _cropperConfig: Cropper.Options;
+    /**
+     * Internal state to check if user is cropping or not
+     */
+    _isCropping: boolean;
+    isModeDialog: boolean;
+    /**
+     * Internal state to check if file is uploaded or not
+     */
+    _uploaded: boolean;
+    cropSection?: ExmUploadCrop;
+    /**
+     * Allow cropping can only be used when fixedResolution is not set
+     */
+    allowCropping: boolean;
+    /**
+     * when set the image must be exactly the given resolution (for example 600x400)
+     */
+    fixedResolution?: string;
+    fileElement?: HTMLInputElement;
+    itemContainer?: ExmUploadCrop;
+    getValues(): (string | undefined)[];
+    /**
+     * Extract files from either file input or drop event
+     * @param event
+     * @returns FileList[] | []
+     */
+    private _getFiles;
+    /**
+     * Resets the upload component
+     * @public
+     */
+    reset(): void;
+    private prepareFiles;
+    /**
+     * Handles file change which also validates
+     * @param event
+     * @fires files-changed
+     */
+    private _handleChange;
+    /**
+     * Validator function to check file before upload to server
+     * @param FileData
+     */
+    private _validateFile;
+    /**
+     * Enable cropping mode
+     * @param e
+     */
+    _handleCropping(e: CustomEvent): void;
+    /**
+     * Removes file from files array
+     * @param id
+     */
+    private removeFile;
+    /**
+     * Removes the file out of the files array.
+     * @fires file-removed
+     * @param e
+     * @param id
+     */
+    _handleRemove(e: CustomEvent): void;
+    /**
+     * Handles crop done and toggles cropping state
+     * @fires crop-done
+     * @param e
+     */
+    _handleCropDone(e: CustomEvent): Promise<void>;
+    /**
+     * Handles crop cancel and toggles cropping state
+     * @fires crop-cancel
+     */
+    cancelActiveCrop(): void;
+    saveActiveCrop(): void;
+    /**
+     * Error handling helper function used for all validation
+     * @param message
+     * @param item
+     */
+    _handleError(message: string, item: FileData): void;
+    openFileSelector(e: CustomEvent): void;
+    renderDescription(): string;
+    /**
+     * Renders the file items
+     */
+    renderFileItems(): unknown;
+    renderUploadCrop(): import("lit-html").TemplateResult<1>;
+    renderUploadDropArea(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}