@fluid-topics/ft-viewer 2.1.23 → 2.2.0

package/build/ud/index.d.ts

@@ -3,7 +3,6 @@ export * from "./ft-ud-viewer-context";
 export * from "./model/ft-ud-viewer.models";
 export * from "./components/registration";
 export * from "./components/ft-ud-viewer-content";
-export * from "./components/ft-ud-viewer-content-control";
 export * from "./components/ft-ud-viewer-filename";
 export * from "./components/ft-ud-viewer-title";
 export * from "./components/ft-ud-viewer-mime-type-icon";

package/build/ud/index.js

@@ -3,7 +3,6 @@ export * from "./ft-ud-viewer-context";
 export * from "./model/ft-ud-viewer.models";
 export * from "./components/registration";
 export * from "./components/ft-ud-viewer-content";
-export * from "./components/ft-ud-viewer-content-control";
 export * from "./components/ft-ud-viewer-filename";
 export * from "./components/ft-ud-viewer-title";
 export * from "./components/ft-ud-viewer-mime-type-icon";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-viewer",
-    "version": "2.1.23",
+    "version": "2.2.0",
     "description": "File viewer components",
     "keywords": [
         "Lit"
@@ -19,18 +19,18 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-content-watermark": "2.1.23",
-        "@fluid-topics/ft-i18n": "2.1.23",
-        "@fluid-topics/ft-reader-attachments": "2.1.23",
-        "@fluid-topics/ft-reader-feedback": "2.1.23",
-        "@fluid-topics/ft-search-result-context": "2.1.23",
-        "@fluid-topics/ft-wc-utils": "2.1.23",
+        "@fluid-topics/ft-content-watermark": "2.2.0",
+        "@fluid-topics/ft-i18n": "2.2.0",
+        "@fluid-topics/ft-reader-attachments": "2.2.0",
+        "@fluid-topics/ft-reader-feedback": "2.2.0",
+        "@fluid-topics/ft-search-result-context": "2.2.0",
+        "@fluid-topics/ft-wc-utils": "2.2.0",
         "@fluid-topics/public-api": "1.0.137",
         "@lit/context": "1.1.6",
-        "lit": "3.1.0"
+        "lit": "3.3.3"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.1.23"
+        "@fluid-topics/ft-wc-test-utils": "2.2.0"
     },
-    "gitHead": "e3ca12cf64b1a6af677ff8eb408b8dd3e85797f3"
+    "gitHead": "524448c19965dfe37c04bfb9a6d0e7d084fa12ce"
 }

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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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.messages.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/ud/components/ft-ud-viewer-content-control.d.ts

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

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

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