@fluid-topics/ft-reader-attachments 2.1.8 → 2.1.10

package/build/ft-base-attachments.d.ts

@@ -0,0 +1,30 @@
+import { nothing } from "lit";
+import { ElementDefinitionsMap, FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+import { FtBaseAttachmentsProperties } from "./ft-base-attachments.properties";
+import { FtDocumentAttachment } from "@fluid-topics/public-api";
+declare const FtBaseAttachments_base: import("@fluid-topics/ft-wc-utils").withAnalyticsType<typeof FtLitElementRedux, {
+    "attachment-viewed": {
+        label: string;
+        defaultEventName: string;
+        defaultComponentId: string;
+    };
+    "attachment-downloaded": {
+        label: string;
+        defaultEventName: string;
+        defaultComponentId: string;
+    };
+}>;
+export declare class FtBaseAttachments extends FtBaseAttachments_base implements FtBaseAttachmentsProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    hideFileFormatIcon: boolean;
+    hideFilename: boolean;
+    hideDownloadIcon: boolean;
+    attachments?: Array<FtDocumentAttachment>;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected getAttachmentAriaLabel(attachment: FtDocumentAttachment): string;
+    protected canRender(): boolean;
+    protected getAttachmentDownloadLink(attachment: FtDocumentAttachment): string;
+    protected getAttachmentDownloadLinkAriaLabel(attachment: FtDocumentAttachment): string;
+    protected getAttachmentViewerLink(attachment: FtDocumentAttachment): string | undefined;
+}
+export {};

package/build/ft-base-attachments.js

@@ -0,0 +1,118 @@
+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, nothing, } from "lit";
+import { property, state, } from "lit/decorators.js";
+import { FtLitElementRedux, last, withAnalytics, } from "@fluid-topics/ft-wc-utils";
+import { repeat } from "lit/directives/repeat.js";
+import { fileFormatColors, FtFileFormatIcons, FtIcon, resolveFileFormatIcon, } from "@fluid-topics/ft-icon";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+import { classMap } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+const analyticsActions = {
+    "attachment-viewed": {
+        label: "Opening attachment",
+        defaultEventName: "attachment-open",
+        defaultComponentId: "ft-reader-attachments",
+    },
+    "attachment-downloaded": {
+        label: "Downloading attachment",
+        defaultEventName: "attachment-download",
+        defaultComponentId: "ft-reader-attachments",
+    },
+};
+export class FtBaseAttachments extends withAnalytics(FtLitElementRedux, analyticsActions) {
+    constructor() {
+        super(...arguments);
+        this.hideFileFormatIcon = false;
+        this.hideFilename = false;
+        this.hideDownloadIcon = false;
+    }
+    render() {
+        if (this.canRender()) {
+            const classes = {
+                ["hide-file-format-icon"]: this.hideFileFormatIcon,
+                ["hide-filename"]: this.hideFilename,
+                ["hide-download-icon"]: this.hideDownloadIcon,
+            };
+            return html `
+                <div part="container" class="${classMap(classes)}">
+                    ${repeat(this.attachments, (attachment) => attachment.id, (attachment) => {
+                var _a;
+                const icon = resolveFileFormatIcon(attachment.mimeType, last(attachment.file.split(".")));
+                return html `
+                                <div part="attachment">
+                                    <a part="viewer-link" href="${this.getAttachmentViewerLink(attachment)}"
+                                       aria-label="${this.getAttachmentAriaLabel(attachment)}"
+                                       @click=${() => this.emitAnalyticsAction("attachment-viewed", { name: attachment.name })}>
+                                        <ft-ripple part="ripple viewer-link-ripple"></ft-ripple>
+                                        <ft-icon part="file-format-icon"
+                                                 variant="file-format"
+                                                 value="${icon}"
+                                                 style="color: ${(_a = fileFormatColors[icon]) !== null && _a !== void 0 ? _a : fileFormatColors[FtFileFormatIcons.UNKNOWN]}"></ft-icon>
+                                        <ft-typography part="name" variant="${FtTypographyVariants.body2}">${attachment.name}</ft-typography>
+                                    </a>
+                                    ${attachment.externalLink
+                    ? nothing
+                    : html `
+                                            <a part="download-link"
+                                               target="_blank"
+                                               href="${this.getAttachmentDownloadLink(attachment)}"
+                                               aria-label="${this.getAttachmentDownloadLinkAriaLabel(attachment)}"
+                                               @click=${() => this.emitAnalyticsAction("attachment-downloaded", { name: attachment.name })}>
+                                                <ft-ripple part="ripple download-link-ripple"></ft-ripple>
+                                                <ft-icon part="download-icon">DOWNLOAD</ft-icon>
+                                            </a>
+                                        `}
+                                </div>
+                            `;
+            })}
+                </div>
+            `;
+        }
+        return nothing;
+    }
+    getAttachmentAriaLabel(attachment) {
+        var _a;
+        const displayName = attachment.name;
+        const fileName = attachment.file;
+        if (displayName === fileName) {
+            return fileName;
+        }
+        const fileExtension = (_a = (fileName.includes(".") ? fileName.split(".").pop() : attachment.mimeType)) !== null && _a !== void 0 ? _a : "";
+        return displayName + " " + fileExtension;
+    }
+    canRender() {
+        var _a, _b;
+        return ((_b = (_a = this.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+    }
+    getAttachmentDownloadLink(attachment) {
+        throw new Error("Not implemented");
+    }
+    getAttachmentDownloadLinkAriaLabel(attachment) {
+        throw new Error("Not implemented");
+    }
+    getAttachmentViewerLink(attachment) {
+        throw new Error("Not implemented");
+    }
+}
+FtBaseAttachments.elementDefinitions = {
+    "ft-icon": FtIcon,
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+};
+__decorate([
+    property({ type: Boolean })
+], FtBaseAttachments.prototype, "hideFileFormatIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseAttachments.prototype, "hideFilename", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseAttachments.prototype, "hideDownloadIcon", void 0);
+__decorate([
+    state()
+], FtBaseAttachments.prototype, "attachments", void 0);

package/build/{ft-reader-attachments.properties.d.ts → ft-base-attachments.properties.d.ts}

@@ -1,4 +1,4 @@
-export interface FtReaderAttachmentsProperties {
+export interface FtBaseAttachmentsProperties {
     hideFileFormatIcon?: boolean;
     hideFilename?: boolean;
     hideDownloadIcon?: boolean;

package/build/ft-base-attachments.styles.d.ts

@@ -0,0 +1,15 @@
+import { FtCssVariable } from "@fluid-topics/ft-wc-utils";
+export type FtBaseAttachmentsCssVariables = {
+    itemsGap: FtCssVariable;
+    itemPadding: FtCssVariable;
+    itemBorderWidth: FtCssVariable;
+    itemBorderColor: FtCssVariable;
+    itemBorderRadius: FtCssVariable;
+    itemBackgroundColor: FtCssVariable;
+    itemTextColor: FtCssVariable;
+    itemHoverBackgroundColor: FtCssVariable;
+    itemHoverTextColor: FtCssVariable;
+    fileFormatIconSize: FtCssVariable;
+    downloadIconSize: FtCssVariable;
+};
+export declare function generateAttachmentsStyles(variables: FtBaseAttachmentsCssVariables): import("lit").CSSResult;

package/build/ft-base-attachments.styles.js

@@ -0,0 +1,74 @@
+import { css } from "lit";
+import { setVariable, } from "@fluid-topics/ft-wc-utils";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
+export function generateAttachmentsStyles(variables) {
+    return css `
+        [part="container"] {
+            display: flex;
+            flex-direction: column;
+            gap: ${variables.itemsGap};
+        }
+
+        [part="attachment"] {
+            border-style: solid;
+            border-width: ${variables.itemBorderWidth};
+            border-color: ${variables.itemBorderColor};
+            border-radius: ${variables.itemBorderRadius};
+            background-color: ${variables.itemBackgroundColor};
+        }
+
+        [part="attachment"], [part="viewer-link"], [part="download-link"] {
+            display: flex;
+            flex-direction: row;
+        }
+
+        [part="viewer-link"], [part="download-link"] {
+            position: relative;
+            color: ${variables.itemTextColor};
+            text-decoration: none;
+            padding: ${variables.itemPadding};
+            align-items: center;
+        }
+
+        [part="viewer-link"]:hover, [part="download-link"]:hover {
+            color: ${variables.itemHoverTextColor};
+        }
+
+        [part="viewer-link"] {
+            gap: 8px;
+        }
+
+        [part="viewer-link"], [part="name"] {
+            flex-grow: 1;
+            flex-shrink: 1;
+            word-wrap: break-word;
+            word-break: break-word;
+        }
+
+        [part~="ripple"] {
+            ${setVariable(FtRippleCssVariables.color, variables.itemHoverBackgroundColor)};
+            ${setVariable(FtRippleCssVariables.borderRadius, variables.itemBorderRadius)};
+        }
+
+        [part="file-format-icon"] {
+            ${setVariable(FtIconCssVariables.size, variables.fileFormatIconSize)};
+        }
+
+        [part="download-icon"] {
+            ${setVariable(FtIconCssVariables.size, variables.downloadIconSize)};
+        }
+
+        .hide-file-format-icon [part="file-format-icon"] {
+            display: none;
+        }
+
+        .hide-filename [part="name"] {
+            display: none;
+        }
+
+        .hide-download-icon [part="download-link"] {
+            display: none;
+        }
+    `;
+}

package/build/ft-reader-attachments.d.ts

@@ -1,32 +1,15 @@
-import { nothing, PropertyValues } from "lit";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { FtReaderAttachmentsProperties } from "./ft-reader-attachments.properties";
-import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
-import { FtMap, FtMapAttachment } from "@fluid-topics/public-api";
-declare const FtReaderAttachments_base: import("@fluid-topics/ft-wc-utils").withAnalyticsType<typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>, {
-    "attachment-viewed": {
-        label: string;
-        defaultEventName: string;
-        defaultComponentId: string;
-    };
-    "attachment-downloaded": {
-        label: string;
-        defaultEventName: string;
-        defaultComponentId: string;
-    };
-}>;
-export declare class FtReaderAttachments extends FtReaderAttachments_base implements FtReaderAttachmentsProperties {
-    static elementDefinitions: ElementDefinitionsMap;
+import { PropertyValues } from "lit";
+import { FtDocumentAttachment, FtMap } from "@fluid-topics/public-api";
+import { FtBaseAttachments } from "./ft-base-attachments";
+declare const FtReaderAttachments_base: import("@fluid-topics/ft-reader-context/build/registration").FtReaderComponentType<typeof FtBaseAttachments & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>>;
+export declare class FtReaderAttachments extends FtReaderAttachments_base {
     static styles: import("lit").CSSResult;
-    hideFileFormatIcon: boolean;
-    hideFilename: boolean;
-    hideDownloadIcon: boolean;
     map?: FtMap;
-    attachments?: Array<FtMapAttachment>;
     constructor();
-    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    private getAttachmentAriaLabel;
     protected update(props: PropertyValues): void;
     private updateAttachments;
+    protected getAttachmentDownloadLink(attachment: FtDocumentAttachment): string;
+    protected getAttachmentDownloadLinkAriaLabel(attachment: FtDocumentAttachment): string;
+    protected getAttachmentViewerLink(attachment: FtDocumentAttachment): string | undefined;
 }
 export {};

package/build/ft-reader-attachments.js

@@ -4,94 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
-import { last, redux, reduxEventListener, withAnalytics, } from "@fluid-topics/ft-wc-utils";
-import { styles } from "./ft-reader-attachments.styles";
-import { FtReaderComponent, FtReaderStoreEvents } from "@fluid-topics/ft-reader-context/build/registration";
-import { repeat } from "lit/directives/repeat.js";
-import { attachmentsMessages, defaultMessages } from "./DesignedReaderAttachmentsMessages";
-import { fileFormatColors, FtFileFormatIcons, FtIcon, resolveFileFormatIcon } from "@fluid-topics/ft-icon";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { redux, reduxEventListener, } from "@fluid-topics/ft-wc-utils";
+import { FtReaderAttachmentsCssVariables } from "./ft-reader-attachments.styles";
+import { FtReaderStoreEvents, toFtReaderComponent, } from "@fluid-topics/ft-reader-context/build/registration";
+import { attachmentsMessages, defaultMessages, } from "./DesignedReaderAttachmentsMessages";
 import { withI18n } from "@fluid-topics/ft-i18n";
-import { classMap } from "lit/directives/class-map.js";
-import { FtRipple } from "@fluid-topics/ft-ripple";
-const analyticsActions = {
-    "attachment-viewed": {
-        label: "Opening attachment",
-        defaultEventName: "attachment-open",
-        defaultComponentId: "ft-reader-attachments",
-    },
-    "attachment-downloaded": {
-        label: "Downloading attachment",
-        defaultEventName: "attachment-download",
-        defaultComponentId: "ft-reader-attachments",
-    },
-};
-export class FtReaderAttachments extends withAnalytics(withI18n(FtReaderComponent), analyticsActions) {
+import { FtBaseAttachments } from "./ft-base-attachments";
+import { generateAttachmentsStyles } from "./ft-base-attachments.styles";
+export class FtReaderAttachments extends toFtReaderComponent(withI18n(FtBaseAttachments)) {
     constructor() {
         super();
-        this.hideFileFormatIcon = false;
-        this.hideFilename = false;
-        this.hideDownloadIcon = false;
         this.addI18nContext(attachmentsMessages, defaultMessages);
     }
-    render() {
-        var _a, _b;
-        if (((_b = (_a = this.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0) {
-            const classes = {
-                ["hide-file-format-icon"]: this.hideFileFormatIcon,
-                ["hide-filename"]: this.hideFilename,
-                ["hide-download-icon"]: this.hideDownloadIcon,
-            };
-            return html `
-                <div part="container" class="${classMap(classes)}">
-                    ${repeat(this.attachments, attachment => attachment.id, attachment => {
-                var _a, _b, _c, _d;
-                const icon = resolveFileFormatIcon(attachment.mimeType, last(attachment.file.split(".")));
-                const url = attachment.externalLink ? attachment.viewerUrl : (_a = this.service) === null || _a === void 0 ? void 0 : _a.makeAbsolute((_b = attachment.viewerUrl) !== null && _b !== void 0 ? _b : "");
-                return html `
-                                <div part="attachment">
-                                    <a part="viewer-link" href="${url}"
-                                       aria-label="${this.getAttachmentAriaLabel(attachment)}"
-                                       @click=${() => this.emitAnalyticsAction("attachment-viewed", { name: attachment.name })}>
-                                        <ft-ripple part="ripple viewer-link-ripple"></ft-ripple>
-                                        <ft-icon part="file-format-icon"
-                                                 variant="file-format"
-                                                 value="${icon}"
-                                                 style="color: ${(_c = fileFormatColors[icon]) !== null && _c !== void 0 ? _c : fileFormatColors[FtFileFormatIcons.UNKNOWN]}"></ft-icon>
-                                        <ft-typography part="name" variant="body2">${attachment.name}</ft-typography>
-                                    </a>
-                                    ${attachment.externalLink
-                    ? nothing
-                    : html `
-                                            <a part="download-link"
-                                               href="${(_d = this.service) === null || _d === void 0 ? void 0 : _d.getAttachmentDownloadLink(attachment.id)}"
-                                               target="_blank"
-                                               aria-label="${attachmentsMessages.messages.download(this.getAttachmentAriaLabel(attachment))}"
-                                               @click=${() => this.emitAnalyticsAction("attachment-downloaded", { name: attachment.name })}>
-                                                <ft-ripple part="ripple download-link-ripple"></ft-ripple>
-                                                <ft-icon part="download-icon">DOWNLOAD</ft-icon>
-                                            </a>
-                                        `}
-                                </div>
-                            `;
-            })}
-                </div>
-            `;
-        }
-        return nothing;
-    }
-    getAttachmentAriaLabel(attachment) {
-        var _a;
-        let displayName = attachment.name;
-        let fileName = attachment.file;
-        if (displayName === fileName) {
-            return fileName;
-        }
-        let fileExtension = (_a = (fileName.includes(".") ? fileName.split(".").pop() : attachment.mimeType)) !== null && _a !== void 0 ? _a : "";
-        return displayName + " " + fileExtension;
-    }
     update(props) {
         super.update(props);
         if (props.has("map")) {
@@ -101,34 +25,28 @@ export class FtReaderAttachments extends withAnalytics(withI18n(FtReaderComponen
     updateAttachments() {
         var _a;
         if (this.map) {
-            (_a = this.service) === null || _a === void 0 ? void 0 : _a.getAttachments().then(attachments => this.attachments = attachments);
+            (_a = this.service) === null || _a === void 0 ? void 0 : _a.getAttachments().then((attachments) => this.attachments = attachments);
         }
         else {
             this.attachments = undefined;
         }
     }
+    getAttachmentDownloadLink(attachment) {
+        var _a, _b;
+        return (_b = (_a = this.service) === null || _a === void 0 ? void 0 : _a.getAttachmentDownloadLink(attachment.id)) !== null && _b !== void 0 ? _b : "";
+    }
+    getAttachmentDownloadLinkAriaLabel(attachment) {
+        return attachmentsMessages.messages.download(this.getAttachmentAriaLabel(attachment));
+    }
+    getAttachmentViewerLink(attachment) {
+        var _a, _b;
+        return (_a = this.service) === null || _a === void 0 ? void 0 : _a.makeAbsolute((_b = attachment.viewerUrl) !== null && _b !== void 0 ? _b : "");
+    }
 }
-FtReaderAttachments.elementDefinitions = {
-    "ft-icon": FtIcon,
-    "ft-ripple": FtRipple,
-    "ft-typography": FtTypography,
-};
-FtReaderAttachments.styles = styles;
-__decorate([
-    property({ type: Boolean })
-], FtReaderAttachments.prototype, "hideFileFormatIcon", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderAttachments.prototype, "hideFilename", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderAttachments.prototype, "hideDownloadIcon", void 0);
+FtReaderAttachments.styles = generateAttachmentsStyles(FtReaderAttachmentsCssVariables);
 __decorate([
     redux({ store: "reader" })
 ], FtReaderAttachments.prototype, "map", void 0);
-__decorate([
-    state()
-], FtReaderAttachments.prototype, "attachments", void 0);
 __decorate([
     reduxEventListener({ eventName: FtReaderStoreEvents.mapAttachmentsUpdate })
 ], FtReaderAttachments.prototype, "updateAttachments", null);