@fluid-topics/ft-reader-feedback 2.1.20 → 2.1.21

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

@@ -0,0 +1,55 @@
+import { nothing } from "lit";
+import { ElementDefinitionsMap, FtLitElementRedux } from "@fluid-topics/ft-wc-utils";
+import { FtFeedbackProperties } from "./ft-base-feedback.properties";
+import { FtTopicRatingSummary } from "@fluid-topics/ft-reader-context/build/store/model";
+import { FtPublicationRatingSummary, FtRatingType, FtReaderFeedbackConfiguration, FtSession } 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 { I18nPropertyInit } from "@fluid-topics/ft-i18n";
+export interface FeedbackI18nProperties {
+    feedbackMainTitle: I18nPropertyInit;
+    ratingSectionTitle: I18nPropertyInit;
+    feedbackSectionTitle: I18nPropertyInit;
+    dichotomousRatingSectionTitle: I18nPropertyInit;
+}
+declare const FtBaseFeedback_base: typeof FtLitElementRedux & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtBaseFeedback extends FtBaseFeedback_base implements FtFeedbackProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    hideTitle: boolean;
+    withMoreOptionsButton: boolean;
+    iconVariant?: FtIconVariants;
+    emptyStarIcon?: string;
+    filledStarIcon?: string;
+    emptyLikeIcon?: string;
+    filledLikeIcon?: string;
+    emptyDislikeIcon?: string;
+    filledDislikeIcon?: string;
+    canAccessFeedback: boolean;
+    canRateThisContent: boolean;
+    i18nProperties?: FeedbackI18nProperties;
+    ratingSummary?: FtPublicationRatingSummary | FtTopicRatingSummary;
+    configuration?: FtReaderFeedbackConfiguration;
+    feedbackMailLinkBuilder: (feedbackMessage: string) => string | undefined;
+    session?: FtSession;
+    feedbackInput: FtTextArea;
+    from: string;
+    feedbackMessage: string;
+    constructor();
+    get configuredRatingType(): FtRatingType | "STARS" | "LIKE" | "DICHOTOMOUS" | "NO_RATING";
+    get ratingTypeOfDoneRatingOfThisContent(): FtRatingType.NO_RATING | "STARS" | "LIKE" | "DICHOTOMOUS" | "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 onFormSubmitEvent;
+    private validFromEmail;
+    private sendFeedback;
+    private onMailerFeedbackSent;
+    private onOpenMoreDetails;
+    clearFeedbackInput(): void;
+}
+export {};

package/build/ft-base-feedback.js

@@ -0,0 +1,332 @@
+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 { FtLitElementRedux, parseDate, redux, } from "@fluid-topics/ft-wc-utils";
+import { FtRatingType, } from "@fluid-topics/public-api";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+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 { defaultMessages, feedback, } from "./utils/IntegratedFeedbackComponentMessages";
+import { withI18n, } from "@fluid-topics/ft-i18n";
+import { FtTextField } from "@fluid-topics/ft-text-field";
+import { SendFeedbackEvent } from "./utils/events";
+import { ftAppInfoStore } from "@fluid-topics/ft-app-context";
+export class FtBaseFeedback extends withI18n(FtLitElementRedux) {
+    constructor() {
+        super();
+        this.hideTitle = false;
+        this.withMoreOptionsButton = false;
+        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";
+        this.canAccessFeedback = false;
+        this.canRateThisContent = false;
+        this.from = "";
+        this.feedbackMessage = "";
+        this.addI18nContext(feedback, defaultMessages);
+        this.addStore(ftAppInfoStore);
+    }
+    get configuredRatingType() {
+        var _a, _b;
+        return (_b = (_a = this.ratingSummary) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : FtRatingType.NO_RATING;
+    }
+    get ratingTypeOfDoneRatingOfThisContent() {
+        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 : FtRatingType.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.canAccessFeedback && !this.canRateThisContent) {
+            return nothing;
+        }
+        return html `
+            <div part="container">
+                ${this.hideTitle ? nothing : html `
+                        <ft-typography variant="${FtTypographyVariants.title}" part="main-title">
+                            ${this.i18n(this.i18nProperties.feedbackMainTitle)}
+                        </ft-typography>
+                    `}
+                ${this.renderRatingSection()}
+                ${this.renderFeedbackSection()}
+            </div>
+        `;
+    }
+    renderRatingSection() {
+        var _a;
+        if (this.canRateThisContent) {
+            return html `
+                <div part="rating-container">
+                    <ft-typography variant="${FtTypographyVariants.title_dense}" part="section-title">
+                        ${this.i18n(((_a = this.ratingSummary) === null || _a === void 0 ? void 0 : _a.type) === FtRatingType.DICHOTOMOUS
+                ? this.i18nProperties.dichotomousRatingSectionTitle
+                : this.i18nProperties.ratingSectionTitle)}
+                    </ft-typography>
+                    ${this.renderRating()}
+                    <ft-typography variant="${FtTypographyVariants.caption}" part="rating-date">
+                        ${this.renderRatingDate()}
+                    </ft-typography>
+                </div>
+            `;
+        }
+        return nothing;
+    }
+    renderRatingDate() {
+        const ratingDate = this.ratingDate;
+        if (ratingDate == null) {
+            return feedback.messages.notRated();
+        }
+        if (ratingDate.getTime() > (new Date().getTime() - 60000)) { // Less than 1 min ago
+            return feedback.messages.ratedNow();
+        }
+        const today = new Date().toLocaleDateString();
+        const formattedDate = ratingDate.toLocaleDateString();
+        if (today === formattedDate) {
+            return feedback.messages.ratedToday();
+        }
+        return feedback.messages.ratedOn(ratingDate);
+    }
+    renderRating() {
+        switch (this.configuredRatingType) {
+            case FtRatingType.STARS:
+                return html `
+                    <div part="rating rating-stars">
+                        ${repeat(new Array(5), (_, index) => index, (_, index) => {
+                    const active = this.ratingTypeOfDoneRatingOfThisContent === FtRatingType.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="rating-stars--${active ? "active" : "inactive"}"
+                                               @click=${() => this.rate(this.ratingValue === ratingValue ? undefined : ratingValue)}
+                                    ></ft-button>
+                                `;
+                })}
+                    </div>
+                `;
+            case FtRatingType.LIKE: {
+                const disliked = this.ratingTypeOfDoneRatingOfThisContent === FtRatingType.LIKE && this.ratingValue === 0;
+                const liked = this.ratingTypeOfDoneRatingOfThisContent === FtRatingType.LIKE && this.ratingValue === 1;
+                return html `
+                    <ft-switch unselectable
+                               @change=${(e) => this.rate(e.detail)}
+                               part="rating rating-like"
+                               label="${this.i18n(this.i18nProperties.ratingSectionTitle)}">
+                        <ft-switch-option .value=${1}
+                                          ?selected=${liked}
+                                          .iconVariant=${this.iconVariant}
+                                          icon="${liked ? this.filledLikeIcon : this.emptyLikeIcon}"
+                                          role="radio">
+                            ${feedback.messages.like()}
+                        </ft-switch-option>
+                        <ft-switch-option .value=${0}
+                                          ?selected=${disliked}
+                                          .iconVariant=${this.iconVariant}
+                                          icon="${disliked ? this.filledDislikeIcon : this.emptyDislikeIcon}"
+                                          role="radio">
+                            ${feedback.messages.dislike()}
+                        </ft-switch-option>
+                    </ft-switch>
+                `;
+            }
+            case FtRatingType.DICHOTOMOUS: {
+                const no = this.ratingTypeOfDoneRatingOfThisContent === FtRatingType.DICHOTOMOUS && this.ratingValue === 0;
+                const yes = this.ratingTypeOfDoneRatingOfThisContent === FtRatingType.DICHOTOMOUS && this.ratingValue === 1;
+                return html `
+                    <ft-switch unselectable
+                               @change=${(e) => this.rate(e.detail)}
+                               part="rating rating-dichotomous">
+                        <ft-switch-option .value=${1}
+                                          ?selected=${yes}>
+                            ${feedback.messages.dichotomousYes()}
+                        </ft-switch-option>
+                        <ft-switch-option .value=${0}
+                                          ?selected=${no}>
+                            ${feedback.messages.dichotomousNo()}
+                        </ft-switch-option>
+                    </ft-switch>
+                `;
+            }
+        }
+        return nothing;
+    }
+    rate(value) {
+        if ((value !== null && value !== void 0 ? value : -1) !== this.ratingValue) {
+            this.dispatchEvent(new CustomEvent("rate", { detail: value }));
+        }
+    }
+    renderFeedbackSection() {
+        var _a, _b, _c, _d, _e;
+        if (this.canAccessFeedback) {
+            const mailLink = this.feedbackMailLinkBuilder(this.feedbackMessage);
+            let submitButton = html `
+                <ft-button primary
+                           type="submit" name="submit"
+                           ?disabled=${!this.feedbackMessage || !this.validFromEmail()}
+                           part="send-feedback">
+                    ${feedback.messages.okButton()}
+                </ft-button>
+            `;
+            if (mailLink) {
+                submitButton = html `
+                    <a part="send-feedback-link" href="${mailLink}">
+                        ${submitButton}
+                    </a>
+                `;
+            }
+            const 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"
+                               @click=${this.onOpenMoreDetails}
+                               part="more-options">
+                        ${feedback.messages.moreOptionsButton()}
+                    </ft-button>
+                `
+                : nothing;
+            return html `
+                <form part="feedback-container" autocomplete="on"
+                      @submit=${(e) => this.onFormSubmitEvent(e, !!mailLink)}>
+                    <ft-typography variant="${FtTypographyVariants.title_dense}" part="section-title">
+                        ${this.i18n(this.i18nProperties.feedbackSectionTitle)}
+                    </ft-typography>
+                    ${((_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"
+                                       part="feedback-from-input"
+                                       label="${feedback.messages.feedbackfromEmail()}"
+                                       @change=${(e) => this.from = e.detail.trim()}
+                                       ?error=${this.from && !this.validFromEmail()}
+                                       helper="${this.from && !this.validFromEmail() ? feedback.messages.feedbackfromEmailInvalid() : ""}"
+                        ></ft-text-field>
+                    ` : nothing}
+                    <ft-text-area outlined
+                                  part="feedback-input"
+                                  label="${feedback.messages.feedbackInputLabel()}"
+                                  @live-change=${(e) => this.feedbackMessage = e.detail.trim()}
+                    ></ft-text-area>
+                    <div part="buttons-container">
+                        ${moreOptionsButton}
+                        ${submitButton}
+                    </div>
+                </form>
+            `;
+        }
+        return nothing;
+    }
+    onFormSubmitEvent(event, isUsingMailLink) {
+        event.preventDefault();
+        if (isUsingMailLink) {
+            this.onMailerFeedbackSent();
+        }
+        else {
+            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,}$/;
+        return !(((_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))
+            || expression.test(this.from);
+    }
+    sendFeedback() {
+        var _a;
+        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.setValue("", true), 0);
+    }
+}
+FtBaseFeedback.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-typography": FtTypography,
+    "ft-switch": FtSwitch,
+    "ft-switch-option": FtSwitchOption,
+    "ft-text-area": FtTextArea,
+    "ft-text-field": FtTextField,
+};
+__decorate([
+    property({ type: Boolean })
+], FtBaseFeedback.prototype, "hideTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseFeedback.prototype, "withMoreOptionsButton", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "emptyStarIcon", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "filledStarIcon", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "emptyLikeIcon", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "filledLikeIcon", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "emptyDislikeIcon", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "filledDislikeIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseFeedback.prototype, "canAccessFeedback", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseFeedback.prototype, "canRateThisContent", void 0);
+__decorate([
+    property({ attribute: false })
+], FtBaseFeedback.prototype, "i18nProperties", void 0);
+__decorate([
+    property({ attribute: false })
+], FtBaseFeedback.prototype, "ratingSummary", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "configuration", void 0);
+__decorate([
+    property()
+], FtBaseFeedback.prototype, "feedbackMailLinkBuilder", void 0);
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtBaseFeedback.prototype, "session", void 0);
+__decorate([
+    query("[part='feedback-input']")
+], FtBaseFeedback.prototype, "feedbackInput", void 0);
+__decorate([
+    state()
+], FtBaseFeedback.prototype, "from", void 0);
+__decorate([
+    state()
+], FtBaseFeedback.prototype, "feedbackMessage", void 0);

package/build/{ft-reader-feedback.properties.d.ts → ft-base-feedback.properties.d.ts}

@@ -1,6 +1,6 @@
 import { FtUserProfile } from "@fluid-topics/public-api";
 import { FtIconVariants } from "@fluid-topics/ft-icon";
-export interface FtReaderFeedbackProperties {
+export interface FtFeedbackProperties {
     editorMode?: boolean;
     user?: FtUserProfile;
     iconVariant?: FtIconVariants;

package/build/ft-base-feedback.styles.d.ts

@@ -0,0 +1,13 @@
+import { FtCssVariable } from "@fluid-topics/ft-wc-utils";
+export type FtBaseFeedbackCssVariables = {
+    feedbackInputMinWidth: FtCssVariable;
+    ratedDateColor: FtCssVariable;
+    sendFeedbackColor: FtCssVariable;
+    sendFeedbackBackgroundColor: FtCssVariable;
+    filledRatingColor: FtCssVariable;
+    emptyRatingColor: FtCssVariable;
+    mainTitleFontSize: FtCssVariable;
+    sectionTitleFontSize: FtCssVariable;
+    starsBackgroundColor: FtCssVariable;
+};
+export declare function generateFeedbackStyles(variables: FtBaseFeedbackCssVariables): import("lit").CSSResult;

package/build/ft-base-feedback.styles.js

@@ -0,0 +1,67 @@
+import { FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { FtSwitchCssVariables } from "@fluid-topics/ft-switch";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { css } from "lit";
+// language=CSS
+export function generateFeedbackStyles(variables) {
+    return css `
+        [part="container"] {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        [part="rating rating-stars"] {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-left: -6px;
+            ${setVariable(FtButtonCssVariables.backgroundColor, variables.starsBackgroundColor)}
+        }
+
+        [part="rating-container"],
+        [part="feedback-container"] {
+            display: flex;
+            flex-direction: column;
+        }
+
+        [part="rating-container"] [part="section-title"] {
+            margin-bottom: 8px;
+        }
+
+        [part="rating-container"] {
+            ${setVariable(FtButtonCssVariables.color, variables.emptyRatingColor)};
+            ${setVariable(FtButtonCssVariables.rippleColor, variables.filledRatingColor)};
+            ${setVariable(FtSwitchCssVariables.textColor, variables.emptyRatingColor)};
+            ${setVariable(FtSwitchCssVariables.selectedTextColor, variables.filledRatingColor)};
+        }
+
+        [part="rating-container"] .rating-stars--active {
+            ${setVariable(FtButtonCssVariables.color, variables.filledRatingColor)};
+        }
+
+       [part="feedback-container"] {
+            gap: 8px;
+        }
+
+        [part="rating-date"] {
+            color: ${variables.ratedDateColor};
+        }
+
+        [part="feedback-container"] ft-text-area {
+            min-width: ${variables.feedbackInputMinWidth};
+        }
+
+
+        [part="send-feedback"],
+        [part="send-feedback-link"] {
+            ${setVariable(FtButtonCssVariables.color, variables.sendFeedbackColor)};
+            ${setVariable(FtButtonCssVariables.backgroundColor, variables.sendFeedbackBackgroundColor)};
+        }
+
+        [part="buttons-container"] {
+            align-self: flex-end;
+        }
+    `;
+}

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

@@ -1,59 +1,4 @@
-import { nothing } from "lit";
-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 { FtPublicationRatingSummary, FtRatingType, FtReaderFeedbackConfiguration, FtSession } 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 { I18nPropertyInit } from "@fluid-topics/ft-i18n";
-import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
-export interface FeedbackI18nProperties {
-    feedbackMainTitle: I18nPropertyInit;
-    ratingSectionTitle: I18nPropertyInit;
-    feedbackSectionTitle: I18nPropertyInit;
-    dichotomousRatingSectionTitle: I18nPropertyInit;
-}
-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;
+import { FtBaseFeedback } from "./ft-base-feedback";
+export declare class FtReaderFeedback extends FtBaseFeedback {
     static styles: import("lit").CSSResult;
-    editorMode: boolean;
-    hideTitle: boolean;
-    withMoreOptionsButton: boolean;
-    ratingAllowed: boolean;
-    i18nProperties: FeedbackI18nProperties;
-    ratingSummary?: FtPublicationRatingSummary | FtTopicRatingSummary;
-    session?: FtSession;
-    feedbackInput: FtTextArea;
-    from: string;
-    feedbackMessage: string;
-    iconVariant?: FtIconVariants;
-    emptyStarIcon?: string;
-    filledStarIcon?: string;
-    emptyLikeIcon?: string;
-    filledLikeIcon?: string;
-    emptyDislikeIcon?: string;
-    filledDislikeIcon?: string;
-    configuration?: FtReaderFeedbackConfiguration;
-    feedbackMailLinkBuilder: (feedbackMessage: string) => string | undefined;
-    constructor();
-    get canAccessFeedback(): boolean | undefined;
-    get canRateThisContent(): boolean | undefined;
-    get configuredRatingType(): FtRatingType | "STARS" | "LIKE" | "DICHOTOMOUS" | "NO_RATING";
-    get ratingTypeOfDoneRatingOfThisContent(): FtRatingType.NO_RATING | "STARS" | "LIKE" | "DICHOTOMOUS" | "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 onFormSubmitEvent;
-    private validFromEmail;
-    private sendFeedback;
-    private onMailerFeedbackSent;
-    private onOpenMoreDetails;
-    clearFeedbackInput(): void;
 }
-export {};