@exmg/exm-upload 1.1.36 → 1.2.0

package/.rollup.cache/root/repo/packages/exm-upload/dist/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 ExmUploadItemBase 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' | 'form-data' | '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/.rollup.cache/root/repo/packages/exm-upload/dist/exm-upload-item-base.js

@@ -0,0 +1,175 @@
+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 ExmUploadItemBase 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,
+        };
+        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 })
+], ExmUploadItemBase.prototype, "uploadUrl", void 0);
+__decorate([
+    property({ type: String })
+], ExmUploadItemBase.prototype, "customAdapterPath", void 0);
+__decorate([
+    property({ type: String })
+], ExmUploadItemBase.prototype, "serverType", void 0);
+__decorate([
+    property({ type: String })
+], ExmUploadItemBase.prototype, "responseType", void 0);
+__decorate([
+    property({ type: Object })
+], ExmUploadItemBase.prototype, "uploadService", void 0);
+__decorate([
+    property({ type: Object })
+], ExmUploadItemBase.prototype, "item", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmUploadItemBase.prototype, "allowCropping", void 0);
+__decorate([
+    property({ type: Number })
+], ExmUploadItemBase.prototype, "aspectRatio", void 0);
+//# sourceMappingURL=exm-upload-item-base.js.map

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

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

package/.rollup.cache/root/repo/packages/exm-upload/dist/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 { ExmUploadItemBase } from './exm-upload-item-base.js';
+let ExmUploadItem = class ExmUploadItem extends ExmUploadItemBase {
+};
+ExmUploadItem.styles = style;
+ExmUploadItem = __decorate([
+    customElement('exm-upload-item')
+], ExmUploadItem);
+export { ExmUploadItem };
+//# sourceMappingURL=exm-upload-item.js.map

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

@@ -0,0 +1,19 @@
+import { ExmUploadBase } 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 ExmUpload extends ExmUploadBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-upload': ExmUpload;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { __decorate } from "tslib";
+import { style } from './styles/exm-upload-styles-css.js';
+import { ExmUploadBase } 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 ExmUpload = class ExmUpload extends ExmUploadBase {
+};
+ExmUpload.styles = style;
+ExmUpload = __decorate([
+    customElement('exm-upload')
+], ExmUpload);
+export { ExmUpload };
+//# sourceMappingURL=exm-upload.js.map

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

@@ -0,0 +1,19 @@
+export { ExmUpload } from './exm-upload.js';
+export { ExmUploadBase } from './exm-upload-base.js';
+export { ExmUploadCrop } from './exm-upload-crop.js';
+export { ExmUploadCropBase } from './exm-upload-crop-base.js';
+export { ExmUploadDropArea } from './exm-upload-drop-area.js';
+export { ExmUploadDropAreaBase } from './exm-upload-drop-area-base.js';
+export { ExmUploadItem } from './exm-upload-item.js';
+export { ExmUploadItemBase } from './exm-upload-item-base.js';
+export { ExmDialogUpload } from './exm-dialog-upload.js';
+export { ExmDialogUploadBase } from './exm-dialog-upload-base.js';
+export { ExmUploadInput } from './exm-upload-input.js';
+export { FileData, FileUploadConfig } from './types.js';
+export { UploadAdapter, UploadConfig } from './upload/types.js';
+export { UploadService } from './upload/index.js';
+export { style as exmgUploadStyles } from './styles/exm-upload-styles-css.js';
+export { style as exmgUploadDropAreaStyles } from './styles/exm-upload-drop-area-styles-css.js';
+export { style as exmgUploadCropStyles } from './styles/exm-upload-crop-styles-css.js';
+export { style as exmgUploadItemStyles } from './styles/exm-upload-item-styles-css.js';
+export { style as exmgDialogUploadStyles } from './styles/exm-dialog-upload-css.js';

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

@@ -0,0 +1,18 @@
+export { ExmUpload } from './exm-upload.js';
+export { ExmUploadBase } from './exm-upload-base.js';
+export { ExmUploadCrop } from './exm-upload-crop.js';
+export { ExmUploadCropBase } from './exm-upload-crop-base.js';
+export { ExmUploadDropArea } from './exm-upload-drop-area.js';
+export { ExmUploadDropAreaBase } from './exm-upload-drop-area-base.js';
+export { ExmUploadItem } from './exm-upload-item.js';
+export { ExmUploadItemBase } from './exm-upload-item-base.js';
+export { ExmDialogUpload } from './exm-dialog-upload.js';
+export { ExmDialogUploadBase } from './exm-dialog-upload-base.js';
+export { ExmUploadInput } from './exm-upload-input.js';
+export { UploadService } from './upload/index.js';
+export { style as exmgUploadStyles } from './styles/exm-upload-styles-css.js';
+export { style as exmgUploadDropAreaStyles } from './styles/exm-upload-drop-area-styles-css.js';
+export { style as exmgUploadCropStyles } from './styles/exm-upload-crop-styles-css.js';
+export { style as exmgUploadItemStyles } from './styles/exm-upload-item-styles-css.js';
+export { style as exmgDialogUploadStyles } from './styles/exm-dialog-upload-css.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-upload/dist/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/.rollup.cache/root/repo/packages/exm-upload/dist/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/.rollup.cache/root/repo/packages/exm-upload/dist/styles/exm-dialog-upload-css.d.ts

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

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

@@ -0,0 +1,253 @@
+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;
+
+    &::backdrop {
+      background: none;
+    }
+  }
+
+  dialog[open] {
+    display: flex;
+  }
+
+  .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));
+    flex: 1;
+    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;
+  }
+`;
+//# sourceMappingURL=exm-dialog-upload-css.js.map

package/.rollup.cache/root/repo/packages/exm-upload/dist/styles/exm-upload-crop-styles-css.d.ts

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