@pallasoft/ps-file-components 1.0.0

package/dist/components/viewers/ps-pdf-thumbnail.d.ts

@@ -0,0 +1,11 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+export interface PsPdfThumbnailProps {
+    document: PDFDocumentProxy;
+    hasMatches: boolean;
+    isCurrent: boolean;
+    label: string;
+    onSelect: () => void;
+    pageNumber: number;
+    rotation: number;
+}
+export declare const PsPdfThumbnail: ({ document, hasMatches, isCurrent, label, onSelect, pageNumber, rotation, }: PsPdfThumbnailProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-pdf-thumbnail.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPdfThumbnail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_file_viewer_config_1 = require("../../constants/ps-file-viewer-config");
+const use_ps_in_view_1 = require("../../hooks/use-ps-in-view");
+const ps_pdf_service_1 = require("../../services/ps-pdf-service");
+const PsPdfThumbnail = ({ document, hasMatches, isCurrent, label, onSelect, pageNumber, rotation, }) => {
+    const canvas = (0, react_1.useRef)(null);
+    const [container, isInView] = (0, use_ps_in_view_1.usePsInView)('200px');
+    (0, react_1.useEffect)(() => {
+        if (!isInView)
+            return;
+        let isCurrent = true;
+        let task = null;
+        document.getPage(pageNumber).then((page) => {
+            if (isCurrent && canvas.current)
+                task = ps_pdf_service_1.PsPdfService.render(page, canvas.current, ps_file_viewer_config_1.PsFileViewerConfig.pdfThumbnailScale, rotation);
+        });
+        return () => {
+            isCurrent = false;
+            task?.cancel();
+        };
+    }, [document, pageNumber, rotation, isInView]);
+    return ((0, jsx_runtime_1.jsxs)("button", { "aria-current": isCurrent ? 'page' : undefined, "aria-label": `${label} ${pageNumber}`, className: `ps-focus-ring relative flex flex-col items-center gap-1 rounded-md p-1.5 transition ${isCurrent ? 'bg-white/15' : 'hover:bg-white/10'}`, onClick: onSelect, ref: container, type: 'button', children: [(0, jsx_runtime_1.jsx)("canvas", { className: `block min-h-16 min-w-12 bg-white ${isCurrent ? 'ring-2 ring-primary' : ''}`, ref: canvas }), (0, jsx_runtime_1.jsx)("span", { className: 'text-[0.7rem] text-white/70', children: pageNumber }), hasMatches ? ((0, jsx_runtime_1.jsx)("span", { className: 'absolute right-1 top-1 h-2 w-2 rounded-full bg-warning' })) : null] }));
+};
+exports.PsPdfThumbnail = PsPdfThumbnail;

package/dist/components/viewers/ps-pdf-viewer.d.ts

@@ -0,0 +1,2 @@
+import type { PsFileViewerContentProps } from '../../models/ps-file-viewer-content-props';
+export declare const PsPdfViewer: ({ activeMatch, file, labels, onMatchCount, pdfWorkerSrc, query, rotation, zoom, }: PsFileViewerContentProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-pdf-viewer.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPdfViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_file_viewer_config_1 = require("../../constants/ps-file-viewer-config");
+const ps_pdf_service_1 = require("../../services/ps-pdf-service");
+const ps_pdf_page_1 = require("./ps-pdf-page");
+const ps_pdf_thumbnail_1 = require("./ps-pdf-thumbnail");
+const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorkerSrc, query, rotation, zoom, }) => {
+    const [document, setDocument] = (0, react_1.useState)(null);
+    const [hasFailed, setHasFailed] = (0, react_1.useState)(false);
+    const [pageWidth, setPageWidth] = (0, react_1.useState)(0);
+    const [matches, setMatches] = (0, react_1.useState)([]);
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [frame, frameSize] = (0, ps_core_components_1.usePsElementSize)();
+    const scroller = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        let isCurrent = true;
+        let opened = null;
+        setDocument(null);
+        setHasFailed(false);
+        if (pdfWorkerSrc === undefined) {
+            setHasFailed(true);
+            return;
+        }
+        ps_pdf_service_1.PsPdfService.open(file.url, pdfWorkerSrc)
+            .then(async (loaded) => {
+            opened = loaded;
+            const firstPage = await loaded.getPage(1);
+            if (!isCurrent)
+                return;
+            setPageWidth(firstPage.getViewport({ rotation: firstPage.rotate + rotation, scale: 1 }).width);
+            setDocument(loaded);
+        })
+            .catch(() => {
+            if (isCurrent)
+                setHasFailed(true);
+        });
+        return () => {
+            isCurrent = false;
+            void opened?.loadingTask.destroy();
+        };
+    }, [file.url, pdfWorkerSrc]);
+    (0, react_1.useEffect)(() => {
+        if (document === null)
+            return;
+        let isCurrent = true;
+        document.getPage(1).then((page) => {
+            if (isCurrent)
+                setPageWidth(page.getViewport({ rotation: page.rotate + rotation, scale: 1 }).width);
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [document, rotation]);
+    (0, react_1.useEffect)(() => {
+        if (document === null || query.trim().length === 0) {
+            setMatches([]);
+            onMatchCount(0);
+            return;
+        }
+        let isCurrent = true;
+        ps_pdf_service_1.PsPdfService.search(document, query, rotation).then((found) => {
+            if (!isCurrent)
+                return;
+            setMatches(found);
+            onMatchCount(found.length);
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [document, query, rotation]);
+    const active = matches.length > 0 ? matches[activeMatch % matches.length] : null;
+    const scrollToPage = (pageNumber) => {
+        const node = scroller.current?.querySelector(`[data-ps-pdf-page='${pageNumber}']`);
+        if (node instanceof HTMLElement)
+            node.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        setCurrentPage(pageNumber);
+    };
+    (0, react_1.useEffect)(() => {
+        if (active !== null)
+            scrollToPage(active.pageNumber);
+    }, [active]);
+    const scale = (0, react_1.useMemo)(() => {
+        const fit = frameSize.width > 0 && pageWidth > 0
+            ? (frameSize.width - 48) / pageWidth
+            : ps_file_viewer_config_1.PsFileViewerConfig.pdfBaseScale;
+        return Math.max(0.1, fit * zoom);
+    }, [frameSize.width, pageWidth, zoom]);
+    const pages = document === null ? [] : Array.from({ length: document.numPages }, (_, index) => index + 1);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full w-full min-w-0', children: [document !== null && document.numPages > 1 ? ((0, jsx_runtime_1.jsx)("nav", { className: 'ps-scrollbar-hidden hidden w-24 shrink-0 flex-col items-center gap-2 overflow-y-auto border-r border-white/10 py-3 md:flex', children: pages.map((pageNumber) => ((0, jsx_runtime_1.jsx)(ps_pdf_thumbnail_1.PsPdfThumbnail, { document: document, hasMatches: matches.some((match) => match.pageNumber === pageNumber), isCurrent: pageNumber === currentPage, label: labels.page, onSelect: () => scrollToPage(pageNumber), pageNumber: pageNumber, rotation: rotation }, pageNumber))) })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0 flex-1', ref: frame, children: hasFailed ? ((0, jsx_runtime_1.jsx)("p", { className: 'flex h-full items-center justify-center text-sm text-white/70', children: labels.loadFailed })) : document === null ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-full items-center justify-center text-white', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', size: 'large' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-full flex-col items-center gap-4 overflow-auto px-6 py-6', onScroll: (event) => {
+                        const top = event.currentTarget.scrollTop + event.currentTarget.clientHeight / 3;
+                        const visible = Array.from(event.currentTarget.querySelectorAll('[data-ps-pdf-page]')).find((node) => node.offsetTop + node.offsetHeight > top);
+                        if (visible)
+                            setCurrentPage(Number(visible.dataset.psPdfPage));
+                    }, ref: scroller, children: pages.map((pageNumber) => ((0, jsx_runtime_1.jsx)(ps_pdf_page_1.PsPdfPage, { activeMatch: active, document: document, label: labels.page, matches: matches.filter((match) => match.pageNumber === pageNumber), pageNumber: pageNumber, rotation: rotation, scale: scale }, pageNumber))) })) })] }));
+};
+exports.PsPdfViewer = PsPdfViewer;

package/dist/components/viewers/ps-text-viewer.d.ts

@@ -0,0 +1,2 @@
+import type { PsFileViewerContentProps } from '../../models/ps-file-viewer-content-props';
+export declare const PsTextViewer: ({ activeMatch, file, labels, onMatchCount, query, zoom, }: PsFileViewerContentProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-text-viewer.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_file_kind_1 = require("../../constants/ps-file-kind");
+const use_ps_active_match_scroll_1 = require("../../hooks/use-ps-active-match-scroll");
+const use_ps_file_text_1 = require("../../hooks/use-ps-file-text");
+const ps_csv_service_1 = require("../../services/ps-csv-service");
+const ps_file_type_service_1 = require("../../services/ps-file-type-service");
+const ps_text_search_service_1 = require("../../services/ps-text-search-service");
+const ps_highlighted_text_1 = require("./ps-highlighted-text");
+const PsTextViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, text } = (0, use_ps_file_text_1.usePsFileText)(file.url);
+    const container = (0, react_1.useRef)(null);
+    const isCsv = ps_file_type_service_1.PsFileTypeService.kindOf(file.contentType, file.name) === ps_file_kind_1.PsFileKind.csv;
+    const rows = (0, react_1.useMemo)(() => (isCsv && text !== null ? ps_csv_service_1.PsCsvService.parse(text) : []), [isCsv, text]);
+    const cells = (0, react_1.useMemo)(() => {
+        let offset = 0;
+        return rows.map((row) => row.map((cell) => {
+            const matches = ps_text_search_service_1.PsTextSearchService.find(cell, query);
+            const segments = ps_text_search_service_1.PsTextSearchService.segments(cell, matches, offset);
+            offset += matches.length;
+            return segments;
+        }));
+    }, [rows, query]);
+    const segments = (0, react_1.useMemo)(() => isCsv || text === null
+        ? []
+        : ps_text_search_service_1.PsTextSearchService.segments(text, ps_text_search_service_1.PsTextSearchService.find(text, query)), [isCsv, text, query]);
+    const count = isCsv
+        ? cells.reduce((total, row) => total + row.reduce((sum, cell) => sum + cell.filter((part) => part.isMatch).length, 0), 0)
+        : segments.filter((part) => part.isMatch).length;
+    (0, react_1.useEffect)(() => onMatchCount(count), [count]);
+    (0, use_ps_active_match_scroll_1.usePsActiveMatchScroll)(container, activeMatch, query);
+    if (hasFailed)
+        return (0, jsx_runtime_1.jsx)("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    if (text === null)
+        return (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'h-full w-full overflow-auto', ref: container, children: (0, jsx_runtime_1.jsx)("div", { className: 'mx-auto w-full max-w-5xl rounded-lg bg-surface p-5 text-ink shadow-2xl', style: { fontSize: `${zoom * 0.875}rem` }, children: isCsv ? ((0, jsx_runtime_1.jsx)("table", { className: 'w-full border-collapse text-left', children: (0, jsx_runtime_1.jsx)("tbody", { children: cells.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: rowIndex === 0 ? 'bg-primary-soft/50 font-semibold' : 'border-t border-line', children: row.map((cell, cellIndex) => ((0, jsx_runtime_1.jsx)("td", { className: 'whitespace-nowrap px-3 py-1.5 align-top', children: (0, jsx_runtime_1.jsx)(ps_highlighted_text_1.PsHighlightedText, { activeMatch: activeMatch, segments: cell }) }, cellIndex))) }, rowIndex))) }) })) : ((0, jsx_runtime_1.jsx)("pre", { className: 'whitespace-pre-wrap break-words font-mono leading-relaxed', children: (0, jsx_runtime_1.jsx)(ps_highlighted_text_1.PsHighlightedText, { activeMatch: activeMatch, segments: segments }) })) }) }));
+};
+exports.PsTextViewer = PsTextViewer;

package/dist/components/viewers/ps-unsupported-viewer.d.ts

@@ -0,0 +1,2 @@
+import type { PsFileViewerContentProps } from '../../models/ps-file-viewer-content-props';
+export declare const PsUnsupportedViewer: ({ file, labels }: PsFileViewerContentProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-unsupported-viewer.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUnsupportedViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_file_kind_icon_1 = require("../ps-file-kind-icon");
+const PsUnsupportedViewer = ({ file, labels }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'm-auto flex max-w-sm flex-col items-center gap-4 rounded-2xl bg-surface p-8 text-center shadow-2xl', children: [(0, jsx_runtime_1.jsx)(ps_file_kind_icon_1.PsFileKindIcon, { className: 'h-14 w-14', contentType: file.contentType, name: file.name }), (0, jsx_runtime_1.jsx)("p", { className: 'break-all font-semibold text-ink', children: file.name }), (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/60', children: labels.unsupported }), (0, jsx_runtime_1.jsxs)("a", { className: 'ps-focus-ring inline-flex items-center gap-2 rounded-full bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary/90', download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Download }), labels.download] })] }));
+exports.PsUnsupportedViewer = PsUnsupportedViewer;

package/dist/constants/ps-file-kind-icons.d.ts

@@ -0,0 +1,3 @@
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { PsFileKind } from './ps-file-kind';
+export declare const PsFileKindIcons: Record<PsFileKind, PsIconKey>;

package/dist/constants/ps-file-kind-icons.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileKindIcons = void 0;
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_file_kind_1 = require("./ps-file-kind");
+exports.PsFileKindIcons = {
+    [ps_file_kind_1.PsFileKind.audio]: ps_icons_1.PsIconKey.Audio,
+    [ps_file_kind_1.PsFileKind.csv]: ps_icons_1.PsIconKey.Sheet,
+    [ps_file_kind_1.PsFileKind.image]: ps_icons_1.PsIconKey.Image,
+    [ps_file_kind_1.PsFileKind.other]: ps_icons_1.PsIconKey.File,
+    [ps_file_kind_1.PsFileKind.pdf]: ps_icons_1.PsIconKey.Doc,
+    [ps_file_kind_1.PsFileKind.text]: ps_icons_1.PsIconKey.Text,
+    [ps_file_kind_1.PsFileKind.video]: ps_icons_1.PsIconKey.Video,
+};

package/dist/constants/ps-file-kind.d.ts

@@ -0,0 +1,10 @@
+export declare const PsFileKind: {
+    readonly audio: "audio";
+    readonly csv: "csv";
+    readonly image: "image";
+    readonly other: "other";
+    readonly pdf: "pdf";
+    readonly text: "text";
+    readonly video: "video";
+};
+export type PsFileKind = (typeof PsFileKind)[keyof typeof PsFileKind];

package/dist/constants/ps-file-kind.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileKind = void 0;
+exports.PsFileKind = {
+    audio: 'audio',
+    csv: 'csv',
+    image: 'image',
+    other: 'other',
+    pdf: 'pdf',
+    text: 'text',
+    video: 'video',
+};

package/dist/constants/ps-file-list-labels.d.ts

@@ -0,0 +1,6 @@
+export declare const PsFileListLabels: {
+    readonly delete: "Delete";
+    readonly download: "Download";
+    readonly empty: "No files yet";
+    readonly open: "Open";
+};

package/dist/constants/ps-file-list-labels.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileListLabels = void 0;
+exports.PsFileListLabels = {
+    delete: 'Delete',
+    download: 'Download',
+    empty: 'No files yet',
+    open: 'Open',
+};

package/dist/constants/ps-file-picker-labels.d.ts

@@ -0,0 +1,7 @@
+export declare const PsFilePickerLabels: {
+    readonly browse: "or click to browse your files";
+    readonly dropActive: "Drop to upload";
+    readonly formats: "Accepted formats:";
+    readonly invalidType: "is not a supported file type.";
+    readonly tooLarge: "is too large.";
+};

package/dist/constants/ps-file-picker-labels.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFilePickerLabels = void 0;
+exports.PsFilePickerLabels = {
+    browse: 'or click to browse your files',
+    dropActive: 'Drop to upload',
+    formats: 'Accepted formats:',
+    invalidType: 'is not a supported file type.',
+    tooLarge: 'is too large.',
+};

package/dist/constants/ps-file-type-config.d.ts

@@ -0,0 +1,7 @@
+import { PsFileKind } from './ps-file-kind';
+export declare const PsFileTypeConfig: {
+    readonly csvTypes: readonly ["text/csv", "application/csv", "application/vnd.ms-excel"];
+    readonly extensionKinds: Record<string, PsFileKind>;
+    readonly sizeUnits: readonly ["B", "KB", "MB", "GB"];
+    readonly textTypes: readonly ["application/json", "application/xml"];
+};

package/dist/constants/ps-file-type-config.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileTypeConfig = void 0;
+const ps_file_kind_1 = require("./ps-file-kind");
+exports.PsFileTypeConfig = {
+    csvTypes: ['text/csv', 'application/csv', 'application/vnd.ms-excel'],
+    extensionKinds: {
+        csv: ps_file_kind_1.PsFileKind.csv,
+        gif: ps_file_kind_1.PsFileKind.image,
+        heic: ps_file_kind_1.PsFileKind.image,
+        jpeg: ps_file_kind_1.PsFileKind.image,
+        jpg: ps_file_kind_1.PsFileKind.image,
+        json: ps_file_kind_1.PsFileKind.text,
+        log: ps_file_kind_1.PsFileKind.text,
+        md: ps_file_kind_1.PsFileKind.text,
+        mov: ps_file_kind_1.PsFileKind.video,
+        mp3: ps_file_kind_1.PsFileKind.audio,
+        mp4: ps_file_kind_1.PsFileKind.video,
+        pdf: ps_file_kind_1.PsFileKind.pdf,
+        png: ps_file_kind_1.PsFileKind.image,
+        svg: ps_file_kind_1.PsFileKind.image,
+        txt: ps_file_kind_1.PsFileKind.text,
+        wav: ps_file_kind_1.PsFileKind.audio,
+        webm: ps_file_kind_1.PsFileKind.video,
+        webp: ps_file_kind_1.PsFileKind.image,
+        xml: ps_file_kind_1.PsFileKind.text,
+    },
+    sizeUnits: ['B', 'KB', 'MB', 'GB'],
+    textTypes: ['application/json', 'application/xml'],
+};

package/dist/constants/ps-file-viewer-config.d.ts

@@ -0,0 +1,9 @@
+export declare const PsFileViewerConfig: {
+    readonly maxZoom: 4;
+    readonly minZoom: 0.25;
+    readonly pdfBaseScale: 1.4;
+    readonly pdfThumbnailScale: 0.2;
+    readonly rotateStep: 90;
+    readonly searchDebounceMs: 250;
+    readonly zoomStep: 0.25;
+};

package/dist/constants/ps-file-viewer-config.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileViewerConfig = void 0;
+exports.PsFileViewerConfig = {
+    maxZoom: 4,
+    minZoom: 0.25,
+    pdfBaseScale: 1.4,
+    pdfThumbnailScale: 0.2,
+    rotateStep: 90,
+    searchDebounceMs: 250,
+    zoomStep: 0.25,
+};

package/dist/constants/ps-file-viewer-kinds.d.ts

@@ -0,0 +1,5 @@
+export declare const PsFileViewerKinds: {
+    readonly rotatable: readonly ["image", "pdf"];
+    readonly searchable: readonly ["csv", "pdf", "text"];
+    readonly zoomable: readonly ["csv", "image", "pdf", "text"];
+};

package/dist/constants/ps-file-viewer-kinds.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileViewerKinds = void 0;
+const ps_file_kind_1 = require("./ps-file-kind");
+exports.PsFileViewerKinds = {
+    rotatable: [ps_file_kind_1.PsFileKind.image, ps_file_kind_1.PsFileKind.pdf],
+    searchable: [ps_file_kind_1.PsFileKind.csv, ps_file_kind_1.PsFileKind.pdf, ps_file_kind_1.PsFileKind.text],
+    zoomable: [ps_file_kind_1.PsFileKind.csv, ps_file_kind_1.PsFileKind.image, ps_file_kind_1.PsFileKind.pdf, ps_file_kind_1.PsFileKind.text],
+};

package/dist/constants/ps-file-viewer-labels.d.ts

@@ -0,0 +1,21 @@
+export declare const PsFileViewerLabels: {
+    readonly close: "Close";
+    readonly delete: "Delete";
+    readonly deleteConfirm: "Delete file";
+    readonly deleteConfirmBody: "This file will be removed. This cannot be undone from here.";
+    readonly deleteCancel: "Keep file";
+    readonly download: "Download";
+    readonly loadFailed: "This file could not be opened.";
+    readonly next: "Next file";
+    readonly nextMatch: "Next match";
+    readonly noMatches: "No matches";
+    readonly page: "Page";
+    readonly previous: "Previous file";
+    readonly previousMatch: "Previous match";
+    readonly rotate: "Rotate";
+    readonly search: "Search in file";
+    readonly unsupported: "This file type cannot be previewed here. Download it to open it.";
+    readonly zoomIn: "Zoom in";
+    readonly zoomOut: "Zoom out";
+    readonly zoomReset: "Fit";
+};

package/dist/constants/ps-file-viewer-labels.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileViewerLabels = void 0;
+exports.PsFileViewerLabels = {
+    close: 'Close',
+    delete: 'Delete',
+    deleteConfirm: 'Delete file',
+    deleteConfirmBody: 'This file will be removed. This cannot be undone from here.',
+    deleteCancel: 'Keep file',
+    download: 'Download',
+    loadFailed: 'This file could not be opened.',
+    next: 'Next file',
+    nextMatch: 'Next match',
+    noMatches: 'No matches',
+    page: 'Page',
+    previous: 'Previous file',
+    previousMatch: 'Previous match',
+    rotate: 'Rotate',
+    search: 'Search in file',
+    unsupported: 'This file type cannot be previewed here. Download it to open it.',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    zoomReset: 'Fit',
+};

package/dist/constants/ps-upload-labels.d.ts

@@ -0,0 +1,14 @@
+export declare const PsUploadLabels: {
+    readonly cancel: "Cancel";
+    readonly cancelled: "Cancelled";
+    readonly close: "Close";
+    readonly done: "Uploaded";
+    readonly failed: "Failed";
+    readonly processing: "Saving";
+    readonly remove: "Remove";
+    readonly retry: "Retry";
+    readonly title: "Uploading files";
+    readonly titleDone: "Upload finished";
+    readonly uploading: "Uploading";
+    readonly waiting: "Waiting";
+};

package/dist/constants/ps-upload-labels.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUploadLabels = void 0;
+exports.PsUploadLabels = {
+    cancel: 'Cancel',
+    cancelled: 'Cancelled',
+    close: 'Close',
+    done: 'Uploaded',
+    failed: 'Failed',
+    processing: 'Saving',
+    remove: 'Remove',
+    retry: 'Retry',
+    title: 'Uploading files',
+    titleDone: 'Upload finished',
+    uploading: 'Uploading',
+    waiting: 'Waiting',
+};

package/dist/constants/ps-upload-messages.d.ts

@@ -0,0 +1,4 @@
+export declare const PsUploadMessages: {
+    readonly cancelled: "Upload cancelled";
+    readonly failed: "Upload failed";
+};

package/dist/constants/ps-upload-messages.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUploadMessages = void 0;
+exports.PsUploadMessages = {
+    cancelled: 'Upload cancelled',
+    failed: 'Upload failed',
+};

package/dist/constants/ps-upload-queue-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsUploadQueueConfig: {
+    readonly concurrency: 3;
+    readonly progressDone: 1;
+};

package/dist/constants/ps-upload-queue-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUploadQueueConfig = void 0;
+exports.PsUploadQueueConfig = {
+    concurrency: 3,
+    progressDone: 1,
+};

package/dist/constants/ps-upload-status-tones.d.ts

@@ -0,0 +1,2 @@
+import { PsUploadStatus } from './ps-upload-status';
+export declare const PsUploadStatusTones: Record<PsUploadStatus, 'danger' | 'primary' | 'success'>;

package/dist/constants/ps-upload-status-tones.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUploadStatusTones = void 0;
+const ps_upload_status_1 = require("./ps-upload-status");
+exports.PsUploadStatusTones = {
+    [ps_upload_status_1.PsUploadStatus.cancelled]: 'danger',
+    [ps_upload_status_1.PsUploadStatus.done]: 'success',
+    [ps_upload_status_1.PsUploadStatus.failed]: 'danger',
+    [ps_upload_status_1.PsUploadStatus.processing]: 'primary',
+    [ps_upload_status_1.PsUploadStatus.uploading]: 'primary',
+    [ps_upload_status_1.PsUploadStatus.waiting]: 'primary',
+};

package/dist/constants/ps-upload-status.d.ts

@@ -0,0 +1,9 @@
+export declare const PsUploadStatus: {
+    readonly cancelled: "cancelled";
+    readonly done: "done";
+    readonly failed: "failed";
+    readonly processing: "processing";
+    readonly uploading: "uploading";
+    readonly waiting: "waiting";
+};
+export type PsUploadStatus = (typeof PsUploadStatus)[keyof typeof PsUploadStatus];

package/dist/constants/ps-upload-status.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUploadStatus = void 0;
+exports.PsUploadStatus = {
+    cancelled: 'cancelled',
+    done: 'done',
+    failed: 'failed',
+    processing: 'processing',
+    uploading: 'uploading',
+    waiting: 'waiting',
+};

package/dist/esm/components/ps-file-delete-confirm.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsButton } from '@pallasoft/ps-core-components';
+import { PsModal } from '@pallasoft/ps-popovers';
+export const PsFileDeleteConfirm = ({ fileName, isDeleting, isOpen, labels, onCancel, onConfirm, }) => (_jsx(PsModal, { eyebrow: fileName, isOpen: isOpen, onClose: onCancel, size: 'sm', title: labels.deleteConfirm, children: _jsxs("div", { className: 'flex flex-col gap-5', children: [_jsx("p", { className: 'text-sm text-ink/70', children: labels.deleteConfirmBody }), _jsxs("div", { className: 'flex justify-end gap-2', children: [_jsx(PsButton, { disabled: isDeleting, onClick: onCancel, type: 'button', variant: 'ghost', children: labels.deleteCancel }), _jsx(PsButton, { isLoading: isDeleting, onClick: onConfirm, type: 'button', variant: 'danger', children: labels.delete })] })] }) }));

package/dist/esm/components/ps-file-kind-icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon } from '@pallasoft/ps-icons';
+import { PsFileKindIcons } from '../constants/ps-file-kind-icons';
+import { PsFileTypeService } from '../services/ps-file-type-service';
+export const PsFileKindIcon = ({ className, contentType, name }) => (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-ps-control bg-primary-soft/60 text-primary', className), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5', iconKey: PsFileKindIcons[PsFileTypeService.kindOf(contentType, name)] }) }));

package/dist/esm/components/ps-file-list.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsButton } from '@pallasoft/ps-core-components';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsFileKind } from '../constants/ps-file-kind';
+import { PsFileListLabels } from '../constants/ps-file-list-labels';
+import { PsFileSizeService } from '../services/ps-file-size-service';
+import { PsFileTypeService } from '../services/ps-file-type-service';
+import { PsFileKindIcon } from './ps-file-kind-icon';
+export const PsFileList = ({ busyIds = [], files, formatDate, labels, onDelete, onOpen, }) => {
+    const text = { ...PsFileListLabels, ...labels };
+    if (files.length === 0)
+        return _jsx("p", { className: 'text-sm text-ink/60', children: text.empty });
+    return (_jsx("ul", { className: 'grid gap-2 sm:grid-cols-2', children: files.map((file, index) => {
+            const isImage = PsFileTypeService.kindOf(file.contentType, file.name) === PsFileKind.image;
+            const meta = [
+                file.sizeBytes === undefined ? null : PsFileSizeService.format(file.sizeBytes),
+                file.createdAt === undefined || formatDate === undefined
+                    ? null
+                    : formatDate(file.createdAt),
+            ].filter((value) => value !== null);
+            return (_jsxs("li", { className: 'group flex min-w-0 items-center gap-3 rounded-ps-control border border-line bg-surface p-2 transition hover:border-primary/40', children: [_jsxs("button", { "aria-label": `${text.open} ${file.name}`, className: 'ps-focus-ring flex min-w-0 flex-1 items-center gap-3 rounded-ps-control text-left', onClick: () => onOpen(index), type: 'button', children: [isImage ? (_jsx("img", { alt: '', className: 'h-12 w-12 shrink-0 rounded-ps-control border border-line object-cover', loading: 'lazy', src: file.url })) : (_jsx(PsFileKindIcon, { className: 'h-12 w-12', contentType: file.contentType, name: file.name })), _jsxs("span", { className: 'flex min-w-0 flex-col', children: [_jsx("span", { className: 'truncate text-sm font-medium text-ink group-hover:text-primary', children: file.name }), meta.length > 0 ? (_jsx("span", { className: 'truncate text-xs text-ink/55', children: meta.join(' · ') })) : null] })] }), _jsx("a", { "aria-label": `${text.download} ${file.name}`, className: 'ps-focus-ring inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink/55 transition hover:bg-primary-soft/60 hover:text-primary', download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Download }) }), onDelete ? (_jsx(PsButton, { "aria-label": `${text.delete} ${file.name}`, className: 'h-9 w-9 shrink-0 rounded-full p-0', disabled: busyIds.includes(file.id), onClick: () => onDelete(file), size: 'compact', type: 'button', variant: 'ghost', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Trash }) })) : null] }, file.id));
+        }) }));
+};

package/dist/esm/components/ps-file-picker.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsFilePickerLabels } from '../constants/ps-file-picker-labels';
+import { PsFileSelectionService } from '../services/ps-file-selection-service';
+export const PsFilePicker = ({ accept, acceptLabel, className, disabled = false, dropLabel, isLoading = false, labels, maxSizeBytes, maxSizeLabel, multiple = false, onError, onFileLoad, onFilesSelect, }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const acceptAttr = useMemo(() => accept.join(','), [accept]);
+    const text = { ...PsFilePickerLabels, ...labels };
+    if (isLoading)
+        return (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton block min-h-32 w-full rounded-ps-panel', className), role: 'status' }));
+    const select = (list) => {
+        if (list === null || disabled)
+            return;
+        const files = multiple ? Array.from(list) : Array.from(list).slice(0, 1);
+        const { accepted, rejected } = PsFileSelectionService.split(files, {
+            accept,
+            invalidTypeMessage: text.invalidType,
+            maxSizeBytes,
+            tooLargeMessage: maxSizeLabel ? `${text.tooLarge} ${maxSizeLabel}.` : text.tooLarge,
+        });
+        rejected.forEach((rejection) => onError?.(rejection.message));
+        if (accepted.length === 0)
+            return;
+        if (onFilesSelect)
+            onFilesSelect(accepted);
+        else
+            onFileLoad?.(accepted[0]);
+    };
+    const onChange = (event) => {
+        select(event.target.files);
+        event.target.value = '';
+    };
+    const onDrag = (event, isOver) => {
+        event.preventDefault();
+        if (!disabled)
+            setIsDragging(isOver);
+    };
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('relative flex h-48 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-line p-4 transition-all hover:border-primary/50 hover:bg-primary/5 sm:h-64', isDragging ? 'border-primary bg-primary/10' : '', disabled ? 'pointer-events-none opacity-60' : '', className), onDragEnter: (event) => onDrag(event, true), onDragLeave: (event) => onDrag(event, false), onDragOver: (event) => onDrag(event, true), onDrop: (event) => {
+            onDrag(event, false);
+            select(event.dataTransfer.files);
+        }, children: [_jsxs("div", { className: 'pointer-events-none flex flex-col items-center gap-3 text-center', children: [_jsx(PsIcon, { className: 'h-8 w-8 text-primary', iconKey: PsIconKey.Upload }), _jsxs("div", { children: [_jsx("p", { className: 'text-body-2 font-medium text-ink sm:text-body-1', children: isDragging ? text.dropActive : dropLabel }), _jsx("p", { className: 'mt-1 text-body-3 text-ink/60 sm:text-body-2', children: text.browse }), maxSizeLabel ? _jsx("p", { className: 'mt-3 text-body-3 text-ink/60', children: maxSizeLabel }) : null, _jsxs("p", { className: 'text-body-3 text-ink/60', children: [text.formats, " ", acceptLabel] })] })] }), _jsx("input", { accept: acceptAttr, "aria-disabled": disabled, "aria-label": dropLabel, className: 'absolute inset-0 h-full w-full cursor-pointer opacity-0', disabled: disabled, multiple: multiple, onChange: onChange, type: 'file' })] }));
+};

package/dist/esm/components/ps-file-viewer-button.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsFileViewerButton = ({ children, className, disabled, label, onClick, tone = 'default', }) => (_jsx("button", { "aria-label": label, className: PallasoftClassNameService.merge('ps-focus-ring inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1.5 rounded-full px-2 text-sm text-white/80 transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-40', tone === 'danger' ? 'hover:bg-danger/80' : '', className), disabled: disabled, onClick: onClick, title: label, type: 'button', children: children }));