@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-timeline-item/af-timeline-item.js

@@ -0,0 +1,265 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Individual item within an af-timeline container.
+ * Renders as a horizontal bar in Gantt view or a list item on mobile.
+ *
+ * @slot - Item content/tooltip
+ *
+ * @example
+ * ```html
+ * <af-timeline-item
+ *   start-date="2024-01-01"
+ *   end-date="2024-02-28"
+ *   label="Phase 1"
+ *   status="complete"
+ * >
+ *   Phase 1: Initial research and planning
+ * </af-timeline-item>
+ * ```
+ */
+export class AfTimelineItem {
+    constructor() {
+        /**
+         * Visual status of the item.
+         */
+        this.status = 'planned';
+        /**
+         * Show tooltip on hover. Set to false to disable tooltips.
+         */
+        this.showTooltip = true;
+        /**
+         * Internal: start position percentage (set by parent).
+         */
+        this._startPosition = 0;
+        /**
+         * Internal: width percentage (set by parent).
+         */
+        this._width = 10;
+        this.isMilestone = false;
+    }
+    componentWillLoad() {
+        this.checkMilestone();
+    }
+    handleEndDateChange() {
+        this.checkMilestone();
+    }
+    checkMilestone() {
+        this.isMilestone = !this.endDate;
+    }
+    formatDateRange() {
+        const formatDate = (dateStr) => {
+            const date = new Date(dateStr);
+            if (isNaN(date.getTime()))
+                return dateStr;
+            return date.toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+            });
+        };
+        const start = formatDate(this.startDate);
+        if (!this.endDate)
+            return start;
+        const end = formatDate(this.endDate);
+        return `${start} – ${end}`;
+    }
+    render() {
+        const barStyle = {
+            left: `${this._startPosition}%`,
+            width: this.isMilestone ? '20px' : `${this._width}%`,
+        };
+        return (h(Host, { key: '750107c137cf583209d1280ab97e17200998aad4', class: {
+                'timeline-item': true,
+                [`timeline-item--${this.status}`]: true,
+                'timeline-item--milestone': this.isMilestone,
+            } }, h("div", { key: '5beed5103c173e2b94c23ac1917b54673109e891', class: "timeline-item__bar", style: barStyle }, this.isMilestone ? (h("div", { class: "timeline-item__diamond" })) : (h("div", { class: "timeline-item__fill" }, this.label && (h("span", { class: "timeline-item__label" }, this.label)))), this.showTooltip && (h("div", { key: '626f889fb67999b55a492d95b7c3fe17a4fa4472', class: "timeline-item__tooltip" }, h("div", { key: '4c2df694ce1cde2a694663820b16dac94320b454', class: "timeline-item__tooltip-label" }, this.label || 'Item'), h("div", { key: 'ed374b45cf2f2bddbc78cd699052611751ef05f8', class: "timeline-item__tooltip-dates" }, this.formatDateRange()), h("div", { key: '683aaff91fa10a2e17ab4a6384d375041b53e781', class: "timeline-item__tooltip-content" }, h("slot", { key: '4497db4d7905cc8633fa868614a999556f8f2a53' }))))), h("div", { key: '0a268f6aac75ac2dc075a22d853f28d6de059474', class: "timeline-item__list-item" }, h("div", { key: '04f822f282a7cce0918d09f69b75321bb53da0c6', class: "timeline-item__list-status" }, this.isMilestone ? (h("div", { class: "timeline-item__list-diamond" })) : (h("div", { class: "timeline-item__list-indicator" }))), h("div", { key: '3f632949bbc1983c34f401c97f84756ce5632393', class: "timeline-item__list-content" }, h("div", { key: '383795fc9c2e6cd9a784e99a23d33550bbbf6577', class: "timeline-item__list-label" }, this.label || 'Item'), h("div", { key: 'cddf4019d07702e666164c50424bdafa94a02053', class: "timeline-item__list-dates" }, this.formatDateRange()), h("div", { key: 'a155d624284a1dcdad8303ff1f1873f58caaeb61', class: "timeline-item__list-description" }, h("slot", { key: '3a427af906d05779c49a2485fd45db8ae10c3348' }))), h("div", { key: 'bb7e58b09a9435710919a73b1edc50c6566aacd1', class: "timeline-item__list-badge" }, h("span", { key: '6a1472ca92b22592bf18dc0e6b67e263761150ee', class: `timeline-item__status-badge timeline-item__status-badge--${this.status}` }, this.status)))));
+    }
+    static get is() { return "af-timeline-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-timeline-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-timeline-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "startDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Item start date (ISO format YYYY-MM-DD)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-date"
+            },
+            "endDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Item end date (ISO format YYYY-MM-DD). Omit for milestone marker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-date"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display label for the item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineItemStatus",
+                    "resolved": "\"active\" | \"complete\" | \"planned\"",
+                    "references": {
+                        "TimelineItemStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-timeline-item/af-timeline-item.tsx",
+                            "id": "src/components/af-timeline-item/af-timeline-item.tsx::TimelineItemStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual status of the item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'planned'"
+            },
+            "row": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical row/lane for the item (auto-assigned by parent if not set)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row"
+            },
+            "showTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tooltip on hover. Set to false to disable tooltips."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltip",
+                "defaultValue": "true"
+            },
+            "_startPosition": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: start position percentage (set by parent)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_start-position",
+                "defaultValue": "0"
+            },
+            "_width": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: width percentage (set by parent)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_width",
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMilestone": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "endDate",
+                "methodName": "handleEndDateChange"
+            }];
+    }
+}

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js

@@ -74,8 +74,13 @@ export class AfTypographyLockup {
         this.hasDescription = false;
         this.hasButtons = false;
         this.syncSlotState = () => {
-            this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
-            this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+            // No `{ flatten: true }`: Stencil's scoped (non-shadow) slots support
+            // `assignedNodes()` but throw "Flattening is not supported for non-shadow
+            // slots" under SSR/hydrate. These are plain named slots with no nested
+            // slot forwarding, so flattening is a no-op here — dropping it keeps the
+            // same result while staying SSR-safe.
+            this.hasDescription = (this.descriptionSlot?.assignedNodes().length ?? 0) > 0;
+            this.hasButtons = (this.buttonsSlot?.assignedNodes().length ?? 0) > 0;
         };
     }
     componentDidLoad() {
@@ -138,7 +143,7 @@ export class AfTypographyLockup {
             [`align-${effectiveButtonsAlignment}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '0cd130764dedfa1bdc81c96efb6dc07881d4a73b' }, h("div", { key: '3a1c3813247f5729901fed6317761ee8e8bd3bce', class: containerClasses }, h("div", { key: '7e39a31d19f1e2ce5ba5bad248b9461bf9089931', class: "copy", style: copyStyle }, h("div", { key: 'db3c4253ab71421ceef7f8e0ad3c68503567a2ce', class: headingClasses, part: "heading" }, h("slot", { key: 'ee621dde4c0cb166b786b2aa30306276bcdf0866' })), h("div", { key: '2c336c4deac96cf97a9d1ef1d9d3f9b32cb4847a', class: descriptionClasses, part: "body", hidden: !this.hasDescription }, h("slot", { key: '045895fd56acc215c75a1e4ee87f7755017d4bff', name: "description", ref: (el) => (this.descriptionSlot = el) }))), h("div", { key: '03d873fd3502af1b1b9ad83f11a54b2c4c55fb9a', class: buttonsClasses, part: "buttons", hidden: !this.hasButtons }, h("slot", { key: '638bad74073f1243804fd8bba5624c6f811f24c6', name: "buttons", ref: (el) => (this.buttonsSlot = el) })))));
+        return (h(Host, { key: '64237bfea284d16421bc6f4dfd9529d255cd60af' }, h("div", { key: '41180bbcc110b89d9f010301d6a8e935326c2072', class: containerClasses }, h("div", { key: '43fe67b92c3497ce4c45e832dd1749d5c525a39d', class: "copy", style: copyStyle }, h("div", { key: '1f0eb282b9719853fdf08c97d01cbc6781fd246b', class: headingClasses, part: "heading" }, h("slot", { key: 'c92b832501ddae585f2bb066926fff2443581e61' })), h("div", { key: '42d0e2f0ae0d48e169fcc5947a300b1660ed91ac', class: descriptionClasses, part: "body", hidden: !this.hasDescription }, h("slot", { key: '8fe4bb503d24063ec8e58003a7f902692013548f', name: "description", ref: (el) => (this.descriptionSlot = el) }))), h("div", { key: 'f7e040869d551a954b372fbc425058082496d11a', class: buttonsClasses, part: "buttons", hidden: !this.hasButtons }, h("slot", { key: '16006512d443769be0b7d5738e0924ef5c33bc7f', name: "buttons", ref: (el) => (this.buttonsSlot = el) })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }
@@ -164,7 +169,8 @@ export class AfTypographyLockup {
                         "HeadingSize": {
                             "location": "import",
                             "path": "../../types",
-                            "id": "src/types.ts::HeadingSize"
+                            "id": "src/types.ts::HeadingSize",
+                            "referenceLocation": "HeadingSize"
                         }
                     }
                 },
@@ -386,4 +392,3 @@ export class AfTypographyLockup {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=af-typography-lockup.js.map

package/dist/collection/components/af-video-container/af-video-container.js

@@ -42,7 +42,7 @@ export class AfVideoContainer {
         };
     }
     render() {
-        return (h(Host, { key: '5cfc1f803b4f389b816ddf9029ded6eb37cf3fb6' }, h("div", { key: '16af2ac32fd6321c60a6d5c236aad550918075df', class: "video-container" }, h("div", { key: '8a0a72110769768b38dd9cf21635ada270e02be3', class: "video-container__top" }, h("slot", { key: '16dcd7916b6a76081f3053cecede88416cd8bcc8', name: "top" })), h("div", { key: 'bd45a68804569a2c4fec84508f64fceadb69f91a', class: "video-container__video" }, h("af-aspect-ratio", { key: '7f2c7e03b7fb685ea559f394c823cce714ca0254', ratio: "16:9" }, h("div", { key: 'd14bef603577d48e46b15f3cc5e199e0a36398db', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'a9346709bb21625d5d97851742ced12312e657e7', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'e8e0c6a39b27fdc5a19590cdc1678300a428105d', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '291a1a3015204bc0a5ec429cf69e29c44d0ec60b', name: "play", size: 24 }))))), h("div", { key: 'ff49121c1d37c38c446cc7b8513483065cf4833d', class: "video-container__bottom" }, h("slot", { key: '7818250e7dfdd1eedb3a970846dc2fb15bce51ac', name: "bottom" })))));
+        return (h(Host, { key: 'f002b83079e518c45ee358d07c3a31d824afe730' }, h("div", { key: '32b03fe7d30a0df3313e6fcd8645ef98a55bc410', class: "video-container" }, h("div", { key: '093335c5f7d73ae7223f4cea85c4fcfb135ac7cb', class: "video-container__top" }, h("slot", { key: 'abf7cd4b98a588015bb12845abbc67b20cd6a4e7', name: "top" })), h("div", { key: 'fea3ae8af3ce85e37af4a126a83d79586626fc9d', class: "video-container__video" }, h("af-aspect-ratio", { key: '22b70a6f2d32e9097208a83c8a7ba4fc5ea91ec2', ratio: "16:9" }, h("div", { key: 'dbd88958f7c52ba966870bdb73d03b298ce5f1af', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'cce44c173e089d627c21b2287bfcc524f84f5c8a', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'ba576c4eec8fc77cda8ca7bd31aa0720812dd1b0', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '1c9a09727222504e851d4350350189a16c3de12a', name: "play", size: 24 }))))), h("div", { key: 'd2f4df308ec5213306ff03320e42b28e2a2e1a12', class: "video-container__bottom" }, h("slot", { key: 'b7ff9e3e46f3207e584cf41db6ecf289354882de', name: "bottom" })))));
     }
     static get is() { return "af-video-container"; }
     static get encapsulation() { return "scoped"; }
@@ -139,4 +139,3 @@ export class AfVideoContainer {
             }];
     }
 }
-//# sourceMappingURL=af-video-container.js.map

package/dist/collection/components/af-visually-hidden/af-visually-hidden.js

@@ -15,7 +15,7 @@ export class AfVisuallyHidden {
         this.focusable = false;
     }
     render() {
-        return (h(Host, { key: '5d1151eb1606287c54b8c6612195aab2ee96bcd2', class: { 'focusable': this.focusable } }, h("slot", { key: 'd60e1eb7d8da677aa44f3197c537736849fd7fea' })));
+        return (h(Host, { key: '6889451ddaf0592627bff6e45f3624d3c6aced95', class: { 'focusable': this.focusable } }, h("slot", { key: 'c7631255fa4890c2e29078819ccc1dd4d202d90e' })));
     }
     static get is() { return "af-visually-hidden"; }
     static get encapsulation() { return "shadow"; }
@@ -54,4 +54,3 @@ export class AfVisuallyHidden {
         };
     }
 }
-//# sourceMappingURL=af-visually-hidden.js.map

package/dist/collection/components.js

@@ -22,4 +22,3 @@ export { AfTabBar } from './components/af-tab-bar/af-tab-bar';
 export { AfFeatureCard } from './components/af-feature-card/af-feature-card';
 export { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';
 export { AfHero } from './components/af-hero/af-hero';
-//# sourceMappingURL=components.js.map

package/dist/collection/index.js

@@ -1,2 +1 @@
 export * from './components';
-//# sourceMappingURL=index.js.map

package/dist/collection/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/dist/collection/utils/charts/a11y.js

@@ -0,0 +1,191 @@
+/**
+ * Accessibility utilities for chart components.
+ * Generates ARIA attributes, screen reader descriptions, and hidden data tables.
+ */
+/**
+ * Generates an accessible description for a chart based on its type and data.
+ *
+ * @param type - Chart type (bar, line, pie, area)
+ * @param data - Chart data points
+ * @param title - Optional chart title
+ * @returns Descriptive text for screen readers
+ */
+export function generateChartDescription(type, data, title) {
+    const chartName = title || `${capitalizeFirst(type)} chart`;
+    if (data.length === 0) {
+        return `${chartName} with no data.`;
+    }
+    const values = data.map((d) => d.value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const sum = values.reduce((a, b) => a + b, 0);
+    const avg = sum / values.length;
+    const minItem = data.find((d) => d.value === min);
+    const maxItem = data.find((d) => d.value === max);
+    const parts = [
+        `${chartName} showing ${data.length} data points.`,
+    ];
+    if (type === 'pie' || type === 'donut') {
+        parts.push(`Total value: ${formatNumber(sum)}.`);
+        parts.push(`Largest segment: ${maxItem?.label} at ${formatPercent(max / sum)}.`);
+        parts.push(`Smallest segment: ${minItem?.label} at ${formatPercent(min / sum)}.`);
+    }
+    else {
+        parts.push(`Range: ${formatNumber(min)} to ${formatNumber(max)}.`);
+        parts.push(`Average: ${formatNumber(avg)}.`);
+        if (maxItem) {
+            parts.push(`Highest: ${maxItem.label} at ${formatNumber(max)}.`);
+        }
+        if (minItem && minItem !== maxItem) {
+            parts.push(`Lowest: ${minItem.label} at ${formatNumber(min)}.`);
+        }
+    }
+    return parts.join(' ');
+}
+/**
+ * Generates an accessible description for multi-series chart data.
+ */
+export function generateMultiSeriesDescription(type, data, title) {
+    const chartName = title || `${capitalizeFirst(type)} chart`;
+    if (data.series.length === 0 || data.labels.length === 0) {
+        return `${chartName} with no data.`;
+    }
+    const parts = [
+        `${chartName} with ${data.series.length} series across ${data.labels.length} categories.`,
+    ];
+    for (const series of data.series) {
+        const min = Math.min(...series.values);
+        const max = Math.max(...series.values);
+        parts.push(`${series.name}: ranges from ${formatNumber(min)} to ${formatNumber(max)}.`);
+    }
+    return parts.join(' ');
+}
+/**
+ * Generates a hidden HTML table for screen reader access to chart data.
+ * Should be rendered inside the chart component but visually hidden.
+ *
+ * @param data - Chart data points
+ * @param valueLabel - Column header for values (e.g., "Amount", "Count")
+ * @returns HTML string for a data table
+ */
+export function generateDataTable(data, valueLabel = 'Value') {
+    if (data.length === 0) {
+        return '<p>No data available.</p>';
+    }
+    const rows = data
+        .map((d) => `<tr><td>${escapeHtml(d.label)}</td><td>${formatNumber(d.value)}</td></tr>`)
+        .join('');
+    return `
+<table class="sr-only">
+  <caption>Chart data</caption>
+  <thead>
+    <tr>
+      <th scope="col">Category</th>
+      <th scope="col">${escapeHtml(valueLabel)}</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${rows}
+  </tbody>
+</table>`.trim();
+}
+/**
+ * Generates a hidden HTML table for multi-series chart data.
+ */
+export function generateMultiSeriesDataTable(data, valueLabel = 'Values') {
+    if (data.series.length === 0 || data.labels.length === 0) {
+        return '<p>No data available.</p>';
+    }
+    const headerCells = data.series
+        .map((s) => `<th scope="col">${escapeHtml(s.name)}</th>`)
+        .join('');
+    const rows = data.labels
+        .map((label, i) => {
+        const cells = data.series
+            .map((s) => `<td>${formatNumber(s.values[i] ?? 0)}</td>`)
+            .join('');
+        return `<tr><th scope="row">${escapeHtml(label)}</th>${cells}</tr>`;
+    })
+        .join('');
+    return `
+<table class="sr-only">
+  <caption>Chart data: ${escapeHtml(valueLabel)}</caption>
+  <thead>
+    <tr>
+      <th scope="col">Category</th>
+      ${headerCells}
+    </tr>
+  </thead>
+  <tbody>
+    ${rows}
+  </tbody>
+</table>`.trim();
+}
+/**
+ * ARIA attributes for interactive chart elements.
+ */
+export function getElementAriaAttrs(label, value, index, total, highlighted = false) {
+    return {
+        role: 'img',
+        'aria-label': `${label}: ${formatNumber(value)}`,
+        'aria-roledescription': 'data point',
+        'aria-posinset': String(index + 1),
+        'aria-setsize': String(total),
+        ...(highlighted && { 'aria-current': 'true' }),
+    };
+}
+/**
+ * Generates ARIA attributes for the chart container.
+ */
+export function getChartAriaAttrs(description, hasInteraction = false) {
+    const attrs = {
+        role: 'img',
+        'aria-label': description,
+    };
+    if (hasInteraction) {
+        attrs.role = 'application';
+        attrs['aria-roledescription'] = 'interactive chart';
+    }
+    return attrs;
+}
+/**
+ * CSS for visually hidden but screen-reader accessible elements.
+ */
+export const srOnlyStyles = `
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`.trim();
+// ============================================================================
+// Helper functions
+// ============================================================================
+function capitalizeFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function formatNumber(value) {
+    return new Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 2,
+    }).format(value);
+}
+function formatPercent(value) {
+    return new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        maximumFractionDigits: 1,
+    }).format(value);
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}