gd-sprest-bs 9.9.5 → 9.9.8

package/build/components/datetime/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateTimeControlType = exports.DateTime = void 0;
-require("flatpickr/dist/flatpickr.min.js");
+require("flatpickr");
 var gd_bs_1 = require("gd-bs");
 /**
  * Date/Time

package/build/components/field/index.js

@@ -476,8 +476,11 @@ var Field = function (props) {
             var noteField = props.field;
             // See if this is plain text
             if (noteField.RichText) {
+                var rtbProps = controlProps;
+                var fullToolbar = noteField.SchemaXml.match(/RichTextMode="FullHtml"/i) ? true : false;
                 // Set the properties
-                controlProps.type = richTextBox_1.RichTextBoxControlType;
+                rtbProps.type = richTextBox_1.RichTextBoxControlType;
+                rtbProps.toolbarType = fullToolbar ? richTextBox_1.RichTextBoxTypes.Full : richTextBox_1.RichTextBoxTypes.Basic;
             }
             else {
                 // Set the properties

package/build/components/index.js

@@ -15,6 +15,7 @@ core_1.Components["ListForm"] = listForm_1.ListForm;
 core_1.Components["ListFormDialog"] = listFormDialog_1.ListFormDialog;
 core_1.Components["PeoplePicker"] = peoplePicker_1.PeoplePicker;
 core_1.Components["RichTextBox"] = richTextBox_1.RichTextBox;
+core_1.Components["RichTextBoxTypes"] = richTextBox_1.RichTextBoxTypes;
 // Export the components
 var core_2 = require("./core");
 Object.defineProperty(exports, "Components", { enumerable: true, get: function () { return core_2.Components; } });

package/build/components/listForm/index.js

@@ -16,6 +16,7 @@ var gd_sprest_1 = require("gd-sprest");
 var core_1 = require("../core");
 var datetime_1 = require("../datetime");
 var field_1 = require("../field");
+var richTextBox_1 = require("../richTextBox");
 // Extend the list form
 exports.ListForm = gd_sprest_1.Helper.ListForm;
 // Method to get the fields to render
@@ -57,6 +58,7 @@ var getFieldsToRender = function (props) {
 var renderDisplay = function (fieldName, props) {
     var control = null;
     var field = props.info.fields[fieldName];
+    var isRichText = field.RichText;
     var value = props.info.fieldValuesAsText[fieldName] || "";
     var html = props.info.fieldValuesAsHtml[fieldName] || props.info.fieldValuesAsHtml[fieldName.replace(/\_/g, "_x005f_")] || "";
     // Ensure the field exists
@@ -131,8 +133,16 @@ var renderDisplay = function (fieldName, props) {
             }
             break;
         case gd_sprest_1.SPTypes.FieldType.Note:
-            // Set the type
-            control.type = core_1.Components.FormControlTypes.TextArea;
+            // See if this is a rich text field
+            if (isRichText) {
+                // Set the properties
+                control.toolbarType = richTextBox_1.RichTextBoxTypes.None;
+                control.type = richTextBox_1.RichTextBoxControlType;
+            }
+            else {
+                // Set the type
+                control.type = core_1.Components.FormControlTypes.TextArea;
+            }
             break;
         case gd_sprest_1.SPTypes.FieldType.URL:
             // Set the value
@@ -147,15 +157,18 @@ var renderDisplay = function (fieldName, props) {
     }
     // Detect html
     if (/<*>/g.test(html)) {
-        // Update the control to be read-only
-        control.type = core_1.Components.FormControlTypes.Readonly;
-        // Set the rendered event
-        control.onControlRendered = function (control) {
-            // Get the target element
-            var elTarget = control.el.querySelector("input") || control.el;
-            // Override the html rendered
-            elTarget.innerHTML = control.props.data;
-        };
+        // Ensure this isn't a rich text field
+        if (!isRichText) {
+            // Update the control to be read-only
+            control.type = core_1.Components.FormControlTypes.Readonly;
+            // Set the rendered event
+            control.onControlRendered = isRichText ? null : function (control) {
+                // Get the target element
+                var elTarget = control.el.querySelector("input") || control.el;
+                // Override the html rendered
+                elTarget.innerHTML = control.props.data;
+            };
+        }
     }
     // Else, detect xml
     else if (/&lt;/g.test(html)) {

package/build/components/peoplePicker/index.js

@@ -116,7 +116,7 @@ var PeoplePicker = function (props) {
                 addButton(userInfo);
             });
         }
-        else if (user) {
+        else if (typeof (user) === "string") {
             // Find the user by email
             (0, gd_sprest_1.Web)().ensureUser(user).execute(function (userInfo) {
                 // Add the button

package/build/components/richTextBox/index.js

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextBoxControlType = exports.RichTextBox = void 0;
+exports.RichTextBoxControlType = exports.RichTextBox = exports.RichTextBoxTypes = void 0;
 var gd_bs_1 = require("gd-bs");
 var Quill = require("quill");
-var toolbar_1 = require("./toolbar");
+var Toolbars = require("./toolbar");
+/**
+ * Toolbar Types
+ */
+var RichTextBoxTypes;
+(function (RichTextBoxTypes) {
+    RichTextBoxTypes[RichTextBoxTypes["None"] = 0] = "None";
+    RichTextBoxTypes[RichTextBoxTypes["Basic"] = 1] = "Basic";
+    RichTextBoxTypes[RichTextBoxTypes["Full"] = 2] = "Full";
+})(RichTextBoxTypes = exports.RichTextBoxTypes || (exports.RichTextBoxTypes = {}));
 /**
  * Rich TextBox
  */
@@ -23,14 +32,29 @@ var RichTextBox = function (props) {
     var options = props.options || {};
     options.modules = options.modules || {};
     options.placeholder ? options.placeholder = props.placeholder : null;
-    typeof (options.readOnly) === "boolean" ? options.readOnly = props.disabled : null;
+    options.readOnly == null && typeof (props.disabled) === "boolean" ? options.readOnly = props.disabled : null;
     typeof (options.theme) === "undefined" ? options.theme = "snow" : null;
     // See if are setting the default toolbar options
     if (options.modules.toolbar == null) {
-        // Set the default toolbar options
-        elToolbar.innerHTML = toolbar_1.DefaultToolbar;
-        // Set the container
-        options.modules.toolbar = elToolbar;
+        var showToolbar = true;
+        // Set the toolbar options
+        switch (props.toolbarType) {
+            // None
+            case RichTextBoxTypes.None:
+                elToolbar.innerHTML = "";
+                showToolbar = false;
+                break;
+            // Basic
+            case RichTextBoxTypes.Basic:
+                elToolbar.innerHTML = Toolbars.BasicToolbar;
+                break;
+            // Default - Full
+            default:
+                elToolbar.innerHTML = Toolbars.FullToolbar;
+                break;
+        }
+        // Set the container if we are showing the toolbar
+        showToolbar ? options.modules.toolbar = elToolbar : null;
     }
     else {
         // Set the container
@@ -62,13 +86,14 @@ var RichTextBox = function (props) {
     // Create the object
     var obj = {
         el: elRichTextBox,
+        elContents: quillObj.root,
         quillObj: quillObj,
-        getValue: function () { return quillObj.getText(); },
-        setValue: function (value) {
-            // Set the value
-            quillObj.setText(value);
-        }
+        getHtml: function () { return quillObj.root.innerHTML; },
+        getText: function () { return quillObj.getText(); },
+        setHtml: function (value) { quillObj.root.innerHTML = value || ""; }
     };
+    // Set the value
+    props.value ? obj.setHtml(props.value) : null;
     // Execute the assign to event
     props.assignTo ? props.assignTo(obj) : null;
     // Return the object
@@ -89,6 +114,8 @@ gd_bs_1.Components.CustomControls.registerType(exports.RichTextBoxControlType, f
             disabled: props.isDisabled || props.isReadonly,
             el: ctrl.el,
             options: props.options,
+            rows: props.rows,
+            toolbarType: props.toolbarType,
             placeholder: props.placeholder,
             value: props.value
         });
@@ -107,6 +134,6 @@ gd_bs_1.Components.CustomControls.registerType(exports.RichTextBoxControlType, f
     // Register a people picker
     props.onGetValue = function (ctrl) {
         // Return the value
-        return rtb ? rtb.getValue() : ctrl.value;
+        return rtb ? rtb.getHtml() : ctrl.value;
     };
 });

package/build/components/richTextBox/toolbar.js

@@ -1,4 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultToolbar = void 0;
-exports.DefaultToolbar = "\n<span class=\"ql-formats\">\n  <select class=\"ql-font\"></select>\n  <select class=\"ql-size\"></select>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-bold\"></button>\n  <button class=\"ql-italic\"></button>\n  <button class=\"ql-underline\"></button>\n  <button class=\"ql-strike\"></button>\n</span>\n<span class=\"ql-formats\">\n  <select class=\"ql-color\"></select>\n  <select class=\"ql-background\"></select>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-script\" value=\"sub\"></button>\n  <button class=\"ql-script\" value=\"super\"></button>\n</span>\n<span class=\"ql-formats\">\n  <select class=\"ql-header\"></select>\n  <button class=\"ql-blockquote\"></button>\n  <button class=\"ql-code-block\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-list\" value=\"ordered\"></button>\n  <button class=\"ql-list\" value=\"bullet\"></button>\n  <button class=\"ql-indent\" value=\"-1\"></button>\n  <button class=\"ql-indent\" value=\"+1\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-direction\" value=\"rtl\"></button>\n  <select class=\"ql-align\"></select>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-link\"></button>\n  <button class=\"ql-image\"></button>\n  <button class=\"ql-video\"></button>\n  <button class=\"ql-formula\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-clean\"></button>\n</span>";
+exports.FullToolbar = exports.BasicToolbar = void 0;
+// Basic Toolbar
+exports.BasicToolbar = "\n<span class=\"ql-formats\">\n  <button class=\"ql-bold\"></button>\n  <button class=\"ql-italic\"></button>\n  <button class=\"ql-underline\"></button>\n  <button class=\"ql-strike\"></button>\n  <button class=\"ql-link\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-list\" value=\"ordered\"></button>\n  <button class=\"ql-list\" value=\"bullet\"></button>\n  <button class=\"ql-indent\" value=\"-1\"></button>\n  <button class=\"ql-indent\" value=\"+1\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-direction\" value=\"rtl\"></button>\n  <select class=\"ql-align\"></select>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-clean\"></button>\n</span>";
+// Full Toolbar
+exports.FullToolbar = "\n<span class=\"ql-formats\">\n  <select class=\"ql-font\"></select>\n  <select class=\"ql-size\"></select>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-bold\"></button>\n  <button class=\"ql-italic\"></button>\n  <button class=\"ql-underline\"></button>\n  <button class=\"ql-strike\"></button>\n</span>\n<span class=\"ql-formats\">\n  <select class=\"ql-color\"></select>\n  <select class=\"ql-background\"></select>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-script\" value=\"sub\"></button>\n  <button class=\"ql-script\" value=\"super\"></button>\n</span>\n<span class=\"ql-formats\">\n  <select class=\"ql-header\"></select>\n  <button class=\"ql-blockquote\"></button>\n  <button class=\"ql-code-block\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-list\" value=\"ordered\"></button>\n  <button class=\"ql-list\" value=\"bullet\"></button>\n  <button class=\"ql-indent\" value=\"-1\"></button>\n  <button class=\"ql-indent\" value=\"+1\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-direction\" value=\"rtl\"></button>\n  <select class=\"ql-align\"></select>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-link\"></button>\n  <button class=\"ql-image\"></button>\n  <button class=\"ql-video\"></button>\n  <button class=\"ql-formula\"></button>\n</span>\n<span class=\"ql-formats\">\n  <button class=\"ql-clean\"></button>\n</span>";