@fluid-topics/ft-viewer 2.1.10

package/build/common/ft-viewer-content.js

@@ -0,0 +1,274 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtViewerComponent } from "./FtViewerComponent";
+import { css, html, nothing, } from "lit";
+import { redux, withConditionalVisibility, } from "@fluid-topics/ft-wc-utils";
+import { query, state, } from "lit/decorators.js";
+import { FtContentWatermark } from "@fluid-topics/ft-content-watermark";
+import { FluidTopicsApiProvider } from "@fluid-topics/ft-app-context";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+export class FtViewerContent extends withConditionalVisibility(FtViewerComponent) {
+    constructor() {
+        super(...arguments);
+        this.viewerType = "none";
+        this.inlineSvgAllowed = false;
+    }
+    render() {
+        return html `
+            ${this.renderContent()}
+            <ft-content-watermark part="watermark"
+                                  .watermark=${this.watermark}
+                                  .exportpartsPrefixes=${["watermark"]}
+                                  .heightReference=${this}></ft-content-watermark>
+        `;
+    }
+    renderContent() {
+        var _a;
+        switch (this.viewerType) {
+            case "image":
+                return this.renderImageViewer();
+            case "inline-svg":
+                return this.renderImageViewer();
+            case "video":
+                return this.renderVideoViewer();
+            case "pdf":
+                return this.renderPdfViewer();
+            case "iframe":
+                return this.renderIframeViewer((_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.contentUrl);
+            default:
+                return nothing;
+        }
+    }
+    renderImageViewer() {
+        var _a, _b;
+        return html `
+            <div class="image-viewer">
+                <div class="image-viewer-content">
+                    <div class="image-container">
+                        ${(this.viewerType === "image") ? html `
+                            <img src="${(_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.contentUrl}"
+                                 alt="${(_b = this.descriptor) === null || _b === void 0 ? void 0 : _b.alt}"
+                                 @load=${this.onImageLoad}>
+                        ` : html `
+                            ${unsafeHTML(this.svgContent)}
+                        `}
+
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    onImageLoad() {
+        var _a;
+        this.initialImageHeight = this.image.naturalHeight === 0 ? this.image.clientHeight : this.image.naturalHeight;
+        this.initialImageWidth = this.image.naturalWidth === 0 ? this.image.clientWidth : this.image.naturalWidth;
+        (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setZoom(Math.min(1, this.getImageToViewerRatio()));
+    }
+    onSvgLoad() {
+        var _a;
+        if (this.svg.clientWidth === 0 || this.svg.clientHeight === 0) {
+            this.svg.style.width = "90vw";
+            this.svg.style.height = "90vh";
+        }
+        this.initialImageHeight = this.svg.viewBox.baseVal.height === 0 ? this.svg.clientHeight : this.svg.viewBox.baseVal.height;
+        this.initialImageWidth = this.svg.viewBox.baseVal.width === 0 ? this.svg.clientWidth : this.svg.viewBox.baseVal.width;
+        (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setZoom(Math.min(1, this.getImageToViewerRatio()));
+    }
+    getImageToViewerRatio() {
+        if (this.initialImageHeight != undefined && this.initialImageWidth != undefined) {
+            const imageRatio = this.initialImageHeight / this.initialImageWidth;
+            const viewerRatio = this.clientHeight / this.clientWidth;
+            return imageRatio > viewerRatio
+                ? this.clientHeight / this.initialImageHeight
+                : this.clientWidth / this.initialImageWidth;
+        }
+        return undefined;
+    }
+    /***************************************
+     *             Video viewer            *
+     ***************************************/
+    renderVideoViewer() {
+        var _a;
+        return html `
+            <video src="${(_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.contentUrl}" controls></video>
+        `;
+    }
+    /***************************************
+     *              PDF viewer             *
+     ***************************************/
+    renderPdfViewer() {
+        var _a;
+        const queryParameter = new URLSearchParams({ file: this.descriptor.contentUrl });
+        return this.renderIframeViewer(`${(_a = FluidTopicsApiProvider.get()) === null || _a === void 0 ? void 0 : _a.makeAbsolute("/pdf-viewer")}?${queryParameter}`);
+    }
+    /***************************************
+     *             Iframe viewer           *
+     ***************************************/
+    renderIframeViewer(url) {
+        return html `
+            <iframe src="${url}"></iframe>
+        `;
+    }
+    willUpdate(props) {
+        var _a, _b, _c;
+        super.willUpdate(props);
+        if (props.has("descriptor")) {
+            this.isVisible = !!((_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.viewableInCurrentBrowser);
+            this.initialImageHeight = undefined;
+            this.initialImageWidth = undefined;
+            this.imageHeight = undefined;
+            this.imageWidth = undefined;
+            (_b = this.viewerStateManager) === null || _b === void 0 ? void 0 : _b.setZoom(undefined);
+            (_c = this.viewerStateManager) === null || _c === void 0 ? void 0 : _c.setRotation(0);
+            this.svgContent = undefined;
+        }
+        if (props.has("zoom")) {
+            this.imageHeight = this.zoom && this.initialImageHeight ? this.initialImageHeight * this.zoom : undefined;
+            this.imageWidth = this.zoom && this.initialImageWidth ? this.initialImageWidth * this.zoom : undefined;
+        }
+    }
+    updated(props) {
+        var _a, _b, _c, _d, _e, _f;
+        super.updated(props);
+        if (!((_a = this.descriptor) === null || _a === void 0 ? void 0 : _a.viewableInCurrentBrowser) || !((_b = this.descriptor) === null || _b === void 0 ? void 0 : _b.contentUrl)) {
+            this.viewerType = "none";
+        }
+        else if (this.inlineSvgAllowed && ((_c = this.descriptor) === null || _c === void 0 ? void 0 : _c.mimeType.startsWith("image/svg"))) {
+            this.viewerType = "inline-svg";
+        }
+        else if ((_d = this.descriptor) === null || _d === void 0 ? void 0 : _d.mimeType.startsWith("image/")) {
+            this.viewerType = "image";
+        }
+        else if ((_e = this.descriptor) === null || _e === void 0 ? void 0 : _e.mimeType.startsWith("video/")) {
+            this.viewerType = "video";
+        }
+        else if (((_f = this.descriptor) === null || _f === void 0 ? void 0 : _f.mimeType) === "application/pdf") {
+            this.viewerType = "pdf";
+        }
+        else {
+            this.viewerType = "iframe";
+        }
+    }
+    contentAvailableCallback(props) {
+        var _a, _b, _c, _d;
+        super.contentAvailableCallback(props);
+        if (this.viewerType === "image" || this.viewerType === "inline-svg") {
+            if (props.has("zoom") && this.zoom == undefined) { // Fit to container
+                (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setZoom(this.getImageToViewerRatio());
+            }
+            if (props.has("zoom") || props.has("rotation")) {
+                const image = this.image || this.svg;
+                if (image) {
+                    image.style.transform = `scaleX(${this.zoom}) scaleY(${this.zoom}) rotate(${this.rotation}deg)`;
+                }
+                if (this.imageViewer && this.imageContainer && image) {
+                    const scrollHeightRatio = (this.imageViewer.scrollTop + this.imageViewer.clientHeight / 2) / this.imageViewer.scrollHeight;
+                    const scrollWidthRatio = (this.imageViewer.scrollLeft + this.imageViewer.clientWidth / 2) / this.imageViewer.scrollWidth;
+                    const { height, width } = image.getClientRects()[0];
+                    this.imageContainer.style.height = `${height}px`;
+                    this.imageContainer.style.width = `${width}px`;
+                    // Maintains the viewer at its current spot on the image
+                    this.imageViewer.scrollTop = scrollHeightRatio * this.imageViewer.scrollHeight - this.imageViewer.clientHeight / 2;
+                    this.imageViewer.scrollLeft = scrollWidthRatio * this.imageViewer.scrollWidth - this.imageViewer.clientWidth / 2;
+                }
+            }
+        }
+        if (this.viewerType === "inline-svg") {
+            if (props.has("descriptor") && ((_b = this.descriptor) === null || _b === void 0 ? void 0 : _b.contentUrl)) {
+                (_c = FluidTopicsApiProvider.get()) === null || _c === void 0 ? void 0 : _c.fetch((_d = this.descriptor) === null || _d === void 0 ? void 0 : _d.contentUrl).then((response) => response.text()).then((svgContent) => this.svgContent = svgContent);
+            }
+            if (props.has("svgContent") && this.svgContent) {
+                this.onSvgLoad();
+            }
+        }
+    }
+}
+FtViewerContent.elementDefinitions = {
+    "ft-content-watermark": FtContentWatermark,
+};
+FtViewerContent.styles = css `
+        :host {
+            display: block;
+            min-height: 100px;
+        }
+
+        .image-viewer {
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+            width: 100%;
+            height: 100%;
+        }
+
+        .image-viewer-content {
+            flex: 1 1 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: fit-content;
+            min-width: fit-content;
+        }
+
+        .image-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        video {
+            width: 100%;
+            height: auto;
+            max-height: 100%;
+        }
+
+        iframe {
+            width: 100%;
+            height: 100%;
+            max-height: 100%;
+            border: none;
+        }
+    `;
+__decorate([
+    redux({ store: "viewer" })
+], FtViewerContent.prototype, "descriptor", void 0);
+__decorate([
+    state()
+], FtViewerContent.prototype, "viewerType", void 0);
+__decorate([
+    state()
+], FtViewerContent.prototype, "inlineSvgAllowed", void 0);
+__decorate([
+    redux({ store: "viewer", selector: ({ contentModifiers }) => contentModifiers.zoom })
+], FtViewerContent.prototype, "zoom", void 0);
+__decorate([
+    redux({ store: "viewer", selector: ({ contentModifiers }) => contentModifiers.rotation })
+], FtViewerContent.prototype, "rotation", void 0);
+__decorate([
+    redux({ store: "viewer" })
+], FtViewerContent.prototype, "watermark", void 0);
+__decorate([
+    query("img")
+], FtViewerContent.prototype, "image", void 0);
+__decorate([
+    query("svg")
+], FtViewerContent.prototype, "svg", void 0);
+__decorate([
+    query(".image-viewer")
+], FtViewerContent.prototype, "imageViewer", void 0);
+__decorate([
+    query(".image-container")
+], FtViewerContent.prototype, "imageContainer", void 0);
+__decorate([
+    state()
+], FtViewerContent.prototype, "imageHeight", void 0);
+__decorate([
+    state()
+], FtViewerContent.prototype, "imageWidth", void 0);
+__decorate([
+    state()
+], FtViewerContent.prototype, "svgContent", void 0);

package/build/common/ft-viewer-display-name.d.ts

@@ -0,0 +1,9 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { nothing } from "lit";
+import { FtViewerComponent } from "./FtViewerComponent";
+export declare class FtViewerDisplayName extends FtViewerComponent {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    private displayName?;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/build/common/ft-viewer-display-name.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { redux, } from "@fluid-topics/ft-wc-utils";
+import { css, html, nothing, } from "lit";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+import { FtViewerComponent } from "./FtViewerComponent";
+export class FtViewerDisplayName extends FtViewerComponent {
+    render() {
+        return this.displayName ? html `
+            <ft-typography variant="${FtTypographyVariants.title}" part="display-name" element="h2">
+                ${this.displayName}
+            </ft-typography>
+        ` : nothing;
+    }
+}
+FtViewerDisplayName.elementDefinitions = {
+    "ft-typography": FtTypography,
+};
+// language=css
+FtViewerDisplayName.styles = css `
+        [part="display-name"]::part(text) {
+            margin: unset;
+        }
+    `;
+__decorate([
+    redux({ store: "viewer", selector: ({ descriptor }) => descriptor === null || descriptor === void 0 ? void 0 : descriptor.displayName })
+], FtViewerDisplayName.prototype, "displayName", void 0);

package/build/common/ft-viewer-document-title.d.ts

@@ -0,0 +1,9 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { nothing } from "lit";
+import { FtViewerComponent } from "./FtViewerComponent";
+export declare class FtViewerDocumentTitle extends FtViewerComponent {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    private documentTitle?;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/build/common/ft-viewer-document-title.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { redux, } from "@fluid-topics/ft-wc-utils";
+import { css, html, nothing, } from "lit";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+import { FtViewerComponent } from "./FtViewerComponent";
+export class FtViewerDocumentTitle extends FtViewerComponent {
+    render() {
+        return this.documentTitle ? html `
+            <ft-typography variant="${FtTypographyVariants.title}" part="title" element="h1">
+                ${this.documentTitle}
+            </ft-typography>
+        ` : nothing;
+    }
+}
+FtViewerDocumentTitle.elementDefinitions = {
+    "ft-typography": FtTypography,
+};
+// language=css
+FtViewerDocumentTitle.styles = css `
+        [part="title"]::part(text) {
+            margin: unset;
+        }
+    `;
+__decorate([
+    redux({ store: "viewer", selector: ({ document }) => document === null || document === void 0 ? void 0 : document.title })
+], FtViewerDocumentTitle.prototype, "documentTitle", void 0);

package/build/common/ft-viewer-filename.d.ts

@@ -0,0 +1,9 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { nothing } from "lit";
+import { FtViewerComponent } from "./FtViewerComponent";
+export declare class FtViewerFilename extends FtViewerComponent {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    private filename?;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/build/common/ft-viewer-filename.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { redux, } from "@fluid-topics/ft-wc-utils";
+import { css, html, nothing, } from "lit";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+import { FtViewerComponent } from "./FtViewerComponent";
+export class FtViewerFilename extends FtViewerComponent {
+    render() {
+        return this.filename ? html `
+            <ft-typography variant="${FtTypographyVariants.body1}" part="filename">
+                ${this.filename}
+            </ft-typography>
+        ` : nothing;
+    }
+}
+FtViewerFilename.elementDefinitions = {
+    "ft-typography": FtTypography,
+};
+// language=css
+FtViewerFilename.styles = css `
+        [part="filename"]::part(text) {
+            margin: unset;
+        }
+    `;
+__decorate([
+    redux({ store: "viewer", selector: ({ descriptor }) => descriptor === null || descriptor === void 0 ? void 0 : descriptor.filename })
+], FtViewerFilename.prototype, "filename", void 0);

package/build/common/ft-viewer-mime-type-icon.d.ts

@@ -0,0 +1,9 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { nothing } from "lit";
+import { FtViewerComponent } from "./FtViewerComponent";
+export declare class FtViewerMimeTypeIcon extends FtViewerComponent {
+    static elementDefinitions: ElementDefinitionsMap;
+    mimeType?: string;
+    filename?: string;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/build/common/ft-viewer-mime-type-icon.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { last, redux, } from "@fluid-topics/ft-wc-utils";
+import { html, nothing, } from "lit";
+import { FtIcon, FtIconVariants, resolveFileFormatIcon, } from "@fluid-topics/ft-icon";
+import { FtViewerComponent } from "./FtViewerComponent";
+export class FtViewerMimeTypeIcon extends FtViewerComponent {
+    render() {
+        var _a, _b;
+        return this.mimeType ? html `
+            <ft-icon part="icon"
+                     variant="${FtIconVariants.file_format}"
+                     value="${resolveFileFormatIcon(this.mimeType, last((_b = (_a = this.filename) === null || _a === void 0 ? void 0 : _a.split(".")) !== null && _b !== void 0 ? _b : []))}"></ft-icon>
+        ` : nothing;
+    }
+}
+FtViewerMimeTypeIcon.elementDefinitions = {
+    "ft-icon": FtIcon,
+};
+__decorate([
+    redux({ store: "viewer", selector: ({ descriptor }) => descriptor === null || descriptor === void 0 ? void 0 : descriptor.mimeType })
+], FtViewerMimeTypeIcon.prototype, "mimeType", void 0);
+__decorate([
+    redux({ store: "viewer", selector: ({ descriptor }) => descriptor === null || descriptor === void 0 ? void 0 : descriptor.filename })
+], FtViewerMimeTypeIcon.prototype, "filename", void 0);

package/build/common/ft-viewer.messages.d.ts

@@ -0,0 +1,11 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtViewerMessages extends I18nMessages {
+    fitToContainerAriaLabel(): string;
+    zoomRealSizeAriaLabel(): string;
+    zoomInAriaLabel(): string;
+    zoomOutAriaLabel(): string;
+    rotateLeftAriaLabel(): string;
+    rotateRightAriaLabel(): string;
+}
+export declare const viewerContext: I18nMessageContext<FtViewerMessages>;
+export declare const defaultViewerMessages: DefaultI18nMessages<FtViewerMessages>;

package/build/common/ft-viewer.messages.js

@@ -0,0 +1,10 @@
+import { I18nMessageContext, } from "@fluid-topics/ft-i18n";
+export const viewerContext = I18nMessageContext.build("designedViewer");
+export const defaultViewerMessages = {
+    fitToContainerAriaLabel: "Fill available space",
+    zoomRealSizeAriaLabel: "Display content at original size",
+    zoomInAriaLabel: "Zoom in",
+    zoomOutAriaLabel: "Zoom out",
+    rotateLeftAriaLabel: "Rotate left",
+    rotateRightAriaLabel: "Rotate right",
+};

package/build/common/index.d.ts

@@ -0,0 +1 @@
+export * from "./model/ft-viewer.models";

package/build/common/index.js

@@ -0,0 +1 @@
+export * from "./model/ft-viewer.models";

package/build/common/model/FtViewerReduxStore.d.ts

@@ -0,0 +1,14 @@
+import { FtReduxStore } from "@fluid-topics/ft-wc-utils";
+import { FtViewerState } from "./ft-viewer.models";
+import { PayloadAction } from "@reduxjs/toolkit";
+declare const viewerStateReducers: {
+    setZoom: (state: FtViewerState, action: PayloadAction<FtViewerState["contentModifiers"]["zoom"]>) => void;
+    setRotation: (state: FtViewerState, action: PayloadAction<FtViewerState["contentModifiers"]["rotation"]>) => void;
+};
+export type FtViewerStateReducers = typeof viewerStateReducers;
+export type FtViewerReduxStore = FtReduxStore<FtViewerState, FtViewerStateReducers>;
+export declare const createViewerStore: (id: string) => FtReduxStore<FtViewerState, {
+    setZoom: (state: FtViewerState, action: PayloadAction<FtViewerState["contentModifiers"]["zoom"]>) => void;
+    setRotation: (state: FtViewerState, action: PayloadAction<FtViewerState["contentModifiers"]["rotation"]>) => void;
+}, import("redux").AnyAction>;
+export {};

package/build/common/model/FtViewerReduxStore.js

@@ -0,0 +1,25 @@
+import { FtReduxStore } from "@fluid-topics/ft-wc-utils";
+const viewerStateReducers = {
+    setZoom: (state, action) => {
+        state.contentModifiers.zoom = action.payload;
+    },
+    setRotation: (state, action) => {
+        state.contentModifiers.rotation = action.payload;
+    },
+};
+export const createViewerStore = (id) => FtReduxStore.get({
+    name: "ft-viewer-" + id,
+    initialState: {
+        documentId: undefined,
+        document: undefined,
+        assetId: undefined,
+        origin: undefined,
+        descriptor: undefined,
+        contentModifiers: {
+            zoom: undefined,
+            rotation: 0,
+        },
+        watermark: undefined,
+    },
+    reducers: viewerStateReducers,
+});

package/build/common/model/FtViewerStateManager.d.ts

@@ -0,0 +1,8 @@
+import { FtStateManager } from "@fluid-topics/ft-wc-utils";
+import { FtViewerReduxStore } from "./FtViewerReduxStore";
+export declare abstract class FtViewerStateManager extends FtStateManager {
+    store: FtViewerReduxStore;
+    protected constructor(store: FtViewerReduxStore);
+    setZoom(zoom: number | undefined): void;
+    setRotation(rotation: number): void;
+}

package/build/common/model/FtViewerStateManager.js

@@ -0,0 +1,13 @@
+import { FtStateManager } from "@fluid-topics/ft-wc-utils";
+export class FtViewerStateManager extends FtStateManager {
+    constructor(store) {
+        super();
+        this.store = store;
+    }
+    setZoom(zoom) {
+        this.store.actions.setZoom(zoom);
+    }
+    setRotation(rotation) {
+        this.store.actions.setRotation(rotation);
+    }
+}

package/build/common/model/ft-viewer.models.d.ts

@@ -0,0 +1,44 @@
+import { FtAssetHolder, FtWatermark } from "@fluid-topics/public-api";
+export declare enum FtViewerFileOrigin {
+    UNSTRUCTURED_DOCUMENT = "UNSTRUCTURED_DOCUMENT",
+    MAP_ATTACHMENT = "MAP_ATTACHMENT",
+    UD_ATTACHMENT = "UD_ATTACHMENT",
+    RESOURCE = "RESOURCE"
+}
+export interface FtFileDescriptor {
+    id: string;
+    portalUrl: string;
+    filename: string;
+    fingerprint: string;
+    displayName: string;
+    alt: string;
+    mimeType: string;
+    size: number;
+    viewableInCurrentBrowser: boolean;
+    contentUrl: string;
+}
+export interface FtViewerContentModifiers {
+    zoom: number | undefined;
+    rotation: number;
+}
+export interface FtViewerState {
+    documentId: string | undefined;
+    document: FtAssetHolder | undefined;
+    assetId: string | undefined;
+    origin: FtViewerFileOrigin | undefined;
+    descriptor: FtFileDescriptor | undefined;
+    contentModifiers: FtViewerContentModifiers;
+    watermark: FtWatermark | undefined;
+}
+export declare enum FtViewerContentControls {
+    FIT_TO_CONTAINER = "fit-to-container",
+    ZOOM_REAL_SIZE = "zoom-real-size",
+    ZOOM_IN = "zoom-in",
+    ZOOM_OUT = "zoom-out",
+    ROTATE_LEFT = "rotate-left",
+    ROTATE_RIGHT = "rotate-right"
+}
+export declare class FtViewerLoadedEvent extends CustomEvent<FtViewerState> {
+    static eventName: string;
+    constructor(state: FtViewerState);
+}

package/build/common/model/ft-viewer.models.js

@@ -0,0 +1,23 @@
+import { deepCopy } from "@fluid-topics/ft-wc-utils";
+export var FtViewerFileOrigin;
+(function (FtViewerFileOrigin) {
+    FtViewerFileOrigin["UNSTRUCTURED_DOCUMENT"] = "UNSTRUCTURED_DOCUMENT";
+    FtViewerFileOrigin["MAP_ATTACHMENT"] = "MAP_ATTACHMENT";
+    FtViewerFileOrigin["UD_ATTACHMENT"] = "UD_ATTACHMENT";
+    FtViewerFileOrigin["RESOURCE"] = "RESOURCE";
+})(FtViewerFileOrigin || (FtViewerFileOrigin = {}));
+export var FtViewerContentControls;
+(function (FtViewerContentControls) {
+    FtViewerContentControls["FIT_TO_CONTAINER"] = "fit-to-container";
+    FtViewerContentControls["ZOOM_REAL_SIZE"] = "zoom-real-size";
+    FtViewerContentControls["ZOOM_IN"] = "zoom-in";
+    FtViewerContentControls["ZOOM_OUT"] = "zoom-out";
+    FtViewerContentControls["ROTATE_LEFT"] = "rotate-left";
+    FtViewerContentControls["ROTATE_RIGHT"] = "rotate-right";
+})(FtViewerContentControls || (FtViewerContentControls = {}));
+export class FtViewerLoadedEvent extends CustomEvent {
+    constructor(state) {
+        super(FtViewerLoadedEvent.eventName, { detail: deepCopy(state), composed: true, bubbles: true });
+    }
+}
+FtViewerLoadedEvent.eventName = "ft-viewer-loaded";

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,19 @@
+import { FtAssetViewerContent, FtAssetViewerContentControl, FtAssetViewerContext, FtAssetViewerDocumentTitle, FtAssetViewerFilename, FtAssetViewerMimeTypeIcon, FtAssetViewerTitle } from "./asset";
+import { FtUdViewerAttachments, FtUdViewerContent, FtUdViewerContentControl, FtUdViewerContext, FtUdViewerFilename, FtUdViewerMimeTypeIcon, FtUdViewerTitle } from "./ud";
+declare const _default: {
+    "ft-asset-viewer-content": typeof FtAssetViewerContent;
+    "ft-asset-viewer-content-control": typeof FtAssetViewerContentControl;
+    "ft-asset-viewer-context": typeof FtAssetViewerContext;
+    "ft-asset-viewer-document-title": typeof FtAssetViewerDocumentTitle;
+    "ft-asset-viewer-filename": typeof FtAssetViewerFilename;
+    "ft-asset-viewer-mime-type-icon": typeof FtAssetViewerMimeTypeIcon;
+    "ft-asset-viewer-title": typeof FtAssetViewerTitle;
+    "ft-ud-viewer-attachments": typeof FtUdViewerAttachments;
+    "ft-ud-viewer-content": typeof FtUdViewerContent;
+    "ft-ud-viewer-content-control": typeof FtUdViewerContentControl;
+    "ft-ud-viewer-context": typeof FtUdViewerContext;
+    "ft-ud-viewer-filename": typeof FtUdViewerFilename;
+    "ft-ud-viewer-mime-type-icon": typeof FtUdViewerMimeTypeIcon;
+    "ft-ud-viewer-title": typeof FtUdViewerTitle;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,18 @@
+import { FtAssetViewerContent, FtAssetViewerContentControl, FtAssetViewerContext, FtAssetViewerDocumentTitle, FtAssetViewerFilename, FtAssetViewerMimeTypeIcon, FtAssetViewerTitle, } from "./asset";
+import { FtUdViewerAttachments, FtUdViewerContent, FtUdViewerContentControl, FtUdViewerContext, FtUdViewerFilename, FtUdViewerMimeTypeIcon, FtUdViewerTitle, } from "./ud";
+export default {
+    "ft-asset-viewer-content": FtAssetViewerContent,
+    "ft-asset-viewer-content-control": FtAssetViewerContentControl,
+    "ft-asset-viewer-context": FtAssetViewerContext,
+    "ft-asset-viewer-document-title": FtAssetViewerDocumentTitle,
+    "ft-asset-viewer-filename": FtAssetViewerFilename,
+    "ft-asset-viewer-mime-type-icon": FtAssetViewerMimeTypeIcon,
+    "ft-asset-viewer-title": FtAssetViewerTitle,
+    "ft-ud-viewer-attachments": FtUdViewerAttachments,
+    "ft-ud-viewer-content": FtUdViewerContent,
+    "ft-ud-viewer-content-control": FtUdViewerContentControl,
+    "ft-ud-viewer-context": FtUdViewerContext,
+    "ft-ud-viewer-filename": FtUdViewerFilename,
+    "ft-ud-viewer-mime-type-icon": FtUdViewerMimeTypeIcon,
+    "ft-ud-viewer-title": FtUdViewerTitle,
+};