@internetarchive/elements 1.1.3 → 1.1.4-webdev-9274.0

package/dist/src/elements/ia-donation-thermometer/ia-donation-thermometer.d.ts

@@ -0,0 +1,93 @@
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+/** What the text beside the bar says: the goal amount, a message, or nothing. */
+export type GoalMessageMode = 'off' | 'amount' | 'message';
+/** Whether the current amount is printed on the bar. */
+export type CurrentAmountMode = 'on' | 'off';
+/**
+ * A horizontal progress bar for a fundraising goal, as shown in the
+ * archive.org donation banner. The fill grows with `currentAmount`, the amount
+ * raised is printed on the fill when it fits and beside it when it doesn't,
+ * and the goal (or a goal message) sits to the right of the bar.
+ */
+export declare class IADonationThermometer extends LitElement {
+    goalMessageMode: GoalMessageMode;
+    goalNearMessage: string;
+    goalReachedMessage: string;
+    /** The accessible name of the progress bar, for screen readers. */
+    label: string;
+    goalAmount: number;
+    currentAmountMode: CurrentAmountMode;
+    currentAmount: number;
+    private thermometerValue?;
+    private thermometerFill?;
+    private thermometerValueWidth;
+    private thermometerFillWidth;
+    /**
+     * Watches the fill and the value label so the label can move to whichever
+     * side of the fill has room for it.
+     */
+    private resizeObserver?;
+    /**
+     * The observed nodes are tracked so each is observed exactly once. Calling
+     * `observe` on an already-observed target re-reports its size, which costs a
+     * notification on every render. Lit also discards the value label when
+     * `currentAmountMode` turns it off, so a replacement has to be picked up.
+     */
+    private observedFillElement;
+    private observedValueElement;
+    render(): TemplateResult;
+    private get thermometerValueTemplate();
+    /**
+     * Which side of the fill's end the value label sits on, as a class name for
+     * the CSS that places it. The label sits over the fill when the fill is
+     * wider than the label plus a little breathing room, and just past the
+     * fill's right edge otherwise.
+     */
+    private get thermometerValuePosition();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    /** Observes the fill and the value label, picking up either if it is replaced. */
+    private observeParts;
+    /**
+     * Swaps `observed` for `current` on the observer and returns whichever is
+     * now being watched. A target that hasn't changed is left alone.
+     */
+    private observeInPlaceOf;
+    private handleResize;
+    private get goalMessage();
+    private get currentAmountDisplayValue();
+    private get goalAmountDisplayValue();
+    /**
+     * Formats a dollar amount in millions, e.g. `$0.5MM` or `$35MM`. Amounts
+     * under ten million keep one decimal place, larger ones round to a whole
+     * number.
+     */
+    private formatNumber;
+    private get currentGoalMessage();
+    /**
+     * The goal the bar measures against. A goal that isn't a positive, finite
+     * number leaves the bar empty, since there is no range to report progress
+     * against. Named clear of `ariaValueMax`, which `HTMLElement` declares as a
+     * public string.
+     */
+    private get progressMax();
+    /**
+     * The progress reported to screen readers, clamped into the
+     * `aria-valuemin`/`aria-valuemax` range the spec requires.
+     * `aria-valuetext` carries the amount as it is displayed.
+     */
+    private get progressValue();
+    /**
+     * How much of the bar is filled, as a percentage, clamped to `0`-`100`. An
+     * amount or goal that can't produce a usable percentage empties the bar.
+     */
+    private get percentComplete();
+    static get styles(): CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ia-donation-thermometer': IADonationThermometer;
+    }
+}
+//# sourceMappingURL=ia-donation-thermometer.d.ts.map

package/dist/src/elements/ia-donation-thermometer/ia-donation-thermometer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-thermometer.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-donation-thermometer/ia-donation-thermometer.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,iFAAiF;AACjF,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE3D,wDAAwD;AACxD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,KAAK,CAAC;AAE7C;;;;;GAKG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACvB,eAAe,EAAE,eAAe,CAAY;IAE5C,eAAe,SAEzC;IAE0B,kBAAkB,SAE5C;IAEF,mEAAmE;IACvC,KAAK,SAA4B;IAEjC,UAAU,SAAa;IAEvB,iBAAiB,EAAE,iBAAiB,CAAQ;IAE5C,aAAa,SAAK;IAEjB,OAAO,CAAC,gBAAgB,CAAC,CAAiB;IAE3C,OAAO,CAAC,eAAe,CAAC,CAAiB;IAE5D,OAAO,CAAC,qBAAqB,CAAK;IAElC,OAAO,CAAC,oBAAoB,CAAK;IAE1C;;;OAGG;IACH,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB,CAAwB;IAEnD,OAAO,CAAC,oBAAoB,CAAwB;IAEpD,MAAM,IAAI,cAAc;IA2BxB,OAAO,KAAK,wBAAwB,GAMnC;IAED;;;;;OAKG;IACH,OAAO,KAAK,wBAAwB,GAKnC;IAED,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,IAAI,IAAI;IAIf,kFAAkF;IAClF,OAAO,CAAC,YAAY;IAgBpB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,YAAY;IAYpB,OAAO,KAAK,WAAW,GAItB;IAED,OAAO,KAAK,yBAAyB,GAEpC;IAED,OAAO,KAAK,sBAAsB,GAEjC;IAED;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAYpB,OAAO,KAAK,kBAAkB,GAS7B;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAItB;IAED;;;;OAIG;IACH,OAAO,KAAK,aAAa,GAGxB;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAmIlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}

package/dist/src/elements/ia-donation-thermometer/ia-donation-thermometer.js

@@ -0,0 +1,369 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { msg, str } from '@lit/localize';
+import themeStyles from '../../themes/theme-styles.js';
+/**
+ * A horizontal progress bar for a fundraising goal, as shown in the
+ * archive.org donation banner. The fill grows with `currentAmount`, the amount
+ * raised is printed on the fill when it fits and beside it when it doesn't,
+ * and the goal (or a goal message) sits to the right of the bar.
+ */
+let IADonationThermometer = class IADonationThermometer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.goalMessageMode = 'amount';
+        this.goalNearMessage = msg('We’ve almost reached our goal!');
+        this.goalReachedMessage = msg('We’ve reached our goal!');
+        /** The accessible name of the progress bar, for screen readers. */
+        this.label = msg('Donation progress');
+        this.goalAmount = 7_500_000;
+        this.currentAmountMode = 'on';
+        this.currentAmount = 0;
+        this.thermometerValueWidth = 0;
+        this.thermometerFillWidth = 0;
+        /**
+         * The observed nodes are tracked so each is observed exactly once. Calling
+         * `observe` on an already-observed target re-reports its size, which costs a
+         * notification on every render. Lit also discards the value label when
+         * `currentAmountMode` turns it off, so a replacement has to be picked up.
+         */
+        this.observedFillElement = null;
+        this.observedValueElement = null;
+    }
+    render() {
+        return html `
+      <div class="thermometer-message-container">
+        <div class="thermometer-container">
+          <div
+            class="thermometer-background ${this.thermometerValuePosition}"
+            style="--fill-end--: ${this.percentComplete}%"
+            role="progressbar"
+            aria-label="${this.label}"
+            aria-valuemin="0"
+            aria-valuemax="${this.progressMax}"
+            aria-valuenow="${this.progressValue}"
+            aria-valuetext="${this.currentAmountDisplayValue}"
+          >
+            <div class="thermometer-clip">
+              <div class="thermometer-fill"></div>
+            </div>
+            ${this.thermometerValueTemplate}
+          </div>
+        </div>
+        ${this.goalMessageMode !== 'off'
+            ? html `<div class="donate-goal">${this.currentGoalMessage}</div>`
+            : nothing}
+      </div>
+    `;
+    }
+    get thermometerValueTemplate() {
+        return this.currentAmountMode === 'off'
+            ? nothing
+            : html `
+          <div class="thermometer-value">${this.currentAmountDisplayValue}</div>
+        `;
+    }
+    /**
+     * Which side of the fill's end the value label sits on, as a class name for
+     * the CSS that places it. The label sits over the fill when the fill is
+     * wider than the label plus a little breathing room, and just past the
+     * fill's right edge otherwise.
+     */
+    get thermometerValuePosition() {
+        const buffer = 10;
+        return this.thermometerValueWidth + buffer < this.thermometerFillWidth
+            ? 'value-left'
+            : 'value-right';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));
+        // On a re-connect the fill already exists; on first connect it doesn't
+        // until the first render, and `updated` picks it up then.
+        this.observeParts();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.observedFillElement = null;
+        this.observedValueElement = null;
+    }
+    updated() {
+        this.observeParts();
+    }
+    /** Observes the fill and the value label, picking up either if it is replaced. */
+    observeParts() {
+        const observer = this.resizeObserver;
+        if (!observer)
+            return;
+        this.observedFillElement = this.observeInPlaceOf(observer, this.observedFillElement, this.thermometerFill ?? null);
+        this.observedValueElement = this.observeInPlaceOf(observer, this.observedValueElement, this.thermometerValue ?? null);
+    }
+    /**
+     * Swaps `observed` for `current` on the observer and returns whichever is
+     * now being watched. A target that hasn't changed is left alone.
+     */
+    observeInPlaceOf(observer, observed, current) {
+        if (current === observed)
+            return observed;
+        if (observed)
+            observer.unobserve(observed);
+        if (current)
+            observer.observe(current);
+        return current;
+    }
+    handleResize(entries) {
+        for (const entry of entries) {
+            const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+            if (entry.target === this.observedFillElement) {
+                this.thermometerFillWidth = width;
+            }
+            else if (entry.target === this.observedValueElement) {
+                this.thermometerValueWidth = width;
+            }
+        }
+    }
+    get goalMessage() {
+        return this.currentAmount >= this.goalAmount
+            ? this.goalReachedMessage
+            : this.goalNearMessage;
+    }
+    get currentAmountDisplayValue() {
+        return this.formatNumber(this.currentAmount);
+    }
+    get goalAmountDisplayValue() {
+        return this.formatNumber(this.goalAmount);
+    }
+    /**
+     * Formats a dollar amount in millions, e.g. `$0.5MM` or `$35MM`. Amounts
+     * under ten million keep one decimal place, larger ones round to a whole
+     * number.
+     */
+    formatNumber(number) {
+        if (!Number.isFinite(number) || number === 0)
+            return '$0';
+        const suffix = 'MM';
+        const divisor = 1_000_000;
+        const result = number / divisor;
+        const roundToOne = result < 10;
+        const rounded = roundToOne
+            ? Math.round((result + Number.EPSILON) * 10) / 10
+            : Math.round(result);
+        return `$${rounded}${suffix}`;
+    }
+    get currentGoalMessage() {
+        switch (this.goalMessageMode) {
+            case 'amount':
+                return msg(str `${this.goalAmountDisplayValue} goal`);
+            case 'message':
+                return this.goalMessage;
+            case 'off':
+                return '';
+        }
+    }
+    /**
+     * The goal the bar measures against. A goal that isn't a positive, finite
+     * number leaves the bar empty, since there is no range to report progress
+     * against. Named clear of `ariaValueMax`, which `HTMLElement` declares as a
+     * public string.
+     */
+    get progressMax() {
+        return Number.isFinite(this.goalAmount) && this.goalAmount > 0
+            ? this.goalAmount
+            : 0;
+    }
+    /**
+     * The progress reported to screen readers, clamped into the
+     * `aria-valuemin`/`aria-valuemax` range the spec requires.
+     * `aria-valuetext` carries the amount as it is displayed.
+     */
+    get progressValue() {
+        if (!Number.isFinite(this.currentAmount))
+            return 0;
+        return Math.min(Math.max(this.currentAmount, 0), this.progressMax);
+    }
+    /**
+     * How much of the bar is filled, as a percentage, clamped to `0`-`100`. An
+     * amount or goal that can't produce a usable percentage empties the bar.
+     */
+    get percentComplete() {
+        const goal = this.progressMax;
+        if (goal === 0 || !Number.isFinite(this.currentAmount))
+            return 0;
+        const percent = (this.currentAmount / goal) * 100;
+        return Math.min(Math.max(percent, 0), 100);
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --donation-thermometer-height--: var(
+            --ia-donation-thermometer-height,
+            20px
+          );
+          --donation-thermometer-fill-color--: var(
+            --ia-donation-thermometer-fill-color,
+            #23765d
+          );
+          --donation-thermometer-track-color--: var(
+            --ia-donation-thermometer-track-color,
+            #b8f5e2
+          );
+          --donation-thermometer-border--: var(
+            --ia-donation-thermometer-border,
+            1px solid var(--donation-thermometer-fill-color--)
+          );
+          /* Large enough to round any height into a pill */
+          --donation-thermometer-border-radius--: var(
+            --ia-donation-thermometer-border-radius,
+            9999px
+          );
+          --donation-thermometer-value-on-fill-color--: var(
+            --ia-donation-thermometer-value-on-fill-color,
+            var(--true-white)
+          );
+          --donation-thermometer-value-on-track-color--: var(
+            --ia-donation-thermometer-value-on-track-color,
+            var(--donation-thermometer-fill-color--)
+          );
+          --donation-thermometer-goal-color--: var(--primary-text-color);
+          --donation-thermometer-goal-padding--: var(
+            --ia-donation-thermometer-goal-padding,
+            0 10px
+          );
+
+          display: block;
+          height: var(--donation-thermometer-height--);
+        }
+
+        .thermometer-message-container {
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+
+        .thermometer-container {
+          height: 100%;
+          flex: 1;
+        }
+
+        .thermometer-background {
+          box-sizing: border-box;
+          position: relative;
+          background-color: var(--donation-thermometer-track-color--);
+          height: 100%;
+          border-radius: var(--donation-thermometer-border-radius--);
+          border: var(--donation-thermometer-border--);
+        }
+
+        /*
+         * Clips the square-ended fill to the rounded track. It covers only the
+         * fill, so the label is never cut off by it.
+         */
+        .thermometer-clip {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          border-radius: var(--donation-thermometer-border-radius--);
+        }
+
+        .thermometer-fill {
+          background-color: var(--donation-thermometer-fill-color--);
+          height: 100%;
+          /*
+           * The fallback matters: without it a missing --fill-end-- makes the
+           * declaration invalid, width resolves to auto, and the bar paints as
+           * a fully funded fundraiser.
+           */
+          width: var(--fill-end--, 0%);
+        }
+
+        /*
+         * The label is placed by offset from the end of the fill, so it is one
+         * node in one position in the DOM whichever side it shows on, and it
+         * never counts towards the width of the fill it is measured against.
+         */
+        .thermometer-value {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: var(--fill-end--, 0%);
+          /*
+           * Without this, the left offset caps the shrink-to-fit width of a
+           * translated label and it collapses to its padding.
+           */
+          width: max-content;
+          display: flex;
+          align-items: center;
+          font-weight: bold;
+          white-space: nowrap;
+        }
+
+        /*
+         * Both paddings total 1.5rem, so changing sides leaves the label the
+         * same width and cannot feed back into the side it is placed on.
+         */
+        .value-left .thermometer-value {
+          transform: translateX(-100%);
+          color: var(--donation-thermometer-value-on-fill-color--);
+          padding: 0 0.5rem 0 1rem;
+        }
+
+        .value-right .thermometer-value {
+          color: var(--donation-thermometer-value-on-track-color--);
+          padding: 0 1rem 0 0.5rem;
+        }
+
+        .donate-goal {
+          text-align: left;
+          padding: var(--donation-thermometer-goal-padding--);
+          text-transform: uppercase;
+          font-weight: bold;
+          color: var(--donation-thermometer-goal-color--);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IADonationThermometer.prototype, "goalMessageMode", void 0);
+__decorate([
+    property({ type: String })
+], IADonationThermometer.prototype, "goalNearMessage", void 0);
+__decorate([
+    property({ type: String })
+], IADonationThermometer.prototype, "goalReachedMessage", void 0);
+__decorate([
+    property({ type: String })
+], IADonationThermometer.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], IADonationThermometer.prototype, "goalAmount", void 0);
+__decorate([
+    property({ type: String })
+], IADonationThermometer.prototype, "currentAmountMode", void 0);
+__decorate([
+    property({ type: Number })
+], IADonationThermometer.prototype, "currentAmount", void 0);
+__decorate([
+    query('.thermometer-value')
+], IADonationThermometer.prototype, "thermometerValue", void 0);
+__decorate([
+    query('.thermometer-fill')
+], IADonationThermometer.prototype, "thermometerFill", void 0);
+__decorate([
+    state()
+], IADonationThermometer.prototype, "thermometerValueWidth", void 0);
+__decorate([
+    state()
+], IADonationThermometer.prototype, "thermometerFillWidth", void 0);
+IADonationThermometer = __decorate([
+    customElement('ia-donation-thermometer')
+], IADonationThermometer);
+export { IADonationThermometer };
+//# sourceMappingURL=ia-donation-thermometer.js.map

package/dist/src/elements/ia-donation-thermometer/ia-donation-thermometer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-thermometer.js","sourceRoot":"","sources":["../../../../src/elements/ia-donation-thermometer/ia-donation-thermometer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg, str } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/** What the text beside the bar says: the goal amount, a message, or nothing. */\nexport type GoalMessageMode = 'off' | 'amount' | 'message';\n\n/** Whether the current amount is printed on the bar. */\nexport type CurrentAmountMode = 'on' | 'off';\n\n/**\n * A horizontal progress bar for a fundraising goal, as shown in the\n * archive.org donation banner. The fill grows with `currentAmount`, the amount\n * raised is printed on the fill when it fits and beside it when it doesn't,\n * and the goal (or a goal message) sits to the right of the bar.\n */\n@customElement('ia-donation-thermometer')\nexport class IADonationThermometer extends LitElement {\n  @property({ type: String }) goalMessageMode: GoalMessageMode = 'amount';\n\n  @property({ type: String }) goalNearMessage = msg(\n    'We’ve almost reached our goal!',\n  );\n\n  @property({ type: String }) goalReachedMessage = msg(\n    'We’ve reached our goal!',\n  );\n\n  /** The accessible name of the progress bar, for screen readers. */\n  @property({ type: String }) label = msg('Donation progress');\n\n  @property({ type: Number }) goalAmount = 7_500_000;\n\n  @property({ type: String }) currentAmountMode: CurrentAmountMode = 'on';\n\n  @property({ type: Number }) currentAmount = 0;\n\n  @query('.thermometer-value') private thermometerValue?: HTMLDivElement;\n\n  @query('.thermometer-fill') private thermometerFill?: HTMLDivElement;\n\n  @state() private thermometerValueWidth = 0;\n\n  @state() private thermometerFillWidth = 0;\n\n  /**\n   * Watches the fill and the value label so the label can move to whichever\n   * side of the fill has room for it.\n   */\n  private resizeObserver?: ResizeObserver;\n\n  /**\n   * The observed nodes are tracked so each is observed exactly once. Calling\n   * `observe` on an already-observed target re-reports its size, which costs a\n   * notification on every render. Lit also discards the value label when\n   * `currentAmountMode` turns it off, so a replacement has to be picked up.\n   */\n  private observedFillElement: Element | null = null;\n\n  private observedValueElement: Element | null = null;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"thermometer-message-container\">\n        <div class=\"thermometer-container\">\n          <div\n            class=\"thermometer-background ${this.thermometerValuePosition}\"\n            style=\"--fill-end--: ${this.percentComplete}%\"\n            role=\"progressbar\"\n            aria-label=\"${this.label}\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"${this.progressMax}\"\n            aria-valuenow=\"${this.progressValue}\"\n            aria-valuetext=\"${this.currentAmountDisplayValue}\"\n          >\n            <div class=\"thermometer-clip\">\n              <div class=\"thermometer-fill\"></div>\n            </div>\n            ${this.thermometerValueTemplate}\n          </div>\n        </div>\n        ${this.goalMessageMode !== 'off'\n          ? html`<div class=\"donate-goal\">${this.currentGoalMessage}</div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private get thermometerValueTemplate(): TemplateResult | typeof nothing {\n    return this.currentAmountMode === 'off'\n      ? nothing\n      : html`\n          <div class=\"thermometer-value\">${this.currentAmountDisplayValue}</div>\n        `;\n  }\n\n  /**\n   * Which side of the fill's end the value label sits on, as a class name for\n   * the CSS that places it. The label sits over the fill when the fill is\n   * wider than the label plus a little breathing room, and just past the\n   * fill's right edge otherwise.\n   */\n  private get thermometerValuePosition(): 'value-left' | 'value-right' {\n    const buffer = 10;\n    return this.thermometerValueWidth + buffer < this.thermometerFillWidth\n      ? 'value-left'\n      : 'value-right';\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver((entries) =>\n      this.handleResize(entries),\n    );\n    // On a re-connect the fill already exists; on first connect it doesn't\n    // until the first render, and `updated` picks it up then.\n    this.observeParts();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n    this.observedFillElement = null;\n    this.observedValueElement = null;\n  }\n\n  updated(): void {\n    this.observeParts();\n  }\n\n  /** Observes the fill and the value label, picking up either if it is replaced. */\n  private observeParts(): void {\n    const observer = this.resizeObserver;\n    if (!observer) return;\n\n    this.observedFillElement = this.observeInPlaceOf(\n      observer,\n      this.observedFillElement,\n      this.thermometerFill ?? null,\n    );\n    this.observedValueElement = this.observeInPlaceOf(\n      observer,\n      this.observedValueElement,\n      this.thermometerValue ?? null,\n    );\n  }\n\n  /**\n   * Swaps `observed` for `current` on the observer and returns whichever is\n   * now being watched. A target that hasn't changed is left alone.\n   */\n  private observeInPlaceOf(\n    observer: ResizeObserver,\n    observed: Element | null,\n    current: Element | null,\n  ): Element | null {\n    if (current === observed) return observed;\n    if (observed) observer.unobserve(observed);\n    if (current) observer.observe(current);\n    return current;\n  }\n\n  private handleResize(entries: ResizeObserverEntry[]): void {\n    for (const entry of entries) {\n      const width =\n        entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n      if (entry.target === this.observedFillElement) {\n        this.thermometerFillWidth = width;\n      } else if (entry.target === this.observedValueElement) {\n        this.thermometerValueWidth = width;\n      }\n    }\n  }\n\n  private get goalMessage(): string {\n    return this.currentAmount >= this.goalAmount\n      ? this.goalReachedMessage\n      : this.goalNearMessage;\n  }\n\n  private get currentAmountDisplayValue(): string {\n    return this.formatNumber(this.currentAmount);\n  }\n\n  private get goalAmountDisplayValue(): string {\n    return this.formatNumber(this.goalAmount);\n  }\n\n  /**\n   * Formats a dollar amount in millions, e.g. `$0.5MM` or `$35MM`. Amounts\n   * under ten million keep one decimal place, larger ones round to a whole\n   * number.\n   */\n  private formatNumber(number: number): string {\n    if (!Number.isFinite(number) || number === 0) return '$0';\n    const suffix = 'MM';\n    const divisor = 1_000_000;\n    const result = number / divisor;\n    const roundToOne = result < 10;\n    const rounded = roundToOne\n      ? Math.round((result + Number.EPSILON) * 10) / 10\n      : Math.round(result);\n    return `$${rounded}${suffix}`;\n  }\n\n  private get currentGoalMessage(): string {\n    switch (this.goalMessageMode) {\n      case 'amount':\n        return msg(str`${this.goalAmountDisplayValue} goal`);\n      case 'message':\n        return this.goalMessage;\n      case 'off':\n        return '';\n    }\n  }\n\n  /**\n   * The goal the bar measures against. A goal that isn't a positive, finite\n   * number leaves the bar empty, since there is no range to report progress\n   * against. Named clear of `ariaValueMax`, which `HTMLElement` declares as a\n   * public string.\n   */\n  private get progressMax(): number {\n    return Number.isFinite(this.goalAmount) && this.goalAmount > 0\n      ? this.goalAmount\n      : 0;\n  }\n\n  /**\n   * The progress reported to screen readers, clamped into the\n   * `aria-valuemin`/`aria-valuemax` range the spec requires.\n   * `aria-valuetext` carries the amount as it is displayed.\n   */\n  private get progressValue(): number {\n    if (!Number.isFinite(this.currentAmount)) return 0;\n    return Math.min(Math.max(this.currentAmount, 0), this.progressMax);\n  }\n\n  /**\n   * How much of the bar is filled, as a percentage, clamped to `0`-`100`. An\n   * amount or goal that can't produce a usable percentage empties the bar.\n   */\n  private get percentComplete(): number {\n    const goal = this.progressMax;\n    if (goal === 0 || !Number.isFinite(this.currentAmount)) return 0;\n    const percent = (this.currentAmount / goal) * 100;\n    return Math.min(Math.max(percent, 0), 100);\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-thermometer-height--: var(\n            --ia-donation-thermometer-height,\n            20px\n          );\n          --donation-thermometer-fill-color--: var(\n            --ia-donation-thermometer-fill-color,\n            #23765d\n          );\n          --donation-thermometer-track-color--: var(\n            --ia-donation-thermometer-track-color,\n            #b8f5e2\n          );\n          --donation-thermometer-border--: var(\n            --ia-donation-thermometer-border,\n            1px solid var(--donation-thermometer-fill-color--)\n          );\n          /* Large enough to round any height into a pill */\n          --donation-thermometer-border-radius--: var(\n            --ia-donation-thermometer-border-radius,\n            9999px\n          );\n          --donation-thermometer-value-on-fill-color--: var(\n            --ia-donation-thermometer-value-on-fill-color,\n            var(--true-white)\n          );\n          --donation-thermometer-value-on-track-color--: var(\n            --ia-donation-thermometer-value-on-track-color,\n            var(--donation-thermometer-fill-color--)\n          );\n          --donation-thermometer-goal-color--: var(--primary-text-color);\n          --donation-thermometer-goal-padding--: var(\n            --ia-donation-thermometer-goal-padding,\n            0 10px\n          );\n\n          display: block;\n          height: var(--donation-thermometer-height--);\n        }\n\n        .thermometer-message-container {\n          height: 100%;\n          display: flex;\n          align-items: center;\n        }\n\n        .thermometer-container {\n          height: 100%;\n          flex: 1;\n        }\n\n        .thermometer-background {\n          box-sizing: border-box;\n          position: relative;\n          background-color: var(--donation-thermometer-track-color--);\n          height: 100%;\n          border-radius: var(--donation-thermometer-border-radius--);\n          border: var(--donation-thermometer-border--);\n        }\n\n        /*\n         * Clips the square-ended fill to the rounded track. It covers only the\n         * fill, so the label is never cut off by it.\n         */\n        .thermometer-clip {\n          position: absolute;\n          inset: 0;\n          overflow: hidden;\n          border-radius: var(--donation-thermometer-border-radius--);\n        }\n\n        .thermometer-fill {\n          background-color: var(--donation-thermometer-fill-color--);\n          height: 100%;\n          /*\n           * The fallback matters: without it a missing --fill-end-- makes the\n           * declaration invalid, width resolves to auto, and the bar paints as\n           * a fully funded fundraiser.\n           */\n          width: var(--fill-end--, 0%);\n        }\n\n        /*\n         * The label is placed by offset from the end of the fill, so it is one\n         * node in one position in the DOM whichever side it shows on, and it\n         * never counts towards the width of the fill it is measured against.\n         */\n        .thermometer-value {\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          left: var(--fill-end--, 0%);\n          /*\n           * Without this, the left offset caps the shrink-to-fit width of a\n           * translated label and it collapses to its padding.\n           */\n          width: max-content;\n          display: flex;\n          align-items: center;\n          font-weight: bold;\n          white-space: nowrap;\n        }\n\n        /*\n         * Both paddings total 1.5rem, so changing sides leaves the label the\n         * same width and cannot feed back into the side it is placed on.\n         */\n        .value-left .thermometer-value {\n          transform: translateX(-100%);\n          color: var(--donation-thermometer-value-on-fill-color--);\n          padding: 0 0.5rem 0 1rem;\n        }\n\n        .value-right .thermometer-value {\n          color: var(--donation-thermometer-value-on-track-color--);\n          padding: 0 1rem 0 0.5rem;\n        }\n\n        .donate-goal {\n          text-align: left;\n          padding: var(--donation-thermometer-goal-padding--);\n          text-transform: uppercase;\n          font-weight: bold;\n          color: var(--donation-thermometer-goal-color--);\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-donation-thermometer': IADonationThermometer;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "1.1.3",
+  "version": "1.1.4-webdev-9274.0",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "type": "module",