@leavittsoftware/web 8.7.2 → 8.8.0

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

@@ -0,0 +1,323 @@
+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 { ifDefined } from 'lit-html/directives/if-defined.js';
+import { getCdnDownloadUrl } from '../../titanium/helpers/get-cdn-download-url';
+import { a, dataRow, ellipsis, h1, h5, p } from '../../titanium/styles/styles';
+import { getCdnInlineUrl } from '../../titanium/helpers/get-cdn-Inline-url';
+import { middleEllipsis } from '../../titanium/helpers/middle-ellipsis';
+import fileExplorerEvents from './events/file-explorer-events';
+import { LoadWhile } from '../../titanium/helpers/helpers';
+import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+let FileModal = class FileModal 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; }
+    #file_accessor_storage = null;
+    get file() { return this.#file_accessor_storage; }
+    set file(value) { this.#file_accessor_storage = value; }
+    #isCopying_accessor_storage = false;
+    get isCopying() { return this.#isCopying_accessor_storage; }
+    set isCopying(value) { this.#isCopying_accessor_storage = value; }
+    #hasClipboard_accessor_storage = false;
+    get hasClipboard() { return this.#hasClipboard_accessor_storage; }
+    set hasClipboard(value) { this.#hasClipboard_accessor_storage = value; }
+    #fileName_accessor_storage;
+    get fileName() { return this.#fileName_accessor_storage; }
+    set fileName(value) { this.#fileName_accessor_storage = value; }
+    #dialog_accessor_storage;
+    get dialog() { return this.#dialog_accessor_storage; }
+    set dialog(value) { this.#dialog_accessor_storage = value; }
+    firstUpdated() {
+        fileExplorerEvents.subscribe('FileExplorerFileDto', 'Update', (o) => {
+            if (o.Id === this.file?.Id) {
+                this.file = { ...this.file, ...o };
+            }
+        });
+        if (navigator.clipboard) {
+            this.hasClipboard = true;
+        }
+    }
+    async #saveFileName() {
+        if (!this.apiService || this.fileName === this.file?.Name || !this.fileName) {
+            return;
+        }
+        const dto = {
+            Name: this.fileName,
+        };
+        try {
+            const patch = this.apiService.patchAsync(`FileExplorerAttachments(${this.file?.Id})`, dto);
+            this.loadWhile(patch);
+            await patch;
+            fileExplorerEvents.dispatch('FileExplorerFileDto', 'Update', { ...this.file, Name: this.fileName });
+            this.state = 'view';
+        }
+        catch (error) {
+            this.dispatchEvent(new ShowSnackbarEvent(error));
+        }
+    }
+    async open(file) {
+        this.file = file;
+        this.state = 'view';
+        return await this.dialog.show();
+    }
+    static { this.styles = [
+        h1,
+        h5,
+        p,
+        a,
+        ellipsis,
+        dataRow,
+        css `
+      :host {
+        display: block;
+      }
+
+      md-dialog {
+        max-width: calc(100vw - 48px);
+        max-height: calc(100vh - 48px);
+      }
+
+      header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+        gap: 8px;
+      }
+
+      header h1 {
+        margin: 4px 0 0 0;
+        word-break: break-all;
+        text-align: center;
+      }
+
+      header mwc-icon-button {
+        align-self: center;
+      }
+
+      header 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;
+      }
+
+      a[download-link] {
+        cursor: pointer;
+      }
+
+      img[preview] {
+        height: auto;
+        width: auto;
+        place-self: center;
+      }
+
+      main[ext='pdf'] img[preview] {
+        border: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      no-preview {
+        display: flex;
+        flex-direction: column;
+        height: 320px;
+        width: 430px;
+        place-self: center;
+        place-content: center;
+        text-align: center;
+        border: 1px dashed var(--md-sys-color-outline-variant);
+        border-radius: 8px;
+      }
+
+      data-row {
+        margin: 0;
+        border: none;
+        padding: 8px 24px 8px 0px;
+      }
+
+      data-row p {
+        max-width: 450px;
+      }
+
+      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);
+      }
+
+      p[alert] {
+        transition: 0.3s ease;
+        opacity: 1;
+        color: var(--md-sys-color-primary);
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      @media (max-width: 480px) {
+        header {
+          gap: 12px;
+          align-items: center;
+        }
+
+        img[preview] {
+          place-self: initial;
+        }
+
+        header {
+          flex-direction: column;
+        }
+
+        no-preview {
+          height: 120px;
+          width: 230px;
+        }
+      }
+
+      p[alert][invisible] {
+        opacity: 0;
+      }
+
+      [hidden] {
+        display: none;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <md-dialog>
+        <header slot="headline">
+          ${this.state === 'view'
+            ? html `<h1 title="${this.file?.Name ?? ''}.${this.file?.Extension ?? ''}">
+                ${middleEllipsis(`${this.file?.Name ?? ''}.${this.file?.Extension ?? ''}`)}
+              </h1>`
+            : html `<md-filled-text-field
+                label="File name"
+                .value=${this.fileName ?? ''}
+                @input=${(event) => (this.fileName = 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.fileName === this.file?.Name || !this.fileName || this.isLoading}
+                  @click=${() => this.#saveFileName()}
+                >
+                  <md-icon>save</md-icon>
+                </md-icon-button>
+              </md-filled-text-field>`}
+
+          <md-icon-button
+            ?hidden=${!this.enableEditing || this.state === 'edit'}
+            @click=${() => {
+            this.state = 'edit';
+            this.fileName = this.file?.Name ?? '';
+        }}
+          >
+            <md-icon>create</md-icon>
+          </md-icon-button>
+        </header>
+        <main ext=${this.file?.Extension ?? ''} slot="content">
+          ${this.file?.PreviewSizes?.includes('512')
+            ? html ` <img preview loading="lazy" src=${ifDefined(getCdnInlineUrl(this.file, 512))} />`
+            : html `<no-preview><p>No preview currently available</p> </no-preview> `}
+
+          <data-row force-stacked>
+            <h5>Uploaded</h5>
+            <p>${dayjs(this.file?.CreatedDate).format('MMM D, YYYY h:mm:ss a')}</p>
+          </data-row>
+          ${!this.file?.CreatorId
+            ? nothing
+            : html `<data-row force-stacked>
+                <h5>Uploaded by</h5>
+                <p image><profile-picture size="24" .fileName=${this.file.CreatorProfilePictureCndFileName}></profile-picture> ${this.file?.CreatorFullName}</p>
+              </data-row>`}
+          <data-row force-stacked>
+            <h5>Copy download link</h5>
+            <p ellipsis>
+              ${this.hasClipboard
+            ? html `
+                    <a
+                      download-link
+                      title="Copy direct download link to clipboard"
+                      @click=${() => {
+                const link = getCdnDownloadUrl(this.file);
+                if (link) {
+                    navigator.clipboard.writeText(link);
+                    this.isCopying = true;
+                    setTimeout(() => {
+                        this.isCopying = false;
+                    }, 2000);
+                }
+            }}
+                    >
+                      ${getCdnDownloadUrl(this.file)}
+                    </a>
+                  `
+            : html ` ${getCdnDownloadUrl(this.file)} `}
+            </p>
+            <p alert ?invisible=${!this.isCopying}>Copied to clipboard</p>
+          </data-row>
+        </main>
+        <div slot="actions">
+          <md-text-button
+            @click=${() => {
+            const link = getCdnDownloadUrl(this.file);
+            window.open(link);
+        }}
+            >Download</md-text-button
+          >
+          <md-text-button @click=${() => this.dialog.close()}> Close </md-text-button>
+        </div>
+      </md-dialog>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], FileModal.prototype, "apiService", null);
+__decorate([
+    property({ type: Boolean })
+], FileModal.prototype, "enableEditing", null);
+__decorate([
+    state()
+], FileModal.prototype, "state", null);
+__decorate([
+    state()
+], FileModal.prototype, "file", null);
+__decorate([
+    state()
+], FileModal.prototype, "isCopying", null);
+__decorate([
+    state()
+], FileModal.prototype, "hasClipboard", null);
+__decorate([
+    state()
+], FileModal.prototype, "fileName", null);
+__decorate([
+    query('md-dialog')
+], FileModal.prototype, "dialog", null);
+FileModal = __decorate([
+    customElement('leavitt-file-modal')
+], FileModal);
+export { FileModal };
+//# sourceMappingURL=file-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-modal.js","sourceRoot":"","sources":["file-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,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAK/D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAGzE,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS,CAAC,UAAU,CAAC;IACT,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,yBAAmC,IAAI,CAAC;IAAxC,IAAA,IAAI,0CAAoC;IAAxC,IAAA,IAAI,gDAAoC;IACxC,8BAAqB,KAAK,CAAC;IAA3B,IAAA,SAAS,+CAAkB;IAA3B,IAAA,SAAS,qDAAkB;IAC3B,iCAAwB,KAAK,CAAC;IAA9B,IAAA,YAAY,kDAAkB;IAA9B,IAAA,YAAY,wDAAkB;IAC9B,2BAAiB;IAAjB,IAAA,QAAQ,8CAAS;IAAjB,IAAA,QAAQ,oDAAS;IACN,yBAAkB;IAAlB,IAAA,MAAM,4CAAY;IAAlB,IAAA,MAAM,kDAAY;IAEvD,YAAY;QACV,kBAAkB,CAAC,SAAS,CAAsB,qBAAqB,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACvF,IAAI,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;gBAC3B,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;YACrC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC5E,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAoC;YAC3C,IAAI,EAAE,IAAI,CAAC,QAAQ;SACpB,CAAC;QAEF,IAAI,CAAC;YACH,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YAC3F,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACtB,MAAM,KAAK,CAAC;YACZ,kBAAkB,CAAC,QAAQ,CAAC,qBAAqB,EAAE,QAAQ,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YACpG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACtB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,IAAyB;QAClC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACpB,OAAO,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAClC,CAAC;aAEM,WAAM,GAAG;QACd,EAAE;QACF,EAAE;QACF,CAAC;QACD,CAAC;QACD,QAAQ;QACR,OAAO;QACP,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqHF;KACF,AA7HY,CA6HX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,KAAK,MAAM;YACrB,CAAC,CAAC,IAAI,CAAA,cAAc,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE;kBACjE,cAAc,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE,EAAE,CAAC;oBACtE;YACR,CAAC,CAAC,IAAI,CAAA;;yBAEO,IAAI,CAAC,QAAQ,IAAI,EAAE;yBACnB,CAAC,KAAoC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;8DAEzC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,cAAc,IAAI,CAAC,SAAS;;;;;;8BAMvF,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;2BACxE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;sCAIf;;;sBAGhB,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM;qBAC7C,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;QACxC,CAAC;;;;;oBAKO,IAAI,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE;YAClC,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,KAAK,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,oCAAoC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,KAAK;YACzF,CAAC,CAAC,IAAI,CAAA,kEAAkE;;;;iBAInE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC;;YAElE,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS;YACrB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;gEAE8C,IAAI,CAAC,IAAI,CAAC,gCAAgC,uBAAuB,IAAI,CAAC,IAAI,EAAE,eAAe;0BACjI;;;;gBAIV,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;;;;+BAIS,GAAG,EAAE;gBACZ,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC1C,IAAI,IAAI,EAAE,CAAC;oBACT,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;oBACpC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;oBACtB,UAAU,CAAC,GAAG,EAAE;wBACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACzB,CAAC,EAAE,IAAI,CAAC,CAAC;gBACX,CAAC;YACH,CAAC;;wBAEC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;mBAEjC;YACH,CAAC,CAAC,IAAI,CAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;;kCAEvB,CAAC,IAAI,CAAC,SAAS;;;;;qBAK5B,GAAG,EAAE;YACZ,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;;;mCAGsB,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;;;KAGvD,CAAC;IACJ,CAAC;;AAzQwC;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAAwC;AACjC;IAArC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAyC;AAE3C;IAAzB,KAAK,EAAE;sCAAkD;AAChC;IAAzB,KAAK,EAAE;qCAA0D;AACxC;IAAzB,KAAK,EAAE;0CAA6C;AAC3B;IAAzB,KAAK,EAAE;6CAAgD;AAC9B;IAAzB,KAAK,EAAE;yCAAmC;AACN;IAApC,KAAK,CAAC,WAAW,CAAC;uCAAoC;AAT5C,SAAS;IADrB,aAAa,CAAC,oBAAoB,CAAC;GACvB,SAAS,CA2QrB"}

package/leavitt/file-explorer/folder-list-item.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import '@material/web/icon/icon';
+import '@material/web/focus/md-focus-ring';
+import '@material/web/ripple/ripple';
+import { FileExplorerFolderDto } from '@leavittsoftware/lg-core-typescript';
+export declare class FolderListItem extends LitElement {
+    #private;
+    accessor folder: FileExplorerFolderDto;
+    accessor selected: boolean;
+    accessor selectedCount: number;
+    accessor display: 'grid' | 'list';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=folder-list-item.d.ts.map

package/leavitt/file-explorer/folder-list-item.js

@@ -0,0 +1,210 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@material/web/icon/icon';
+import '@material/web/focus/md-focus-ring';
+import '@material/web/ripple/ripple';
+import dayjs from 'dayjs/esm';
+let FolderListItem = class FolderListItem extends LitElement {
+    #folder_accessor_storage;
+    get folder() { return this.#folder_accessor_storage; }
+    set folder(value) { this.#folder_accessor_storage = value; }
+    #selected_accessor_storage = false;
+    get selected() { return this.#selected_accessor_storage; }
+    set selected(value) { this.#selected_accessor_storage = value; }
+    #selectedCount_accessor_storage = 0;
+    get selectedCount() { return this.#selectedCount_accessor_storage; }
+    set selectedCount(value) { this.#selectedCount_accessor_storage = value; }
+    #display_accessor_storage = 'grid';
+    get display() { return this.#display_accessor_storage; }
+    set display(value) { this.#display_accessor_storage = value; }
+    #kFormatter(num) {
+        return Math.abs(num) > 999 ? Math.floor((Math.sign(num) * Math.round(Math.abs(num) / 100)) / 10) + 'k+' : Math.sign(num) * Math.abs(num);
+    }
+    static { this.styles = css `
+    :host {
+      display: grid;
+    }
+
+    button {
+      display: grid;
+      background-color: inherit;
+      grid: 'name date size' / 1fr 100px 100px;
+      gap: 12px;
+      padding: 12px 24px;
+      font-size: 14px;
+      border: none;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      align-content: center;
+      align-items: center;
+      position: relative;
+      outline: none;
+      color: inherit;
+    }
+
+    :host([display='grid'][selected]) button {
+      border-color: transparent;
+    }
+
+    :host([selected]) button {
+      background-color: var(--md-sys-color-secondary-container);
+    }
+
+    :host([display='grid']) button {
+      cursor: pointer;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 16px;
+      padding: 0;
+      max-height: 166px;
+      grid: 'name' auto;
+      gap: 0;
+      align-content: inherit;
+      align-items: inherit;
+    }
+
+    /* Focus ring */
+    md-focus-ring {
+      --md-focus-ring-shape: 0;
+    }
+
+    :host([display='grid']) md-focus-ring {
+      --md-focus-ring-shape: 16px;
+    }
+
+    /* File name */
+    folder-name {
+      grid-area: name;
+      display: grid;
+      grid: 'icon name' / auto 1fr;
+      gap: 8px;
+
+      align-items: center;
+      font-weight: 500;
+
+      min-width: 0;
+
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+    }
+
+    :host([display='grid']) folder-name {
+      padding: 12px;
+    }
+
+    folder-name md-icon {
+      grid-area: icon;
+    }
+
+    folder-name span[name] {
+      grid-area: name;
+      text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1 1 auto;
+      min-width: 20px;
+    }
+
+    span[date] {
+      grid-area: date;
+      text-align: center;
+
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+    }
+
+    span[size] {
+      grid-area: size;
+      text-align: right;
+
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+    }
+
+    @media (max-width: 450px) {
+      span[date] {
+        display: none;
+      }
+
+      :host([display='list']) button {
+        grid: 'name size ' / 1fr 100px;
+      }
+    }
+
+    @media (max-width: 400px) {
+      span[date],
+      span[size] {
+        display: none;
+      }
+
+      :host([display='list']) button {
+        grid: 'name ' / 1fr;
+      }
+    }
+  `; }
+    render() {
+        return html ` <button
+      tabindex="0"
+      aria-label=${this.folder.Name}
+      title="${this.folder.Name ?? ''}
+${this.folder.FilesCount} file${this.folder.FilesCount === 1 ? '' : 's'}, ${this.folder.FoldersCount} folder${this.folder.FoldersCount === 1 ? '' : 's'}"
+      @dblclick=${(e) => {
+            e.preventDefault();
+            this.dispatchEvent(new Event('navigate'));
+        }}
+      @click=${(e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event('toggle-selected'));
+        }}
+      @keydown=${(e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                if (this.selectedCount === 0) {
+                    this.dispatchEvent(new Event('navigate'));
+                }
+                else {
+                    this.dispatchEvent(new Event('toggle-selected'));
+                }
+            }
+            if (e.key == ' ') {
+                e.preventDefault();
+                this.dispatchEvent(new Event('toggle-selected'));
+            }
+        }}
+    >
+      <md-ripple></md-ripple>
+      <md-focus-ring ?inward=${this.display === 'list'}></md-focus-ring>
+      <folder-name>
+        <span name>${this.folder.Name}</span>
+        <md-icon>${this.display === 'list' && this.selected ? 'check' : 'folder_open'}</md-icon>
+      </folder-name>
+
+      ${this.display === 'list'
+            ? html `
+            <span date>${dayjs(this.folder.CreatedDate).format('MMM D, YYYY')}</span>
+            <span size>${this.#kFormatter(this.folder.FilesCount ?? 0) || '0'} file${this.folder.FilesCount === 1 ? '' : 's'}</span>
+          `
+            : nothing}
+    </button>`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], FolderListItem.prototype, "folder", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FolderListItem.prototype, "selected", null);
+__decorate([
+    property({ type: Number })
+], FolderListItem.prototype, "selectedCount", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'display' })
+], FolderListItem.prototype, "display", null);
+FolderListItem = __decorate([
+    customElement('folder-list-item')
+], FolderListItem);
+export { FolderListItem };
+//# sourceMappingURL=folder-list-item.js.map

package/leavitt/file-explorer/folder-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folder-list-item.js","sourceRoot":"","sources":["folder-list-item.ts"],"names":[],"mappings":"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"}