@fluid-topics/ft-reader-feedback 0.3.55

package/README.md

@@ -0,0 +1,32 @@
+Feedback forms for a map and its topics in an integrated reader
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-reader-feedback
+yarn add @fluid-topics/ft-reader-feedback
+```
+
+## Usage
+
+See [@fluid-topics/ft-reader-context](https://www.npmjs.com/package/@fluid-topics/ft-reader-context) for more
+information about integrated readers for Fluid Topics.
+
+```typescript
+import {html} from "lit"
+import "@fluid-topics/ft-reader-context"
+import "@fluid-topics/ft-reader-topic-context"
+import "@fluid-topics/ft-reader-feedback"
+
+function render() {
+    return html` 
+        <ft-reader-context baseUrl="https://my.fluidtopics.com" mapId="<Map ID>">
+            <ft-reader-feedback></ft-reader-feedback>
+            
+            <ft-reader-topic-context tocId="<Topic ToC ID>">
+                <ft-reader-feedback></ft-reader-feedback>
+            </ft-reader-topic-context>
+        </ft-reader-context>
+    `
+}
+```

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

@@ -0,0 +1,6 @@
+export declare const FtReaderFeedbackCssVariables: {
+    feedbackInputMinWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    ratedDateColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-reader-feedback.css.d.ts.map

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

@@ -0,0 +1,69 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtReaderFeedbackCssVariables = {
+    feedbackInputMinWidth: FtCssVariableFactory.create("--ft-reader-feedback-input-min-width", "SIZE", "300px"),
+    ratedDateColor: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system")
+};
+// language=CSS
+export const styles = css `
+    .ft-reader-feedback {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .ft-reader-feedback--placeholder {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        padding: 8px;
+        border: 1px dashed #e1e1e1;
+        color: #444444;
+        background: #f1f1f1;
+        border-radius: 4px;
+        align-items: center;
+    }
+
+    .ft-reader-feedback--placeholder ft-typography {
+        flex-grow: 1;
+    }
+
+    .ft-reader-feedback--placeholder ft-tooltip {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .ft-reader-feedback--stars {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+
+    .ft-reader-feedback--rating, .ft-reader-feedback--feedback {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .ft-reader-feedback--rating .ft-reader-feedback--section-title {
+        margin-bottom: 8px;
+    }
+
+    .ft-reader-feedback--feedback {
+        gap: 8px;
+    }
+
+    .ft-reader-feedback--rating-date {
+        color: ${FtReaderFeedbackCssVariables.ratedDateColor};
+    }
+
+    .ft-reader-feedback--feedback ft-text-area {
+        min-width: ${FtReaderFeedbackCssVariables.feedbackInputMinWidth};
+    }
+
+    .ft-reader-feedback--send-feedback, .ft-reader-feedback--feedback-link {
+        align-self: flex-end;
+    }
+`;
+//# sourceMappingURL=ft-reader-feedback.css.js.map

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

@@ -0,0 +1,45 @@
+import { nothing } from "lit";
+import { ElementDefinitionsMap, FtLitElement, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
+import { FtReaderFeedbackProperties } from "./ft-reader-feedback.properties";
+import { FtTopicRatingSummary } from "@fluid-topics/ft-reader-context/build/store/model";
+import type { FtPublicationRatingSummary, FtUserProfile } from "@fluid-topics/public-api";
+import { FtTextArea } from "@fluid-topics/ft-text-area";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { FtReaderFeedbackLabels } from "./utils/labels";
+export declare class FtReaderFeedback extends FtLitElement implements FtReaderFeedbackProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    editorMode: boolean;
+    hideTitle: boolean;
+    ratingAllowed: boolean;
+    labelResolver: ParametrizedLabelResolver<FtReaderFeedbackLabels>;
+    ratingSummary?: FtPublicationRatingSummary | FtTopicRatingSummary;
+    user?: FtUserProfile;
+    feedbackInput: FtTextArea;
+    feedbackMessage: string;
+    iconVariant: FtIconVariants;
+    emptyStarIcon?: string;
+    filledStarIcon?: string;
+    emptyLikeIcon?: string;
+    filledLikeIcon?: string;
+    emptyDislikeIcon?: string;
+    filledDislikeIcon?: string;
+    feedbackMailLinkBuilder: (feedbackMessage: string) => string | undefined;
+    get canAccessFeedback(): boolean | undefined;
+    get canAccessRating(): boolean | undefined;
+    get userHasRatingRole(): boolean | undefined;
+    get configuredRatingType(): import("@fluid-topics/public-api").FtRatingType | "NO_RATING";
+    get ratingType(): import("@fluid-topics/public-api").FtRatingType | "NO_RATING";
+    get ratingValue(): number;
+    get ratingDate(): Date | undefined;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    private renderRatingSection;
+    private renderRatingDate;
+    private renderRating;
+    private rate;
+    private renderFeedbackSection;
+    private sendFeedback;
+    private placeholderInEditor;
+    clearFeedbackInput(): void;
+}
+//# sourceMappingURL=ft-reader-feedback.d.ts.map

package/build/ft-reader-feedback.js

@@ -0,0 +1,280 @@
+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, query, state } from "lit/decorators.js";
+import { FtLitElement, parseDate, } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-reader-feedback.css";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtSwitch, FtSwitchOption } from "@fluid-topics/ft-switch";
+import { FtTextArea } from "@fluid-topics/ft-text-area";
+import { repeat } from "lit/directives/repeat.js";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+export class FtReaderFeedback extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.editorMode = false;
+        this.hideTitle = false;
+        this.ratingAllowed = false;
+        this.feedbackMessage = "";
+        this.iconVariant = FtIconVariants.fluid_topics;
+        this.emptyStarIcon = "STAR";
+        this.filledStarIcon = "STAR_PLAIN";
+        this.emptyLikeIcon = "THUMBS_UP";
+        this.filledLikeIcon = "THUMBS_UP_PLAIN";
+        this.emptyDislikeIcon = "THUMBS_DOWN";
+        this.filledDislikeIcon = "THUMBS_DOWN_PLAIN";
+    }
+    get canAccessFeedback() {
+        return this.user && this.user.roles.includes("FEEDBACK_USER");
+    }
+    get canAccessRating() {
+        return this.userHasRatingRole && this.configuredRatingType !== "NO_RATING";
+    }
+    get userHasRatingRole() {
+        return this.user && this.user.roles.includes("RATING_USER");
+    }
+    get configuredRatingType() {
+        var _a, _b;
+        return (_b = (this.ratingAllowed ? (_a = this.ratingSummary) === null || _a === void 0 ? void 0 : _a.type : "NO_RATING")) !== null && _b !== void 0 ? _b : "NO_RATING";
+    }
+    get ratingType() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.ratingSummary) === null || _a === void 0 ? void 0 : _a.rating) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : "NO_RATING";
+    }
+    get ratingValue() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.ratingSummary) === null || _a === void 0 ? void 0 : _a.rating) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : -1;
+    }
+    get ratingDate() {
+        var _a, _b;
+        const date = (_b = (_a = this.ratingSummary) === null || _a === void 0 ? void 0 : _a.rating) === null || _b === void 0 ? void 0 : _b.date;
+        return typeof date === "string" ? parseDate(date) : date;
+    }
+    render() {
+        if (!this.editorMode && !this.canAccessFeedback && !this.canAccessRating) {
+            return nothing;
+        }
+        return html `
+            <div class="ft-reader-feedback">
+                ${this.hideTitle ? nothing : html `
+                            <ft-typography variant="title" part="main-title">
+                                ${this.labelResolver.resolve("feedbackMainTitle")}
+                            </ft-typography>
+                        `}
+                ${this.renderRatingSection()}
+                ${this.renderFeedbackSection()}
+            </div>
+        `;
+    }
+    renderRatingSection() {
+        if (this.canAccessRating) {
+            return html `
+                <div class="ft-reader-feedback--rating" part="rating-container">
+                    <ft-typography variant="title-dense" part="section-title" class="ft-reader-feedback--section-title">
+                        ${this.ratingSummary.type === "DICHOTOMOUS" ? this.labelResolver.resolve("dichotomousRatingSectionTitle") : this.labelResolver.resolve("ratingSectionTitle")}
+                    </ft-typography>
+                    ${this.renderRating()}
+                    <ft-typography variant="caption" class="ft-reader-feedback--rating-date" part="rating-date">
+                        ${this.renderRatingDate()}
+                    </ft-typography>
+                </div>
+            `;
+        }
+        return this.placeholderInEditor("Rating unavailable: " + (this.userHasRatingRole ? "no rating configured for this content" : "missing role RATING_USER"));
+    }
+    renderRatingDate() {
+        const ratingDate = this.ratingDate;
+        if (ratingDate == null) {
+            return this.labelResolver.resolve("notRated");
+        }
+        if (ratingDate.getTime() > (new Date().getTime() - 60000)) { // Less than 1 min ago
+            return this.labelResolver.resolve("ratedNow");
+        }
+        const today = new Date().toLocaleDateString();
+        const formattedDate = ratingDate.toLocaleDateString();
+        if (today === formattedDate) {
+            return this.labelResolver.resolve("ratedToday");
+        }
+        return this.labelResolver.resolve("ratedOn", ratingDate);
+    }
+    renderRating() {
+        switch (this.configuredRatingType) {
+            case "STARS":
+                return html `
+                    <div class="ft-reader-feedback--stars" part="rating rating-stars">
+                        ${repeat(new Array(5), (_, index) => index, (_, index) => {
+                    let active = this.ratingType === "STARS" && this.ratingValue > index;
+                    const ratingValue = index + 1;
+                    return html `
+                                        <ft-button round part="rating-stars-${ratingValue}"
+                                                   label="${this.labelResolver.resolve("starsRating", ratingValue)}"
+                                                   tooltipPosition="top"
+                                                   .iconVariant=${this.iconVariant}
+                                                   icon="${active ? this.filledStarIcon : this.emptyStarIcon}"
+                                                   class="ft-reader-feedback--${active ? "active" : "inactive"}"
+                                                   @click=${() => this.rate(this.ratingValue === ratingValue ? undefined : ratingValue)}
+                                        ></ft-button>
+                                    `;
+                })}
+                    </div>
+                `;
+            case "LIKE":
+                const disliked = this.ratingType === "LIKE" && this.ratingValue === 0;
+                const liked = this.ratingType === "LIKE" && this.ratingValue === 1;
+                return html `
+                    <ft-switch @change=${(e) => this.rate(e.detail)} part="rating rating-like">
+                        <ft-switch-option .value=${0}
+                                          ?selected=${disliked}
+                                          .iconVariant=${this.iconVariant}
+                                          icon="${disliked ? this.filledDislikeIcon : this.emptyDislikeIcon}">
+                            ${this.labelResolver.resolve("dislike")}
+                        </ft-switch-option>
+                        <ft-switch-option .value=${1}
+                                          ?selected=${liked}
+                                          .iconVariant=${this.iconVariant}
+                                          icon="${liked ? this.filledLikeIcon : this.emptyLikeIcon}">
+                            ${this.labelResolver.resolve("like")}
+                        </ft-switch-option>
+                    </ft-switch>
+                `;
+            case "DICHOTOMOUS":
+                const no = this.ratingType === "DICHOTOMOUS" && this.ratingValue === 0;
+                const yes = this.ratingType === "DICHOTOMOUS" && this.ratingValue === 1;
+                return html `
+                    <ft-switch @change=${(e) => this.rate(e.detail)}
+                               part="rating rating-dichotomous">
+                        <ft-switch-option .value=${0}
+                                          ?selected=${no}>
+                            ${this.labelResolver.resolve("dichotomousNo")}
+                        </ft-switch-option>
+                        <ft-switch-option .value=${1}
+                                          ?selected=${yes}>
+                            ${this.labelResolver.resolve("dichotomousYes")}
+                        </ft-switch-option>
+                    </ft-switch>
+                `;
+        }
+        return nothing;
+    }
+    rate(value) {
+        this.dispatchEvent(new CustomEvent("rate", { detail: value }));
+    }
+    renderFeedbackSection() {
+        if (this.canAccessFeedback) {
+            const mailLink = this.feedbackMailLinkBuilder(this.feedbackMessage);
+            let button = html `
+                <ft-button primary
+                           class="ft-reader-feedback--send-feedback"
+                           ?disabled=${!this.feedbackMessage}
+                           @click=${() => mailLink ? this.clearFeedbackInput() : this.sendFeedback()}
+                           part="send-feedback">
+                    ${this.labelResolver.resolve("okButton")}
+                </ft-button>
+            `;
+            if (mailLink) {
+                button = html `
+                    <a class="ft-reader-feedback--feedback-link" href="${mailLink}">
+                        ${button}
+                    </a>
+                `;
+            }
+            return html `
+                <div class="ft-reader-feedback--feedback" part="feedback-container">
+                    <ft-typography variant="title-dense" part="section-title" class="ft-reader-feedback--section-title">
+                        ${this.labelResolver.resolve("feedbackSectionTitle")}
+                    </ft-typography>
+                    <ft-text-area outlined
+                                  class="ft-reader-feedback--feedback-input" part="feedback-input"
+                                  label="${this.labelResolver.resolve("feedbackInputLabel")}"
+                                  @live-change=${(e) => this.feedbackMessage = e.detail.trim()}
+                    ></ft-text-area>
+                    ${button}
+                </div>
+            `;
+        }
+        return this.placeholderInEditor("Feedback unavailable: missing role FEEDBACK_USER");
+    }
+    sendFeedback() {
+        this.dispatchEvent(new CustomEvent("send-feedback", { detail: this.feedbackInput.value }));
+    }
+    placeholderInEditor(message) {
+        return this.editorMode ? html `
+            <div class="ft-reader-feedback--placeholder">
+                <ft-typography variant="caption">${message}</ft-typography>
+                <ft-tooltip position="left"
+                            text="This is a placeholder, it will not appear outside this designer.">
+                    <ft-icon>INFO</ft-icon>
+                </ft-tooltip>
+            </div>
+        ` : nothing;
+    }
+    clearFeedbackInput() {
+        setTimeout(() => this.feedbackInput.value = "", 0);
+    }
+}
+FtReaderFeedback.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+    "ft-tooltip": FtTooltip,
+    "ft-switch": FtSwitch,
+    "ft-switch-option": FtSwitchOption,
+    "ft-text-area": FtTextArea,
+};
+FtReaderFeedback.styles = styles;
+__decorate([
+    property({ attribute: true })
+], FtReaderFeedback.prototype, "editorMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderFeedback.prototype, "hideTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderFeedback.prototype, "ratingAllowed", void 0);
+__decorate([
+    property({ attribute: false })
+], FtReaderFeedback.prototype, "labelResolver", void 0);
+__decorate([
+    property({ attribute: false })
+], FtReaderFeedback.prototype, "ratingSummary", void 0);
+__decorate([
+    property({ attribute: false })
+], FtReaderFeedback.prototype, "user", void 0);
+__decorate([
+    query(".ft-reader-feedback--feedback-input")
+], FtReaderFeedback.prototype, "feedbackInput", void 0);
+__decorate([
+    state()
+], FtReaderFeedback.prototype, "feedbackMessage", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "emptyStarIcon", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "filledStarIcon", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "emptyLikeIcon", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "filledLikeIcon", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "emptyDislikeIcon", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "filledDislikeIcon", void 0);
+__decorate([
+    property()
+], FtReaderFeedback.prototype, "feedbackMailLinkBuilder", void 0);
+//# sourceMappingURL=ft-reader-feedback.js.map