@leavittsoftware/web 1.22.0 → 1.23.0

package/leavitt/file-explorer/folder-modal.js

@@ -0,0 +1,226 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import '@material/web/dialog/dialog';
+import '@material/web/icon/icon';
+import '@material/web/iconbutton/icon-button';
+import '@material/web/button/text-button';
+import '@material/web/textfield/filled-text-field';
+import '../profile-picture/profile-picture';
+import dayjs from 'dayjs/esm';
+import { a, dataRow, ellipsis, h1, h5, p } from '../../titanium/styles/styles';
+import fileExplorerEvents from './events/file-explorer-events';
+import { TitaniumSnackbarSingleton } from '../../titanium/snackbar/snackbar';
+import { LoadWhile } from '../../titanium/helpers/helpers';
+let FolderModal = class FolderModal extends LoadWhile(LitElement) {
+    #apiService_accessor_storage;
+    get apiService() { return this.#apiService_accessor_storage; }
+    set apiService(value) { this.#apiService_accessor_storage = value; }
+    #enableEditing_accessor_storage = false;
+    get enableEditing() { return this.#enableEditing_accessor_storage; }
+    set enableEditing(value) { this.#enableEditing_accessor_storage = value; }
+    #state_accessor_storage = 'view';
+    get state() { return this.#state_accessor_storage; }
+    set state(value) { this.#state_accessor_storage = value; }
+    #folder_accessor_storage = null;
+    get folder() { return this.#folder_accessor_storage; }
+    set folder(value) { this.#folder_accessor_storage = value; }
+    #folderName_accessor_storage;
+    get folderName() { return this.#folderName_accessor_storage; }
+    set folderName(value) { this.#folderName_accessor_storage = value; }
+    #dialog_accessor_storage;
+    get dialog() { return this.#dialog_accessor_storage; }
+    set dialog(value) { this.#dialog_accessor_storage = value; }
+    firstUpdated() {
+        fileExplorerEvents.subscribe('FileExplorerFolder', 'Update', (o) => {
+            if (o.Id === this.folder?.Id) {
+                this.folder = { ...this.folder, ...o };
+            }
+        });
+    }
+    async #saveFolderName() {
+        if (!this.apiService || this.folderName === this.folder?.Name || !this.folderName) {
+            return;
+        }
+        const dto = {
+            Name: this.folderName,
+        };
+        try {
+            const patch = this.apiService.patchAsync(`FileExplorerFolders(${this.folder?.Id})`, dto);
+            this.loadWhile(patch);
+            await patch;
+            fileExplorerEvents.dispatch('FileExplorerFolder', 'Update', { ...this.folder, Name: this.folderName });
+            this.state = 'view';
+        }
+        catch (error) {
+            TitaniumSnackbarSingleton.open(error);
+        }
+    }
+    open(folder) {
+        this.folder = folder;
+        this.state = 'view';
+        this.dialog.show();
+    }
+    static { this.styles = [
+        h1,
+        h5,
+        p,
+        a,
+        ellipsis,
+        dataRow,
+        css `
+      :host {
+        display: block;
+      }
+
+      md-dialog {
+        min-width: 550px;
+      }
+
+      static-header {
+        height: 80px;
+        display: grid;
+        grid: 'icon input button' / auto 1fr auto;
+      }
+
+      static-header h1 {
+        word-break: break-all;
+      }
+
+      md-icon-button[save] {
+        --md-icon-button-icon-color: var(--md-sys-color-primary);
+        --md-icon-button-focus-icon-color: var(--md-sys-color-primary);
+      }
+
+      md-filled-text-field {
+        width: 100%;
+        --md-filled-text-field-container-shape-start-start: 16px;
+        --md-filled-text-field-container-shape-start-end: 16px;
+      }
+
+      main {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        overflow: auto;
+      }
+
+      data-row {
+        margin: 0;
+        border: none;
+        padding: 8px 24px 8px 0px;
+      }
+
+      data-row p {
+        max-width: 450px;
+      }
+
+      @media (max-width: 620px) {
+        md-dialog {
+          min-width: initial;
+        }
+      }
+
+      @media (max-width: 480px) {
+        header {
+          gap: 12px;
+          align-items: center;
+        }
+
+        header {
+          flex-direction: column;
+        }
+      }
+
+      [hidden] {
+        display: none;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <md-dialog>
+        ${this.state === 'view'
+            ? html `<static-header slot="headline"
+              ><md-icon>folder</md-icon>
+              <h1>${this.folder?.Name}</h1>
+              <md-icon-button
+                ?hidden=${!this.enableEditing}
+                @click=${() => {
+                this.state = 'edit';
+                this.folderName = this.folder?.Name ?? '';
+            }}
+              >
+                <md-icon>create</md-icon>
+              </md-icon-button>
+            </static-header>`
+            : html `<md-filled-text-field
+              slot="headline"
+              label="Folder name"
+              .value=${this.folderName ?? ''}
+              @input=${(event) => (this.folderName = event.target.value)}
+            >
+              <md-icon-button slot="trailing-icon" @click=${() => (this.state = 'view')} ?disabled=${this.isLoading}>
+                <md-icon>cancel</md-icon>
+              </md-icon-button>
+              <md-icon-button
+                save
+                slot="trailing-icon"
+                ?disabled=${this.folderName === this.folder?.Name || !this.folderName || this.isLoading}
+                @click=${() => this.#saveFolderName()}
+              >
+                <md-icon>save</md-icon>
+              </md-icon-button>
+            </md-filled-text-field>`}
+        <main slot="content">
+          <data-row force-stacked>
+            <h5>Files</h5>
+            <p>${this.folder?.FilesCount}</p>
+          </data-row>
+          <data-row force-stacked>
+            <h5>Folders</h5>
+            <p>${this.folder?.FoldersCount}</p>
+          </data-row>
+          <data-row force-stacked>
+            <h5>Created</h5>
+            <p>${dayjs(this.folder?.CreatedDate).format('MMM D, YYYY h:mm:ss a')}</p>
+          </data-row>
+          ${!this.folder?.CreatorId
+            ? nothing
+            : html `<data-row force-stacked>
+                <h5>Created by</h5>
+                <p image>
+                  <profile-picture size="24" .fileName=${this.folder.CreatorProfilePictureCndFileName}></profile-picture> ${this.folder?.CreatorFullName}
+                </p>
+              </data-row>`}
+        </main>
+        <div slot="actions">
+          <md-text-button @click=${() => this.dialog.close()}> Close </md-text-button>
+        </div>
+      </md-dialog>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], FolderModal.prototype, "apiService", null);
+__decorate([
+    property({ type: Boolean })
+], FolderModal.prototype, "enableEditing", null);
+__decorate([
+    state()
+], FolderModal.prototype, "state", null);
+__decorate([
+    state()
+], FolderModal.prototype, "folder", null);
+__decorate([
+    state()
+], FolderModal.prototype, "folderName", null);
+__decorate([
+    query('md-dialog')
+], FolderModal.prototype, "dialog", null);
+FolderModal = __decorate([
+    customElement('leavitt-folder-modal')
+], FolderModal);
+export { FolderModal };
+//# sourceMappingURL=folder-modal.js.map

package/leavitt/file-explorer/folder-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folder-modal.js","sourceRoot":"","sources":["folder-modal.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,2CAA2C,CAAC;AACnD,OAAO,oCAAoC,CAAC;AAE5C,OAAO,KAAK,MAAM,WAAW,CAAC;AAE9B,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAK/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAGpD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS,CAAC,UAAU,CAAC;IACX,6BAA8B;IAA9B,IAAA,UAAU,gDAAoB;IAA9B,IAAA,UAAU,sDAAoB;IACjC,kCAAyB,KAAK,CAAC;IAA/B,IAAA,aAAa,mDAAkB;IAA/B,IAAA,aAAa,yDAAkB;IAE3C,0BAAyB,MAAM,CAAC;IAAhC,IAAA,KAAK,2CAA2B;IAAhC,IAAA,KAAK,iDAA2B;IAChC,2BAAuC,IAAI,CAAC;IAA5C,IAAA,MAAM,4CAAsC;IAA5C,IAAA,MAAM,kDAAsC;IAC5C,6BAAmB;IAAnB,IAAA,UAAU,gDAAS;IAAnB,IAAA,UAAU,sDAAS;IAER,yBAAkB;IAAlB,IAAA,MAAM,4CAAY;IAAlB,IAAA,MAAM,kDAAY;IAEvD,YAAY;QACV,kBAAkB,CAAC,SAAS,CAAwB,oBAAoB,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACxF,IAAI,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC;gBAC7B,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;YACzC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAClF,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAmC;YAC1C,IAAI,EAAE,IAAI,CAAC,UAAU;SACtB,CAAC;QAEF,IAAI,CAAC;YACH,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,uBAAuB,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACzF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACtB,MAAM,KAAK,CAAC;YACZ,kBAAkB,CAAC,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;YACvG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACtB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,IAAI,CAAC,MAA6B;QAChC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;aAEM,WAAM,GAAG;QACd,EAAE;QACF,EAAE;QACF,CAAC;QACD,CAAC;QACD,QAAQ;QACR,OAAO;QACP,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmEF;KACF,AA3EY,CA2EX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,KAAK,MAAM;YACrB,CAAC,CAAC,IAAI,CAAA;;oBAEI,IAAI,CAAC,MAAM,EAAE,IAAI;;0BAEX,CAAC,IAAI,CAAC,aAAa;yBACpB,GAAG,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;gBACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC;YAC5C,CAAC;;;;6BAIY;YACnB,CAAC,CAAC,IAAI,CAAA;;;uBAGO,IAAI,CAAC,UAAU,IAAI,EAAE;uBACrB,CAAC,KAAoC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;4DAE3C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,cAAc,IAAI,CAAC,SAAS;;;;;;4BAMvF,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS;yBAC9E,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;;;;oCAIjB;;;;iBAInB,IAAI,CAAC,MAAM,EAAE,UAAU;;;;iBAIvB,IAAI,CAAC,MAAM,EAAE,YAAY;;;;iBAIzB,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC;;YAEpE,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS;YACvB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;;yDAGuC,IAAI,CAAC,MAAM,CAAC,gCAAgC,uBAAuB,IAAI,CAAC,MAAM,EAAE,eAAe;;0BAE9H;;;mCAGS,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;;;KAGvD,CAAC;IACJ,CAAC;;AAtLwC;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAAwC;AACjC;IAArC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAyC;AAE3C;IAAzB,KAAK,EAAE;wCAAkD;AAChC;IAAzB,KAAK,EAAE;yCAA8D;AAC5C;IAAzB,KAAK,EAAE;6CAAqC;AAER;IAApC,KAAK,CAAC,WAAW,CAAC;yCAAoC;AAR5C,WAAW;IADvB,aAAa,CAAC,sBAAsB,CAAC;GACzB,WAAW,CAwLvB"}

package/leavitt/file-explorer/helpers/file-types.d.ts

@@ -0,0 +1,2 @@
+export declare function getIcon(extension: string): string;
+//# sourceMappingURL=file-types.d.ts.map

package/leavitt/file-explorer/helpers/file-types.js

@@ -0,0 +1,19 @@
+export function getIcon(extension) {
+    if (extension === 'pdf' || extension === 'txt' || extension === 'rtf' || extension === 'doc' || extension === 'docx' || extension === 'csv') {
+        return 'article';
+    }
+    if (extension === 'pptx' || extension === 'pptm' || extension === 'ppt') {
+        return 'slideshow';
+    }
+    if (extension === 'xlsx' || extension === 'xlsx') {
+        return 'text_snippet';
+    }
+    if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'webp' || extension === 'ico' || extension === 'svg') {
+        return 'photo';
+    }
+    if (extension === 'mp4') {
+        return 'movie';
+    }
+    return 'article';
+}
+//# sourceMappingURL=file-types.js.map

package/leavitt/file-explorer/helpers/file-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-types.js","sourceRoot":"","sources":["file-types.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,SAAiB;IACvC,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QAC5I,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QACxE,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;QACjD,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QAC7I,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QACxB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/leavitt/file-explorer/helpers/format-bytes.d.ts

@@ -0,0 +1,2 @@
+export declare function formatBytes(bytes: any, decimalPlaces?: number): string;
+//# sourceMappingURL=format-bytes.d.ts.map

package/leavitt/file-explorer/helpers/format-bytes.js

@@ -0,0 +1,8 @@
+export function formatBytes(bytes, decimalPlaces = 2) {
+    if (0 === bytes) {
+        return '0 Bytes';
+    }
+    const c = 1024, d = decimalPlaces || 2, e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], f = Math.floor(Math.log(bytes) / Math.log(c));
+    return parseFloat((bytes / Math.pow(c, f)).toFixed(d)) + ' ' + e[f];
+}
+//# sourceMappingURL=format-bytes.js.map

package/leavitt/file-explorer/helpers/format-bytes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-bytes.js","sourceRoot":"","sources":["format-bytes.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,CAAC;IAClD,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;QAChB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,MAAM,CAAC,GAAG,IAAI,EACZ,CAAC,GAAG,aAAa,IAAI,CAAC,EACtB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAC7D,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,UAAU,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavittsoftware/web",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "license": "Apache-2.0",
   "description": "",
   "files": [
@@ -39,5 +39,5 @@
     "url": "https://github.com/LeavittSoftware/titanium-elements/issues"
   },
   "homepage": "https://github.com/LeavittSoftware/titanium-elements/#readme",
-  "gitHead": "40866c209d0d28661b9e38ae1932b05f0450ce99"
+  "gitHead": "dbf57f8f5ba428be0330cb1c92af1a046a452849"
 }

package/titanium/styles/data-row.js

@@ -39,6 +39,13 @@ export const dataRow = [
       gap: 12px;
     }
 
+    data-row[force-stacked] {
+      grid:
+        'label'
+        'text';
+      gap: 6px;
+    }
+
     @container (max-width: 500px) {
       data-row {
         grid:

package/titanium/styles/data-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-row.js","sourceRoot":"","sources":["data-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE;IACF,CAAC;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CF;CACF,CAAC"}
+{"version":3,"file":"data-row.js","sourceRoot":"","sources":["data-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE;IACF,CAAC;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDF;CACF,CAAC"}