@fluid-topics/ft-reader-feedback 0.3.58 → 0.3.61

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

@@ -1,18 +1,24 @@
 import { nothing } from "lit";
-import { ElementDefinitionsMap, FtLitElement, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
+import { ElementDefinitionsMap } 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 {
+import { FtLitElementWithI18n, I18nProperty } from "@fluid-topics/ft-i18n";
+export interface FeedbackI18nProperties {
+    feedbackMainTitle: I18nProperty;
+    ratingSectionTitle: I18nProperty;
+    feedbackSectionTitle: I18nProperty;
+    dichotomousRatingSectionTitle: I18nProperty;
+}
+export declare class FtReaderFeedback extends FtLitElementWithI18n implements FtReaderFeedbackProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     editorMode: boolean;
     hideTitle: boolean;
     ratingAllowed: boolean;
-    labelResolver: ParametrizedLabelResolver<FtReaderFeedbackLabels>;
+    i18nProperties: FeedbackI18nProperties;
     ratingSummary?: FtPublicationRatingSummary | FtTopicRatingSummary;
     user?: FtUserProfile;
     feedbackInput: FtTextArea;
@@ -25,6 +31,7 @@ export declare class FtReaderFeedback extends FtLitElement implements FtReaderFe
     emptyDislikeIcon?: string;
     filledDislikeIcon?: string;
     feedbackMailLinkBuilder: (feedbackMessage: string) => string | undefined;
+    constructor();
     get canAccessFeedback(): boolean | undefined;
     get canAccessRating(): boolean | undefined;
     get userHasRatingRole(): boolean | undefined;

package/build/ft-reader-feedback.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
-import { FtLitElement, parseDate, } from "@fluid-topics/ft-wc-utils";
+import { 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";
@@ -16,9 +16,12 @@ 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 {
+import { defaultMessages, feedback } from "./utils/IntegratedFeedbackComponentMessages";
+import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
+import { defaultDesignerMessages, designer } from "./utils/InDesignerFeedbackComponentMessages";
+export class FtReaderFeedback extends FtLitElementWithI18n {
     constructor() {
-        super(...arguments);
+        super();
         this.editorMode = false;
         this.hideTitle = false;
         this.ratingAllowed = false;
@@ -30,6 +33,8 @@ export class FtReaderFeedback extends FtLitElement {
         this.filledLikeIcon = "THUMBS_UP_PLAIN";
         this.emptyDislikeIcon = "THUMBS_DOWN";
         this.filledDislikeIcon = "THUMBS_DOWN_PLAIN";
+        this.addI18nContext(feedback, defaultMessages);
+        this.addI18nContext(designer, defaultDesignerMessages);
     }
     get canAccessFeedback() {
         return this.user && this.user.roles.includes("FEEDBACK_USER");
@@ -65,7 +70,7 @@ export class FtReaderFeedback extends FtLitElement {
             <div class="ft-reader-feedback">
                 ${this.hideTitle ? nothing : html `
                             <ft-typography variant="title" part="main-title">
-                                ${this.labelResolver.resolve("feedbackMainTitle")}
+                                ${this.i18n(this.i18nProperties.feedbackMainTitle)}
                             </ft-typography>
                         `}
                 ${this.renderRatingSection()}
@@ -78,7 +83,7 @@ export class FtReaderFeedback extends FtLitElement {
             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")}
+                        ${this.i18n(this.ratingSummary.type === "DICHOTOMOUS" ? this.i18nProperties.dichotomousRatingSectionTitle : this.i18nProperties.ratingSectionTitle)}
                     </ft-typography>
                     ${this.renderRating()}
                     <ft-typography variant="caption" class="ft-reader-feedback--rating-date" part="rating-date">
@@ -87,22 +92,22 @@ export class FtReaderFeedback extends FtLitElement {
                 </div>
             `;
         }
-        return this.placeholderInEditor("Rating unavailable: " + (this.userHasRatingRole ? "no rating configured for this content." : "missing role RATING_USER."));
+        return this.placeholderInEditor((this.userHasRatingRole ? designer.messages.ratingNotConfigured() : designer.messages.missingRatingRole()));
     }
     renderRatingDate() {
         const ratingDate = this.ratingDate;
         if (ratingDate == null) {
-            return this.labelResolver.resolve("notRated");
+            return feedback.messages.notRated();
         }
         if (ratingDate.getTime() > (new Date().getTime() - 60000)) { // Less than 1 min ago
-            return this.labelResolver.resolve("ratedNow");
+            return feedback.messages.ratedNow();
         }
         const today = new Date().toLocaleDateString();
         const formattedDate = ratingDate.toLocaleDateString();
         if (today === formattedDate) {
-            return this.labelResolver.resolve("ratedToday");
+            return feedback.messages.ratedToday();
         }
-        return this.labelResolver.resolve("ratedOn", ratingDate);
+        return feedback.messages.ratedOn(ratingDate);
     }
     renderRating() {
         switch (this.configuredRatingType) {
@@ -114,7 +119,7 @@ export class FtReaderFeedback extends FtLitElement {
                     const ratingValue = index + 1;
                     return html `
                                         <ft-button round part="rating-stars-${ratingValue}"
-                                                   label="${this.labelResolver.resolve("starsRating", ratingValue)}"
+                                                   label="${feedback.messages.starsRating(ratingValue)}"
                                                    tooltipPosition="top"
                                                    .iconVariant=${this.iconVariant}
                                                    icon="${active ? this.filledStarIcon : this.emptyStarIcon}"
@@ -130,17 +135,17 @@ export class FtReaderFeedback extends FtLitElement {
                 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")}
+                            ${feedback.messages.like()}
+                        </ft-switch-option>
+                        <ft-switch-option .value=${0}
+                                          ?selected=${disliked}
+                                          .iconVariant=${this.iconVariant}
+                                          icon="${disliked ? this.filledDislikeIcon : this.emptyDislikeIcon}">
+                            ${feedback.messages.dislike()}
                         </ft-switch-option>
                     </ft-switch>
                 `;
@@ -150,13 +155,13 @@ export class FtReaderFeedback extends FtLitElement {
                 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")}
+                            ${feedback.messages.dichotomousYes()}
+                        </ft-switch-option>
+                        <ft-switch-option .value=${0}
+                                          ?selected=${no}>
+                            ${feedback.messages.dichotomousNo()}
                         </ft-switch-option>
                     </ft-switch>
                 `;
@@ -164,7 +169,9 @@ export class FtReaderFeedback extends FtLitElement {
         return nothing;
     }
     rate(value) {
-        this.dispatchEvent(new CustomEvent("rate", { detail: value }));
+        if ((value !== null && value !== void 0 ? value : -1) !== this.ratingValue) {
+            this.dispatchEvent(new CustomEvent("rate", { detail: value }));
+        }
     }
     renderFeedbackSection() {
         if (this.canAccessFeedback) {
@@ -175,7 +182,7 @@ export class FtReaderFeedback extends FtLitElement {
                            ?disabled=${!this.feedbackMessage}
                            @click=${() => mailLink ? this.clearFeedbackInput() : this.sendFeedback()}
                            part="send-feedback">
-                    ${this.labelResolver.resolve("okButton")}
+                    ${feedback.messages.okButton()}
                 </ft-button>
             `;
             if (mailLink) {
@@ -188,18 +195,18 @@ export class FtReaderFeedback extends FtLitElement {
             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")}
+                        ${this.i18n(this.i18nProperties.feedbackSectionTitle)}
                     </ft-typography>
                     <ft-text-area outlined
                                   class="ft-reader-feedback--feedback-input" part="feedback-input"
-                                  label="${this.labelResolver.resolve("feedbackInputLabel")}"
+                                  label="${feedback.messages.feedbackInputLabel()}"
                                   @live-change=${(e) => this.feedbackMessage = e.detail.trim()}
                     ></ft-text-area>
                     ${button}
                 </div>
             `;
         }
-        return this.placeholderInEditor("Feedback unavailable: missing role FEEDBACK_USER.");
+        return this.placeholderInEditor(designer.messages.missingFeedbackRole());
     }
     sendFeedback() {
         this.dispatchEvent(new CustomEvent("send-feedback", { detail: this.feedbackInput.value }));
@@ -209,7 +216,7 @@ export class FtReaderFeedback extends FtLitElement {
             <div class="ft-reader-feedback--placeholder">
                 <ft-typography variant="caption">${message}</ft-typography>
                 <ft-tooltip position="left"
-                            text="This notice will not appear outside this designer.">
+                            text="${designer.messages.inDesignerOnlyNotice()}">
                     <ft-icon>INFO</ft-icon>
                 </ft-tooltip>
             </div>
@@ -230,7 +237,7 @@ FtReaderFeedback.elementDefinitions = {
 };
 FtReaderFeedback.styles = styles;
 __decorate([
-    property({ attribute: true })
+    property({ type: Boolean })
 ], FtReaderFeedback.prototype, "editorMode", void 0);
 __decorate([
     property({ type: Boolean })
@@ -240,7 +247,7 @@ __decorate([
 ], FtReaderFeedback.prototype, "ratingAllowed", void 0);
 __decorate([
     property({ attribute: false })
-], FtReaderFeedback.prototype, "labelResolver", void 0);
+], FtReaderFeedback.prototype, "i18nProperties", void 0);
 __decorate([
     property({ attribute: false })
 ], FtReaderFeedback.prototype, "ratingSummary", void 0);