@fluid-topics/ft-reader-attachments 1.1.12

package/README.md

@@ -0,0 +1,19 @@
+Reader component to list map attachments
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-reader-attachments
+yarn add @fluid-topics/ft-reader-attachments
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-reader-attachments"
+
+function render() {
+    return html` <ft-reader-attachments></ft-reader-attachments> `
+}
+```

package/build/DesignedReaderAttachmentsMessages.d.ts

@@ -0,0 +1,6 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface DesignedReaderAttachmentsMessages extends I18nMessages {
+    download(filename: string): string;
+}
+export declare const attachmentsMessages: I18nMessageContext<DesignedReaderAttachmentsMessages>;
+export declare const defaultMessages: DefaultI18nMessages<DesignedReaderAttachmentsMessages>;

package/build/DesignedReaderAttachmentsMessages.js

@@ -0,0 +1,5 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const attachmentsMessages = I18nMessageContext.build("designedReaderAttachments");
+export const defaultMessages = {
+    download: "Download “{0}”"
+};

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

@@ -0,0 +1,14 @@
+export declare const FtReaderAttachmentsCssVariables: {
+    itemsGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemHoverBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemHoverTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fileFormatIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    downloadIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-reader-attachments.css.js

@@ -0,0 +1,86 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
+export const FtReaderAttachmentsCssVariables = {
+    itemsGap: FtCssVariableFactory.create("--ft-reader-attachments-items-gap", "", "SIZE", "8px"),
+    itemPadding: FtCssVariableFactory.create("--ft-reader-attachments-item-padding", "", "SIZE", "8px"),
+    itemBorderWidth: FtCssVariableFactory.create("--ft-reader-attachments-item-border-width", "", "SIZE", "1px"),
+    itemBorderColor: FtCssVariableFactory.extend("--ft-reader-attachments-item-border-color", "", designSystemVariables.colorOutline),
+    itemBorderRadius: FtCssVariableFactory.extend("--ft-reader-attachments-item-border-radius", "", designSystemVariables.borderRadiusS),
+    itemBackgroundColor: FtCssVariableFactory.extend("--ft-reader-attachments-item-background-color", "", designSystemVariables.colorSurface),
+    itemTextColor: FtCssVariableFactory.extend("--ft-reader-attachments-item-text-color", "", designSystemVariables.colorOnSurfaceMedium),
+    itemHoverBackgroundColor: FtCssVariableFactory.extend("--ft-reader-attachments-item-hover-background-color", "", designSystemVariables.colorPrimary),
+    itemHoverTextColor: FtCssVariableFactory.extend("--ft-reader-attachments-item-hover-text-color", "", designSystemVariables.colorOnSurfaceHigh),
+    fileFormatIconSize: FtCssVariableFactory.create("--ft-reader-attachments-file-format-icon-size", "", "SIZE", "30px"),
+    downloadIconSize: FtCssVariableFactory.create("--ft-reader-attachments-down-icon-size", "", "SIZE", "20px"),
+};
+// language=CSS
+export const styles = css `
+    [part="container"] {
+        display: flex;
+        flex-direction: column;
+        gap: ${FtReaderAttachmentsCssVariables.itemsGap};
+    }
+
+    [part="attachment"] {
+        border-style: solid;
+        border-width: ${FtReaderAttachmentsCssVariables.itemBorderWidth};
+        border-color: ${FtReaderAttachmentsCssVariables.itemBorderColor};
+        border-radius: ${FtReaderAttachmentsCssVariables.itemBorderRadius};
+        background-color: ${FtReaderAttachmentsCssVariables.itemBackgroundColor};
+    }
+
+    [part="attachment"], [part="viewer-link"], [part="download-link"] {
+        display: flex;
+        flex-direction: row;
+    }
+
+    [part="viewer-link"], [part="download-link"] {
+        position: relative;
+        color: ${FtReaderAttachmentsCssVariables.itemTextColor};
+        text-decoration: none;
+        padding: ${FtReaderAttachmentsCssVariables.itemPadding};
+        align-items: center;
+    }
+
+    [part="viewer-link"]:hover, [part="download-link"]:hover {
+        color: ${FtReaderAttachmentsCssVariables.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, FtReaderAttachmentsCssVariables.itemHoverBackgroundColor)};
+        ${setVariable(FtRippleCssVariables.borderRadius, FtReaderAttachmentsCssVariables.itemBorderRadius)};
+    }
+
+    [part="file-format-icon"] {
+        ${setVariable(FtIconCssVariables.size, FtReaderAttachmentsCssVariables.fileFormatIconSize)};
+    }
+
+    [part="download-icon"] {
+        ${setVariable(FtIconCssVariables.size, FtReaderAttachmentsCssVariables.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

@@ -0,0 +1,19 @@
+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: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtReaderAttachments extends FtReaderAttachments_base implements FtReaderAttachmentsProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    hideFileFormatIcon: boolean;
+    hideFilename: boolean;
+    hideDownloadIcon: boolean;
+    map?: FtMap;
+    attachments?: Array<FtMapAttachment>;
+    constructor();
+    protected render(): import("lit").TemplateResult<1> | typeof nothing;
+    protected update(props: PropertyValues): void;
+}
+export {};

package/build/ft-reader-attachments.js

@@ -0,0 +1,99 @@
+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 { last, redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-reader-attachments.css";
+import { FtReaderComponent } 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 { withI18n } from "@fluid-topics/ft-i18n";
+import { classMap } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+class FtReaderAttachments extends withI18n(FtReaderComponent) {
+    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}">
+                                            <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>
+                                        <a part="download-link"
+                                           href="${(_d = this.service) === null || _d === void 0 ? void 0 : _d.getAttachmentDownloadLink(attachment.id)}"
+                                           title="${attachmentsMessages.messages.download(attachment.file)}">
+                                            <ft-ripple part="ripple download-link-ripple"></ft-ripple>
+                                            <ft-icon part="download-icon">DOWNLOAD</ft-icon>
+                                        </a>
+                                    </div>
+                                `;
+            })}
+                </div>
+            `;
+        }
+        return nothing;
+    }
+    update(props) {
+        var _a;
+        super.update(props);
+        if (props.has("map")) {
+            if (this.map) {
+                (_a = this.service) === null || _a === void 0 ? void 0 : _a.getAttachments().then(attachments => this.attachments = attachments);
+            }
+            else {
+                this.attachments = undefined;
+            }
+        }
+    }
+}
+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);
+__decorate([
+    redux({ store: "reader" })
+], FtReaderAttachments.prototype, "map", void 0);
+__decorate([
+    state()
+], FtReaderAttachments.prototype, "attachments", void 0);
+export { FtReaderAttachments };