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

package/lib-commonjs/controls/richText/RteColorPicker.js

@@ -0,0 +1,272 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var strings = tslib_1.__importStar(require("ControlStrings"));
+var RteColorPicker_module_scss_1 = tslib_1.__importDefault(require("./RteColorPicker.module.scss"));
+var SwatchColorPickerGroup_1 = tslib_1.__importDefault(require("./SwatchColorPickerGroup"));
+var Button_1 = require("@fluentui/react/lib/Button");
+var Tooltip_1 = require("@fluentui/react/lib/Tooltip");
+var Icon_1 = require("@fluentui/react/lib/Icon");
+var Callout_1 = require("@fluentui/react/lib/Callout");
+var ThemeColorHelper_1 = require("../../common/utilities/ThemeColorHelper");
+var RteColorPicker = /** @class */ (function (_super) {
+    tslib_1.__extends(RteColorPicker, _super);
+    function RteColorPicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.wrapperRef = undefined; // eslint-disable-line @typescript-eslint/no-explicit-any
+        /**
+         * Handle switch to default
+         */
+        _this.handleSwitchToDefault = function () {
+            _this.setState({ isCalloutVisible: !_this.state.isCalloutVisible });
+            _this.props.switchToDefaultColor();
+        };
+        /**
+         * Handle color change
+         */
+        _this.handleColorChanged = function (color) {
+            _this.setState({ isCalloutVisible: !_this.state.isCalloutVisible });
+            _this.props.onColorChanged(color);
+        };
+        /**
+         * Get swatch color picker group
+         */
+        _this.getSwatchColorPickerGroup = function (pickerGroup) {
+            var groupName = undefined;
+            switch (pickerGroup) {
+                case "themeColors":
+                    groupName = strings.ThemeColorsGroupName;
+                    break;
+                case "highlightColors":
+                    groupName = strings.HighlightColorsGroupName;
+                    break;
+                case "standardColors":
+                    groupName = strings.StandardColorsGroupName;
+                    break;
+                case "customColors":
+                    groupName = strings.CustomColorsGroupName;
+                    break;
+                default:
+                    groupName = strings.HighlightColorsGroupName;
+                    break;
+            }
+            var groupColors = [];
+            switch (pickerGroup) {
+                case "themeColors":
+                    groupColors = [
+                        {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorDarker),
+                            id: "#1c561c",
+                            label: strings.ThemeColorDarker
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorDark),
+                            id: "#267426",
+                            label: strings.ThemeColorDark
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorDarkAlt),
+                            id: "#2d8a2d",
+                            label: strings.ThemeColorDarkAlt
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorPrimary),
+                            id: "#339933",
+                            label: strings.ThemeColorPrimary
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorSecondary),
+                            id: "#44a544",
+                            label: strings.ThemeColorSecondary
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorTertiary),
+                            id: "#a6a6a6",
+                            label: strings.ThemeColorTertiary
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralSecondary),
+                            id: "#666666",
+                            label: strings.ThemeColorNeutralSecondary
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralPrimaryAlt),
+                            id: "#3c3c3c",
+                            label: strings.ThemeColorNeutralPrimaryAlt
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralPrimary),
+                            id: "#333333",
+                            label: strings.ThemeColorNeutralPrimary
+                        }, {
+                            color: ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RteColorPicker_module_scss_1.default.ThemeColorNeutralDark),
+                            id: "#212121",
+                            label: strings.ThemeColorNeutralDark
+                        }
+                    ];
+                    break;
+                case "highlightColors":
+                    groupColors = [
+                        {
+                            color: "#FFFF00",
+                            id: "#FFFF00",
+                            label: strings.HighlightColorYellow
+                        },
+                        {
+                            color: "#00FF00",
+                            id: "#00FF00",
+                            label: strings.HighlightColorGreen
+                        },
+                        {
+                            color: "#00FFFF",
+                            id: "#00FFFF",
+                            label: strings.HighlightColorAqua
+                        },
+                        {
+                            color: "#FF00FF",
+                            id: "#FF00FF",
+                            label: strings.HighlightColorMagenta
+                        },
+                        {
+                            color: "#0000FF",
+                            id: "#0000FF",
+                            label: strings.HighlightColorBlue
+                        },
+                        {
+                            color: "#FF0000",
+                            id: "#FF0000",
+                            label: strings.HighlightColorRed
+                        },
+                        {
+                            color: "#000080",
+                            id: "#000080",
+                            label: strings.HighlightColorDarkblue
+                        },
+                        {
+                            color: "#008080",
+                            id: "#008080",
+                            label: strings.HighlightColorTeal
+                        },
+                        {
+                            color: "#008000",
+                            id: "#008000",
+                            label: strings.HighlightColorDarkgreen
+                        },
+                        {
+                            color: "#800080",
+                            id: "#800080",
+                            label: strings.HighlightColorPurple
+                        },
+                        {
+                            color: "#800000",
+                            id: "#800000",
+                            label: strings.HighlightColorMaroon
+                        },
+                        {
+                            color: "#808000",
+                            id: "#808000",
+                            label: strings.HighlightColorGold
+                        },
+                        {
+                            color: "#808080",
+                            id: "#808080",
+                            label: strings.HighlightColorDarkgrey
+                        },
+                        {
+                            color: "#C0C0C0",
+                            id: "#C0C0C0",
+                            label: strings.HighlightColorGrey
+                        },
+                        {
+                            color: "#000000",
+                            id: "#000000",
+                            label: strings.HighlightColorBlack
+                        }
+                    ];
+                    break;
+                case 'customColors':
+                    groupColors = _this.props.customColors;
+                    break;
+                default:
+                    groupColors = [
+                        {
+                            color: "#a80000",
+                            id: "#a80000",
+                            label: strings.StandardColorDarkred
+                        },
+                        {
+                            color: "#e81123",
+                            id: "#e81123",
+                            label: strings.StandardColorRed
+                        },
+                        {
+                            color: "#ffb900",
+                            id: "#ffb900",
+                            label: strings.StandardColorOrange
+                        },
+                        {
+                            color: "#fff100",
+                            id: "#fff100",
+                            label: strings.StandardColorYellow
+                        },
+                        {
+                            color: "#bad80a",
+                            id: "#bad80a",
+                            label: strings.StandardColorLightgreen
+                        },
+                        {
+                            color: "#107c10",
+                            id: "#107c10",
+                            label: strings.StandardColorGreen
+                        },
+                        {
+                            color: "#00bcf2",
+                            id: "#00bcf2",
+                            label: strings.StandardColorLightblue
+                        },
+                        {
+                            color: "#0078d4",
+                            id: "#0078d4",
+                            label: strings.StandardColorBlue
+                        },
+                        {
+                            color: "#002050",
+                            id: "#002050",
+                            label: strings.StandardColorDarkblue
+                        },
+                        {
+                            color: "#5c2d91",
+                            id: "#5c2d91",
+                            label: strings.StandardColorPurple
+                        }
+                    ];
+                    break;
+            }
+            return (React.createElement(SwatchColorPickerGroup_1.default, { key: pickerGroup, groupText: groupName, onColorChanged: _this.handleColorChanged, groupColors: groupColors, selectedColor: _this.props.selectedColor }));
+        };
+        _this.state = {
+            isCalloutVisible: false
+        };
+        return _this;
+    }
+    /**
+     * Default React render method
+     */
+    RteColorPicker.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, buttonLabel = _a.buttonLabel, defaultButtonLabel = _a.defaultButtonLabel, fillThemeColor = _a.fillThemeColor, id = _a.id, previewColor = _a.previewColor;
+        return (React.createElement("div", null,
+            React.createElement("div", { ref: function (ref) { _this.wrapperRef = ref; } },
+                React.createElement(Tooltip_1.TooltipHost, { content: buttonLabel, id: id, calloutProps: { gapSpace: 0 } },
+                    React.createElement(Button_1.DefaultButton, { className: RteColorPicker_module_scss_1.default.colorPickerButton, "aria-describedby": id, onClick: function () { return _this.handleColorChanged(previewColor); } },
+                        React.createElement("svg", { className: "".concat(RteColorPicker_module_scss_1.default.previewSvg, " ").concat((previewColor === "rgba(0, 0, 0, 0)" || previewColor === "#ffffff") ? RteColorPicker_module_scss_1.default.border : ""), fill: previewColor, viewBox: "0 0 20 20" },
+                            React.createElement("rect", { className: RteColorPicker_module_scss_1.default.previewRectangle, width: "100%", height: "100%" })),
+                        React.createElement("div", { className: RteColorPicker_module_scss_1.default.buttonLabel }, buttonLabel),
+                        React.createElement(Icon_1.Icon, { iconName: "CaretDownSolid8", className: RteColorPicker_module_scss_1.default.previewIcon })))),
+            React.createElement(Callout_1.Callout, { isBeakVisible: false, directionalHint: 4, className: RteColorPicker_module_scss_1.default.pickerCallout, setInitialFocus: true, gapSpace: 0, role: "alertdialog", hidden: !this.state.isCalloutVisible, target: this.wrapperRef, onDismiss: function () { return _this.setState({ isCalloutVisible: false }); } },
+                React.createElement(Tooltip_1.TooltipHost, { content: defaultButtonLabel, id: "".concat(id, "DefaultButton"), calloutProps: { gapSpace: 0 } },
+                    React.createElement(Button_1.DefaultButton, { className: RteColorPicker_module_scss_1.default.colorPickerButton, "aria-describedby": "".concat(id, "DefaultButton"), onClick: this.handleSwitchToDefault },
+                        React.createElement("svg", { className: "".concat(RteColorPicker_module_scss_1.default.previewSvg, " ").concat(RteColorPicker_module_scss_1.default.defaultSvg, " ").concat(fillThemeColor ? RteColorPicker_module_scss_1.default.fillThemeColor : RteColorPicker_module_scss_1.default.fillDefaultColor, " ").concat(fillThemeColor ? "" : RteColorPicker_module_scss_1.default.border), viewBox: "0 0 20 20" },
+                            React.createElement("rect", { className: RteColorPicker_module_scss_1.default.previewRectangle, width: "100%", height: "100%" })),
+                        React.createElement("div", { className: RteColorPicker_module_scss_1.default.buttonLabel }, defaultButtonLabel))),
+                this.props.colorPickerGroups.map(function (cpg) {
+                    return (_this.getSwatchColorPickerGroup(cpg));
+                }))));
+    };
+    return RteColorPicker;
+}(React.Component));
+exports.default = RteColorPicker;
+//# sourceMappingURL=RteColorPicker.js.map

package/lib-commonjs/controls/richText/RteColorPicker.js.map

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

package/lib-commonjs/controls/richText/RteColorPicker.module.scss.css

@@ -0,0 +1,146 @@
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+:export {
+  ThemeColorDarker: "[theme:themeDarker, default:#004578]";
+  ThemeColorDark: "[theme:themeDark, default:#005a9e]";
+  ThemeColorDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";
+  ThemeColorPrimary: "[theme:themePrimary, default:#0078d4]";
+  ThemeColorSecondary: "[theme:themeSecondary, default:#2b88d8]";
+  ThemeColorTertiary: "[theme:neutralTertiary, default:#a19f9d]";
+  ThemeColorNeutralSecondary: "[theme:neutralSecondary, default:#605e5c]";
+  ThemeColorNeutralPrimaryAlt: "[theme:neutralPrimaryAlt, default:#3b3a39]";
+  ThemeColorNeutralPrimary: "[theme:neutralPrimary, default:#323130]";
+  ThemeColorNeutralDark: "[theme:neutralDark, default:#201f1e]";
+}
+
+.colorPickerButton {
+  background: 0 0;
+  padding-left: 4px;
+  padding-right: 12px;
+  background-color: "[theme: white, default: #ffffff]";
+}
+
+.previewSvg {
+  width: 20px;
+  height: 20px;
+}
+.previewSvg.border {
+  border: 1px solid "[theme: black, default: #000000]";
+}
+
+.previewRectangle {
+  width: 100%;
+  height: 100%;
+}
+
+.buttonLabel {
+  padding-left: 10px;
+}
+
+.previewIcon {
+  padding-left: 7px;
+  font-size: 7px;
+  padding-top: 8px;
+}
+
+.pickerCallout {
+  width: 166px;
+}
+.pickerCallout:global(.ms-Callout-main) {
+  background-color: "[theme:white, default: #ffffff]";
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+
+.defaultSvg {
+  padding: 2px;
+}
+.defaultSvg.fillThemeColor {
+  fill: #333;
+  border: none;
+}
+.defaultSvg.border {
+  border: 1px solid "[theme:black, default: #000000]";
+}
+.defaultSvg.fillDefaultColor {
+  fill: #fff;
+}
+
+.pickerLabel {
+  display: block;
+  margin-left: 6px;
+}
+
+.focusedContainer {
+  clear: both;
+  display: block;
+  min-width: 180px;
+}
+
+.tableRoot {
+  padding-top: 2px;
+  padding-right: 2px;
+  padding-bottom: 2px;
+  padding-left: 2px;
+  outline: none;
+  display: table;
+  border-collapse: separate;
+  border-spacing: 2px;
+  border-color: grey;
+}
+
+.tableCell {
+  padding-top: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  padding-left: 0px;
+}
+
+.colorCell {
+  position: relative;
+  font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  vertical-align: top;
+  padding-top: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  padding-left: 0px;
+  height: 40px;
+  color: rgb(51, 51, 51);
+  user-select: none;
+  outline: transparent;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-image: initial;
+  text-decoration: none;
+  border-radius: 0px;
+  overflow: visible;
+  background: transparent;
+}
+.colorCell .svg {
+  width: 20px;
+  height: 20px;
+  padding-top: 4px;
+  padding-right: 4px;
+  padding-bottom: 4px;
+  padding-left: 4px;
+  box-sizing: content-box;
+}
+.colorCell .svg:hover, .colorCell .svg.selected {
+  box-shadow: rgb(150, 150, 150) 0px 0px 0px 1px;
+  width: 12px;
+  height: 12px;
+  border-width: 4px;
+  border-style: solid;
+  border-image: initial;
+  border-color: rgb(200, 200, 200);
+}

package/lib-commonjs/controls/richText/RteColorPicker.types.js

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

package/lib-commonjs/controls/richText/RteColorPicker.types.js.map

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

package/lib-commonjs/controls/richText/SwatchColorPickerGroup.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var RteColorPicker_module_scss_1 = tslib_1.__importDefault(require("./RteColorPicker.module.scss"));
+var Label_1 = require("@fluentui/react/lib/Label");
+var FocusZone_1 = require("@fluentui/react/lib/FocusZone");
+var Button_1 = require("@fluentui/react/lib/Button");
+var sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
+var SwatchColorPickerGroup = /** @class */ (function (_super) {
+    tslib_1.__extends(SwatchColorPickerGroup, _super);
+    function SwatchColorPickerGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SwatchColorPickerGroup.prototype.render = function () {
+        var _this = this;
+        var colorRows = (0, sp_lodash_subset_1.chunk)(this.props.groupColors, 5);
+        return (React.createElement("div", null,
+            React.createElement(Label_1.Label, { htmlFor: this.props.groupText, className: RteColorPicker_module_scss_1.default.pickerLabel }, this.props.groupText),
+            React.createElement("div", { key: this.props.groupText },
+                React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal, handleTabKey: FocusZone_1.FocusZoneTabbableElements.all, isCircularNavigation: true, className: RteColorPicker_module_scss_1.default.focusedContainer },
+                    React.createElement("table", { className: RteColorPicker_module_scss_1.default.tableRoot },
+                        React.createElement("tbody", null, colorRows.map(function (cr, rowIndex) {
+                            return (React.createElement("tr", { role: "row", key: rowIndex }, cr.map(function (gc, index) {
+                                var _a;
+                                return (React.createElement("td", { role: "presentation", className: RteColorPicker_module_scss_1.default.tableCell, key: gc.id },
+                                    React.createElement(Button_1.ActionButton, { className: RteColorPicker_module_scss_1.default.colorCell, role: "gridCell", title: gc.label, "aria-label": gc.label, "aria-selected": _this.props.selectedColor === gc.color, "data-index": index, "data-is-focusable": true, id: "".concat(_this.props.groupText, "-").concat(gc.id, "-").concat(index), onClick: function () { return _this.handleColorChanged(gc.color); } },
+                                        React.createElement("svg", { className: "".concat(RteColorPicker_module_scss_1.default.svg, " ").concat(((_a = _this.props.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === gc.color.toUpperCase() ? RteColorPicker_module_scss_1.default.selected : ""), viewBox: "0 0 20 20", fill: gc.color, focusable: "false" },
+                                            React.createElement("rect", { width: "100%", height: "100%" })))));
+                            })));
+                        })))))));
+    };
+    SwatchColorPickerGroup.prototype.handleColorChanged = function (color) {
+        this.props.onColorChanged(color);
+    };
+    return SwatchColorPickerGroup;
+}(React.Component));
+exports.default = SwatchColorPickerGroup;
+//# sourceMappingURL=SwatchColorPickerGroup.js.map

package/lib-commonjs/controls/richText/SwatchColorPickerGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchColorPickerGroup.js","sourceRoot":"","sources":["../../../src/controls/richText/SwatchColorPickerGroup.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAC/B,oGAAkD;AAClD,mDAAkD;AAElD,2DAAyG;AACzG,qDAA0D;AAC1D,gEAAoD;AAEpD;IAAoD,kDAA2E;IAA/H;;IA0DA,CAAC;IAzDQ,uCAAM,GAAb;QAAA,iBAoDC;QAnDC,IAAM,SAAS,GAAG,IAAA,wBAAK,EAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QACnD,OAAO,CACL;YACE,oBAAC,aAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC7B,SAAS,EAAE,oCAAM,CAAC,WAAW,IAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAS;YACpE,6BAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;gBAC5B,oBAAC,qBAAS,IAAC,SAAS,EAAE,8BAAkB,CAAC,UAAU,EACxC,YAAY,EAAE,qCAAyB,CAAC,GAAG,EAC3C,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAE,oCAAM,CAAC,gBAAgB;oBAC3C,+BAAO,SAAS,EAAE,oCAAM,CAAC,SAAS;wBAChC,mCAEI,SAAS,CAAC,GAAG,CAAC,UAAC,EAAkB,EAAE,QAAgB;4BACjD,OAAO,CACL,4BAAI,IAAI,EAAC,KAAK,EAAC,GAAG,EAAE,QAAQ,IAExB,EAAE,CAAC,GAAG,CAAC,UAAC,EAAgB,EAAE,KAAa;;gCACrC,OAAO,CACL,4BAAI,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE;oCAC7D,oBAAC,qBAAY,IAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,EAC3B,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,EAAE,CAAC,KAAK,gBACH,EAAE,CAAC,KAAK,mBACL,KAAI,CAAC,KAAK,CAAC,aAAa,KAAK,EAAE,CAAC,KAAK,gBACxC,KAAK,uBACE,IAAI,EACvB,EAAE,EAAE,UAAG,KAAI,CAAC,KAAK,CAAC,SAAS,cAAI,EAAE,CAAC,EAAE,cAAI,KAAK,CAAE,EAC/C,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAjC,CAAiC;wCAC5D,6BAAK,SAAS,EAAE,UAAG,oCAAM,CAAC,GAAG,cAAI,CAAA,MAAA,KAAI,CAAC,KAAK,CAAC,aAAa,0CAAE,WAAW,EAAE,MAAK,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,oCAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAE,EACxH,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,EAAC,OAAO;4CACnC,8BAAM,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CAC/B,CACO,CACZ,CACN,CAAC;4BACJ,CAAC,CAAC,CAED,CACN,CAAC;wBACJ,CAAC,CAAC,CAGE,CACF,CACE,CAER,CACF,CACP,CAAC;IACJ,CAAC;IAEO,mDAAkB,GAA1B,UAA2B,KAAa;QACtC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IACH,6BAAC;AAAD,CAAC,AA1DD,CAAoD,KAAK,CAAC,SAAS,GA0DlE"}

package/lib-commonjs/controls/richText/SwatchColorPickerGroup.types.js

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

package/lib-commonjs/controls/richText/SwatchColorPickerGroup.types.js.map

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

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

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

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

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

package/lib-commonjs/controls/securityTrimmedControl/ISecurityTrimmedControlProps.js

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

package/lib-commonjs/controls/securityTrimmedControl/ISecurityTrimmedControlProps.js.map

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

package/lib-commonjs/controls/securityTrimmedControl/ISecurityTrimmedControlState.js

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

package/lib-commonjs/controls/securityTrimmedControl/ISecurityTrimmedControlState.js.map

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

package/lib-commonjs/controls/securityTrimmedControl/PermissionLevel.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermissionLevel = void 0;
+/**
+ * Permission level enum
+ */
+var PermissionLevel;
+(function (PermissionLevel) {
+    /**
+     * Checks permissions on the current web
+     */
+    PermissionLevel[PermissionLevel["currentWeb"] = 1] = "currentWeb";
+    /**
+     * Checks permissions in the current loaded list
+     */
+    PermissionLevel[PermissionLevel["currentList"] = 2] = "currentList";
+    /**
+     * Checks permissions on the specified site URL
+     */
+    PermissionLevel[PermissionLevel["remoteWeb"] = 3] = "remoteWeb";
+    /**
+     * Checks permissions on the specified list/library URL in combination with the site URL
+     */
+    PermissionLevel[PermissionLevel["remoteListOrLib"] = 4] = "remoteListOrLib";
+    /**
+     * Check permissions on a specific item in a list/library
+     */
+    PermissionLevel[PermissionLevel["remoteListItem"] = 5] = "remoteListItem";
+    /**
+     * Check permissions on a specific folder
+     */
+    PermissionLevel[PermissionLevel["remoteFolder"] = 6] = "remoteFolder";
+})(PermissionLevel || (exports.PermissionLevel = PermissionLevel = {}));
+//# sourceMappingURL=PermissionLevel.js.map

package/lib-commonjs/controls/securityTrimmedControl/PermissionLevel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionLevel.js","sourceRoot":"","sources":["../../../src/controls/securityTrimmedControl/PermissionLevel.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,IAAY,eAyBX;AAzBD,WAAY,eAAe;IACzB;;OAEG;IACH,iEAAc,CAAA;IACd;;OAEG;IACH,mEAAW,CAAA;IACX;;OAEG;IACH,+DAAS,CAAA;IACT;;OAEG;IACH,2EAAe,CAAA;IACf;;OAEG;IACH,yEAAc,CAAA;IACd;;OAEG;IACH,qEAAY,CAAA;AACd,CAAC,EAzBW,eAAe,+BAAf,eAAe,QAyB1B"}