@fluid-topics/ft-reader-feedback 1.1.31 → 1.1.33

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

@@ -64,8 +64,11 @@ export const styles = css `
     }
 
     .ft-reader-feedback--send-feedback, .ft-reader-feedback--feedback-link {
-        align-self: flex-end;
         ${setVariable(FtButtonCssVariables.color, FtReaderFeedbackCssVariables.sendFeedbackColor)};
         ${setVariable(FtButtonCssVariables.backgroundColor, FtReaderFeedbackCssVariables.sendFeedbackBackgroundColor)};
     }
+
+    [part="buttons-container"] {
+        align-self: flex-end;
+    }
 `;

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

@@ -14,16 +14,13 @@ export interface FeedbackI18nProperties {
     feedbackSectionTitle: I18nProperty;
     dichotomousRatingSectionTitle: I18nProperty;
 }
-export interface FtFeedbackEventDetail {
-    message: string;
-    from?: string;
-}
 declare const FtReaderFeedback_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtReaderFeedback extends FtReaderFeedback_base implements FtReaderFeedbackProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     editorMode: boolean;
     hideTitle: boolean;
+    withMoreOptionsButton: boolean;
     ratingAllowed: boolean;
     i18nProperties: FeedbackI18nProperties;
     ratingSummary?: FtPublicationRatingSummary | FtTopicRatingSummary;
@@ -57,6 +54,7 @@ export declare class FtReaderFeedback extends FtReaderFeedback_base implements F
     private validFromEmail;
     private sendFeedback;
     private onMailerFeedbackSent;
+    private onOpenMoreDetails;
     clearFeedbackInput(): void;
 }
 export {};

package/build/ft-reader-feedback.js

@@ -18,11 +18,13 @@ import { withI18n } from "@fluid-topics/ft-i18n";
 import { FtTextField } from "@fluid-topics/ft-text-field";
 import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtReaderFeatures } from "@fluid-topics/ft-reader-context";
+import { SendFeedbackEvent } from "./utils/events";
 class FtReaderFeedback extends withI18n(FtReaderComponent) {
     constructor() {
         super();
         this.editorMode = false;
         this.hideTitle = false;
+        this.withMoreOptionsButton = false;
         this.ratingAllowed = false;
         this.from = "";
         this.feedbackMessage = "";
@@ -176,10 +178,10 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
         }
     }
     renderFeedbackSection() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (this.canAccessFeedback) {
             const mailLink = this.feedbackMailLinkBuilder(this.feedbackMessage);
-            let button = html `
+            let submitButton = html `
                 <ft-button primary
                            type="submit" name="submit"
                            class="ft-reader-feedback--send-feedback"
@@ -189,19 +191,28 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                 </ft-button>
             `;
             if (mailLink) {
-                button = html `
+                submitButton = html `
                     <a class="ft-reader-feedback--feedback-link" href="${mailLink}">
-                        ${button}
+                        ${submitButton}
                     </a>
                 `;
             }
+            let moreOptionsButton = this.withMoreOptionsButton && (((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.mailsSentByFluidTopics) || ((_b = this.configuration) === null || _b === void 0 ? void 0 : _b.mailsSentByFluidTopicsForUnauthenticatedUsers)) ? html `
+                <ft-button outlined
+                           type="button" name="more-options"
+                           class="ft-reader-feedback--more-options"
+                           @click="${this.onOpenMoreDetails}"
+                           part="more-options">
+                    ${feedback.messages.moreOptionsButton()}
+                </ft-button>
+            ` : nothing;
             return html `
                 <form class="ft-reader-feedback--feedback" part="feedback-container" autocomplete="on"
                       @submit="${(e) => this.onFormSubmitEvent(e, !!mailLink)}">
                     <ft-typography variant="title-dense" part="section-title" class="ft-reader-feedback--section-title">
                         ${this.i18n(this.i18nProperties.feedbackSectionTitle)}
                     </ft-typography>
-                    ${((_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.profile) === null || _b === void 0 ? void 0 : _b.userId) == null && ((_c = this.configuration) === null || _c === void 0 ? void 0 : _c.mailsSentByFluidTopicsForUnauthenticatedUsers) ? html `
+                    ${((_d = (_c = this.session) === null || _c === void 0 ? void 0 : _c.profile) === null || _d === void 0 ? void 0 : _d.userId) == null && ((_e = this.configuration) === null || _e === void 0 ? void 0 : _e.mailsSentByFluidTopicsForUnauthenticatedUsers) ? html `
                         <ft-text-field outlined name="email" type="email" autocomplete="email"
                                        class="ft-reader-feedback--from-input"
                                        label=${feedback.messages.feedbackfromEmail()}
@@ -215,7 +226,10 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                                   label="${feedback.messages.feedbackInputLabel()}"
                                   @live-change=${(e) => this.feedbackMessage = e.detail.trim()}
                     ></ft-text-area>
-                    ${button}
+                    <div part="buttons-container">
+                        ${moreOptionsButton}
+                        ${submitButton}
+                    </div>
                 </form>
             `;
         }
@@ -223,7 +237,12 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
     }
     onFormSubmitEvent(event, isUsingMailLink) {
         event.preventDefault();
-        isUsingMailLink ? this.onMailerFeedbackSent() : this.sendFeedback();
+        if (isUsingMailLink) {
+            this.onMailerFeedbackSent();
+        }
+        else {
+            this.sendFeedback();
+        }
     }
     validFromEmail() {
         var _a, _b, _c;
@@ -233,16 +252,17 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
     }
     sendFeedback() {
         var _a;
-        this.dispatchEvent(new CustomEvent("send-feedback", {
-            detail: {
-                message: this.feedbackInput.value,
-                ...(((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.mailsSentByFluidTopicsForUnauthenticatedUsers) && { from: this.from }),
-            }
+        this.dispatchEvent(new SendFeedbackEvent({
+            message: this.feedbackInput.value,
+            ...(((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.mailsSentByFluidTopicsForUnauthenticatedUsers) && { from: this.from }),
         }));
     }
     onMailerFeedbackSent() {
         this.dispatchEvent(new CustomEvent("mailer-feedback"));
     }
+    onOpenMoreDetails() {
+        this.dispatchEvent(new CustomEvent("open-more-options"));
+    }
     clearFeedbackInput() {
         setTimeout(() => this.feedbackInput.value = "", 0);
     }
@@ -262,6 +282,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtReaderFeedback.prototype, "hideTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderFeedback.prototype, "withMoreOptionsButton", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtReaderFeedback.prototype, "ratingAllowed", void 0);