@pnp/spfx-controls-react 3.24.0-beta.2252463 → 3.24.0-beta.2280641

package/lib-commonjs/controls/HoverReactionsBar/data/fluentEmojisGroups.json

@@ -0,0 +1,34 @@
+[
+  {
+    "groupName": "Smileys & Emotion",
+    "emoji": "https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_a64cb0fe-0c18-4521-a3b4-342ce7ae211b/thumbnail.svg"
+  },
+  {
+    "groupName": "People & Body",
+    "emoji": "https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_bf84d31d-b76d-48da-ac96-599539798a33/thumbnail.svg"
+  },
+   {
+    "groupName": "Animals & Nature",
+    "emoji": "https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_07cd621f-f613-48ea-8b42-0a7eface9ec4/thumbnail.svg"
+  },
+  {
+    "groupName": "Food & Drink",
+    "emoji": "https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_519d2658-fde6-4988-a4b4-7ece53aad3a3/thumbnail.svg"
+  },
+    {
+    "groupName": "Travel & Places",
+    "emoji": "https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_4bb9f405-06d7-4e3f-86a5-e9371e29751e/thumbnail.svg"
+  },
+   {
+    "groupName": "Activities",
+    "emoji":   "https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_72d64128-f20c-4c1b-b2bf-96184a804660/thumbnail.svg"
+  },
+   {
+    "groupName": "Objects",
+    "emoji":"https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_9eb1e73b-95da-4543-927b-2bfd35152a5c/thumbnail.svg"
+  },
+  {
+    "groupName": "Symbols",
+    "emoji":"https://statics.teams.cdn.office.net/evergreen-assets/personal-expressions/v2/assets/categories/002_noname_93350a73-525f-49ae-ae14-f055a9b98f4c/thumbnail.svg"
+  }
+]

package/lib-commonjs/controls/HoverReactionsBar/hooks/useFluentEmojis.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFluentEmojis = void 0;
+var tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var react_1 = tslib_1.__importDefault(require("react"));
+var lodash_1 = require("lodash");
+var sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
+var fluentEmojis_json_1 = tslib_1.__importDefault(require("../data/fluentEmojis.json"));
+var useFluentEmojis = function () {
+    var base64FromSVGUrl = react_1.default.useCallback(function (url) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var svg, svg64, b64Start, image64;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetch(url).then(function (response) { return response.text(); })];
+                case 1:
+                    svg = _a.sent();
+                    svg64 = btoa(svg);
+                    b64Start = "data:image/svg+xml;base64,";
+                    image64 = b64Start + svg64;
+                    return [2 /*return*/, image64];
+            }
+        });
+    }); }, []);
+    var getEmojis = react_1.default.useCallback(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var newEmojiList, _a, _b, _c, _i, emoji, emojiInfo, _d, styles, skintones, _e, _f, _g, _h, _j, _k;
+        var _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        return tslib_1.__generator(this, function (_w) {
+            switch (_w.label) {
+                case 0:
+                    newEmojiList = [];
+                    _a = fluentEmojis_json_1.default;
+                    _b = [];
+                    for (_c in _a)
+                        _b.push(_c);
+                    _i = 0;
+                    _w.label = 1;
+                case 1:
+                    if (!(_i < _b.length)) return [3 /*break*/, 24];
+                    _c = _b[_i];
+                    if (!(_c in _a)) return [3 /*break*/, 23];
+                    emoji = _c;
+                    if (!Object.prototype.hasOwnProperty.call(fluentEmojis_json_1.default, emoji)) return [3 /*break*/, 23];
+                    emojiInfo = fluentEmojis_json_1.default[emoji];
+                    _d = emojiInfo || {}, styles = _d.styles, skintones = _d.skintones;
+                    if (!styles) return [3 /*break*/, 5];
+                    _f = (_e = newEmojiList).push;
+                    _g = [tslib_1.__assign({}, emojiInfo)];
+                    _l = {};
+                    _m = {};
+                    return [4 /*yield*/, base64FromSVGUrl(styles.Color)];
+                case 2:
+                    _m.Color = _w.sent(),
+                        _m["3D"] = styles["3D"];
+                    return [4 /*yield*/, base64FromSVGUrl(styles.Flat)];
+                case 3:
+                    _m.Flat = _w.sent();
+                    return [4 /*yield*/, base64FromSVGUrl(styles.HighContrast)];
+                case 4:
+                    _f.apply(_e, [tslib_1.__assign.apply(void 0, _g.concat([(_l.styles = (_m.HighContrast = _w.sent(),
+                                _m), _l)]))]);
+                    _w.label = 5;
+                case 5:
+                    if (!skintones) return [3 /*break*/, 23];
+                    _j = (_h = newEmojiList).push;
+                    _k = [tslib_1.__assign({}, emojiInfo)];
+                    _o = {};
+                    _p = {};
+                    _q = {};
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Dark.Color)];
+                case 6:
+                    _q.Color = _w.sent(),
+                        _q["3D"] = skintones.Dark["3D"];
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Dark.Flat)];
+                case 7:
+                    _q.Flat = _w.sent();
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Dark.HighContrast)];
+                case 8:
+                    _p.Dark = (_q.HighContrast = _w.sent(),
+                        _q);
+                    _r = {};
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Default.Color)];
+                case 9:
+                    _r.Color = _w.sent(),
+                        _r["3D"] = skintones.Default["3D"];
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Default.Flat)];
+                case 10:
+                    _r.Flat = _w.sent();
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Default.HighContrast)];
+                case 11:
+                    _p.Default = (_r.HighContrast = _w.sent(),
+                        _r);
+                    _s = {};
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Light.Color)];
+                case 12:
+                    _s.Color = _w.sent(),
+                        _s["3D"] = skintones.Light["3D"];
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Light.Flat)];
+                case 13:
+                    _s.Flat = _w.sent();
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Light.HighContrast)];
+                case 14:
+                    _p.Light = (_s.HighContrast = _w.sent(),
+                        _s);
+                    _t = {};
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Medium.Color)];
+                case 15:
+                    _t.Color = _w.sent(),
+                        _t["3D"] = skintones.Medium["3D"],
+                        _t.Flat = skintones.Medium.Flat;
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.Medium.HighContrast)];
+                case 16:
+                    _p.Medium = (_t.HighContrast = _w.sent(),
+                        _t);
+                    _u = {};
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.MediumDark.Color)];
+                case 17:
+                    _u.Color = _w.sent(),
+                        _u["3D"] = skintones.MediumDark["3D"];
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.MediumDark.Flat)];
+                case 18:
+                    _u.Flat = _w.sent();
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.MediumDark.HighContrast)];
+                case 19:
+                    _p.MediumDark = (_u.HighContrast = _w.sent(),
+                        _u);
+                    _v = {};
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.MediumLight.Color)];
+                case 20:
+                    _v.Color = _w.sent(),
+                        _v["3D"] = skintones.MediumLight["3D"];
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.MediumLight.Flat)];
+                case 21:
+                    _v.Flat = _w.sent();
+                    return [4 /*yield*/, base64FromSVGUrl(skintones.MediumLight.HighContrast)];
+                case 22:
+                    _j.apply(_h, [tslib_1.__assign.apply(void 0, _k.concat([(_o.skintones = (_p.MediumLight = (_v.HighContrast = _w.sent(),
+                                _v),
+                                _p), _o)]))]);
+                    _w.label = 23;
+                case 23:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 24: return [2 /*return*/, newEmojiList];
+            }
+        });
+    }); }, []);
+    var getFluentEmojis = react_1.default.useCallback(function () {
+        var _a;
+        return (_a = Object.values(fluentEmojis_json_1.default)) !== null && _a !== void 0 ? _a : undefined;
+    }, []);
+    var getFluentEmojisByGroup = react_1.default.useCallback(function () {
+        var fluentEmojisByGroup = (0, sp_lodash_subset_1.groupBy)(fluentEmojis_json_1.default, "group");
+        return fluentEmojisByGroup !== null && fluentEmojisByGroup !== void 0 ? fluentEmojisByGroup : undefined;
+    }, []);
+    var getFluentEmojiByglyph = react_1.default.useCallback(function (glyph) {
+        var fluentEmoji = (0, lodash_1.find)(Object.values(fluentEmojis_json_1.default), function (o) {
+            return o.glyph === glyph;
+        });
+        return fluentEmoji !== null && fluentEmoji !== void 0 ? fluentEmoji : undefined;
+    }, []);
+    var getFluentEmojiByName = react_1.default.useCallback(function (name) {
+        var _a;
+        var fluentEmoji = (_a = (0, lodash_1.find)(Object.values(fluentEmojis_json_1.default), function (o) {
+            return o.cldr.toLowerCase() === name.toLowerCase();
+        })) !== null && _a !== void 0 ? _a : {};
+        return fluentEmoji !== null && fluentEmoji !== void 0 ? fluentEmoji : {};
+    }, []);
+    var getFluentEmoji = react_1.default.useCallback(function (glyph) {
+        var mapDefaultEmoji = new Map();
+        mapDefaultEmoji.set("like", "Thumbs up");
+        mapDefaultEmoji.set("heart", "Red heart");
+        mapDefaultEmoji.set("laugh", "Grinning face");
+        mapDefaultEmoji.set("surprised", "Face with open mouth");
+        var mapValue = mapDefaultEmoji.get(glyph);
+        if (mapValue) {
+            return getFluentEmojiByName(mapValue);
+        }
+        else {
+            return getFluentEmojiByglyph(glyph);
+        }
+    }, []);
+    return {
+        getEmojis: getEmojis,
+        getFluentEmojis: getFluentEmojis,
+        getFluentEmojisByGroup: getFluentEmojisByGroup,
+        getFluentEmojiByglyph: getFluentEmojiByglyph,
+        getFluentEmojiByName: getFluentEmojiByName,
+        getFluentEmoji: getFluentEmoji,
+    };
+};
+exports.useFluentEmojis = useFluentEmojis;
+//# sourceMappingURL=useFluentEmojis.js.map

package/lib-commonjs/controls/HoverReactionsBar/hooks/useFluentEmojis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFluentEmojis.js","sourceRoot":"","sources":["../../../../src/controls/HoverReactionsBar/hooks/useFluentEmojis.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/HoverReactionsBar/hooks/useOnClickOutside.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnClickOutside = void 0;
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var react_1 = require("react");
+var useOnClickOutside = function (active, ref, callback) {
+    var handleClickOutside = (0, react_1.useCallback)(function (event) {
+        if (ref.current && !ref.current.contains(event.target) && active) {
+            callback();
+        }
+    }, [ref, callback, active]);
+    (0, react_1.useEffect)(function () {
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("wheel", handleClickOutside);
+        return function () {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("wheel", handleClickOutside);
+        };
+    }, [ref]);
+};
+exports.useOnClickOutside = useOnClickOutside;
+//# sourceMappingURL=useOnClickOutside.js.map

package/lib-commonjs/controls/HoverReactionsBar/hooks/useOnClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../../../src/controls/HoverReactionsBar/hooks/useOnClickOutside.ts"],"names":[],"mappings":";;;AAAA,qEAAqE;AACrE,uDAAuD;AACvD,+BAGe;AAEP,IAAM,iBAAiB,GAAI,UAAC,MAAc,EAAE,GAAQ,EAAE,QAAa;IAE1E,IAAQ,kBAAkB,GAAG,IAAA,mBAAW,EAAC,UAAC,KAAS;QAClD,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,MAAM,EAAE,CAAC;YAC7D,QAAQ,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzB,IAAA,iBAAS,EAAC;QACP,0BAA0B;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO;YACJ,wCAAwC;YACxC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC7D,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACb,CAAC,CAAA;AAlBa,QAAA,iBAAiB,qBAkB9B"}

package/lib-commonjs/controls/HoverReactionsBar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./HoverReactionsBar"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/HoverReactionsBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/HoverReactionsBar/index.ts"],"names":[],"mappings":";;;AAAA,8DAAoC"}

package/lib-commonjs/controls/HoverReactionsBar/models/IEmoji.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IEmoji.js.map

package/lib-commonjs/controls/HoverReactionsBar/models/IEmoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IEmoji.js","sourceRoot":"","sources":["../../../../src/controls/HoverReactionsBar/models/IEmoji.ts"],"names":[],"mappings":""}

package/lib-commonjs/controls/HoverReactionsBar/models/IFluentEmoji.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IFluentEmoji.js.map

package/lib-commonjs/controls/HoverReactionsBar/models/IFluentEmoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFluentEmoji.js","sourceRoot":"","sources":["../../../../src/controls/HoverReactionsBar/models/IFluentEmoji.ts"],"names":[],"mappings":""}

package/lib-commonjs/controls/KPIControl/IKpiCardData.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EGoalMetric = void 0;
+var EGoalMetric;
+(function (EGoalMetric) {
+    EGoalMetric[EGoalMetric["LOWER_IS_BETTER"] = 1] = "LOWER_IS_BETTER";
+    EGoalMetric[EGoalMetric["HIGHER_IS_BETTER"] = 2] = "HIGHER_IS_BETTER";
+})(EGoalMetric || (exports.EGoalMetric = EGoalMetric = {}));
+//# sourceMappingURL=IKpiCardData.js.map

package/lib-commonjs/controls/KPIControl/IKpiCardData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IKpiCardData.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/IKpiCardData.tsx"],"names":[],"mappings":";;;AACA,IAAY,WAGX;AAHD,WAAY,WAAW;IACnB,mEAAqB,CAAA;IACrB,qEAAsB,CAAA;AAC1B,CAAC,EAHW,WAAW,2BAAX,WAAW,QAGtB"}

package/lib-commonjs/controls/KPIControl/IKpiCardProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IKpiCardProps.js.map

package/lib-commonjs/controls/KPIControl/IKpiCardProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IKpiCardProps.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/IKpiCardProps.tsx"],"names":[],"mappings":""}

package/lib-commonjs/controls/KPIControl/KpiCard.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KPICard = void 0;
+var tslib_1 = require("tslib");
+var react_components_1 = require("@fluentui/react-components");
+var React = tslib_1.__importStar(require("react"));
+var Stack_1 = tslib_1.__importDefault(require("./stack/Stack"));
+var useKpiStyles_1 = require("./useKpiStyles");
+var react_icons_1 = require("@fluentui/react-icons");
+var IKpiCardData_1 = require("./IKpiCardData");
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var KPICard = function (props) {
+    var _a;
+    var dataCard = props.dataCard;
+    var styles = (0, useKpiStyles_1.useKpiStyles)();
+    // State to control InfoLabel popover visibility
+    var _b = React.useState(false), isInfoLabelOpen = _b[0], setIsInfoLabelOpen = _b[1];
+    // Handle card mouse leave to auto-dismiss InfoLabel
+    var handleCardMouseLeave = React.useCallback(function () {
+        setIsInfoLabelOpen(false);
+    }, []);
+    // Determine if KPI is on track based on goal metric type
+    var isOnTrack = React.useMemo(function () {
+        return dataCard.goalMetric === IKpiCardData_1.EGoalMetric.LOWER_IS_BETTER
+            ? dataCard.currentValue <= dataCard.goal // Lower is better: on track when current <= goal
+            : dataCard.currentValue >= dataCard.goal;
+    }, // Higher is better: on track when current >= goal
+    [dataCard.currentValue, dataCard.goal, dataCard.goalMetric]);
+    var progressColor = React.useMemo(function () { return (isOnTrack ? 'success' : 'error'); }, [isOnTrack]);
+    var goal = React.useMemo(function () { return dataCard.goal.toLocaleString(); }, [dataCard.goal]);
+    var totalPercent = React.useMemo(function () { return (dataCard.currentValue / dataCard.totalItems) * 100; }, [dataCard.currentValue, dataCard.totalItems]);
+    // Success / Danger foregrounds
+    var accentFg = React.useMemo(function () {
+        return isOnTrack
+            ? react_components_1.tokens.colorPaletteLightGreenForeground2
+            : react_components_1.tokens.colorPaletteRedForeground2;
+    }, [isOnTrack]);
+    // Success / Danger backgrounds (badge pill bg)
+    var accentBg = React.useMemo(function () {
+        return isOnTrack
+            ? react_components_1.tokens.colorPaletteLightGreenBackground1
+            : react_components_1.tokens.colorPaletteRedBackground1;
+    }, [isOnTrack]);
+    // Success / Danger borders (badge pill border)
+    var accentBorder = React.useMemo(function () {
+        return isOnTrack
+            ? react_components_1.tokens.colorPaletteLightGreenBorder1
+            : react_components_1.tokens.colorPaletteRedBorder1;
+    }, [isOnTrack]);
+    var badgeStyle = React.useMemo(function () { return ({
+        background: accentBg,
+        border: "1px solid ".concat(accentBorder),
+        color: accentFg,
+        borderRadius: '20px',
+        padding: '12px 12px',
+        fontSize: react_components_1.tokens.fontSizeBase200,
+        fontWeight: react_components_1.tokens.fontWeightSemibold,
+        letterSpacing: '0.3px',
+        maxWidth: 'fit-content',
+    }); }, [accentBg, accentBorder, accentFg]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Card, { className: styles.card, onMouseLeave: handleCardMouseLeave },
+            React.createElement("div", { className: isOnTrack ? styles.glowBlobSuccess : styles.glowBlobError }),
+            React.createElement(Stack_1.default, { gap: "m", padding: "m" },
+                React.createElement(react_components_1.CardHeader, { header: React.createElement(Stack_1.default, { direction: "vertical", gap: "2px" },
+                        React.createElement(Stack_1.default, { direction: "horizontal", alignItems: "center", gap: "8px" },
+                            React.createElement(react_components_1.InfoLabel, { style: { zIndex: 99999 }, infoButton: {
+                                    popover: {
+                                        open: isInfoLabelOpen,
+                                        onOpenChange: function (_e, data) {
+                                            return setIsInfoLabelOpen(data.open);
+                                        },
+                                    },
+                                }, info: React.createElement(React.Fragment, null,
+                                    React.createElement(react_components_1.Text, { size: 300, color: "neutralSecondary" }, dataCard.description || ControlStrings_1.default.KPINoDescription)) },
+                                React.createElement(react_components_1.Text, { weight: "bold", size: 300 }, ((_a = dataCard.title) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ControlStrings_1.default.KPIDEfaultTitle))),
+                        React.createElement(react_components_1.Text, { size: 200, style: {
+                                color: react_components_1.tokens.colorNeutralForeground3,
+                                fontStyle: 'italic',
+                            } }, dataCard.goalMetric === IKpiCardData_1.EGoalMetric.LOWER_IS_BETTER
+                            ? ControlStrings_1.default.KPILowerIsBetter
+                            : ControlStrings_1.default.KPIHigherIsBetter)), action: React.createElement(react_components_1.Tooltip, { content: isOnTrack
+                            ? "\u2713 ".concat(ControlStrings_1.default.KPIWithinGoalThreshold)
+                            : "\u26A0 ".concat(ControlStrings_1.default.KPIExceedsGoalTreshhold), relationship: "inaccessible" },
+                        React.createElement(react_components_1.Badge, { className: styles.headerActionBadge, appearance: "ghost", size: "small", icon: isOnTrack ? (React.createElement(react_icons_1.CheckmarkCircleRegular, { style: { color: accentFg, fontSize: '22px' } })) : (React.createElement(react_icons_1.AlertFilled, { style: { color: accentFg, fontSize: '22px' } })) })) }),
+                React.createElement(Stack_1.default, { gap: "s", direction: "horizontal", alignItems: "baseline", paddingTop: "s" },
+                    React.createElement(react_components_1.Text, { weight: "bold", size: 900 },
+                        dataCard.currentValue,
+                        " ",
+                        React.createElement("br", null)),
+                    React.createElement(react_components_1.Text, { weight: "semibold", size: 300, color: "neutralSecondary" },
+                        "/ ",
+                        dataCard.goal,
+                        " ",
+                        ControlStrings_1.default.KPIGoal)),
+                React.createElement(Stack_1.default, { gap: "s" },
+                    React.createElement(Stack_1.default, { direction: "horizontal", justifyContent: "space-between" },
+                        React.createElement(react_components_1.Text, { size: 300, color: "neutralSecondary" }, ControlStrings_1.default.KPIProgressGoal),
+                        React.createElement(react_components_1.Text, { size: 300, color: "neutralSecondary", weight: "bold" },
+                            ((dataCard.currentValue / dataCard.goal) * 100).toFixed(2),
+                            "%")),
+                    React.createElement(react_components_1.ProgressBar, { value: dataCard.currentValue / dataCard.goal, color: progressColor, style: { height: '8px' }, shape: "rounded" })),
+                React.createElement(react_components_1.CardFooter, null,
+                    React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.KPIMaxAllowedThreshold, relationship: "inaccessible" },
+                        React.createElement(Stack_1.default, { alignItems: "center", gap: react_components_1.tokens.spacingVerticalXXS },
+                            React.createElement(react_icons_1.TargetRegular, { className: styles.footerIcon }),
+                            React.createElement(react_components_1.Text, { className: styles.footerLabel }, "Goal"),
+                            React.createElement(react_components_1.Text, { className: styles.footerValue }, goal))),
+                    React.createElement(react_components_1.Divider, { vertical: true, className: styles.footerDivider }),
+                    React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.KPITotalItemsInScope, relationship: "inaccessible" },
+                        React.createElement(Stack_1.default, { alignItems: "center", gap: react_components_1.tokens.spacingVerticalXXS },
+                            React.createElement(react_icons_1.DocumentRegular, { className: styles.footerIcon }),
+                            React.createElement(react_components_1.Text, { className: styles.footerLabel }, ControlStrings_1.default.KPITotalItems),
+                            React.createElement(react_components_1.Text, { className: styles.footerValue }, dataCard.totalItems.toLocaleString()))),
+                    React.createElement(react_components_1.Divider, { vertical: true, className: styles.footerDivider }),
+                    React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.KPICurrentValueAsPercent, relationship: "inaccessible" },
+                        React.createElement(Stack_1.default, { alignItems: "center", gap: react_components_1.tokens.spacingVerticalXXS },
+                            React.createElement(react_icons_1.CalculatorRegular, { className: styles.footerIcon }),
+                            React.createElement(react_components_1.Text, { className: styles.footerLabel }, ControlStrings_1.default.KPIPercentOfTotal),
+                            React.createElement(react_components_1.Text, { className: styles.footerValue },
+                                totalPercent.toFixed(2),
+                                "%")))),
+                React.createElement(Stack_1.default, null,
+                    React.createElement(react_components_1.Badge, { appearance: "outline", size: "small", style: badgeStyle, icon: isOnTrack ? (React.createElement(react_icons_1.CheckmarkCircleRegular, { style: { fontSize: '14px' } })) : (React.createElement(react_icons_1.AlertFilled, { style: { fontSize: '14px' } })) }, isOnTrack ? ControlStrings_1.default.KPIOnTrack : ControlStrings_1.default.KPIExceedGoal))))));
+};
+exports.KPICard = KPICard;
+//# sourceMappingURL=KpiCard.js.map

package/lib-commonjs/controls/KPIControl/KpiCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCard.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCard.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/KPIControl/KpiCardCompact.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KPICardCompact = void 0;
+var tslib_1 = require("tslib");
+var react_components_1 = require("@fluentui/react-components");
+var React = tslib_1.__importStar(require("react"));
+var Stack_1 = tslib_1.__importDefault(require("./stack/Stack"));
+var useKpiStyles_1 = require("./useKpiStyles");
+var react_icons_1 = require("@fluentui/react-icons");
+var IKpiCardData_1 = require("./IKpiCardData");
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var KPICardCompact = function (props) {
+    var _a;
+    var dataCard = props.dataCard;
+    var styles = (0, useKpiStyles_1.useKpiStyles)();
+    // State to control InfoLabel popover visibility
+    var _b = React.useState(false), isInfoLabelOpen = _b[0], setIsInfoLabelOpen = _b[1];
+    // Handle card mouse leave to auto-dismiss InfoLabel
+    var handleCardMouseLeave = React.useCallback(function () {
+        setIsInfoLabelOpen(false);
+    }, []);
+    // Determine if KPI is on track based on goal metric type
+    var isOnTrack = React.useMemo(function () {
+        return dataCard.goalMetric === IKpiCardData_1.EGoalMetric.LOWER_IS_BETTER
+            ? dataCard.currentValue <= dataCard.goal // Lower is better: on track when current <= goal
+            : dataCard.currentValue >= dataCard.goal;
+    }, // Higher is better: on track when current >= goal
+    [dataCard.currentValue, dataCard.goal, dataCard.goalMetric]);
+    var progressColor = React.useMemo(function () { return (isOnTrack ? 'success' : 'error'); }, [isOnTrack]);
+    // Success / Danger foregrounds
+    var accentFg = React.useMemo(function () {
+        return isOnTrack
+            ? react_components_1.tokens.colorPaletteLightGreenForeground2
+            : react_components_1.tokens.colorPaletteRedForeground2;
+    }, [isOnTrack]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Card, { className: styles.card, style: { height: '168px' }, onMouseLeave: handleCardMouseLeave },
+            React.createElement("div", { className: isOnTrack ? styles.glowBlobSuccess : styles.glowBlobError }),
+            React.createElement(Stack_1.default, { gap: "0px", padding: "m" },
+                React.createElement(react_components_1.CardHeader, { header: React.createElement(Stack_1.default, { direction: "vertical", gap: "2px" },
+                        React.createElement(Stack_1.default, { direction: "horizontal", alignItems: "center", gap: "8px" },
+                            React.createElement(react_components_1.InfoLabel, { infoButton: {
+                                    popover: {
+                                        open: isInfoLabelOpen,
+                                        onOpenChange: function (_e, data) { return setIsInfoLabelOpen(data.open); },
+                                    },
+                                }, info: React.createElement(React.Fragment, null,
+                                    React.createElement(react_components_1.Text, { size: 300, color: "neutralSecondary" }, dataCard.description || ControlStrings_1.default.KPINoDescription)) },
+                                React.createElement(react_components_1.Text, { weight: "bold", size: 300 }, ((_a = dataCard.title) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ControlStrings_1.default.KPIDEfaultTitle))),
+                        React.createElement(react_components_1.Text, { size: 200, style: {
+                                color: react_components_1.tokens.colorNeutralForeground3,
+                                fontStyle: 'italic',
+                            } }, dataCard.goalMetric === IKpiCardData_1.EGoalMetric.LOWER_IS_BETTER
+                            ? ControlStrings_1.default.KPILowerIsBetter
+                            : ControlStrings_1.default.KPIHigherIsBetter)), action: React.createElement(react_components_1.Tooltip, { content: isOnTrack
+                            ? "\u2713 ".concat(ControlStrings_1.default.KPIWithinGoalThreshold)
+                            : "\u26A0 ".concat(ControlStrings_1.default.KPIExceedsGoalTreshhold), relationship: "inaccessible" },
+                        React.createElement(react_components_1.Badge, { className: styles.headerActionBadge, appearance: "ghost", size: "small", icon: isOnTrack ? (React.createElement(react_icons_1.CheckmarkCircleRegular, { style: { color: accentFg, fontSize: '22px' } })) : (React.createElement(react_icons_1.AlertFilled, { style: { color: accentFg, fontSize: '22px' } })) })) }),
+                React.createElement(Stack_1.default, { gap: "s", direction: "horizontal", alignItems: "baseline" },
+                    React.createElement(react_components_1.Text, { weight: "bold", size: 900 },
+                        dataCard.currentValue,
+                        " ",
+                        React.createElement("br", null)),
+                    React.createElement(react_components_1.Text, { weight: "semibold", size: 300, color: "neutralSecondary" },
+                        "/ ",
+                        dataCard.goal,
+                        " ",
+                        ControlStrings_1.default.KPIGoal)),
+                React.createElement(Stack_1.default, { gap: "s" },
+                    React.createElement(Stack_1.default, { direction: "horizontal", justifyContent: "space-between" },
+                        React.createElement(react_components_1.Text, { size: 300, color: "neutralSecondary" }, ControlStrings_1.default.KPIProgressGoal),
+                        React.createElement(react_components_1.Text, { size: 300, color: "neutralSecondary", weight: "bold" },
+                            ((dataCard.currentValue / dataCard.goal) * 100).toFixed(2),
+                            "%")),
+                    React.createElement(react_components_1.ProgressBar, { value: dataCard.currentValue / dataCard.goal, color: progressColor, style: { height: '3px' }, shape: "rounded" }))))));
+};
+exports.KPICardCompact = KPICardCompact;
+//# sourceMappingURL=KpiCardCompact.js.map

package/lib-commonjs/controls/KPIControl/KpiCardCompact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCardCompact.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCardCompact.tsx"],"names":[],"mappings":";;;;AAAA,+DASoC;AACpC,mDAA+B;AAC/B,gEAAkC;AAElC,+CAA8C;AAC9C,qDAG+B;AAE/B,+CAA6C;AAC7C,0EAAqC;AAE9B,IAAM,cAAc,GAA2C,UACpE,KAA6C;;IAErC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,IAAM,MAAM,GAAG,IAAA,2BAAY,GAAE,CAAC;IAE9B,gDAAgD;IAC1C,IAAA,KAAwC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA5D,eAAe,QAAA,EAAE,kBAAkB,QAAyB,CAAC;IAEpE,oDAAoD;IACpD,IAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC;QAC7C,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yDAAyD;IACzD,IAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAC7B;QACE,OAAA,QAAQ,CAAC,UAAU,KAAK,0BAAW,CAAC,eAAe;YACjD,CAAC,CAAC,QAAQ,CAAC,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC,iDAAiD;YAC1F,CAAC,CAAC,QAAQ,CAAC,YAAY,IAAI,QAAQ,CAAC,IAAI;IAF1C,CAE0C,EAAE,kDAAkD;IAChG,CAAC,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,UAAU,CAAC,CAC5D,CAAC;IAEF,IAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,cAAM,OAAA,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,EAAjC,CAAiC,EACvC,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,+BAA+B;IAC/B,IAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAC5B;QACE,OAAA,SAAS;YACP,CAAC,CAAC,yBAAM,CAAC,iCAAiC;YAC1C,CAAC,CAAC,yBAAM,CAAC,0BAA0B;IAFrC,CAEqC,EACvC,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,uBAAI,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,YAAY,EAAE,oBAAoB;YAE1F,6BACE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,GACpE;YACF,oBAAC,eAAK,IAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,GAAG;gBAC1B,oBAAC,6BAAU,IACT,MAAM,EACJ,oBAAC,eAAK,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK;wBACnC,oBAAC,eAAK,IAAC,SAAS,EAAC,YAAY,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK;4BACzD,oBAAC,4BAAS,IACR,UAAU,EAAE;oCACV,OAAO,EAAE;wCACP,IAAI,EAAE,eAAe;wCACrB,YAAY,EAAE,UAAC,EAAE,EAAE,IAAI,IAAK,OAAA,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAA7B,CAA6B;qCAC1D;iCACF,EACD,IAAI,EACF;oCACE,oBAAC,uBAAI,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,kBAAkB,IACtC,QAAQ,CAAC,WAAW,IAAI,wBAAO,CAAC,gBAAgB,CAC5C,CACN;gCAGL,oBAAC,uBAAI,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,GAAG,IAC1B,CAAA,MAAA,QAAQ,CAAC,KAAK,0CAAE,WAAW,EAAE,KAAI,wBAAO,CAAC,eAAe,CACpD,CACG,CACN;wBACR,oBAAC,uBAAI,IACH,IAAI,EAAE,GAAG,EACT,KAAK,EAAE;gCACL,KAAK,EAAE,yBAAM,CAAC,uBAAuB;gCACrC,SAAS,EAAE,QAAQ;6BACpB,IAEA,QAAQ,CAAC,UAAU,KAAK,0BAAW,CAAC,eAAe;4BAClD,CAAC,CAAC,wBAAO,CAAC,gBAAgB;4BAC1B,CAAC,CAAC,wBAAO,CAAC,iBAAiB,CACxB,CACD,EAEV,MAAM,EACJ,oBAAC,0BAAO,IACN,OAAO,EACL,SAAS;4BACP,CAAC,CAAC,iBAAK,wBAAO,CAAC,sBAAsB,CAAE;4BACvC,CAAC,CAAC,iBAAK,wBAAO,CAAC,uBAAuB,CAAE,EAE5C,YAAY,EAAC,cAAc;wBAE3B,oBAAC,wBAAK,IACJ,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACnC,UAAU,EAAC,OAAO,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EACF,SAAS,CAAC,CAAC,CAAC,CACV,oBAAC,oCAAsB,IACrB,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAC5C,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,yBAAW,IACV,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAC5C,CACH,GAEH,CACM,GAEZ;gBACF,oBAAC,eAAK,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,YAAY,EAAC,UAAU,EAAC,UAAU;oBACzD,oBAAC,uBAAI,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,GAAG;wBAC1B,QAAQ,CAAC,YAAY;;wBAAE,+BAAM,CACzB;oBACP,oBAAC,uBAAI,IAAC,MAAM,EAAC,UAAU,EAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,kBAAkB;;wBACtD,QAAQ,CAAC,IAAI;;wBAAG,wBAAO,CAAC,OAAO,CAC7B,CACD;gBACR,oBAAC,eAAK,IAAC,GAAG,EAAC,GAAG;oBACZ,oBAAC,eAAK,IAAC,SAAS,EAAC,YAAY,EAAC,cAAc,EAAC,eAAe;wBAC1D,oBAAC,uBAAI,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,kBAAkB,IACtC,wBAAO,CAAC,eAAe,CACnB;wBACP,oBAAC,uBAAI,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,kBAAkB,EAAC,MAAM,EAAC,MAAM;4BACpD,CAAC,CAAC,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;gCACtD,CACD;oBACR,oBAAC,8BAAW,IACV,KAAK,EAAE,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,EAC5C,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EACxB,KAAK,EAAC,SAAS,GACf,CACI,CACF,CACH,CACN,CACJ,CAAC;AACJ,CAAC,CAAC;AA1IW,QAAA,cAAc,kBA0IzB"}