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

package/build/ft-reader-feedback.js

@@ -1,345 +1,6 @@
-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 { parseDate, redux, } from "@fluid-topics/ft-wc-utils";
-import { styles } from "./ft-reader-feedback.styles";
-import { FtRatingType, } from "@fluid-topics/public-api";
-import { FtTypography } 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 { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
-import { FtReaderFeatures } from "@fluid-topics/ft-reader-context";
-import { SendFeedbackEvent } from "./utils/events";
-export class FtReaderFeedback extends withI18n(FtReaderComponent) {
-    constructor() {
-        super();
-        this.editorMode = false;
-        this.hideTitle = false;
-        this.withMoreOptionsButton = false;
-        this.ratingAllowed = false;
-        this.from = "";
-        this.feedbackMessage = "";
-        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.addI18nContext(feedback, defaultMessages);
-    }
-    get canAccessFeedback() {
-        var _a;
-        return (_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtReaderFeatures.FEEDBACK, { session: this.session });
-    }
-    get canRateThisContent() {
-        var _a;
-        const canAccessRating = (_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtReaderFeatures.RATING, { session: this.session });
-        return canAccessRating && this.ratingAllowed && this.configuredRatingType != FtRatingType.NO_RATING;
-    }
-    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 class="ft-reader-feedback">
-                ${this.hideTitle ? nothing : html `
-                            <ft-typography variant="title" part="main-title">
-                                ${this.i18n(this.i18nProperties.feedbackMainTitle)}
-                            </ft-typography>
-                        `}
-                ${this.renderRatingSection()}
-                ${this.renderFeedbackSection()}
-            </div>
-        `;
-    }
-    renderRatingSection() {
-        if (this.canRateThisContent) {
-            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.i18n(this.ratingSummary.type === FtRatingType.DICHOTOMOUS
-                ? this.i18nProperties.dichotomousRatingSectionTitle
-                : this.i18nProperties.ratingSectionTitle)}
-                    </ft-typography>
-                    ${this.renderRating()}
-                    <ft-typography variant="caption" class="ft-reader-feedback--rating-date" 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 class="ft-reader-feedback--stars" 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="ft-reader-feedback--${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"
-                           class="ft-reader-feedback--send-feedback"
-                           ?disabled=${!this.feedbackMessage || !this.validFromEmail()}
-                           part="send-feedback">
-                    ${feedback.messages.okButton()}
-                </ft-button>
-            `;
-            if (mailLink) {
-                submitButton = html `
-                    <a class="ft-reader-feedback--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"
-                               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>
-                    ${((_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()}"
-                                       @change=${(e) => this.from = e.detail.trim()}
-                                       ?error=${this.from && !this.validFromEmail()}
-                                       helper="${this.from && !this.validFromEmail() ? feedback.messages.feedbackfromEmailInvalid() : ""}"
-                        />
-                    ` : nothing}
-                    <ft-text-area outlined
-                                  class="ft-reader-feedback--feedback-input" 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);
-    }
+import { FtBaseFeedback } from "./ft-base-feedback";
+import { generateFeedbackStyles } from "./ft-base-feedback.styles";
+import { FtReaderFeedbackCssVariables } from "./ft-reader-feedback.styles";
+export class FtReaderFeedback extends FtBaseFeedback {
 }
-FtReaderFeedback.elementDefinitions = {
-    "ft-button": FtButton,
-    "ft-typography": FtTypography,
-    "ft-switch": FtSwitch,
-    "ft-switch-option": FtSwitchOption,
-    "ft-text-area": FtTextArea,
-    "ft-text-field": FtTextField,
-};
-FtReaderFeedback.styles = styles;
-__decorate([
-    property({ type: Boolean })
-], FtReaderFeedback.prototype, "editorMode", void 0);
-__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);
-__decorate([
-    property({ attribute: false })
-], FtReaderFeedback.prototype, "i18nProperties", void 0);
-__decorate([
-    property({ attribute: false })
-], FtReaderFeedback.prototype, "ratingSummary", void 0);
-__decorate([
-    property({ attribute: false })
-], FtReaderFeedback.prototype, "session", void 0);
-__decorate([
-    query(".ft-reader-feedback--feedback-input")
-], FtReaderFeedback.prototype, "feedbackInput", void 0);
-__decorate([
-    state()
-], FtReaderFeedback.prototype, "from", 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([
-    redux({
-        store: "reader",
-        selector: (state) => { var _a; return (_a = state.configuration) === null || _a === void 0 ? void 0 : _a.feedback; },
-    })
-], FtReaderFeedback.prototype, "configuration", void 0);
-__decorate([
-    property()
-], FtReaderFeedback.prototype, "feedbackMailLinkBuilder", void 0);
+FtReaderFeedback.styles = generateFeedbackStyles(FtReaderFeedbackCssVariables);