/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import { html } from "chrome://global/content/vendor/lit.all.mjs"; import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; const VALID_LETTER_GRADE_L10N_IDS = new Map([ ["A", "shopping-letter-grade-description-ab"], ["B", "shopping-letter-grade-description-ab"], ["C", "shopping-letter-grade-description-c"], ["D", "shopping-letter-grade-description-df"], ["F", "shopping-letter-grade-description-df"], ]); class LetterGrade extends MozLitElement { #descriptionL10N; static properties = { letter: { type: String, reflect: true }, showdescription: { type: Boolean, reflect: true }, }; get fluentStrings() { if (!this._fluentStrings) { this._fluentStrings = new Localization(["browser/shopping.ftl"], true); } return this._fluentStrings; } descriptionTemplate() { if (this.showdescription) { return html`

`; } return null; } render() { // Do not render if letter is invalid if (!VALID_LETTER_GRADE_L10N_IDS.has(this.letter)) { return null; } this.#descriptionL10N = VALID_LETTER_GRADE_L10N_IDS.get(this.letter); let tooltipL10NArgs; // Do not localize tooltip if using Storybook. if (!window.IS_STORYBOOK) { const localizedDescription = this.fluentStrings.formatValueSync( this.#descriptionL10N ); tooltipL10NArgs = `{"letter": "${this.letter}", "description": "${localizedDescription}"}`; } return html`

${this.letter}

${this.descriptionTemplate()}
`; } } customElements.define("letter-grade", LetterGrade);