@genesislcap/pbc-documents-ui 0.0.1

package/dist/esm/components/foundation-document-manager/component/document-upload/document-upload.styles.js

@@ -0,0 +1,157 @@
+import { css } from '@microsoft/fast-element';
+export const DocumentUploadStyles = css `
+  :host {
+    height: 100%;
+    width: 100%;
+    padding: calc(var(--design-unit) * 3px);
+    position: absolute;
+    background-color: var(--neutral-layer-4);
+    box-sizing: border-box;
+  }
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) dashed var(--accent-fill-rest);
+    background-color: var(--neutral-layer-3);
+    box-sizing: border-box;
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
+
+  .dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--design-unit) * 3px);
+  }
+
+  .document-name {
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-stroke-hover);
+    text-align: center;
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .document-size {
+    color: var(--neutral-foreground-hint);
+    font-size: var(--type-ramp-minus-1-font-size);
+    text-align: center;
+    line-height: normal;
+  }
+
+  .drag-prompt {
+    font-size: var(--type-ramp-minus-1-font-size);;
+    color: var(--neutral-foreground-rest);
+    text-align: center;
+    line-height: normal;
+  }
+
+  .drag-prompt > span {
+    color: var(--accent-fill-rest);
+  }
+
+  .progress {
+    width: 261px;
+    height: calc(var(--design-unit) * 1px);
+  }
+
+  .error-progress::part(determinate) {
+    background-color: var(--error-color);
+  }
+
+  .type-prompt {
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+    text-align: center;
+    line-height: normal;
+  }
+
+  .upload-icon,
+  .error-icon {
+    fill: var(--neutral-foreground-rest);
+    -webkit-animation: animation-upload-icon 3s infinite;
+    -moz-animation: animation-upload-icon 3s infinite;
+    -o-animation: animation-upload-icon 3s infinite;
+    animation: animation-upload-icon 3s infinite;
+  }
+
+  .upload-successfull::part(determinate) {
+    background-color: var(--success-color);
+  }
+
+  .uploading-prompt {
+    width: 134px;
+    margin-left: 75px;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-rest);
+    line-height: normal;
+  }
+
+  .uploading-prompt:after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    -webkit-animation: ellipsis steps(4, end) 2s infinite;
+    animation: ellipsis steps(4, end) 2s infinite;
+    content: '...';
+    width: 0px;
+  }
+
+  .success-icon {
+    position: relative;
+    height: calc(var(--base-height-multiplier) * 5px);
+  }
+
+  .success-icon > svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 14px;
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 14px;
+    }
+  }
+
+  .error-icon {
+    fill: var(--error-color);
+  }
+
+  @-webkit-keyframes animation-upload-icon {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes animation-upload-icon {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+//# sourceMappingURL=document-upload.styles.js.map

package/dist/esm/components/foundation-document-manager/component/document-upload/document-upload.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-upload.styles.js","sourceRoot":"","sources":["../../../../../../src/components/foundation-document-manager/component/document-upload/document-upload.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,oBAAoB,GAAkB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JrD,CAAC"}

package/dist/esm/components/foundation-document-manager/component/document-upload/document-upload.template.js

@@ -0,0 +1,61 @@
+import { html, ref, when } from '@microsoft/fast-element';
+import { UploadState } from './document-upload';
+import { checkmark, checkmarkBackground, checkmarkCircle, uploadIconLarge, } from '../../utils/icons';
+import { formatBytes } from '../../../../utils/formatting';
+export const DocumentUploadTemplate = html `
+  <div class="container" ${ref('dropArea')}>
+    ${when((x) => x.currentState === UploadState.START, html `
+        <div class="dialog">
+          <span class="upload-icon">${uploadIconLarge}</span>
+          <a class="drag-prompt clickable" @click=${(x) => x.fileClick()}>
+            Drag and drop or
+            <span>select</span>
+            a file to upload.
+          </a>
+          <a class="type-prompt">Allows file type: PDF, CSV, JPG, PNG</a>
+        </div>
+      `)}
+    ${when((x) => x.currentState === UploadState.UPLOADING ||
+    x.currentState === UploadState.UPLOADING_UPLOADED, html `
+        <div class="dialog">
+          <span class="upload-icon">${uploadIconLarge}</span>
+          <a
+            class="${(x) => x.currentState === UploadState.UPLOADING ? 'uploading-prompt' : 'drag-prompt'}"
+          >
+            ${(x) => (x.currentState === UploadState.UPLOADING ? 'Uploading' : 'File Uploaded')}
+          </a>
+          <a class="document-name">${(x) => x.fileName}</a>
+          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
+          <zero-progress
+            class="progress ${(x) => x.currentState === UploadState.UPLOADING_UPLOADED || x.fileUploadProgress >= 100
+    ? 'upload-successfull'
+    : ''}"
+            min="0"
+            max="100"
+            value=${(x) => x.fileUploadProgress}
+          ></zero-progress>
+        </div>
+      `)}
+    ${when((x) => x.currentState === UploadState.UPLOADED, html `
+        <div class="dialog">
+          <span class="success-icon">${checkmarkBackground} ${checkmarkCircle} ${checkmark}</span>
+          <a class="drag-prompt">Document successfully uploaded</a>
+        </div>
+      `)}
+    ${when((x) => x.currentState === UploadState.ERROR, html `
+        <div class="dialog">
+          <span class="error-icon">${uploadIconLarge}</span>
+          <a class="drag-prompt">Error uploading file. Please try again.</a>
+          <a class="document-name">${(x) => x.fileName}</a>
+          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
+          <zero-progress
+            class="progress error-progress"
+            min="0"
+            max="100"
+            value="100"
+          ></zero-progress>
+        </div>
+      `)}
+  </div>
+`;
+//# sourceMappingURL=document-upload.template.js.map

package/dist/esm/components/foundation-document-manager/component/document-upload/document-upload.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-upload.template.js","sourceRoot":"","sources":["../../../../../../src/components/foundation-document-manager/component/document-upload/document-upload.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAkB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,eAAe,EAEf,eAAe,GAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAgB;2BAC/B,GAAG,CAAC,UAAU,CAAC;MACpC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,EAC3C,IAAI,CAAgB;;sCAEY,eAAe;oDACD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE;;;;;;;OAOjE,CACF;MACC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,SAAS;IACxC,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,kBAAkB,EACnD,IAAI,CAAgB;;sCAEY,eAAe;;qBAEhC,CAAC,CAAC,EAAE,EAAE,CACb,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa;;cAE7E,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;;qCAE1D,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;qCACjB,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;;8BAExC,CAAC,CAAC,EAAE,EAAE,CACtB,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,kBAAkB,IAAI,CAAC,CAAC,kBAAkB,IAAI,GAAG;IAC9E,CAAC,CAAC,oBAAoB;IACtB,CAAC,CAAC,EAAE;;;oBAGA,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB;;;OAGxC,CACF;MACC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,EAC9C,IAAI,CAAgB;;uCAEa,mBAAmB,IAAI,eAAe,IAAI,SAAS;;;OAGnF,CACF;MACC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,EAC3C,IAAI,CAAgB;;qCAEW,eAAe;;qCAEf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;qCACjB,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;;;;;;;;OAQ/D,CACF;;CAEJ,CAAC"}

package/dist/esm/components/foundation-document-manager/document-manager.js

@@ -0,0 +1,130 @@
+import { __decorate } from "tslib";
+import { FASTElement, customElement, observable } from '@microsoft/fast-element';
+import { DocumentManagerTemplate } from './document-manager.template';
+import { DocumentManagerStyles } from './document-manager.styles';
+import { IDocumentService } from '../../services/document.service';
+import { folderIcon, userIcon } from './utils/icons';
+import { Auth } from '@genesislcap/foundation-comms';
+import { logger } from '../../utils';
+import { updateArray } from '../../utils/dataserver';
+export var DIRECTORY;
+(function (DIRECTORY) {
+    DIRECTORY["ALL"] = "ALL";
+    DIRECTORY["MY_FILES"] = "MY_FILES";
+})(DIRECTORY || (DIRECTORY = {}));
+export var ViewSelection;
+(function (ViewSelection) {
+    ViewSelection["GRID"] = "GRID";
+    ViewSelection["TILE"] = "TILE";
+})(ViewSelection || (ViewSelection = {}));
+let FoundationDocumentManager = class FoundationDocumentManager extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.currentView = ViewSelection.GRID;
+        this.uploadingDocument = false;
+        this.directories = [
+            {
+                id: DIRECTORY.ALL,
+                icon: folderIcon,
+                title: 'All files',
+                selected: true,
+            },
+            {
+                id: DIRECTORY.MY_FILES,
+                icon: userIcon,
+                title: 'My files',
+                selected: false,
+            },
+        ];
+        this.currentdirectory = DIRECTORY.ALL;
+        this.documents = [];
+        this.filteredDocuments = [];
+        this.currentFilter = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.streamDocuments();
+        this.modal.show();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    open() {
+        this.modal.show();
+    }
+    changeSearchFilter() {
+        this.currentFilter = this.searchField.currentValue.trim().toLowerCase();
+        this.filterDocumentsByDirectory();
+    }
+    streamDocuments() {
+        this.docService.streamDocuments().subscribe((x) => {
+            if (!x.ERROR) {
+                this.documents = updateArray(x.ROW, this.documents);
+                this.changeSearchFilter();
+            }
+            else {
+                logger.error(x.ERROR);
+            }
+        });
+    }
+    filterDocumentsByDirectory() {
+        if (this.currentdirectory === DIRECTORY.ALL) {
+            this.filteredDocuments = this.documents;
+        }
+        else if (this.currentdirectory === DIRECTORY.MY_FILES) {
+            this.filteredDocuments = this.documents.filter((x) => x.CREATED_BY === this.auth.currentUser.username);
+        }
+        this.filteredDocuments = this.filteredDocuments.filter((x) => x.FILE_NAME.trim().toLowerCase().includes(this.currentFilter));
+    }
+    startUploading() {
+        this.currentdirectory = null;
+        this.uploadingDocument = true;
+    }
+    changeDirectory(directory) {
+        this.currentdirectory = directory;
+        this.uploadingDocument = false;
+        this.filterDocumentsByDirectory();
+    }
+    changeView(view) {
+        this.currentView = view;
+    }
+    downloadDocument(event) {
+        this.docService.downloadDocument(event);
+    }
+    deleteDocument(event) {
+        console.error('Deleting document ' + event);
+    }
+};
+__decorate([
+    IDocumentService
+], FoundationDocumentManager.prototype, "docService", void 0);
+__decorate([
+    Auth
+], FoundationDocumentManager.prototype, "auth", void 0);
+__decorate([
+    observable
+], FoundationDocumentManager.prototype, "currentView", void 0);
+__decorate([
+    observable
+], FoundationDocumentManager.prototype, "uploadingDocument", void 0);
+__decorate([
+    observable
+], FoundationDocumentManager.prototype, "directories", void 0);
+__decorate([
+    observable
+], FoundationDocumentManager.prototype, "currentdirectory", void 0);
+__decorate([
+    observable
+], FoundationDocumentManager.prototype, "documents", void 0);
+__decorate([
+    observable
+], FoundationDocumentManager.prototype, "filteredDocuments", void 0);
+FoundationDocumentManager = __decorate([
+    customElement({
+        name: 'foundation-document-manager',
+        template: DocumentManagerTemplate,
+        styles: DocumentManagerStyles,
+    })
+], FoundationDocumentManager);
+export { FoundationDocumentManager };
+//# sourceMappingURL=document-manager.js.map

package/dist/esm/components/foundation-document-manager/document-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-manager.js","sourceRoot":"","sources":["../../../../src/components/foundation-document-manager/document-manager.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/foundation-document-manager/document-manager.styles.js

@@ -0,0 +1,245 @@
+import { css } from '@microsoft/fast-element';
+export const DocumentManagerStyles = css `
+  :host {
+    font-family: var(--body-font);
+  }
+
+  ::-webkit-scrollbar {
+    width: calc(var(--base-height-multiplier) * 1px);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--neutral-layer-1);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--neutral-fill-rest);
+  }
+
+  .body {
+    display: flex;
+    height: inherit;
+  }
+
+  .container {
+    height: 100%;
+    width: 100%;
+    background: var(--neutral-layer-3);
+    position: relative;
+    border-radius: calc((var(--control-corner-radius) + 2) * 1px);
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.44);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .close-btn {
+    min-width: calc((var(--base-height-multiplier) - 2 )* 3px);
+    display: flex;
+    width: calc((var(--base-height-multiplier) - 2 ) * 3px);
+    height: calc((var(--base-height-multiplier) - 2 ) * 3px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    background-color: var(--neutral-layer-3);
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+  }
+
+  .close-btn:hover {
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);
+  }
+
+  .close-btn::part(control):focus-visible {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .directory-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .directory-btn,
+  .directory-btn-selected {
+    border-left: 3px solid transparent;
+    margin: 0;
+    border-radius: 0px;
+    height: calc((var(--base-height-multiplier) - 1) * 4px);
+    background-color: transparent;
+    box-sizing: border-box;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+    text-align: left;
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .directory-btn-selected {
+    border-left: 3px solid;
+    color: var(--neutral-foreground-rest);
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to bottom, #47bce0, #654df9);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 96%);
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-minus-2-font-size);
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+  }
+
+  .header {
+    padding: calc(var(--design-unit) * 2px);
+    padding-left: calc(var(--design-unit) * 4px);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+  }
+
+  .title {
+    font-weight: 500;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-rest);
+    text-align: left;
+    line-height: normal;
+  }
+
+  .pinned-left {
+    width: 163px;
+    padding: 0;
+    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+    background-color: var(--neutral-layer-4);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pinned-left-header {
+    display: flex;
+    height: calc(var(--base-height-multiplier) * 4px);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    font-weight: 500;
+    font-size: var(--type-ramp-minus-2-font-size);
+    color: var(--neutral-foreground-hint);
+    line-height: var(--type-ramp-base-line-height);
+    align-items: center;
+  }
+
+  .pinned-right {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .pinned-right-body {
+    height: 100%;
+    position: relative;
+  }
+
+  .pinned-right-header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 4px);
+    height: calc(var(--base-height-multiplier) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    justify-content: space-between;
+  }
+
+  .pinned-right-header-left-group {
+    flex: 1 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--design-unit) * 4px);
+  }
+
+  .pinned-right-header-left-group > zero-text-field {
+    max-width: 418px;
+    flex: 1 1;
+  }
+
+  .upload-btn {
+    color: var(--neutral-foreground-hint);
+    font-size: var(--type-ramp-minus-1-font-size);
+    background-color: var(--neutral-layer-3);
+    margin: 0;
+  }
+
+  .uploading {
+    color: var(--neutral-foreground-rest);
+    background-color: var(--neutral-layer-1);
+  }
+
+  .upload-btn:hover {
+    color: var(--neutral-foreground-rest);
+  }
+
+  .upload-btn > svg {
+    width: calc((var(--base-height-multiplier) - 2 )* 3px);
+  }
+
+  .upload-btn::part(start) {
+    margin-inline-end: calc(var(--design-unit) * 2px);
+  }
+
+  fast-dialog {
+    --dialog-height: 668px;
+    --dialog-width: 952px;
+  }
+
+  zero-segmented-control:first-child {
+    border-top-left-radius: calc(var(--control-corner-radius) * 1px);
+    border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  zero-segmented-control:last-child {
+    border-top-right-radius: calc(var(--control-corner-radius) * 1px);
+    border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  zero-segmented-item {
+    height: calc((var(--base-height-multiplier) - 1 ) * 4px);
+    padding: 0 calc(var(--design-unit) * 3px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-foreground-hint);
+    fill: var(--neutral-foreground-hint);
+  }
+
+  zero-segmented-item > svg:focus,
+  zero-segmented-item > svg > g:focus,
+  zero-segmented-item > svg > g > path:focus {
+    outline: none !important;
+  }
+
+  zero-segmented-item[aria-checked='true'] {
+    box-shadow: none;
+    fill: var(--neutral-foreground-rest);
+    background-image: linear-gradient(
+      -141.41742576267188deg,
+      rgba(71, 188, 224, 0.5) 0%,
+      rgba(101, 77, 249, 0.5) 100%
+    );
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to bottom, #47bce0, #654df9);
+    border-width: calc(var(--stroke-width) * 1px);
+    border-style: solid;
+  }
+
+  zero-modal::part(dialog) {
+    padding: 0;
+    background: var(--neutral-layer-4);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  zero-modal::part(top) {
+    padding: calc(var(--design-unit) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+`;
+//# sourceMappingURL=document-manager.styles.js.map

package/dist/esm/components/foundation-document-manager/document-manager.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-manager.styles.js","sourceRoot":"","sources":["../../../../src/components/foundation-document-manager/document-manager.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,qBAAqB,GAAkB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkPtD,CAAC"}