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

package/lib-commonjs/controls/chartControl/PaletteGenerator.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaletteGenerator = void 0;
+var tslib_1 = require("tslib");
+var ChartControl_types_1 = require("./ChartControl.types");
+var ChartColorPalettes_1 = require("./ChartColorPalettes");
+var color_1 = tslib_1.__importDefault(require("color"));
+/**
+ * Generates color palettes matching those you get within Office charts
+ */
+var PaletteGenerator = /** @class */ (function () {
+    function PaletteGenerator() {
+    }
+    /**
+     * Returns an array of colors generated using one of the
+     * pre-defined Office palettes colors
+     * @param palette the pre-defined Office palette
+     * @param desiredLength the desired resulting array lenght
+     */
+    PaletteGenerator.GetPalette = function (palette, desiredLength) {
+        // Add default color scheme if it wasn't provided
+        var paletteColors = [];
+        switch (palette) {
+            case ChartControl_types_1.ChartPalette.OfficeColorful4:
+                paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL4, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeColorful3:
+                paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL3, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeColorful2:
+                paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL2, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic1:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC1, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic2:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC2, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic3:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC3, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic4:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC4, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic5:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC5, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic6:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC6, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic7:
+                paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_MONOCHROMATIC7, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic8:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC8, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic9:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC9, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic10:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC10, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic11:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC11, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic12:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC12, desiredLength);
+                break;
+            case ChartControl_types_1.ChartPalette.OfficeMonochromatic13:
+                paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC13, desiredLength);
+                break;
+            default:
+                paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL1, desiredLength);
+                break;
+        }
+        return paletteColors;
+    };
+    /**
+     * ChartJs doesn't give cycle through colors if the length of array of colors is smaller than
+     * the data length. This function repeats the array as many times as needed to make sure each
+     * item has a background color.
+     * @param array the array to make bigger
+     * @param desiredLength the desired length
+     */
+    PaletteGenerator.generateRepeatingPattern = function (array, desiredLength) {
+        if (desiredLength === 0) {
+            return [];
+        }
+        var a = array;
+        while (a.length * 2 <= desiredLength) {
+            a = a.concat(a);
+        }
+        if (a.length < desiredLength) {
+            a = a.concat(a.slice(0, desiredLength - a.length));
+        }
+        return a;
+    };
+    /**
+     * Some of the Office color palettes consist of
+     * a non-repeating gradient from one color to another,
+     * divided by the number of steps (or array elements)
+     * @param colorRange the colors to start and end with
+     * @param numSteps the number of gradient steps to generate
+     */
+    PaletteGenerator.generateNonRepeatingGradient = function (colorRange, numSteps) {
+        var startHex = colorRange[0];
+        var endHex = colorRange[colorRange.length - 1];
+        var startRGB = this._hexToRGB(startHex);
+        var endRGB = this._hexToRGB(endHex);
+        var colors = [];
+        var factorStep = 1 / (numSteps - 1);
+        for (var index = 0; index < numSteps; index++) {
+            var interpolatedColor = this._interpolateColors(startRGB, endRGB, factorStep * index);
+            var hexColor = this._rgbToHex(interpolatedColor);
+            colors.push(hexColor);
+        }
+        return colors;
+    };
+    /**
+    * Converts a color or array of colors to a semi-opaque version
+    * @param colors a single color, or array of colors to convert
+    * @param alphaValue a value between 0 and 1 indicating the opacity (alpha)
+    */
+    PaletteGenerator.alpha = function (colors, alphaValue) {
+        if (colors instanceof Array) {
+            return colors.map(function (color) {
+                return (0, color_1.default)(color).alpha(alphaValue).toString();
+            });
+        }
+        else {
+            return (0, color_1.default)(colors).alpha(alphaValue).toString();
+        }
+    };
+    /**
+     * Interpolates between two colors
+     * @param color1 start color
+     * @param color2 end color
+     * @param factor interpolation facotor
+     */
+    PaletteGenerator._interpolateColors = function (color1, color2, factor) {
+        if (arguments.length < 3) {
+            factor = 0.5;
+        }
+        var result = color1.slice();
+        for (var i = 0; i < 3; i++) {
+            result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
+        }
+        return result;
+    };
+    /**
+     * Converts a hex color to RGB
+     * @param hex the hex color string
+     */
+    PaletteGenerator._hexToRGB = function (hex) {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        // tslint:disable-next-line:no-bitwise
+        return result ? [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16)
+        ] : undefined;
+    };
+    /**
+     * Converts an RGB colour to a hex string
+     * @param rgb The RGC color
+     */
+    PaletteGenerator._rgbToHex = function (rgb) {
+        // tslint:disable-next-line:no-bitwise
+        return '#' + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
+    };
+    return PaletteGenerator;
+}());
+exports.PaletteGenerator = PaletteGenerator;
+//# sourceMappingURL=PaletteGenerator.js.map

package/lib-commonjs/controls/chartControl/PaletteGenerator.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/chartControl/index.ts"],"names":[],"mappings":";;;AAAA,+DAAqC;AACrC,yDAA+B;AAC/B,6DAAmC;AACnC,+DAAqC;AACrC,iEAAuC;AACvC,uEAA6C"}

package/lib-commonjs/controls/contentTypePicker/ContentTypePicker.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentTypePicker = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
+var Dropdown_1 = require("@fluentui/react/lib/Dropdown");
+var Spinner_1 = require("@fluentui/react/lib/Spinner");
+var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
+var SPServiceFactory_1 = require("../../services/SPServiceFactory");
+var EMPTY_CONTENTTYPE_KEY = 'NO_CONTENTTYPE_SELECTED';
+var ContentTypePicker = /** @class */ (function (_super) {
+    tslib_1.__extends(ContentTypePicker, _super);
+    function ContentTypePicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this._selectedContentTypes = null;
+        /**
+         * Fires when an item has been selected from the dropdown.
+         * @param event Event that has been fired.
+         * @param option The new selection.
+         * @param index Index of the selection.
+         */
+        _this.onChange = function (event, option, index) {
+            var _a = _this.props, multiSelect = _a.multiSelect, onSelectionChanged = _a.onSelectionChanged;
+            var contentTypes = _this.state.contentTypes;
+            if (multiSelect) {
+                var selectedContentTypes = _this._selectedContentTypes ? (0, cloneDeep_1.default)(_this._selectedContentTypes) : [];
+                if (option.selected) {
+                    selectedContentTypes.push(option.key.toString());
+                }
+                else {
+                    selectedContentTypes = selectedContentTypes.filter(function (ct) { return ct !== option.key; });
+                }
+                _this._selectedContentTypes = selectedContentTypes;
+            }
+            else {
+                _this._selectedContentTypes = option.key.toString();
+            }
+            if (onSelectionChanged) {
+                if (multiSelect) {
+                    onSelectionChanged((0, cloneDeep_1.default)(contentTypes.filter(function (ct) { return _this._selectedContentTypes.some(function (sct) { return ct.StringId === sct; }); })));
+                }
+                else {
+                    onSelectionChanged((0, cloneDeep_1.default)(contentTypes.find(function (ct) { return ct.StringId === _this._selectedContentTypes; })));
+                }
+            }
+        };
+        telemetry.track('ReactContentTypePicker');
+        _this.state = {
+            contentTypes: [],
+            loading: false,
+        };
+        return _this;
+    }
+    ContentTypePicker.prototype.componentDidMount = function () {
+        this.loadContentTypes().then(function () { }).catch(function () { });
+    };
+    ContentTypePicker.prototype.loadContentTypes = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _a, context, listId, includeHidden, includeReadOnly, orderBy, filter, group, webAbsoluteUrl, filterItems, service, results;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, context = _a.context, listId = _a.listId, includeHidden = _a.includeHidden, includeReadOnly = _a.includeReadOnly, orderBy = _a.orderBy, filter = _a.filter, group = _a.group, webAbsoluteUrl = _a.webAbsoluteUrl, filterItems = _a.filterItems;
+                        // Show the loading indicator and disable the dropdown
+                        this.setState({ loading: true });
+                        service = SPServiceFactory_1.SPServiceFactory.createService(context, true, 5000, webAbsoluteUrl);
+                        return [4 /*yield*/, service.getContentTypes({
+                                listId: listId,
+                                filter: filter,
+                                includeHidden: includeHidden,
+                                includeReadOnly: includeReadOnly,
+                                orderBy: orderBy,
+                                group: group,
+                            })];
+                    case 1:
+                        results = _b.sent();
+                        // Check if custom filter is specified
+                        if (filterItems) {
+                            results = filterItems(results);
+                        }
+                        // Hide the loading indicator and set the dropdown options
+                        this.setState({
+                            loading: false,
+                            contentTypes: results,
+                        });
+                        this.setSelectedContentTypes();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Set the currently selected content type(s).
+     */
+    ContentTypePicker.prototype.setSelectedContentTypes = function () {
+        this._selectedContentTypes = (0, cloneDeep_1.default)(this.props.selectedContentTypes);
+        this.setState({
+            selectedContentTypes: this._selectedContentTypes,
+        });
+    };
+    ContentTypePicker.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a = this.props, includeHidden = _a.includeHidden, includeReadOnly = _a.includeReadOnly, orderBy = _a.orderBy, webAbsoluteUrl = _a.webAbsoluteUrl, selectedContentTypes = _a.selectedContentTypes, listId = _a.listId;
+        if (prevProps.includeHidden !== includeHidden ||
+            prevProps.includeReadOnly !== includeReadOnly ||
+            prevProps.orderBy !== orderBy ||
+            prevProps.webAbsoluteUrl !== webAbsoluteUrl ||
+            prevProps.listId !== listId) {
+            this.loadContentTypes().then(function () { }).catch(function () { });
+        }
+        if (prevProps.selectedContentTypes !== selectedContentTypes) {
+            this.setSelectedContentTypes();
+        }
+    };
+    ContentTypePicker.prototype.render = function () {
+        var _a = this.state, loading = _a.loading, contentTypes = _a.contentTypes, selectedContentTypes = _a.selectedContentTypes;
+        var _b = this.props, className = _b.className, disabled = _b.disabled, multiSelect = _b.multiSelect, label = _b.label, placeholder = _b.placeholder, showBlankOption = _b.showBlankOption;
+        var options = contentTypes.map(function (f) { return ({
+            key: f.StringId,
+            text: f.Name,
+        }); });
+        if (showBlankOption && !multiSelect) {
+            // Provide empty option
+            options.unshift({
+                key: EMPTY_CONTENTTYPE_KEY,
+                text: '',
+            });
+        }
+        var dropdownProps = {
+            className: className,
+            options: options,
+            disabled: loading || disabled,
+            label: label,
+            placeholder: placeholder,
+            onChange: this.onChange,
+            styles: this.props.styles
+        };
+        if (multiSelect) {
+            dropdownProps.multiSelect = true;
+            dropdownProps.selectedKeys = selectedContentTypes;
+        }
+        else {
+            dropdownProps.selectedKey = selectedContentTypes;
+        }
+        return (React.createElement(React.Fragment, null,
+            loading && React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.xSmall }),
+            React.createElement(Dropdown_1.Dropdown, tslib_1.__assign({}, dropdownProps))));
+    };
+    return ContentTypePicker;
+}(React.Component));
+exports.ContentTypePicker = ContentTypePicker;
+//# sourceMappingURL=ContentTypePicker.js.map

package/lib-commonjs/controls/contentTypePicker/ContentTypePicker.js.map

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

package/lib-commonjs/controls/contentTypePicker/IContentTypePicker.js

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

package/lib-commonjs/controls/contentTypePicker/IContentTypePicker.js.map

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

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

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

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

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

package/lib-commonjs/controls/dashboard/Dashboard.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dashboard = Dashboard;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_northstar_1 = require("@fluentui/react-northstar");
+var DashboardWidget_1 = require("./widget/DashboardWidget");
+var DashboardTheme_1 = require("./DashboardTheme");
+var toolbar_1 = require("../toolbar");
+var Dashboard_module_scss_1 = tslib_1.__importDefault(require("./Dashboard.module.scss"));
+var telemetry_1 = require("../../common/telemetry");
+function Dashboard(_a) {
+    var widgets = _a.widgets, allowHidingWidget = _a.allowHidingWidget, onWidgetHiding = _a.onWidgetHiding, toolbarProps = _a.toolbarProps, WidgetWrapperComponent = _a.WidgetContentWrapper;
+    var _b = React.useState(widgets), stateWidgets = _b[0], setWidgets = _b[1];
+    var widgetRenderer = WidgetWrapperComponent
+        ? renderWidgetWithWrappedContent
+        : renderWidget;
+    (0, telemetry_1.useTelemetry)("ReactDashboard", {});
+    React.useEffect(function () {
+        setWidgets(widgets);
+    }, [widgets]);
+    return (React.createElement(react_northstar_1.ProviderConsumer, { render: function (globalTheme) {
+            if (!globalTheme || globalTheme.fontFaces.length === 0) {
+                globalTheme = react_northstar_1.teamsTheme;
+            }
+            return (React.createElement(DashboardTheme_1.DashboardTheme, { globalTheme: globalTheme },
+                toolbarProps && React.createElement(toolbar_1.Toolbar, tslib_1.__assign({}, toolbarProps)),
+                React.createElement(react_northstar_1.Box, { className: Dashboard_module_scss_1.default.dashboardBox }, stateWidgets && stateWidgets.map(widgetRenderer(globalTheme)))));
+        } }));
+    function renderWidgetWithWrappedContent(globalTheme // eslint-disable-line @typescript-eslint/no-explicit-any
+    ) {
+        return function (widget, key) {
+            return (React.createElement(WidgetWrapperComponent, null, renderWidget(globalTheme)(widget, key)));
+        };
+    }
+    function renderWidget(globalTheme // eslint-disable-line @typescript-eslint/no-explicit-any
+    ) {
+        return function (widget, key) { return (React.createElement(DashboardWidget_1.Widget, { key: key, widget: widget },
+            React.createElement(DashboardWidget_1.WidgetTitle, { widget: widget, allowHidingWidget: allowHidingWidget, onWidgetHiding: function (hidingWidget) {
+                    if (onWidgetHiding) {
+                        onWidgetHiding(hidingWidget);
+                    }
+                    if (!hidingWidget.controlOptions) {
+                        hidingWidget.controlOptions = {};
+                    }
+                    hidingWidget.controlOptions.isHidden = true;
+                    setWidgets(tslib_1.__spreadArray([], widgets, true));
+                }, globalTheme: globalTheme }),
+            React.createElement(DashboardWidget_1.WidgetBody, { widget: widget, siteVariables: globalTheme.siteVariables }),
+            widget.link && React.createElement(DashboardWidget_1.WidgetFooter, { widget: widget }))); };
+    }
+}
+//# sourceMappingURL=Dashboard.js.map

package/lib-commonjs/controls/dashboard/Dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../../../src/controls/dashboard/Dashboard.tsx"],"names":[],"mappings":";;AA8CA,8BAwEC;;AAtHD,mDAA+B;AAC/B,6DAKmC;AACnC,4DAKkC;AAClC,mDAAkD;AAClD,sCAAqC;AAGrC,0FAA6C;AAC7C,oDAAsD;AA4BtD,SAAgB,SAAS,CAAC,EAMR;QALhB,OAAO,aAAA,EACP,iBAAiB,uBAAA,EACjB,cAAc,oBAAA,EACd,YAAY,kBAAA,EACU,sBAAsB,0BAAA;IAEtC,IAAA,KAA6B,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAnD,YAAY,QAAA,EAAE,UAAU,QAA2B,CAAC;IAC3D,IAAM,cAAc,GAAG,sBAAsB;QAC3C,CAAC,CAAC,8BAA8B;QAChC,CAAC,CAAC,YAAY,CAAC;IAEjB,IAAA,wBAAY,EAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAEnC,KAAK,CAAC,SAAS,CAAC;QACd,UAAU,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,OAAO,CACL,oBAAC,kCAAqB,IACpB,MAAM,EAAE,UAAC,WAAW;YAClB,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACvD,WAAW,GAAG,4BAAU,CAAC;YAC3B,CAAC;YACD,OAAO,CACL,oBAAC,+BAAc,IAAC,WAAW,EAAE,WAAW;gBACrC,YAAY,IAAI,oBAAC,iBAAO,uBAAK,YAAY,EAAI;gBAC9C,oBAAC,qBAAG,IAAC,SAAS,EAAE,+BAAM,CAAC,YAAY,IAChC,YAAY,IAAI,YAAY,CAAC,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAC1D,CACS,CAClB,CAAC;QACJ,CAAC,GACD,CACH,CAAC;IAEF,SAAS,8BAA8B,CACrC,WAA+B,CAAC,yDAAyD;;QAEzF,OAAO,UAAC,MAAe,EAAE,GAAW;YAClC,OAAO,CACL,oBAAC,sBAAsB,QACpB,YAAY,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAChB,CAC1B,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;IAED,SAAS,YAAY,CACnB,WAA+B,CAAC,yDAAyD;;QAEzF,OAAO,UAAC,MAAe,EAAE,GAAW,IAAK,OAAA,CACvC,oBAAC,wBAAM,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM;YAC9B,oBAAC,6BAAW,IACV,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,UAAC,YAAqB;oBACpC,IAAI,cAAc,EAAE,CAAC;wBACnB,cAAc,CAAC,YAAY,CAAC,CAAC;oBAC/B,CAAC;oBACD,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;wBACjC,YAAY,CAAC,cAAc,GAAG,EAAE,CAAC;oBACnC,CAAC;oBACD,YAAY,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;oBAC5C,UAAU,2BAAK,OAAO,QAAE,CAAC;gBAC3B,CAAC,EACD,WAAW,EAAE,WAAW,GACxB;YACF,oBAAC,4BAAU,IAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC,aAAa,GAAI;YACvE,MAAM,CAAC,IAAI,IAAI,oBAAC,8BAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CACzC,CACV,EApBwC,CAoBxC,CAAC;IACJ,CAAC;AACH,CAAC"}

package/lib-commonjs/controls/dashboard/Dashboard.module.scss.css

@@ -0,0 +1,15 @@
+.dashboardBox {
+  display: "grid";
+  gap: 0.5rem;
+  grid-template: repeat(auto-fill, 26rem)/repeat(auto-fill, minmax(18.75rem, 1fr));
+  grid-auto-flow: dense;
+  grid-auto-rows: 26rem;
+  padding: 1rem 1rem 1.25rem;
+  min-width: 20rem;
+}
+
+@media (max-width: 986px) {
+  .dashboardBox {
+    grid-template: repeat(auto-fill, 25rem)/repeat(auto-fill, minmax(15.75rem, 1fr));
+  }
+}

package/lib-commonjs/controls/dashboard/DashboardCallout.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardCallout = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_northstar_1 = require("@fluentui/react-northstar");
+var getLocalTheme = function () {
+    return {
+        componentVariables: {
+            PopupContent: function (_a) {
+                var colorScheme = _a.colorScheme, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, shadowLevel1 = _a.shadowLevel1, shadowLevel4 = _a.shadowLevel4, theme = _a.theme;
+                return {
+                    backgroundColor: colorScheme.grey.background,
+                    backgroundColorHover: colorScheme.grey.background,
+                    boxShadow: "".concat(shadowLevel1, ", ").concat(shadowLevel4),
+                    borderRadius: borderRadius,
+                    borderSize: borderWidth,
+                    borderColor: theme === "teamsHighContrastTheme"
+                        ? colorScheme.grey.background2
+                        : "transparent",
+                    borderColorHover: theme === "teamsHighContrastTheme"
+                        ? colorScheme.grey.background2
+                        : "transparent",
+                };
+            },
+        },
+        componentStyles: {
+            Menu: {
+                root: {
+                    width: "100%",
+                    marginRight: "0",
+                    marginLeft: "0",
+                    border: "none",
+                    padding: "0 0.25rem",
+                },
+            },
+            MenuDivider: {
+                root: { margin: "0.25rem 0" },
+            },
+            PopupContent: {
+                content: {
+                    width: "12.5rem",
+                    padding: "0",
+                    boxShadow: " 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13)",
+                },
+            },
+        },
+    };
+};
+var DashboardCallout = function (_a) {
+    var open = _a.open, onOpenChange = _a.onOpenChange, menuProps = _a.menuProps, globalTheme = _a.globalTheme, widgetActionGroup = _a.widgetActionGroup, actionHandlers = _a.actionHandlers;
+    var theme = (0, react_northstar_1.mergeThemes)(globalTheme, getLocalTheme());
+    var getMenuItems = function () {
+        var result = []; // eslint-disable-line @typescript-eslint/no-explicit-any
+        if (widgetActionGroup) {
+            result.push.apply(result, widgetActionGroup.map(function (widgetAction) {
+                return tslib_1.__assign(tslib_1.__assign({}, widgetAction), { key: widgetAction.id, content: widgetAction.title });
+            }));
+        }
+        if (actionHandlers && !actionHandlers.hideHideButton) {
+            if (result.length > 0) {
+                result.push({ kind: "divider" });
+            }
+            result.push({
+                id: "hide_widget",
+                content: "Hide widget",
+                onClick: actionHandlers.onHide,
+                icon: React.createElement(react_northstar_1.EyeSlashIcon, null),
+            });
+        }
+        return result;
+    };
+    var items = getMenuItems();
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement(react_northstar_1.Provider, { theme: theme },
+        React.createElement(react_northstar_1.Popup, tslib_1.__assign({}, menuProps, { open: open, onOpenChange: onOpenChange, trigger: React.createElement(react_northstar_1.Button, { text: true, iconOnly: true, "aria-label": "More actions", icon: React.createElement(react_northstar_1.MoreIcon, null), styles: {
+                    margin: "0 -0.35rem",
+                } }), content: {
+                styles: { width: "12.5rem" },
+                content: (React.createElement(react_northstar_1.Menu, { items: items, vertical: true })),
+            }, trapFocus: {
+                firstFocusableSelector: ".extended-toolbar__filters-menu__tree [data-is-focusable=true]",
+            } }))));
+};
+exports.DashboardCallout = DashboardCallout;
+//# sourceMappingURL=DashboardCallout.js.map

package/lib-commonjs/controls/dashboard/DashboardCallout.js.map

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

package/lib-commonjs/controls/dashboard/DashboardTheme.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardTheme = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_northstar_1 = require("@fluentui/react-northstar");
+var getLocalTheme = function () {
+    return {
+        componentVariables: {
+            Card: function (_a) {
+                var colorScheme = _a.colorScheme, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, shadowLevel1 = _a.shadowLevel1, theme = _a.theme;
+                return {
+                    backgroundColor: colorScheme.grey.background,
+                    backgroundColorHover: colorScheme.grey.background,
+                    boxShadow: shadowLevel1,
+                    boxShadowHover: shadowLevel1,
+                    borderRadius: borderRadius,
+                    borderSize: borderWidth,
+                    borderColor: theme === "teamsHighContrastTheme"
+                        ? colorScheme.grey.backgroundFocus
+                        : "transparent",
+                    borderColorHover: theme === "teamsHighContrastTheme"
+                        ? colorScheme.grey.backgroundFocus
+                        : "transparent",
+                };
+            },
+            Menu: function (_a) {
+                var colorScheme = _a.colorScheme;
+                return ({
+                    color: colorScheme.default.foreground2,
+                });
+            },
+        },
+        componentStyles: {
+            Menu: {
+                root: {
+                    marginLeft: "-0.25rem",
+                    marginRight: "-0.25rem",
+                },
+            },
+        },
+    };
+};
+var DashboardTheme = function (_a) {
+    var globalTheme = _a.globalTheme, children = _a.children;
+    var theme = (0, react_northstar_1.mergeThemes)(globalTheme, getLocalTheme());
+    return (React.createElement(react_northstar_1.Provider, { theme: theme, style: {
+            minHeight: "100vh",
+            backgroundColor: theme.siteVariables.theme === "teamsHighContrastTheme"
+                ? theme.siteVariables.colorScheme.grey.background
+                : theme.siteVariables.colorScheme.grey.background2,
+        } }, children));
+};
+exports.DashboardTheme = DashboardTheme;
+//# sourceMappingURL=DashboardTheme.js.map

package/lib-commonjs/controls/dashboard/DashboardTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardTheme.js","sourceRoot":"","sources":["../../../src/controls/dashboard/DashboardTheme.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,6DAGmC;AASnC,IAAM,aAAa,GAAG;IACpB,OAAO;QACL,kBAAkB,EAAE;YAClB,IAAI,EAAE,UAAC,EAMmB;oBALxB,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,KAAK,WAAA;gBAEL,OAAO;oBACL,eAAe,EAAE,WAAW,CAAC,IAAI,CAAC,UAAU;oBAC5C,oBAAoB,EAAE,WAAW,CAAC,IAAI,CAAC,UAAU;oBACjD,SAAS,EAAE,YAAY;oBACvB,cAAc,EAAE,YAAY;oBAC5B,YAAY,cAAA;oBACZ,UAAU,EAAE,WAAW;oBACvB,WAAW,EACT,KAAK,KAAK,wBAAwB;wBAChC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe;wBAClC,CAAC,CAAC,aAAa;oBACnB,gBAAgB,EACd,KAAK,KAAK,wBAAwB;wBAChC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe;wBAClC,CAAC,CAAC,aAAa;iBACpB,CAAC;YACJ,CAAC;YACD,IAAI,EAAE,UAAC,EAAwC;oBAAtC,WAAW,iBAAA;gBAAgC,OAAA,CAAC;oBACnD,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,WAAW;iBACvC,CAAC;YAFkD,CAElD;SACH;QACD,eAAe,EAAE;YACf,IAAI,EAAE;gBACJ,IAAI,EAAE;oBACJ,UAAU,EAAE,UAAU;oBACtB,WAAW,EAAE,UAAU;iBACxB;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEK,IAAM,cAAc,GAAG,UAAC,EAGV;QAFnB,WAAW,iBAAA,EACX,QAAQ,cAAA;IAER,IAAM,KAAK,GAAG,IAAA,6BAAW,EAAC,WAAW,EAAE,aAAa,EAAE,CAAC,CAAC;IACxD,OAAO,CACL,oBAAC,0BAAqB,IACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;YACL,SAAS,EAAE,OAAO;YAClB,eAAe,EACb,KAAK,CAAC,aAAa,CAAC,KAAK,KAAK,wBAAwB;gBACpD,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU;gBACjD,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW;SACvD,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,cAAc,kBAmBzB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/dashboard/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,2DAAiC"}

package/lib-commonjs/controls/dashboard/widget/DashboardWidget.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./IWidget"), exports);
+tslib_1.__exportStar(require("./Widget"), exports);
+tslib_1.__exportStar(require("./WidgetBody"), exports);
+tslib_1.__exportStar(require("./WidgetFooter"), exports);
+tslib_1.__exportStar(require("./WidgetTitle"), exports);
+//# sourceMappingURL=DashboardWidget.js.map

package/lib-commonjs/controls/dashboard/widget/DashboardWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardWidget.js","sourceRoot":"","sources":["../../../../src/controls/dashboard/widget/DashboardWidget.ts"],"names":[],"mappings":";;;AAAA,oDAA0B;AAC1B,mDAAyB;AACzB,uDAA6B;AAC7B,yDAA+B;AAC/B,wDAA8B"}