@securancy/file-explorer 1.0.0

package/dist/components/FileExplorerDisplayModeSwitcher.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { FileExplorerDisplayMode } from '../index.js';
+declare const __propDef: {
+    props: {
+        displayMode: FileExplorerDisplayMode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FileExplorerDisplayModeSwitcherProps = typeof __propDef.props;
+export type FileExplorerDisplayModeSwitcherEvents = typeof __propDef.events;
+export type FileExplorerDisplayModeSwitcherSlots = typeof __propDef.slots;
+export default class FileExplorerDisplayModeSwitcher extends SvelteComponent<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
+}
+export {};

package/dist/components/FileExplorerFileDetailColumn.svelte

@@ -0,0 +1,340 @@
+<script>import { Card, Icon } from "@securancy/svelte-components";
+import FileIcon from "./FileIcon.svelte";
+import { resize, ResizeDirections } from "@securancy/svelte-utilities";
+import { formatBytes, getExtension, isImage } from "../utilities/index.js";
+import { DateTime } from "luxon";
+import { createEventDispatcher } from "svelte";
+export let fileItem;
+export let getFilePreview;
+export let translations;
+const dispatch = createEventDispatcher();
+const fileDateFormat = "cccc FF";
+let filePreview;
+let extension;
+$: refresh(fileItem);
+async function refresh(_fileItem) {
+  filePreview = await getFilePreview(_fileItem).catch((error) => {
+    console.error(error);
+    return void 0;
+  });
+  extension = getExtension(_fileItem.name);
+}
+</script>
+
+<div
+  class="file-explorer__column file-explorer__column--file-detail"
+  use:resize={{ directions: [ResizeDirections.East], parentPadding: true }}
+>
+  <div class="file-explorer__column-scroll-container file-explorer-preview">
+    {#if filePreview}
+      <Card type="flat">
+        {#if isImage(filePreview.url)}
+          <img
+            class="file-explorer__image-preview"
+            alt={fileItem.name}
+            src={filePreview.url}
+            title={fileItem.name}
+          >
+        {:else}
+          <FileIcon {extension} size="large" />
+        {/if}
+      </Card>
+      <Card type="flat">
+        <div
+          class="file-explorer-preview__title"
+          title={fileItem.name}
+        >
+          {fileItem.name}
+        </div>
+        <a
+          class="file-explorer-preview__download"
+          href={filePreview.url}
+          rel="noopener noreferrer"
+          target="_blank"
+          title="Download {fileItem.name}"
+        >
+          {translations.previewFile}
+        </a>
+        <div class="file-explorer-preview__info">
+          <span>Size</span>
+          <div>{formatBytes(filePreview.fileSize)}</div>
+        </div>
+        {#if filePreview.createdAt}
+          <div class="file-explorer-preview__info">
+            <span>{translations.createdAt}</span>
+            <div>{DateTime.fromJSDate(filePreview.createdAt).toFormat(fileDateFormat)}</div>
+          </div>
+        {/if}
+        {#if filePreview.modifiedAt}
+          <div class="file-explorer-preview__info">
+            <span>{translations.modifiedAt}</span>
+            <div>{DateTime.fromJSDate(filePreview.modifiedAt).toFormat(fileDateFormat)}</div>
+          </div>
+        {/if}
+        <div class="file-explorer-preview__info">
+          <button type="button" on:click={() => dispatch('delete-file', fileItem)}>
+            <Icon class="fa-solid fa-trash" />
+          </button>
+        </div>
+      </Card>
+    {:else}
+      <!-- @todo add loader if needed (test performance) -->
+    {/if}
+  </div>
+</div>
+
+<style>/* eslint-disable */
+/**
+ * Media queries and devices
+ */
+/**
+ * Some mixins that can be used dynamically inside @each loops
+ */
+.file-explorer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--file-explorer-background);
+  overflow: hidden;
+}
+.file-explorer__controls {
+    flex-shrink: 0;
+    display: flex;
+    border-bottom: var(--file-explorer-border-style);
+    padding: var(--file-explorer-default-spacing);
+    background: var(--file-explorer-background-shade);
+  }
+.file-explorer__content {
+    flex-grow: 1;
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+  }
+/* Keep the index within screen */
+@media (width >= 769px) {
+      /* @formatter:off */
+      .file-explorer--display-mode-index .file-explorer__content {
+        /* @formatter:on */
+        overflow-x: inherit;
+      }
+  }
+.file-explorer__column, .file-explorer__index {
+    flex-shrink: 0;
+    border-right: var(--file-explorer-border-style);
+    background: var(--file-explorer-background);
+  }
+.file-explorer__column {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-column-default-width);
+    min-width: var(--file-explorer-column-min-width);
+    overflow: hidden;
+  }
+.file-explorer__column--file-detail {
+      flex-grow: 1;
+      width: var(--file-explorer-preview-default-width);
+      display: flex;
+      flex-direction: column;
+    }
+.file-explorer__column--sticky {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+    }
+.file-explorer__column::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      transition: background-color 0.2s ease-in-out;
+    }
+.file-explorer__column--dragover {
+      cursor: copy;
+    }
+.file-explorer__column--dragover::after {
+        pointer-events: all;
+        background-color: var(--file-explorer-background-dragover);
+      }
+.file-explorer__index {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-index-default-width);
+    overflow: hidden;
+  }
+@media (width >= 769px) {
+.file-explorer__index {
+      flex-shrink: 1
+  }
+    }
+.file-explorer__index--hidden {
+      display: none;
+    }
+.file-explorer__column-scroll-container, .file-explorer__index-scroll-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+  }
+.file-explorer__grid {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: var(--file-explorer-default-spacing);
+  }
+.file-explorer__breadcrumb {
+    /* @todo */
+  }
+.file-explorer__display-mode-switcher {
+    display: flex;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    margin-left: auto;
+  }
+.file-explorer__search {
+    margin-bottom: var(--file-explorer-default-spacing);
+    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+  }
+.file-explorer__list {
+    margin-bottom: var(--file-explorer-default-spacing);
+  }
+.file-explorer__list-header {
+    display: flex;
+    justify-content: space-between;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    width: 100%;
+    margin-bottom: calc(0.5 * var(--file-explorer-default-spacing));
+    color: var(--file-explorer-list-header-color);
+  }
+.file-explorer__list-header span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+.file-explorer__list-header button {
+      flex-shrink: 0;
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+.file-explorer__grid-header {
+    width: 100%;
+  }
+.file-explorer__grid-header button {
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+.file-explorer__list-item, .file-explorer__grid-item {
+    border-radius: var(--file-explorer-list-item-border-radius);
+    background: none;
+    color: var(--file-explorer-list-item-color);
+  }
+.file-explorer__list-item > :global(i), .file-explorer__grid-item > :global(i) {
+      flex-shrink: 0;
+    }
+.file-explorer__list-item:not(.file-explorer__list-item--active):hover, .file-explorer__grid-item:not(.file-explorer__grid-item--active):hover {
+      background: var(--file-explorer-list-item-background-hover);
+    }
+.file-explorer__list-item--active, .file-explorer__grid-item--active {
+      color: var(--file-explorer-list-item-color-active);
+      background: var(--file-explorer-list-item-background-active);
+    }
+.file-explorer__grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /* 3 items in a grid, spaced out with default spacing means the width of 2 gaps must be subtracted from width */
+    width: calc(33.33% - (0.6666 * var(--file-explorer-default-spacing)));
+    padding: 5px 2px;
+  }
+@media (width >= 769px) {
+.file-explorer__grid-item {
+      width: 100px
+  }
+    }
+.file-explorer__grid-item--active {
+      /* @todo */
+    }
+.file-explorer__grid-item > span {
+      word-break: break-word;
+      margin-top: calc(0.25 * var(--file-explorer-default-spacing));
+    }
+.file-explorer__list-item {
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    text-align: left;
+    padding: var(--file-explorer-list-item-spacing);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+.file-explorer__list-item > span {
+      flex-grow: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+.file-explorer__list-item > :global(i:first-child) {
+      margin-right: var(--file-explorer-list-item-spacing);
+    }
+.file-explorer__list-item > :global(i:last-child) {
+      margin-left: var(--file-explorer-list-item-spacing);
+    }
+.file-explorer__message {
+    display: block;
+    padding: var(--file-explorer-list-item-spacing) 0;
+    color: var(--file-explorer-message-color);
+  }
+.file-explorer__image-preview {
+    max-width: 100%;
+    margin: 0 auto;
+  }
+.file-explorer-preview__title {
+      font-size: var(--font-size--h1);
+      font-weight: var(--font-weight--semi-bold);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+.file-explorer-preview__download {
+      color: var(--file-explorer-action-primary-color);
+      font-weight: var(--font-weight--semi-bold);
+    }
+.file-explorer-preview__download:hover {
+        text-decoration-line: underline;
+      }
+.file-explorer-preview__info {
+      margin-top: 14px;
+    }
+.file-explorer-preview__info span {
+        color: var(--file-explorer-message-color);
+      }
+.file-explorer-preview__info button {
+        cursor: pointer;
+      }
+.file-explorer__scroll-back-button {
+    position: fixed;
+    bottom: var(--file-explorer-default-spacing);
+    right: var(--file-explorer-default-spacing);
+    z-index: 2;
+    background: var(--file-explorer-action-primary-color);
+    color: var(--file-explorer-action-primary-color-contrast);
+    padding: var(--file-explorer-list-item-spacing);
+    border-radius: var(--file-explorer-list-item-border-radius);
+  }
+.file-explorer__file-icon--large {
+      width: 100%;
+      text-align: center;
+      padding: calc(2 * var(--file-explorer-default-spacing));
+    }
+.file-explorer__file-icon--large :global(i) {
+        font-size: var(--file-explorer-preview-icon-size);
+      }
+.file-explorer__text--semi-bold {
+    font-weight: var(--file-explorer-text-semi-bold);
+  }
+.file-explorer__loader {
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dist/components/FileExplorerFileDetailColumn.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { DocumentTranslations, FileItem, FilePreview } from '..';
+import type { DeleteFileEvent } from './FileExplorer.svelte';
+declare const __propDef: {
+    props: {
+        fileItem: FileItem;
+        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+        translations: DocumentTranslations;
+    };
+    events: {
+        'delete-file': CustomEvent<DeleteFileEvent>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FileExplorerFileDetailColumnProps = typeof __propDef.props;
+export type FileExplorerFileDetailColumnEvents = typeof __propDef.events;
+export type FileExplorerFileDetailColumnSlots = typeof __propDef.slots;
+export default class FileExplorerFileDetailColumn extends SvelteComponent<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
+}
+export {};

package/dist/components/FileIcon.svelte

@@ -0,0 +1,310 @@
+<script>import { Icon } from "@securancy/svelte-components";
+import { imageExtensions, videoExtensions } from "../utilities/index.js";
+export let extension;
+export let size = "default";
+let iconClass;
+$: iconClass = determineIconString(extension);
+function determineIconString(_extension) {
+  if (imageExtensions.includes(_extension)) return "fa-file-image";
+  if (videoExtensions.includes(_extension)) return "fa-file-video";
+  switch (_extension) {
+    case "pdf": {
+      return "fa-file-pdf";
+    }
+    case "doc":
+    case "docx": {
+      return "fa-file-word";
+    }
+    case "xls":
+    case "xlsx": {
+      return "fa-file-spreadsheet";
+    }
+    case "ppt":
+    case "pptx": {
+      return "fa-file-powerpoint";
+    }
+    case "csv": {
+      return "fa-file-csv";
+    }
+    case "txt": {
+      return "fa-file-lines";
+    }
+    case "zip":
+    case "tar":
+    case "rar": {
+      return "fa-file-zipper";
+    }
+    default: {
+      return "fa-file";
+    }
+  }
+}
+</script>
+
+{#if iconClass}
+  {#if size === 'large'}
+    <div class="file-explorer__file-icon file-explorer__file-icon--large">
+      <Icon class="fa-light {iconClass}" size="custom" />
+    </div>
+  {:else if size === 'grid'}
+    <Icon class="fa-light fa-2xl {iconClass}" size="custom" />
+  {:else}
+    <Icon class="fa-light {iconClass}" />
+  {/if}
+{/if}
+
+<style>/* eslint-disable */
+/**
+ * Media queries and devices
+ */
+/**
+ * Some mixins that can be used dynamically inside @each loops
+ */
+.file-explorer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--file-explorer-background);
+  overflow: hidden;
+}
+.file-explorer__controls {
+    flex-shrink: 0;
+    display: flex;
+    border-bottom: var(--file-explorer-border-style);
+    padding: var(--file-explorer-default-spacing);
+    background: var(--file-explorer-background-shade);
+  }
+.file-explorer__content {
+    flex-grow: 1;
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+  }
+/* Keep the index within screen */
+@media (width >= 769px) {
+      /* @formatter:off */
+      .file-explorer--display-mode-index .file-explorer__content {
+        /* @formatter:on */
+        overflow-x: inherit;
+      }
+  }
+.file-explorer__column, .file-explorer__index {
+    flex-shrink: 0;
+    border-right: var(--file-explorer-border-style);
+    background: var(--file-explorer-background);
+  }
+.file-explorer__column {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-column-default-width);
+    min-width: var(--file-explorer-column-min-width);
+    overflow: hidden;
+  }
+.file-explorer__column--file-detail {
+      flex-grow: 1;
+      width: var(--file-explorer-preview-default-width);
+      display: flex;
+      flex-direction: column;
+    }
+.file-explorer__column--sticky {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+    }
+.file-explorer__column::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      transition: background-color 0.2s ease-in-out;
+    }
+.file-explorer__column--dragover {
+      cursor: copy;
+    }
+.file-explorer__column--dragover::after {
+        pointer-events: all;
+        background-color: var(--file-explorer-background-dragover);
+      }
+.file-explorer__index {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-index-default-width);
+    overflow: hidden;
+  }
+@media (width >= 769px) {
+.file-explorer__index {
+      flex-shrink: 1
+  }
+    }
+.file-explorer__index--hidden {
+      display: none;
+    }
+.file-explorer__column-scroll-container, .file-explorer__index-scroll-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+  }
+.file-explorer__grid {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: var(--file-explorer-default-spacing);
+  }
+.file-explorer__breadcrumb {
+    /* @todo */
+  }
+.file-explorer__display-mode-switcher {
+    display: flex;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    margin-left: auto;
+  }
+.file-explorer__search {
+    margin-bottom: var(--file-explorer-default-spacing);
+    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+  }
+.file-explorer__list {
+    margin-bottom: var(--file-explorer-default-spacing);
+  }
+.file-explorer__list-header {
+    display: flex;
+    justify-content: space-between;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    width: 100%;
+    margin-bottom: calc(0.5 * var(--file-explorer-default-spacing));
+    color: var(--file-explorer-list-header-color);
+  }
+.file-explorer__list-header span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+.file-explorer__list-header button {
+      flex-shrink: 0;
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+.file-explorer__grid-header {
+    width: 100%;
+  }
+.file-explorer__grid-header button {
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+.file-explorer__list-item, .file-explorer__grid-item {
+    border-radius: var(--file-explorer-list-item-border-radius);
+    background: none;
+    color: var(--file-explorer-list-item-color);
+  }
+.file-explorer__list-item > :global(i), .file-explorer__grid-item > :global(i) {
+      flex-shrink: 0;
+    }
+.file-explorer__list-item:not(.file-explorer__list-item--active):hover, .file-explorer__grid-item:not(.file-explorer__grid-item--active):hover {
+      background: var(--file-explorer-list-item-background-hover);
+    }
+.file-explorer__list-item--active, .file-explorer__grid-item--active {
+      color: var(--file-explorer-list-item-color-active);
+      background: var(--file-explorer-list-item-background-active);
+    }
+.file-explorer__grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /* 3 items in a grid, spaced out with default spacing means the width of 2 gaps must be subtracted from width */
+    width: calc(33.33% - (0.6666 * var(--file-explorer-default-spacing)));
+    padding: 5px 2px;
+  }
+@media (width >= 769px) {
+.file-explorer__grid-item {
+      width: 100px
+  }
+    }
+.file-explorer__grid-item--active {
+      /* @todo */
+    }
+.file-explorer__grid-item > span {
+      word-break: break-word;
+      margin-top: calc(0.25 * var(--file-explorer-default-spacing));
+    }
+.file-explorer__list-item {
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    text-align: left;
+    padding: var(--file-explorer-list-item-spacing);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+.file-explorer__list-item > span {
+      flex-grow: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+.file-explorer__list-item > :global(i:first-child) {
+      margin-right: var(--file-explorer-list-item-spacing);
+    }
+.file-explorer__list-item > :global(i:last-child) {
+      margin-left: var(--file-explorer-list-item-spacing);
+    }
+.file-explorer__message {
+    display: block;
+    padding: var(--file-explorer-list-item-spacing) 0;
+    color: var(--file-explorer-message-color);
+  }
+.file-explorer__image-preview {
+    max-width: 100%;
+    margin: 0 auto;
+  }
+.file-explorer-preview__title {
+      font-size: var(--font-size--h1);
+      font-weight: var(--font-weight--semi-bold);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+.file-explorer-preview__download {
+      color: var(--file-explorer-action-primary-color);
+      font-weight: var(--font-weight--semi-bold);
+    }
+.file-explorer-preview__download:hover {
+        text-decoration-line: underline;
+      }
+.file-explorer-preview__info {
+      margin-top: 14px;
+    }
+.file-explorer-preview__info span {
+        color: var(--file-explorer-message-color);
+      }
+.file-explorer-preview__info button {
+        cursor: pointer;
+      }
+.file-explorer__scroll-back-button {
+    position: fixed;
+    bottom: var(--file-explorer-default-spacing);
+    right: var(--file-explorer-default-spacing);
+    z-index: 2;
+    background: var(--file-explorer-action-primary-color);
+    color: var(--file-explorer-action-primary-color-contrast);
+    padding: var(--file-explorer-list-item-spacing);
+    border-radius: var(--file-explorer-list-item-border-radius);
+  }
+.file-explorer__file-icon--large {
+      width: 100%;
+      text-align: center;
+      padding: calc(2 * var(--file-explorer-default-spacing));
+    }
+.file-explorer__file-icon--large :global(i) {
+        font-size: var(--file-explorer-preview-icon-size);
+      }
+.file-explorer__text--semi-bold {
+    font-weight: var(--file-explorer-text-semi-bold);
+  }
+.file-explorer__loader {
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dist/components/FileIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        extension: string;
+        size?: "default" | "large" | "grid";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FileIconProps = typeof __propDef.props;
+export type FileIconEvents = typeof __propDef.events;
+export type FileIconSlots = typeof __propDef.slots;
+export default class FileIcon extends SvelteComponent<FileIconProps, FileIconEvents, FileIconSlots> {
+}
+export {};