@fluid-topics/ft-viewer 2.1.20 → 2.1.22

package/build/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./common";
 export * from "./asset";
 export * from "./ud";
+export * from "./utils/events";

package/build/index.js

@@ -1,3 +1,4 @@
 export * from "./common";
 export * from "./asset";
 export * from "./ud";
+export * from "./utils/events";

package/build/ud/components/ft-ud-viewer-feedback.d.ts

@@ -0,0 +1,53 @@
+import { PropertyValues } from "lit";
+import { Debouncer, ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtPublicationRatingSummary, FtRatingType, FtReaderFeedbackConfiguration, FtSession, FtUnstructuredDocument } from "@fluid-topics/public-api";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { GuestLocalStorage } from "@fluid-topics/ft-app-context";
+import { FeedbackI18nProperties } from "@fluid-topics/ft-reader-feedback/build/ft-base-feedback";
+import { FtViewerFeedback } from "./ft-viewer-feedback";
+import { FtViewerComponent } from "../../common/FtViewerComponent";
+import { SendFeedbackEvent } from "@fluid-topics/ft-reader-feedback/build/utils/events";
+import { FtFeedbackProperties } from "@fluid-topics/ft-reader-feedback/build/ft-base-feedback.properties";
+import { FeedbackMailLinkBuilder } from "@fluid-topics/ft-reader-feedback/build/utils/mail";
+declare const FtUdViewerFeedback_base: import("./registration").FtUdViewerComponentType<typeof FtViewerComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>>;
+export declare class FtUdViewerFeedback extends FtUdViewerFeedback_base implements FtFeedbackProperties {
+    private readonly guestStorage;
+    static styles: import("lit").CSSResult;
+    static elementDefinitions: ElementDefinitionsMap;
+    private static storedRatingIfAuthenticated;
+    session?: FtSession;
+    document?: FtUnstructuredDocument;
+    editorMode: boolean;
+    configuration?: FtReaderFeedbackConfiguration;
+    ratingSummary?: FtPublicationRatingSummary;
+    hideTitle: boolean;
+    iconVariant: FtIconVariants;
+    emptyStarIcon?: string;
+    filledStarIcon?: string;
+    emptyLikeIcon?: string;
+    filledLikeIcon?: string;
+    emptyDislikeIcon?: string;
+    filledDislikeIcon?: string;
+    viewerFeedback: FtViewerFeedback;
+    feedbackLinkBuilder: FeedbackMailLinkBuilder;
+    mailSubject: string;
+    private displayName?;
+    i18nProperties: FeedbackI18nProperties;
+    get canAccessFeedback(): boolean | undefined;
+    get canRateThisContent(): boolean | undefined;
+    get configuredRatingType(): FtRatingType.NO_RATING | "STARS" | "LIKE" | "DICHOTOMOUS" | "NO_RATING";
+    constructor(guestStorage?: GuestLocalStorage<FtPublicationRatingSummary>);
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected willUpdate(props: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly loadGuestRating;
+    private readonly guestRatingKey;
+    protected sendRatingDebouncer: Debouncer;
+    protected rate(ratingEvent: CustomEvent<number | undefined>): void;
+    protected sendRating(value: number | undefined): Promise<void>;
+    protected sendFeedback(ratingEvent: SendFeedbackEvent): Promise<void>;
+    protected onMailerFeedbackSent(): void;
+    protected openMoreOptions(): void;
+}
+export {};

package/build/ud/components/ft-ud-viewer-feedback.js

@@ -0,0 +1,257 @@
+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, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { Debouncer, FtNotificationEvent, redux, } from "@fluid-topics/ft-wc-utils";
+import { FtRatingType, } from "@fluid-topics/public-api";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { ftAppInfoStore, GuestLocalStorage, } from "@fluid-topics/ft-app-context";
+import { i18n, withI18n, } from "@fluid-topics/ft-i18n";
+import { toFtUdViewerComponent } from "./registration";
+import { OpenUdFeedbackDrawerEvent, SendMailerUdFeedbackEvent, } from "../../utils/events";
+import { FtViewerFeatures } from "../model/ft-ud-viewer.models";
+import { generateFeedbackStyles } from "@fluid-topics/ft-reader-feedback/build/ft-base-feedback.styles";
+import { FtViewerFeedbackCssVariables } from "./ft-ud-viewer-feedback.styles";
+import { FtViewerFeedback } from "./ft-viewer-feedback";
+import { FtViewerComponent } from "../../common/FtViewerComponent";
+import { defaultDesignerMessages, designer, } from "@fluid-topics/ft-reader-feedback/build/utils/InDesignerFeedbackComponentMessages";
+import { feedback } from "@fluid-topics/ft-reader-feedback/build/utils/IntegratedFeedbackComponentMessages";
+import { FeedbackMailLinkBuilder } from "@fluid-topics/ft-reader-feedback/build/utils/mail";
+import { server } from "@fluid-topics/ft-reader-feedback/build/utils/ServerMessages";
+export class FtUdViewerFeedback extends toFtUdViewerComponent(withI18n(FtViewerComponent)) {
+    get canAccessFeedback() {
+        var _a;
+        return (_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtViewerFeatures.FEEDBACK, { session: this.session });
+    }
+    get canRateThisContent() {
+        var _a;
+        const canAccessRating = (_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtViewerFeatures.RATING, { session: this.session });
+        return canAccessRating && 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;
+    }
+    constructor(guestStorage = new GuestLocalStorage()) {
+        super();
+        this.guestStorage = guestStorage;
+        this.editorMode = false;
+        this.hideTitle = false;
+        this.iconVariant = FtIconVariants.fluid_topics;
+        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.feedbackLinkBuilder = new FeedbackMailLinkBuilder();
+        this.i18nProperties = {
+            feedbackMainTitle: feedback.properties.viewerFeedbackMainTitle(),
+            ratingSectionTitle: feedback.properties.viewerRatingSectionTitle(),
+            dichotomousRatingSectionTitle: feedback.properties.viewerDichotomousRatingSectionTitle(),
+            feedbackSectionTitle: feedback.properties.viewerFeedbackSectionTitle(),
+        };
+        this.loadGuestRating = () => {
+            const guestRating = this.guestStorage.get(this.guestRatingKey());
+            if (guestRating) {
+                this.ratingSummary = guestRating;
+            }
+        };
+        this.guestRatingKey = () => {
+            var _a;
+            return "ft-viewer-document-feedback-guest-rating-" + ((_a = this.document) === null || _a === void 0 ? void 0 : _a.id);
+        };
+        this.sendRatingDebouncer = new Debouncer(500);
+        this.addStore(ftAppInfoStore);
+    }
+    render() {
+        return html `
+            <ft-viewer-feedback
+                ?hideTitle=${this.hideTitle}
+                iconVariant="${this.iconVariant}"
+                emptyStarIcon="${this.emptyStarIcon}"
+                filledStarIcon="${this.filledStarIcon}"
+                emptyLikeIcon="${this.emptyLikeIcon}"
+                filledLikeIcon="${this.filledLikeIcon}"
+                emptyDislikeIcon="${this.emptyDislikeIcon}"
+                filledDislikeIcon="${this.filledDislikeIcon}"
+                ?canAccessFeedback=${this.canAccessFeedback}
+                ?canRateThisContent=${this.canRateThisContent}
+                .i18nProperties=${this.i18nProperties}
+                .ratingSummary=${this.ratingSummary}
+                .configuration=${this.configuration}
+                .feedbackMailLinkBuilder=${(feedbackMessage) => this.feedbackLinkBuilder.build(feedbackMessage)}
+                @rate=${this.rate}
+                @send-feedback=${this.sendFeedback}
+                @mailer-feedback=${this.onMailerFeedbackSent}
+                @open-more-options=${this.openMoreOptions}
+            ></ft-viewer-feedback>
+        `;
+    }
+    willUpdate(props) {
+        var _a, _b, _c;
+        super.willUpdate(props);
+        if (props.has("editorMode") && this.editorMode) {
+            this.addI18nContext(designer, defaultDesignerMessages);
+        }
+        if (["document", "configuration", "user", "mailSubject"].some((p) => props.has(p)) && this.document && this.configuration) {
+            this.feedbackLinkBuilder.update(this.mailSubject, (_a = this.document.prettyUrl) !== null && _a !== void 0 ? _a : "", this.document.metadata, this.configuration, ((_c = (_b = this.session) === null || _b === void 0 ? void 0 : _b.profile) === null || _c === void 0 ? void 0 : _c.userId) != null);
+        }
+        if (["session", "document"].some((p) => props.has(p)) && this.session && this.document) {
+            this.loadGuestRating();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.guestStorage.addStoreListener(this.guestRatingKey, this.loadGuestRating);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.guestStorage.clearStoreListeners();
+    }
+    rate(ratingEvent) {
+        if (this.ratingSummary) {
+            this.ratingSummary = {
+                ...this.ratingSummary,
+                rating: ratingEvent.detail == null ? undefined : {
+                    type: this.ratingSummary.type,
+                    value: ratingEvent.detail,
+                    date: new Date(),
+                },
+            };
+            this.guestStorage.store(this.guestRatingKey(), this.ratingSummary);
+            this.sendRatingDebouncer.run(() => this.sendRating(ratingEvent.detail));
+        }
+    }
+    async sendRating(value) {
+        var _a, _b, _c;
+        if (!this.editorMode && this.ratingSummary) {
+            try {
+                if (value == null) {
+                    await ((_a = this.service) === null || _a === void 0 ? void 0 : _a.unrateDocument(this.document.id));
+                }
+                else {
+                    await ((_b = this.service) === null || _b === void 0 ? void 0 : _b.rateDocument(this.document.id, (_c = this.ratingSummary) === null || _c === void 0 ? void 0 : _c.type, value));
+                }
+            }
+            catch {
+                this.dispatchEvent(new FtNotificationEvent({
+                    type: "error",
+                    message: feedback.messages.ratingFailure(),
+                }));
+            }
+        }
+    }
+    async sendFeedback(ratingEvent) {
+        var _a;
+        try {
+            if (!this.editorMode) {
+                await ((_a = this.service) === null || _a === void 0 ? void 0 : _a.sendDocumentFeedback(this.document.id, ratingEvent.detail.message, ratingEvent.detail.from));
+                this.dispatchEvent(new FtNotificationEvent({
+                    type: "info",
+                    message: feedback.messages.feedbackSuccess(),
+                }));
+            }
+            else {
+                this.dispatchEvent(new FtNotificationEvent({
+                    type: "info",
+                    message: designer.messages.feedbackAndRatingDisabledInEditor(),
+                }));
+            }
+            this.viewerFeedback.clearFeedbackInput();
+        }
+        catch {
+            this.dispatchEvent(new FtNotificationEvent({
+                type: "error",
+                message: feedback.messages.feedbackFailure(),
+            }));
+        }
+    }
+    onMailerFeedbackSent() {
+        this.dispatchEvent(new SendMailerUdFeedbackEvent());
+    }
+    openMoreOptions() {
+        var _a, _b;
+        this.dispatchEvent(new OpenUdFeedbackDrawerEvent({
+            documentId: this.document.id,
+            documentTitle: this.displayName || "",
+            ratingType: ((_a = this.ratingSummary) === null || _a === void 0 ? void 0 : _a.type) || FtRatingType.NO_RATING,
+            ratingValue: (_b = this.ratingSummary) === null || _b === void 0 ? void 0 : _b.rating,
+        }));
+    }
+}
+FtUdViewerFeedback.styles = generateFeedbackStyles(FtViewerFeedbackCssVariables);
+FtUdViewerFeedback.elementDefinitions = {
+    "ft-viewer-feedback": FtViewerFeedback,
+};
+FtUdViewerFeedback.storedRatingIfAuthenticated = (state, self) => {
+    var _a, _b;
+    if ((_a = self.session) === null || _a === void 0 ? void 0 : _a.sessionAuthenticated) {
+        return state.documentRating;
+    }
+    return (_b = self.ratingSummary) !== null && _b !== void 0 ? _b : state.documentRating;
+};
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtUdViewerFeedback.prototype, "session", void 0);
+__decorate([
+    redux({ store: "viewer" })
+], FtUdViewerFeedback.prototype, "document", void 0);
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtUdViewerFeedback.prototype, "editorMode", void 0);
+__decorate([
+    redux({
+        store: "viewer",
+        selector: (state) => { var _a; return (_a = state.configuration) === null || _a === void 0 ? void 0 : _a.feedback; },
+    })
+], FtUdViewerFeedback.prototype, "configuration", void 0);
+__decorate([
+    redux({
+        store: "viewer",
+        selector: FtUdViewerFeedback.storedRatingIfAuthenticated,
+    })
+], FtUdViewerFeedback.prototype, "ratingSummary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtUdViewerFeedback.prototype, "hideTitle", void 0);
+__decorate([
+    property()
+], FtUdViewerFeedback.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtUdViewerFeedback.prototype, "emptyStarIcon", void 0);
+__decorate([
+    property()
+], FtUdViewerFeedback.prototype, "filledStarIcon", void 0);
+__decorate([
+    property()
+], FtUdViewerFeedback.prototype, "emptyLikeIcon", void 0);
+__decorate([
+    property()
+], FtUdViewerFeedback.prototype, "filledLikeIcon", void 0);
+__decorate([
+    property()
+], FtUdViewerFeedback.prototype, "emptyDislikeIcon", void 0);
+__decorate([
+    property()
+], FtUdViewerFeedback.prototype, "filledDislikeIcon", void 0);
+__decorate([
+    query("ft-viewer-feedback")
+], FtUdViewerFeedback.prototype, "viewerFeedback", void 0);
+__decorate([
+    i18n(server.properties["mail.file_feedback.subject"]((self) => {
+        var _a, _b;
+        return [
+            ((_a = self.document) === null || _a === void 0 ? void 0 : _a.title) || "Document",
+            ((_b = self.document) === null || _b === void 0 ? void 0 : _b.filename) || "Filename",
+        ];
+    }))
+], FtUdViewerFeedback.prototype, "mailSubject", void 0);
+__decorate([
+    redux({ store: "viewer", selector: ({ descriptor }) => descriptor === null || descriptor === void 0 ? void 0 : descriptor.displayName })
+], FtUdViewerFeedback.prototype, "displayName", void 0);

package/build/ud/components/ft-ud-viewer-feedback.styles.d.ts

@@ -0,0 +1,2 @@
+import { FtBaseFeedbackCssVariables } from "@fluid-topics/ft-reader-feedback/build/ft-base-feedback.styles";
+export declare const FtViewerFeedbackCssVariables: FtBaseFeedbackCssVariables;

package/build/ud/components/ft-ud-viewer-feedback.styles.js

@@ -0,0 +1,13 @@
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyTitleCssVariables, FtTypographyTitleDenseCssVariables, } from "@fluid-topics/ft-typography/build/ft-typography.styles";
+export const FtViewerFeedbackCssVariables = {
+    feedbackInputMinWidth: FtCssVariableFactory.create("--ft-viewer-feedback-input-min-width", "", "SIZE", "300px"),
+    ratedDateColor: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
+    sendFeedbackColor: FtCssVariableFactory.extend("--ft-viewer-feedback-send-feedback-color", "", designSystemVariables.colorOnPrimary),
+    sendFeedbackBackgroundColor: FtCssVariableFactory.extend("--ft-viewer-feedback-send-feedback-background-color", "", designSystemVariables.colorPrimary),
+    filledRatingColor: FtCssVariableFactory.extend("--ft-viewer-feedback-filled-rating-color", "", designSystemVariables.colorPrimary),
+    emptyRatingColor: FtCssVariableFactory.extend("--ft-viewer-feedback-empty-rating-color", "", designSystemVariables.colorOnSurfaceMedium),
+    mainTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleCssVariables.fontSize, "Typography"),
+    sectionTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleDenseCssVariables.fontSize, "Typography"),
+    starsBackgroundColor: FtCssVariableFactory.create("--ft-viewer-feedback-stars-background-color", "", "COLOR", designSystemVariables.colorSurface),
+};

package/build/ud/components/ft-ud-viewer-metadata.d.ts

@@ -0,0 +1,37 @@
+import { FtUdViewerComponent } from "./FtUdViewerComponent";
+import { FtUdViewerMetadataProperties } from "./ft-ud-viewer-metadata.properties";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtUnstructuredDocument } from "@fluid-topics/public-api";
+import { PropertyValues } from "lit";
+import { FtUdViewerStateManager } from "./registration";
+declare const FtUdViewerMetadata_base: typeof FtUdViewerComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-app-context").FtLitElementWithDateFormatInterface>;
+export declare class FtUdViewerMetadata extends FtUdViewerMetadata_base implements FtUdViewerMetadataProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    key?: string;
+    multiLine: boolean;
+    useForSwitchingToRelatives: boolean;
+    displayLabel: boolean;
+    hierarchicalValueTruncatingLevel?: number;
+    forceTooltip: boolean;
+    editorMode: boolean;
+    translateValues: boolean;
+    private metadata?;
+    private flatMetadata?;
+    document?: FtUnstructuredDocument;
+    private relatives;
+    private availableContentLocales?;
+    private noValueMessage;
+    private get metadataValue();
+    get metadataLabel(): string | undefined;
+    setUdvStateManager(stateManager: FtUdViewerStateManager): void;
+    constructor();
+    protected willUpdate(props: PropertyValues): void;
+    private updateRelatives;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private hideIfEmpty;
+    private renderSwitchToRelatives;
+    private renderRelativeItem;
+    private renderChip;
+}
+export {};

package/build/ud/components/ft-ud-viewer-metadata.js

@@ -0,0 +1,231 @@
+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 { ftAppInfoStore, withDateFormat } from "@fluid-topics/ft-app-context";
+import { i18n, withI18n } from "@fluid-topics/ft-i18n";
+import { FtUdViewerComponent } from "./FtUdViewerComponent";
+import { ClusteringHelper, numberProperty, redux, reduxEventListener, reduxReactive, } from "@fluid-topics/ft-wc-utils";
+import { property, state } from "lit/decorators.js";
+import { udViewerContext } from "../ft-ud-viewer.messages";
+import { styles } from "./ft-ud-viewer-metadata.styles";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtChip } from "@fluid-topics/ft-chip";
+import { FtFloatingMenu, FtFloatingMenuItem, FtFloatingMenuLabel, } from "@fluid-topics/ft-floating-menu";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { html, nothing } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { getResultUrl } from "@fluid-topics/ft-search-result-context/build/utils";
+import { FtUdViewerStoreEvents } from "../model/ft-ud-viewer.models";
+import { MetadataValueLocalizer } from "../../common/utils/MetadataValueLocalizer";
+export class FtUdViewerMetadata extends withDateFormat(withI18n(FtUdViewerComponent)) {
+    get metadataValue() {
+        if (this.flatMetadata) {
+            return this.flatMetadata.displayValue;
+        }
+        if (this.editorMode) {
+            return this.key ? `no value for ${this.key}` : `no metadata selected`;
+        }
+        return this.noValueMessage;
+    }
+    get metadataLabel() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.metadata) {
+            return this.metadata.label;
+        }
+        return (_f = (_d = (_c = (_b = (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.clusteringHelper) === null || _b === void 0 ? void 0 : _b.getMetadataDescriptor(this.key)) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : (_e = this.relatives.find((item) => item.metadata.value)) === null || _e === void 0 ? void 0 : _e.metadata.label) !== null && _f !== void 0 ? _f : this.key;
+    }
+    setUdvStateManager(stateManager) {
+        super.setUdvStateManager(stateManager);
+        if (this.key && this.useForSwitchingToRelatives) {
+            stateManager.registerMetadataForSwitchToRelatives(this.key);
+        }
+    }
+    constructor() {
+        super();
+        this.multiLine = false;
+        this.useForSwitchingToRelatives = false;
+        this.displayLabel = false;
+        this.hierarchicalValueTruncatingLevel = 3;
+        this.forceTooltip = false;
+        this.editorMode = false;
+        this.translateValues = false;
+        this.relatives = [];
+        this.noValueMessage = "No value";
+        this.addI18nContext(udViewerContext);
+    }
+    willUpdate(props) {
+        var _a, _b, _c, _d, _e;
+        super.willUpdate(props);
+        if (props.has("key") && this.useForSwitchingToRelatives) {
+            if (props.get("key")) {
+                (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.unregisterMetadataForSwitchToRelatives(props.get("key"));
+            }
+            if (this.key) {
+                (_b = this.viewerStateManager) === null || _b === void 0 ? void 0 : _b.registerMetadataForSwitchToRelatives(this.key);
+            }
+        }
+        if (props.has("useForSwitchingToRelatives") && this.key) {
+            if (this.useForSwitchingToRelatives) {
+                (_c = this.viewerStateManager) === null || _c === void 0 ? void 0 : _c.registerMetadataForSwitchToRelatives(this.key);
+            }
+            else {
+                (_d = this.viewerStateManager) === null || _d === void 0 ? void 0 : _d.unregisterMetadataForSwitchToRelatives(this.key);
+            }
+        }
+        if (props.has("translateValues") || props.has("metadata") || props.has("hierarchicalValueTruncatingLevel") || props.has("availableContentLocales") || this.dateFormatOptionsChanged(props)) {
+            this.flatMetadata = this.metadata
+                ? ClusteringHelper.flattenMetadata(this.metadata, this.hierarchicalValueTruncatingLevel, this.getDateFormatter(this.metadata.key))
+                : undefined;
+            if (this.translateValues) {
+                this.flatMetadata = new MetadataValueLocalizer((_e = this.availableContentLocales) !== null && _e !== void 0 ? _e : []).localize(this.flatMetadata);
+            }
+        }
+    }
+    updateRelatives() {
+        var _a, _b, _c, _d;
+        if (this.useForSwitchingToRelatives && this.key) {
+            this.relatives = (_d = (_b = (_a = this.viewerStateManager) === null || _a === void 0 ? void 0 : _a.clusteringHelper) === null || _b === void 0 ? void 0 : _b.computeClustersItemsForMetadata(this.key, ((_c = this.document) === null || _c === void 0 ? void 0 : _c.lang) || "en", this.noValueMessage, this.hierarchicalValueTruncatingLevel, this.getDateFormatter(this.key))) !== null && _d !== void 0 ? _d : [];
+        }
+        else {
+            this.relatives = [];
+        }
+    }
+    render() {
+        return html `
+            ${this.useForSwitchingToRelatives && this.relatives.length > 0 ? this.renderSwitchToRelatives() : this.renderChip()}
+            ${this.hideIfEmpty()}
+        `;
+    }
+    hideIfEmpty() {
+        const shouldHide = this.flatMetadata == null && (this.useForSwitchingToRelatives ? this.relatives.length === 0 : true);
+        if (!this.editorMode && shouldHide) {
+            return html `
+                <style>
+                    :host {
+                        display: none !important;
+                    }
+                </style>
+            `;
+        }
+        return nothing;
+    }
+    renderSwitchToRelatives() {
+        return html `
+            <div part="floating-menu-container" class="ft-ud-viewer-metadata--container">
+                <ft-floating-menu part="floating-menu" text="Toggle collapsible" trailingIcon>
+                    ${this.renderChip(true)}
+                    <ft-floating-menu-label>${this.metadataLabel}</ft-floating-menu-label>
+                    ${repeat(this.relatives, (relative) => relative.metadata.value, (relative) => this.renderRelativeItem(relative.result, relative.metadata))}
+                </ft-floating-menu>
+            </div>
+        `;
+    }
+    renderRelativeItem(result, metadata) {
+        var _a, _b;
+        const translatedMetadata = this.translateValues
+            ? (_b = new MetadataValueLocalizer((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []).localize(metadata)) !== null && _b !== void 0 ? _b : metadata
+            : metadata;
+        const url = getResultUrl(result);
+        return html `
+            <a part="relative-item-link"
+               href="${url}" >
+                <ft-ripple part="relative-item-ripple"></ft-ripple>
+                <ft-floating-menu-item part="relative-item" value="${translatedMetadata.value}" notFocusable>
+                    ${translatedMetadata.value == null || translatedMetadata.value === translatedMetadata.displayValue
+            ? translatedMetadata.displayValue
+            : html `
+                            <ft-tooltip part="relative-item-tooltip" text="${(translatedMetadata.value)}">
+                                ${translatedMetadata.displayValue}
+                            </ft-tooltip>
+                        `}
+                </ft-floating-menu-item>
+            </a>
+        `;
+    }
+    renderChip(inFloatingMenu = false) {
+        var _a, _b, _c, _d, _e, _f;
+        const noTooltip = !this.forceTooltip && this.displayLabel && ((_a = this.flatMetadata) === null || _a === void 0 ? void 0 : _a.displayTooltipValue) == ((_b = this.flatMetadata) === null || _b === void 0 ? void 0 : _b.displayValue);
+        const tooltipLabel = `${this.metadataLabel}: ${(_d = (_c = this.flatMetadata) === null || _c === void 0 ? void 0 : _c.displayTooltipValue) !== null && _d !== void 0 ? _d : this.noValueMessage}`;
+        const chip = html `
+            <ft-chip part="chip"
+                     exportpartsPrefix="chip"
+                     label="${tooltipLabel}"
+                     slot="${noTooltip && inFloatingMenu ? "toggle" : ""}"
+                     trailingIcon icon="${inFloatingMenu ? "thin_arrow" : ""}"
+                     ?clickable=${inFloatingMenu}
+                     ?multiLine=${this.multiLine}>
+                ${this.displayLabel ? html `
+                        <span part="label">${(_f = (_e = this.metadata) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : this.key}: </span>
+                    ` : nothing}
+                ${this.metadataValue.length === 0 ? nothing : html `
+                        <span part="values">${this.metadataValue}</span>
+                    `}
+            </ft-chip>`;
+        return noTooltip ? chip : html `
+            <ft-tooltip part="tooltip"
+                        slot="${inFloatingMenu ? "toggle" : ""}"
+                        class="${this.multiLine ? "ft-ud-viewer-metadata-multi-line" : ""}"
+                        text="${tooltipLabel}">
+                ${chip}
+            </ft-tooltip>
+        `;
+    }
+}
+FtUdViewerMetadata.elementDefinitions = {
+    "ft-chip": FtChip,
+    "ft-floating-menu": FtFloatingMenu,
+    "ft-floating-menu-item": FtFloatingMenuItem,
+    "ft-floating-menu-label": FtFloatingMenuLabel,
+    "ft-ripple": FtRipple,
+    "ft-tooltip": FtTooltip,
+};
+FtUdViewerMetadata.styles = styles;
+__decorate([
+    property(),
+    reduxReactive()
+], FtUdViewerMetadata.prototype, "key", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtUdViewerMetadata.prototype, "multiLine", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtUdViewerMetadata.prototype, "useForSwitchingToRelatives", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtUdViewerMetadata.prototype, "displayLabel", void 0);
+__decorate([
+    numberProperty()
+], FtUdViewerMetadata.prototype, "hierarchicalValueTruncatingLevel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtUdViewerMetadata.prototype, "forceTooltip", void 0);
+__decorate([
+    property({ attribute: false })
+], FtUdViewerMetadata.prototype, "editorMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtUdViewerMetadata.prototype, "translateValues", void 0);
+__decorate([
+    redux({ store: "viewer", selector: (s, e) => { var _a, _b; return (_b = (_a = s.document) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.find((m) => m.key === e.key); } })
+], FtUdViewerMetadata.prototype, "metadata", void 0);
+__decorate([
+    state()
+], FtUdViewerMetadata.prototype, "flatMetadata", void 0);
+__decorate([
+    redux({ store: "viewer" })
+], FtUdViewerMetadata.prototype, "document", void 0);
+__decorate([
+    state()
+], FtUdViewerMetadata.prototype, "relatives", void 0);
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtUdViewerMetadata.prototype, "availableContentLocales", void 0);
+__decorate([
+    i18n(udViewerContext.properties.itemWithNoValueForSwitchToRelatives())
+], FtUdViewerMetadata.prototype, "noValueMessage", void 0);
+__decorate([
+    reduxEventListener({ eventName: FtUdViewerStoreEvents.clusteringHelperCreated })
+], FtUdViewerMetadata.prototype, "updateRelatives", null);

package/build/ud/components/ft-ud-viewer-metadata.properties.d.ts

@@ -0,0 +1,10 @@
+export interface FtUdViewerMetadataProperties {
+    key?: string;
+    multiLine?: boolean;
+    forceTooltip?: boolean;
+    editorMode?: boolean;
+    useForSwitchingToRelatives?: boolean;
+    displayLabel?: boolean;
+    translateValues?: boolean;
+    hierarchicalValueTruncatingLevel?: number;
+}

package/build/ud/components/ft-ud-viewer-metadata.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ud/components/ft-ud-viewer-metadata.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const FtUdViewerMetadataCssVariables: {};
+export declare const styles: import("lit").CSSResult;

package/build/ud/components/ft-ud-viewer-metadata.styles.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+export const FtUdViewerMetadataCssVariables = {};
+// language=CSS
+export const styles = css `
+    :host {
+        display: inline-block;
+    }
+
+    .ft-ud-viewer-metadata--container {
+        position: relative;
+    }
+
+    [part="tooltip"]:not(.ft-ud-viewer-metadata-multi-line),
+    [part="tooltip"]:not(.ft-ud-viewer-metadata-multi-line) [part="floating-menu-container"],
+    [part="tooltip"]:not(.ft-ud-viewer-metadata-multi-line) [part="floating-menu"],
+    [part="tooltip"]:not(.ft-ud-viewer-metadata-multi-line) [part="chip"] {
+        max-width: 100%;
+    }
+
+    a {
+        all: unset;
+        position: relative;
+    }
+`;

package/build/ud/components/ft-viewer-feedback.d.ts

@@ -0,0 +1,4 @@
+import { FtBaseFeedback } from "@fluid-topics/ft-reader-feedback/build/ft-base-feedback";
+export declare class FtViewerFeedback extends FtBaseFeedback {
+    static styles: import("lit").CSSResult;
+}