@exmg/exm-upload 1.2.1 → 1.2.3

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

@@ -2,6 +2,7 @@ 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-file-item.js';
 import './exm-upload-crop.js';
 import './exm-upload-drop-area.js';
 import { ExmgElement } from '@exmg/lit-base';
@@ -52,6 +53,10 @@ export declare class ExmUploadBase extends ExmgElement {
      * The upload response type
      */
     serverType: 'xhr' | 'local' | 'form-data' | 'custom';
+    /**
+     * The upload response type
+     */
+    noUpload: boolean;
     /**
      * The CropperJS config see: https://github.com/fengyuanchen/cropperjs#options
      */

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

@@ -7,6 +7,7 @@ import '@material/web/icon/icon.js';
 import { FileUploadError } from './types.js';
 // File upload imports
 import './exm-upload-item.js';
+import './exm-upload-file-item.js';
 import './exm-upload-crop.js';
 import './exm-upload-drop-area.js';
 import { isCorrectResolution, isImage, isSizeValid, isTypeValidExtension } from './utils.js';
@@ -43,6 +44,10 @@ export class ExmUploadBase extends ExmgElement {
          * The upload response type
          */
         this.serverType = 'xhr';
+        /**
+         * The upload response type
+         */
+        this.noUpload = false;
         /**
          * The CropperJS config see: https://github.com/fengyuanchen/cropperjs#options
          */
@@ -231,6 +236,14 @@ export class ExmUploadBase extends ExmgElement {
      * Renders the file items
      */
     renderFileItems() {
+        if (this.noUpload) {
+            return repeat(this.files || [], (file) => file.id, (item) => html `<exm-upload-file-item
+            class="item"
+            id=${item.id}
+            @remove-item=${this._handleRemove}
+            .item=${item}
+          ></exm-upload-file-item>`);
+        }
         return repeat(this.files || [], (file) => file.id, (item) => html `<exm-upload-item
           class="item"
           id=${item.id}
@@ -337,6 +350,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ExmUploadBase.prototype, "serverType", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmUploadBase.prototype, "noUpload", void 0);
 __decorate([
     property({ type: Object }),
     observer(function (value) {

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

@@ -0,0 +1,11 @@
+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 { ExmgElement } from '@exmg/lit-base';
+export declare class ExmUploadFileItemBase extends ExmgElement {
+    item?: FileData;
+    private _handleRemoveClick;
+    private renderActions;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,47 @@
+import { __decorate } from "tslib";
+import { html } 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, getFileExtension, getFileName } from './utils.js';
+import { ExmgElement } from '@exmg/lit-base';
+export class ExmUploadFileItemBase extends ExmgElement {
+    _handleRemoveClick() {
+        var _a;
+        this.fire('remove-item', (_a = this.item) === null || _a === void 0 ? void 0 : _a.id, true);
+    }
+    renderActions() {
+        return html ` <md-icon-button @click=${this._handleRemoveClick}>
+      <md-icon>delete</md-icon>
+    </md-icon-button>`;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const fileName = getFileName((_a = this.item) === null || _a === void 0 ? void 0 : _a.file);
+        const fileType = getFileExtension((_b = this.item) === null || _b === void 0 ? void 0 : _b.file);
+        return html `
+      <div class="item">
+        <div class="status vertical-center">
+          <md-icon class="success-icon">check</md-icon>
+        </div>
+        <div class="name-container">
+          <span class="file-name">${fileName}</span>
+          ${((_c = this.item) === null || _c === void 0 ? void 0 : _c.error)
+            ? html ` <span class="file-error">${(_d = this.item) === null || _d === void 0 ? void 0 : _d.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((_f = (_e = this.item) === null || _e === void 0 ? void 0 : _e.file) === null || _f === void 0 ? void 0 : _f.size)}</span>
+                </div>
+              </div>`}
+        </div>
+        <div class="actions vertical-center">${this.renderActions()}</div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Object })
+], ExmUploadFileItemBase.prototype, "item", void 0);
+//# sourceMappingURL=exm-upload-file-item-base.js.map

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

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

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

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

@@ -31,3 +31,5 @@ export declare const formatBytes: (bytes: number) => string;
  */
 export declare const isImage: (file: File) => boolean | undefined;
 export declare const isCorrectResolution: (image: File, resolution: string) => Promise<unknown>;
+export declare const getFileExtension: (file?: File) => string;
+export declare const getFileName: (file?: File) => string;

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

@@ -86,4 +86,18 @@ export const isCorrectResolution = (image, resolution) => {
         };
     });
 };
+export const getFileExtension = (file) => {
+    if (!file) {
+        return '';
+    }
+    const originalName = file.name;
+    return originalName.substring(originalName.lastIndexOf('.') + 1, originalName.length);
+};
+export const getFileName = (file) => {
+    if (!file) {
+        return '';
+    }
+    const originalName = file === null || file === void 0 ? void 0 : file.name;
+    return originalName.substring(0, originalName.lastIndexOf('.'));
+};
 //# sourceMappingURL=utils.js.map

package/dist/exm-upload-base.d.ts

@@ -2,6 +2,7 @@ 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-file-item.js';
 import './exm-upload-crop.js';
 import './exm-upload-drop-area.js';
 import { ExmgElement } from '@exmg/lit-base';
@@ -52,6 +53,10 @@ export declare class ExmUploadBase extends ExmgElement {
      * The upload response type
      */
     serverType: 'xhr' | 'local' | 'form-data' | 'custom';
+    /**
+     * The upload response type
+     */
+    noUpload: boolean;
     /**
      * The CropperJS config see: https://github.com/fengyuanchen/cropperjs#options
      */

package/dist/exm-upload-base.js

@@ -6,6 +6,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import '@material/web/icon/icon.js';
 import { FileUploadError } from './types.js';
 import './exm-upload-item.js';
+import './exm-upload-file-item.js';
 import './exm-upload-crop.js';
 import './exm-upload-drop-area.js';
 import { isSizeValid, isTypeValidExtension, isImage, isCorrectResolution } from './utils.js';
@@ -43,6 +44,10 @@ class ExmUploadBase extends ExmgElement {
          * The upload response type
          */
         this.serverType = 'xhr';
+        /**
+         * The upload response type
+         */
+        this.noUpload = false;
         /**
          * The CropperJS config see: https://github.com/fengyuanchen/cropperjs#options
          */
@@ -231,6 +236,14 @@ class ExmUploadBase extends ExmgElement {
      * Renders the file items
      */
     renderFileItems() {
+        if (this.noUpload) {
+            return repeat(this.files || [], (file) => file.id, (item) => html `<exm-upload-file-item
+            class="item"
+            id=${item.id}
+            @remove-item=${this._handleRemove}
+            .item=${item}
+          ></exm-upload-file-item>`);
+        }
         return repeat(this.files || [], (file) => file.id, (item) => html `<exm-upload-item
           class="item"
           id=${item.id}
@@ -337,6 +350,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ExmUploadBase.prototype, "serverType", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmUploadBase.prototype, "noUpload", void 0);
 __decorate([
     property({ type: Object }),
     observer(function (value) {

package/dist/exm-upload-file-item-base.d.ts

@@ -0,0 +1,11 @@
+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 { ExmgElement } from '@exmg/lit-base';
+export declare class ExmUploadFileItemBase extends ExmgElement {
+    item?: FileData;
+    private _handleRemoveClick;
+    private renderActions;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/exm-upload-file-item-base.js

@@ -0,0 +1,50 @@
+import { __decorate } from 'tslib';
+import { html } 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 { getFileName, getFileExtension, formatBytes } from './utils.js';
+import { ExmgElement } from '@exmg/lit-base';
+
+class ExmUploadFileItemBase extends ExmgElement {
+    _handleRemoveClick() {
+        var _a;
+        this.fire('remove-item', (_a = this.item) === null || _a === void 0 ? void 0 : _a.id, true);
+    }
+    renderActions() {
+        return html ` <md-icon-button @click=${this._handleRemoveClick}>
+      <md-icon>delete</md-icon>
+    </md-icon-button>`;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const fileName = getFileName((_a = this.item) === null || _a === void 0 ? void 0 : _a.file);
+        const fileType = getFileExtension((_b = this.item) === null || _b === void 0 ? void 0 : _b.file);
+        return html `
+      <div class="item">
+        <div class="status vertical-center">
+          <md-icon class="success-icon">check</md-icon>
+        </div>
+        <div class="name-container">
+          <span class="file-name">${fileName}</span>
+          ${((_c = this.item) === null || _c === void 0 ? void 0 : _c.error)
+            ? html ` <span class="file-error">${(_d = this.item) === null || _d === void 0 ? void 0 : _d.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((_f = (_e = this.item) === null || _e === void 0 ? void 0 : _e.file) === null || _f === void 0 ? void 0 : _f.size)}</span>
+                </div>
+              </div>`}
+        </div>
+        <div class="actions vertical-center">${this.renderActions()}</div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Object })
+], ExmUploadFileItemBase.prototype, "item", void 0);
+
+export { ExmUploadFileItemBase };
+//# sourceMappingURL=exm-upload-file-item-base.js.map

package/dist/exm-upload-file-item.d.ts

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

package/dist/exm-upload-file-item.js

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

package/dist/utils.d.ts

@@ -31,3 +31,5 @@ export declare const formatBytes: (bytes: number) => string;
  */
 export declare const isImage: (file: File) => boolean | undefined;
 export declare const isCorrectResolution: (image: File, resolution: string) => Promise<unknown>;
+export declare const getFileExtension: (file?: File) => string;
+export declare const getFileName: (file?: File) => string;

package/dist/utils.js

@@ -82,6 +82,20 @@ const isCorrectResolution = (image, resolution) => {
         };
     });
 };
+const getFileExtension = (file) => {
+    if (!file) {
+        return '';
+    }
+    const originalName = file.name;
+    return originalName.substring(originalName.lastIndexOf('.') + 1, originalName.length);
+};
+const getFileName = (file) => {
+    if (!file) {
+        return '';
+    }
+    const originalName = file === null || file === void 0 ? void 0 : file.name;
+    return originalName.substring(0, originalName.lastIndexOf('.'));
+};
 
-export { formatBytes, isCorrectResolution, isImage, isSizeValid, isTypeValidExtension };
+export { formatBytes, getFileExtension, getFileName, isCorrectResolution, isImage, isSizeValid, isTypeValidExtension };
 //# sourceMappingURL=utils.js.map

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@exmg/exm-upload",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "dependencies": {
-    "@exmg/exm-button": "^1.2.1",
-    "@exmg/exm-collapsed": "^1.2.1",
-    "@exmg/exm-dialogs": "^1.2.1",
+    "@exmg/exm-button": "^1.2.3",
+    "@exmg/exm-collapsed": "^1.2.3",
+    "@exmg/exm-dialogs": "^1.2.3",
     "cropperjs": "^1.5.13"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cdd185ee0a30ced8c5e9266a205d699d074c0fc8"
+  "gitHead": "88d4a421d86cfdb2493aa3a54098e92a38e46b51"
 }