@fluid-topics/ft-reader-feedback 1.0.58 → 1.0.60

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

@@ -4,12 +4,12 @@ import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.cs
 import { FtSwitchCssVariables } from "@fluid-topics/ft-switch/build/ft-switch.css";
 import { FtTypographyTitleCssVariables, FtTypographyTitleDenseCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
 export const FtReaderFeedbackCssVariables = {
-    feedbackInputMinWidth: FtCssVariableFactory.create("--ft-reader-feedback-input-min-width", "SIZE", "300px"),
+    feedbackInputMinWidth: FtCssVariableFactory.create("--ft-reader-feedback-input-min-width", "", "SIZE", "300px"),
     ratedDateColor: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
-    sendFeedbackColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-color", designSystemVariables.colorOnPrimary),
-    sendFeedbackBackgroundColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-background-color", designSystemVariables.colorPrimary),
-    filledRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-filled-rating-color", designSystemVariables.colorPrimary),
-    emptyRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-empty-rating-color", designSystemVariables.colorOnSurfaceMedium),
+    sendFeedbackColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-color", "", designSystemVariables.colorOnPrimary),
+    sendFeedbackBackgroundColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-background-color", "", designSystemVariables.colorPrimary),
+    filledRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-filled-rating-color", "", designSystemVariables.colorPrimary),
+    emptyRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-empty-rating-color", "", designSystemVariables.colorOnSurfaceMedium),
     mainTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleCssVariables.fontSize, "Typography"),
     sectionTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleDenseCssVariables.fontSize, "Typography"),
 };

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

@@ -54,6 +54,7 @@ export declare class FtReaderFeedback extends FtReaderFeedback_base implements F
     private renderRating;
     private rate;
     private renderFeedbackSection;
+    private onFormSubmitEvent;
     private validFromEmail;
     private sendFeedback;
     private placeholderInEditor;

package/build/ft-reader-feedback.js

@@ -74,10 +74,10 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
         return html `
             <div class="ft-reader-feedback">
                 ${this.hideTitle ? nothing : html `
-                            <ft-typography variant="title" part="main-title">
-                                ${this.i18n(this.i18nProperties.feedbackMainTitle)}
-                            </ft-typography>
-                        `}
+                        <ft-typography variant="title" part="main-title">
+                            ${this.i18n(this.i18nProperties.feedbackMainTitle)}
+                        </ft-typography>
+                    `}
                 ${this.renderRatingSection()}
                 ${this.renderFeedbackSection()}
             </div>
@@ -127,17 +127,17 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                     let active = this.ratingType === "STARS" && this.ratingValue > index;
                     const ratingValue = index + 1;
                     return html `
-                                        <ft-button round part="rating-stars-${ratingValue}"
-                                                   label="${feedback.messages.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
+                                    <ft-button round part="rating-stars-${ratingValue}"
+                                               label="${feedback.messages.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>
-                                    `;
+                                    ></ft-button>
+                                `;
                 })}
                     </div>
                 `;
@@ -193,9 +193,9 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
             const mailLink = this.feedbackMailLinkBuilder(this.feedbackMessage);
             let button = html `
                 <ft-button primary
+                           type="submit" name="submit"
                            class="ft-reader-feedback--send-feedback"
                            ?disabled=${!this.feedbackMessage || !this.validFromEmail()}
-                           @click=${() => mailLink ? this.onMailerFeedbackSent() : this.sendFeedback()}
                            part="send-feedback">
                     ${feedback.messages.okButton()}
                 </ft-button>
@@ -208,15 +208,16 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                 `;
             }
             return html `
-                <div class="ft-reader-feedback--feedback" part="feedback-container">
+                <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 `
-                        <ft-text-field outlined
+                        <ft-text-field outlined name="email" type="email" autocomplete="email"
                                        class="ft-reader-feedback--from-input"
                                        label=${feedback.messages.feedbackfromEmail()}
-                                       @live-change=${(e) => this.from = e.detail.trim()}
+                                       @change=${(e) => this.from = e.detail.trim()}
                                        ?error=${this.from && !this.validFromEmail()}
                                        helper=${this.from && !this.validFromEmail() ? feedback.messages.feedbackfromEmailInvalid() : ""}
                         />
@@ -227,11 +228,15 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                                   @live-change=${(e) => this.feedbackMessage = e.detail.trim()}
                     ></ft-text-area>
                     ${button}
-                </div>
+                </form>
             `;
         }
         return this.placeholderInEditor(designer.messages.missingFeedbackRole());
     }
+    onFormSubmitEvent(event, isUsingMailLink) {
+        event.preventDefault();
+        isUsingMailLink ? this.onMailerFeedbackSent() : this.sendFeedback();
+    }
     validFromEmail() {
         var _a, _b, _c;
         const expression = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;