@fluid-topics/ft-viewer 2.1.10

package/README.md

@@ -0,0 +1,19 @@
+File viewer components
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-viewer
+yarn add @fluid-topics/ft-viewer
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-viewer"
+
+function render() {
+    return html` <ft-viewer foo="bar"></ft-viewer> `
+}
+```

package/build/asset/components/FtAssetViewerComponent.d.ts

@@ -0,0 +1,5 @@
+import { FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+declare const FtAssetViewerComponent_base: import("./registration").FtAssetViewerComponentType<typeof FtLitElementRedux>;
+export declare class FtAssetViewerComponent extends FtAssetViewerComponent_base {
+}
+export {};

package/build/asset/components/FtAssetViewerComponent.js

@@ -0,0 +1,4 @@
+import { FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+import { toFtAssetViewerComponent } from "./registration";
+export class FtAssetViewerComponent extends toFtAssetViewerComponent(FtLitElementRedux) {
+}

package/build/asset/components/ft-asset-viewer-content-control.d.ts

@@ -0,0 +1,5 @@
+import { FtViewerContentControl } from "../../common/ft-viewer-content-control";
+declare const FtAssetViewerContentControl_base: import("./registration").FtAssetViewerComponentType<typeof FtViewerContentControl>;
+export declare class FtAssetViewerContentControl extends FtAssetViewerContentControl_base {
+}
+export {};

package/build/asset/components/ft-asset-viewer-content-control.js

@@ -0,0 +1,4 @@
+import { toFtAssetViewerComponent } from "./registration";
+import { FtViewerContentControl } from "../../common/ft-viewer-content-control";
+export class FtAssetViewerContentControl extends toFtAssetViewerComponent(FtViewerContentControl) {
+}

package/build/asset/components/ft-asset-viewer-content.d.ts

@@ -0,0 +1,5 @@
+import { FtViewerContent } from "../../common/ft-viewer-content";
+declare const FtAssetViewerContent_base: import("./registration").FtAssetViewerComponentType<typeof FtViewerContent>;
+export declare class FtAssetViewerContent extends FtAssetViewerContent_base {
+}
+export {};

package/build/asset/components/ft-asset-viewer-content.js

@@ -0,0 +1,4 @@
+import { toFtAssetViewerComponent } from "./registration";
+import { FtViewerContent } from "../../common/ft-viewer-content";
+export class FtAssetViewerContent extends toFtAssetViewerComponent(FtViewerContent) {
+}

package/build/asset/components/ft-asset-viewer-document-title.d.ts

@@ -0,0 +1,5 @@
+import { FtViewerDocumentTitle } from "../../common/ft-viewer-document-title";
+declare const FtAssetViewerDocumentTitle_base: import("./registration").FtAssetViewerComponentType<typeof FtViewerDocumentTitle>;
+export declare class FtAssetViewerDocumentTitle extends FtAssetViewerDocumentTitle_base {
+}
+export {};

package/build/asset/components/ft-asset-viewer-document-title.js

@@ -0,0 +1,4 @@
+import { toFtAssetViewerComponent } from "./registration";
+import { FtViewerDocumentTitle } from "../../common/ft-viewer-document-title";
+export class FtAssetViewerDocumentTitle extends toFtAssetViewerComponent(FtViewerDocumentTitle) {
+}

package/build/asset/components/ft-asset-viewer-filename.d.ts

@@ -0,0 +1,5 @@
+import { FtViewerFilename } from "../../common/ft-viewer-filename";
+declare const FtAssetViewerFilename_base: import("./registration").FtAssetViewerComponentType<typeof FtViewerFilename>;
+export declare class FtAssetViewerFilename extends FtAssetViewerFilename_base {
+}
+export {};

package/build/asset/components/ft-asset-viewer-filename.js

@@ -0,0 +1,4 @@
+import { toFtAssetViewerComponent } from "./registration";
+import { FtViewerFilename } from "../../common/ft-viewer-filename";
+export class FtAssetViewerFilename extends toFtAssetViewerComponent(FtViewerFilename) {
+}

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

@@ -0,0 +1,5 @@
+import { FtViewerMimeTypeIcon } from "../../common/ft-viewer-mime-type-icon";
+declare const FtAssetViewerMimeTypeIcon_base: import("./registration").FtAssetViewerComponentType<typeof FtViewerMimeTypeIcon>;
+export declare class FtAssetViewerMimeTypeIcon extends FtAssetViewerMimeTypeIcon_base {
+}
+export {};

package/build/asset/components/ft-asset-viewer-mime-type-icon.js

@@ -0,0 +1,4 @@
+import { toFtAssetViewerComponent } from "./registration";
+import { FtViewerMimeTypeIcon } from "../../common/ft-viewer-mime-type-icon";
+export class FtAssetViewerMimeTypeIcon extends toFtAssetViewerComponent(FtViewerMimeTypeIcon) {
+}

package/build/asset/components/ft-asset-viewer-title.d.ts

@@ -0,0 +1,5 @@
+import { FtViewerDisplayName } from "../../common/ft-viewer-display-name";
+declare const FtAssetViewerTitle_base: import("./registration").FtAssetViewerComponentType<typeof FtViewerDisplayName>;
+export declare class FtAssetViewerTitle extends FtAssetViewerTitle_base {
+}
+export {};

package/build/asset/components/ft-asset-viewer-title.js

@@ -0,0 +1,4 @@
+import { toFtAssetViewerComponent } from "./registration";
+import { FtViewerDisplayName } from "../../common/ft-viewer-display-name";
+export class FtAssetViewerTitle extends toFtAssetViewerComponent(FtViewerDisplayName) {
+}

package/build/asset/components/registration.d.ts

@@ -0,0 +1,12 @@
+import { Constructor, FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+import { FtViewerComponent } from "../../common/FtViewerComponent";
+import type { FtAssetViewerStateManager as FtAssetViewerStateManagerInternal } from "../model/FtAssetViewerStateManager";
+export type FtAssetViewerStateManager = FtAssetViewerStateManagerInternal;
+export declare const assetViewerStateManagerContext: {
+    __context__: FtAssetViewerStateManagerInternal;
+};
+export interface FtAssetViewerComponentInterface extends FtViewerComponent {
+    viewerStateManager?: FtAssetViewerStateManager;
+}
+export type FtAssetViewerComponentType<T extends Constructor<FtLitElementRedux>> = T & Constructor<FtAssetViewerComponentInterface>;
+export declare const toFtAssetViewerComponent: <T extends Constructor<FtLitElementRedux>>(c: T) => FtAssetViewerComponentType<T>;

package/build/asset/components/registration.js

@@ -0,0 +1,40 @@
+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 { applyMixinOnce, } from "@fluid-topics/ft-wc-utils";
+import { state } from "lit/decorators.js";
+import { consume, createContext, } from "@lit/context";
+export const assetViewerStateManagerContext = createContext(Symbol("asset-viewer-state-manager"));
+export const toFtAssetViewerComponent = applyMixinOnce(Symbol("toFtAssetViewerComponent"), function (ReduxClass) {
+    class FtAssetViewerComponentClass extends ReduxClass {
+        willUpdate(props) {
+            super.willUpdate(props);
+            if (props.has("viewerStateManager")) {
+                if (this.viewerStateManager) {
+                    this.addStore(this.viewerStateManager.store, "viewer");
+                }
+                else {
+                    this.removeStore("viewer");
+                }
+            }
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (this.viewerStateManager) {
+                this.addStore(this.viewerStateManager.store, "viewer");
+            }
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeStore("viewer");
+        }
+    }
+    __decorate([
+        consume({ context: assetViewerStateManagerContext, subscribe: true }),
+        state()
+    ], FtAssetViewerComponentClass.prototype, "viewerStateManager", void 0);
+    return FtAssetViewerComponentClass;
+});

package/build/asset/ft-asset-viewer-context.d.ts

@@ -0,0 +1,16 @@
+import { PropertyValues } from "lit";
+import { FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+import { FtAssetViewerContextProperties } from "./ft-asset-viewer-context.properties";
+import { FtAssetViewerStateManager } from "./model/FtAssetViewerStateManager";
+import { FtViewerFileOrigin } from "../common";
+export declare class FtAssetViewerContext extends FtLitElementRedux implements FtAssetViewerContextProperties {
+    documentId?: string;
+    assetId?: string;
+    origin?: FtViewerFileOrigin;
+    viewerStateManager: FtAssetViewerStateManager;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected willUpdate(props: PropertyValues<FtAssetViewerContext>): void;
+    private initStateManager;
+    connectedCallback(): void;
+    onAuthenticationChange(): void;
+}

package/build/asset/ft-asset-viewer-context.js

@@ -0,0 +1,59 @@
+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 { html, } from "lit";
+import { FtLitElementRedux, randomId, reduxEventListener, } from "@fluid-topics/ft-wc-utils";
+import { provide } from "@lit/context";
+import { assetViewerStateManagerContext } from "./components/registration";
+import { FtAssetViewerStateManager } from "./model/FtAssetViewerStateManager";
+import { property } from "lit/decorators.js";
+import { FtViewerLoadedEvent } from "../common";
+import { AuthenticationChangeEvent, ftAppInfoStore, } from "@fluid-topics/ft-app-context";
+export class FtAssetViewerContext extends FtLitElementRedux {
+    constructor() {
+        super(...arguments);
+        this.viewerStateManager = FtAssetViewerStateManager.build(this.id || randomId(6));
+    }
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    }
+    willUpdate(props) {
+        super.willUpdate(props);
+        if (props.has("documentId") || props.has("assetId") || props.has("origin")) {
+            this.initStateManager();
+        }
+    }
+    async initStateManager() {
+        const state = await this.viewerStateManager.init(this.documentId, this.assetId, this.origin);
+        if (this.documentId && this.assetId && this.origin) {
+            this.dispatchEvent(new FtViewerLoadedEvent(state));
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addStore(ftAppInfoStore);
+    }
+    onAuthenticationChange() {
+        this.viewerStateManager.reload();
+    }
+}
+__decorate([
+    property()
+], FtAssetViewerContext.prototype, "documentId", void 0);
+__decorate([
+    property()
+], FtAssetViewerContext.prototype, "assetId", void 0);
+__decorate([
+    property()
+], FtAssetViewerContext.prototype, "origin", void 0);
+__decorate([
+    provide({ context: assetViewerStateManagerContext })
+], FtAssetViewerContext.prototype, "viewerStateManager", void 0);
+__decorate([
+    reduxEventListener({ eventName: AuthenticationChangeEvent.eventName })
+], FtAssetViewerContext.prototype, "onAuthenticationChange", null);

package/build/asset/ft-asset-viewer-context.properties.d.ts

@@ -0,0 +1,2 @@
+export interface FtAssetViewerContextProperties {
+}

package/build/asset/ft-asset-viewer-context.properties.js

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

package/build/asset/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./components/registration";
+export * from "./ft-asset-viewer-context.properties";
+export * from "./ft-asset-viewer-context";
+export * from "./components/registration";
+export * from "./components/ft-asset-viewer-content";
+export * from "./components/ft-asset-viewer-content-control";
+export * from "./components/ft-asset-viewer-filename";
+export * from "./components/ft-asset-viewer-title";
+export * from "./components/ft-asset-viewer-mime-type-icon";
+export * from "./components/ft-asset-viewer-document-title";

package/build/asset/index.js

@@ -0,0 +1,10 @@
+export * from "./components/registration";
+export * from "./ft-asset-viewer-context.properties";
+export * from "./ft-asset-viewer-context";
+export * from "./components/registration";
+export * from "./components/ft-asset-viewer-content";
+export * from "./components/ft-asset-viewer-content-control";
+export * from "./components/ft-asset-viewer-filename";
+export * from "./components/ft-asset-viewer-title";
+export * from "./components/ft-asset-viewer-mime-type-icon";
+export * from "./components/ft-asset-viewer-document-title";

package/build/asset/model/FtAssetViewerService.d.ts

@@ -0,0 +1,6 @@
+import { FtServiceWithCache } from "@fluid-topics/ft-app-context";
+import { FtViewerFileOrigin } from "../../common";
+import { FtAssetDescriptor } from "@fluid-topics/public-api";
+export declare class FtAssetViewerService extends FtServiceWithCache {
+    getAsset(mapId: string, assetId: string, origin: FtViewerFileOrigin): Promise<FtAssetDescriptor>;
+}

package/build/asset/model/FtAssetViewerService.js

@@ -0,0 +1,12 @@
+import { FtServiceWithCache } from "@fluid-topics/ft-app-context";
+import { FtViewerFileOrigin } from "../../common";
+export class FtAssetViewerService extends FtServiceWithCache {
+    getAsset(mapId, assetId, origin) {
+        const loaders = {
+            [FtViewerFileOrigin.MAP_ATTACHMENT]: () => this.api.getMapAttachment(mapId, assetId),
+            [FtViewerFileOrigin.UD_ATTACHMENT]: () => this.api.getUdAttachment(mapId, assetId),
+            [FtViewerFileOrigin.RESOURCE]: () => this.api.getMapResource(mapId, assetId),
+        };
+        return this.cache.get(assetId, loaders[origin]);
+    }
+}

package/build/asset/model/FtAssetViewerStateManager.d.ts

@@ -0,0 +1,14 @@
+import { FtViewerReduxStore } from "../../common/model/FtViewerReduxStore";
+import { FtViewerStateManager } from "../../common/model/FtViewerStateManager";
+import { FtViewerFileOrigin } from "../../common";
+import { FtAssetViewerService } from "./FtAssetViewerService";
+export declare class FtAssetViewerStateManager extends FtViewerStateManager {
+    store: FtViewerReduxStore;
+    service: FtAssetViewerService;
+    static build(viewerId: string): FtAssetViewerStateManager;
+    constructor(store: FtViewerReduxStore, service: FtAssetViewerService);
+    load(): Promise<void>;
+    clear(): void;
+    reload(): Promise<void>;
+    init(documentId: string | undefined, assetId: string | undefined, origin: FtViewerFileOrigin | undefined): Promise<import("../..").FtViewerState>;
+}

package/build/asset/model/FtAssetViewerStateManager.js

@@ -0,0 +1,47 @@
+import { createViewerStore, } from "../../common/model/FtViewerReduxStore";
+import { FtViewerStateManager } from "../../common/model/FtViewerStateManager";
+import { FtAssetViewerService } from "./FtAssetViewerService";
+export class FtAssetViewerStateManager extends FtViewerStateManager {
+    static build(viewerId) {
+        return new FtAssetViewerStateManager(createViewerStore(viewerId), new FtAssetViewerService());
+    }
+    constructor(store, service) {
+        super(store);
+        this.store = store;
+        this.service = service;
+    }
+    async load() {
+        const { documentId, assetId, origin } = this.store.getState();
+        if (documentId && assetId && origin) {
+            const asset = await this.service.getAsset(documentId, assetId, origin);
+            this.store.actions.document(asset.holder);
+            this.store.actions.descriptor({
+                id: asset.id,
+                portalUrl: asset.portalUrl,
+                filename: asset.filename,
+                fingerprint: asset.fingerprint,
+                displayName: asset.displayName,
+                alt: asset.displayName,
+                mimeType: asset.mimeType,
+                size: asset.size,
+                viewableInCurrentBrowser: asset.viewableInCurrentBrowser,
+                contentUrl: asset.contentUrl,
+            });
+            this.store.actions.watermark(asset.watermark);
+        }
+    }
+    clear() {
+        this.store.clearKeeping("documentId", "assetId", "origin");
+    }
+    reload() {
+        this.clear();
+        return this.load();
+    }
+    async init(documentId, assetId, origin) {
+        this.store.actions.documentId(documentId);
+        this.store.actions.assetId(assetId);
+        this.store.actions.origin(origin);
+        await this.reload();
+        return this.store.getState();
+    }
+}

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

@@ -0,0 +1 @@
+"use strict";

package/build/common/FtViewerComponent.d.ts

@@ -0,0 +1,5 @@
+import type { FtViewerStateManager } from "./model/FtViewerStateManager";
+import { FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+export declare class FtViewerComponent extends FtLitElementRedux {
+    viewerStateManager?: FtViewerStateManager;
+}

package/build/common/FtViewerComponent.js

@@ -0,0 +1,3 @@
+import { FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+export class FtViewerComponent extends FtLitElementRedux {
+}

package/build/common/ft-viewer-content-control.d.ts

@@ -0,0 +1,35 @@
+import { FtViewerComponent } from "./FtViewerComponent";
+import { FtFileDescriptor, FtViewerContentControls } from "./model/ft-viewer.models";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { nothing, PropertyValues } from "lit";
+import { FtIcons } from "@fluid-topics/ft-icon";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+type ControlDefintion = {
+    ariaLabel: () => string;
+    icon: FtIcons;
+    disabled?: () => boolean;
+    run: () => void;
+};
+declare const FtViewerContentControl_base: typeof FtViewerComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtLitElementWithConditionalVisibilityInterface>;
+export declare class FtViewerContentControl extends FtViewerContentControl_base {
+    static elementDefinitions: ElementDefinitionsMap;
+    disabled: boolean;
+    tabindex: number | null;
+    role: string | null;
+    ariaLabel: string | null;
+    control: FtViewerContentControls;
+    descriptor?: FtFileDescriptor;
+    zoom: number | undefined;
+    rotation: number;
+    protected controlDefinitions: Record<FtViewerContentControls, ControlDefintion>;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected willUpdate(props: PropertyValues): void;
+    onI18nUpdate(context: string): void;
+    private updateAriaLabel;
+    tooltip?: FtTooltip;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private modifyContent;
+}
+export {};

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

@@ -0,0 +1,164 @@
+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 { property, query, } from "lit/decorators.js";
+import { FtViewerContentControls, } from "./model/ft-viewer.models";
+import { designSystemVariables, redux, withConditionalVisibility, } from "@fluid-topics/ft-wc-utils";
+import { css, html, nothing, } from "lit";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { FtIcon, FtIcons, } from "@fluid-topics/ft-icon";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { defaultViewerMessages, viewerContext, } from "./ft-viewer.messages";
+export class FtViewerContentControl extends withConditionalVisibility(withI18n(FtViewerComponent)) {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.tabindex = 0;
+        this.role = "button";
+        this.ariaLabel = "";
+        this.control = FtViewerContentControls.FIT_TO_CONTAINER;
+        this.controlDefinitions = {
+            [FtViewerContentControls.FIT_TO_CONTAINER]: {
+                ariaLabel: () => viewerContext.messages.fitToContainerAriaLabel(),
+                icon: FtIcons.ZOOM_FULLSCREEN,
+                run: () => { var _a; return (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setZoom(undefined); },
+            },
+            [FtViewerContentControls.ZOOM_REAL_SIZE]: {
+                ariaLabel: () => viewerContext.messages.zoomRealSizeAriaLabel(),
+                icon: FtIcons.ZOOM_REALSIZE,
+                run: () => { var _a; return (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setZoom(1); },
+            },
+            [FtViewerContentControls.ZOOM_IN]: {
+                ariaLabel: () => viewerContext.messages.zoomInAriaLabel(),
+                icon: FtIcons.ZOOM_IN,
+                disabled: () => { var _a; return ((_a = this.zoom) !== null && _a !== void 0 ? _a : 1) > 20; },
+                run: () => { var _a, _b; return (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = this.zoom) !== null && _b !== void 0 ? _b : 1) * 1.2); },
+            },
+            [FtViewerContentControls.ZOOM_OUT]: {
+                ariaLabel: () => viewerContext.messages.zoomOutAriaLabel(),
+                icon: FtIcons.ZOOM_OUT,
+                disabled: () => { var _a; return ((_a = this.zoom) !== null && _a !== void 0 ? _a : 1) < 0.05; },
+                run: () => { var _a, _b; return (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = this.zoom) !== null && _b !== void 0 ? _b : 1) / 1.2); },
+            },
+            [FtViewerContentControls.ROTATE_LEFT]: {
+                ariaLabel: () => viewerContext.messages.rotateLeftAriaLabel(),
+                icon: FtIcons.ARROW_ROTATE_LEFT,
+                run: () => { var _a; return (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setRotation(this.rotation - 90); },
+            },
+            [FtViewerContentControls.ROTATE_RIGHT]: {
+                ariaLabel: () => viewerContext.messages.rotateRightAriaLabel(),
+                icon: FtIcons.ARROW_ROTATE_RIGHT,
+                run: () => { var _a; return (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.setRotation(this.rotation + 90); },
+            },
+        };
+        this.modifyContent = () => {
+            var _a;
+            (_a = this.controlDefinitions[this.control]) === null || _a === void 0 ? void 0 : _a.run();
+        };
+    }
+    render() {
+        var _a;
+        return this.isVisible ? html `
+            <slot>
+                <ft-tooltip text="${this.ariaLabel}">
+                    <ft-icon value="${(_a = this.controlDefinitions[this.control]) === null || _a === void 0 ? void 0 : _a.icon}"></ft-icon>
+                </ft-tooltip>
+            </slot>
+        ` : nothing;
+    }
+    willUpdate(props) {
+        var _a, _b, _c, _d;
+        super.willUpdate(props);
+        this.updateAriaLabel();
+        this.disabled = (_c = (_b = (_a = this.controlDefinitions[this.control]) === null || _a === void 0 ? void 0 : _a.disabled) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
+        this.isVisible = !!((_d = this.descriptor) === null || _d === void 0 ? void 0 : _d.viewableInCurrentBrowser) && this.descriptor.mimeType.startsWith("image/");
+    }
+    onI18nUpdate(context) {
+        super.onI18nUpdate(context);
+        this.updateAriaLabel();
+    }
+    updateAriaLabel() {
+        var _a;
+        this.ariaLabel = (_a = this.controlDefinitions[this.control]) === null || _a === void 0 ? void 0 : _a.ariaLabel();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addI18nContext(viewerContext, defaultViewerMessages);
+        this.updateComplete.then(() => { var _a; return (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setupFor(this); });
+        this.addEventListener("click", this.modifyContent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this.modifyContent);
+    }
+}
+FtViewerContentControl.elementDefinitions = {
+    "ft-icon": FtIcon,
+    "ft-tooltip": FtTooltip,
+};
+FtViewerContentControl.styles = css `
+        :host {
+            display: inline-block;
+            opacity: 1;
+            filter: grayscale(0);
+            transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
+            cursor: pointer;
+        }
+
+        :host([disabled]) {
+            opacity: 0.8;
+            filter: grayscale(1);
+            pointer-events: none;
+            cursor: inherit;
+        }
+
+        ft-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: ${designSystemVariables.colorPrimary};
+            color: ${designSystemVariables.colorOnPrimary};
+            cursor: pointer;
+            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+        }
+
+        :host:hover, :host:focus-within {
+            ft-icon {
+                background-color: hsl(from ${designSystemVariables.colorPrimary} h s calc(l + 30));
+            }
+        }
+    `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtViewerContentControl.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], FtViewerContentControl.prototype, "tabindex", void 0);
+__decorate([
+    property({ reflect: true })
+], FtViewerContentControl.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aria-label" })
+], FtViewerContentControl.prototype, "ariaLabel", void 0);
+__decorate([
+    property()
+], FtViewerContentControl.prototype, "control", void 0);
+__decorate([
+    redux({ store: "viewer" })
+], FtViewerContentControl.prototype, "descriptor", void 0);
+__decorate([
+    redux({ store: "viewer", selector: ({ contentModifiers }) => contentModifiers.zoom })
+], FtViewerContentControl.prototype, "zoom", void 0);
+__decorate([
+    redux({ store: "viewer", selector: ({ contentModifiers }) => contentModifiers.rotation })
+], FtViewerContentControl.prototype, "rotation", void 0);
+__decorate([
+    query("ft-tooltip")
+], FtViewerContentControl.prototype, "tooltip", void 0);

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

@@ -0,0 +1,51 @@
+import { FtViewerComponent } from "./FtViewerComponent";
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtFileDescriptor } from "./model/ft-viewer.models";
+import { FtWatermark } from "@fluid-topics/public-api";
+type ViewerType = "none" | "image" | "video" | "pdf" | "inline-svg" | "iframe";
+declare const FtViewerContent_base: typeof FtViewerComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtLitElementWithConditionalVisibilityInterface>;
+export declare class FtViewerContent extends FtViewerContent_base {
+    static elementDefinitions: ElementDefinitionsMap;
+    descriptor?: FtFileDescriptor;
+    viewerType: ViewerType;
+    inlineSvgAllowed: boolean;
+    zoom: number | undefined;
+    rotation: number;
+    watermark?: FtWatermark;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    /***************************************
+     *           Image/SVG viewer          *
+     ***************************************/
+    image?: HTMLImageElement;
+    svg?: SVGSVGElement;
+    imageViewer?: HTMLDivElement;
+    imageContainer?: HTMLDivElement;
+    initialImageHeight?: number;
+    initialImageWidth?: number;
+    imageHeight?: number;
+    imageWidth?: number;
+    svgContent?: string;
+    protected renderImageViewer(): import("lit-html").TemplateResult<1>;
+    protected onImageLoad(): void;
+    protected onSvgLoad(): void;
+    private getImageToViewerRatio;
+    /***************************************
+     *             Video viewer            *
+     ***************************************/
+    protected renderVideoViewer(): import("lit-html").TemplateResult<1>;
+    /***************************************
+     *              PDF viewer             *
+     ***************************************/
+    protected renderPdfViewer(): import("lit-html").TemplateResult<1>;
+    /***************************************
+     *             Iframe viewer           *
+     ***************************************/
+    protected renderIframeViewer(url: string | undefined): import("lit-html").TemplateResult<1>;
+    protected willUpdate(props: PropertyValues<FtViewerContent>): void;
+    protected updated(props: PropertyValues<FtViewerContent>): void;
+    protected contentAvailableCallback(props: PropertyValues<FtViewerContent>): void;
+}
+export {};