gd-sprest-bs 8.7.3 → 8.7.7

package/build/components/peoplePicker/index.js

@@ -119,44 +119,48 @@ exports.PeoplePicker = function (props) {
                 if (search.ClientPeoplePickerSearchUser.length == 0) {
                     // Add a message
                     el.innerHTML += '<h6 class="dropdown-header">No results were found...</h6>';
-                    return;
                 }
-                // Parse the users
-                for (var i = 0; i < search.ClientPeoplePickerSearchUser.length; i++) {
-                    var exists = false;
-                    var user = search.ClientPeoplePickerSearchUser[i];
-                    // Save the user
-                    _users.push(user);
-                    // Parse the selected users
-                    for (var j = 0; j < elSelectedUsers.children.length; j++) {
-                        var userInfo = JSON.parse(elSelectedUsers.children[j].getAttribute("data-user"));
-                        // See if this user is already selected
-                        if (exists = user.Key == userInfo.Key) {
-                            break;
+                else {
+                    // Parse the users
+                    for (var i = 0; i < search.ClientPeoplePickerSearchUser.length; i++) {
+                        var exists = false;
+                        var user = search.ClientPeoplePickerSearchUser[i];
+                        // Save the user
+                        _users.push(user);
+                        // Parse the selected users
+                        for (var j = 0; j < elSelectedUsers.children.length; j++) {
+                            var userInfo = JSON.parse(elSelectedUsers.children[j].getAttribute("data-user"));
+                            // See if this user is already selected
+                            if (exists = user.Key == userInfo.Key) {
+                                break;
+                            }
                         }
+                        // Ensure the user isn't already selected
+                        if (exists) {
+                            continue;
+                        }
+                        // Create the item
+                        var elItem = document.createElement("a");
+                        elItem.className = "dropdown-item";
+                        elItem.href = "#";
+                        elItem.innerHTML = user.DisplayText;
+                        elItem.setAttribute("data-user", JSON.stringify(user));
+                        el.appendChild(elItem);
+                        // Set the click event
+                        elItem.addEventListener("click", function (ev) {
+                            var userInfo = ev.currentTarget.getAttribute("data-user");
+                            // Add the user
+                            addUser(userInfo);
+                            // Hide the menu
+                            _menu.hide();
+                            // Clear the search text
+                            elTextbox.querySelector("input").value = "";
+                        });
                     }
-                    // Ensure the user isn't already selected
-                    if (exists) {
-                        continue;
-                    }
-                    // Create the item
-                    var elItem = document.createElement("a");
-                    elItem.className = "dropdown-item";
-                    elItem.href = "#";
-                    elItem.innerHTML = user.DisplayText;
-                    elItem.setAttribute("data-user", JSON.stringify(user));
-                    el.appendChild(elItem);
-                    // Set the click event
-                    elItem.addEventListener("click", function (ev) {
-                        var userInfo = ev.currentTarget.getAttribute("data-user");
-                        // Add the user
-                        addUser(userInfo);
-                        // Hide the menu
-                        _menu.hide();
-                        // Clear the search text
-                        elTextbox.querySelector("input").value = "";
-                    });
                 }
+                // Refresh the popover
+                _menu.hide();
+                _menu.show();
             });
         }
     };
@@ -178,6 +182,7 @@ exports.PeoplePicker = function (props) {
     var elMenu = document.createElement("div");
     elMenu.className = "dropdown-menu";
     elMenu.innerHTML = '<h6 class="dropdown-header">Search requires 3+ characters</h6>';
+    elMenu.style.border = "0";
     // Add the selected users
     var elSelectedUsers = document.createElement("div");
     elSelectedUsers.style.position = "relative";
@@ -186,6 +191,7 @@ exports.PeoplePicker = function (props) {
     var elTextbox = core_1.Components.InputGroup({
         placeholder: props.placeholder == null ? "Search" : props.placeholder,
         onChange: function (searchText) {
+            var currentHTML = elMenu.innerHTML;
             // See if a value exists
             if (searchText) {
                 // Set the filter text
@@ -208,6 +214,12 @@ exports.PeoplePicker = function (props) {
                 // Set the header
                 elMenu.innerHTML = '<h6 class="dropdown-header">Search requires 3+ characters</h6>';
             }
+            // See if a refresh is required
+            if (currentHTML != elMenu.innerHTML) {
+                // Refresh the popover
+                _menu.hide();
+                _menu.show();
+            }
         }
     }).el;
     props.readOnly ? elTextbox.classList.add("d-none") : null;

package/dist/gd-sprest-bs-icons.js

@@ -709,7 +709,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.PeoplePickerControlType = exports.PeoplePicker = void 0;\n\nvar gd_sprest_1 = __webpack_require__(/*! gd-sprest */ \"./node_modules/.pnpm/gd-sprest@6.7.0/node_modules/gd-sprest/build/index.js\");\n\nvar core_1 = __webpack_require__(/*! ../core */ \"./build/components/core.js\");\n/**\r\n * People Picker\r\n */\n\n\nexports.PeoplePicker = function (props) {\n  var _filterText = null;\n  var _menu = null;\n  var _users = []; // Method to add a user\n\n  var addUser = function addUser(userInfo) {\n    var user = typeof userInfo === \"string\" ? JSON.parse(userInfo) : userInfo; // Adds the button\n\n    var addButton = function addButton(userInfo) {\n      // See if the picker is read only\n      if (props.readOnly) {\n        // Render a button\n        core_1.Components.Button({\n          el: elSelectedUsers,\n          className: \"mr-1 mb-1\",\n          isSmall: true,\n          text: userInfo.Title\n        });\n      } else {\n        // Render a button\n        var btn_1 = core_1.Components.Button({\n          data: userInfo,\n          el: elSelectedUsers,\n          className: \"mr-1 mb-1\",\n          isSmall: true,\n          text: userInfo.Title,\n          badge: {\n            className: \"ml-2\",\n            content: \"&times;\",\n            isPill: true,\n            type: core_1.Components.BadgeTypes.Light,\n            onClick: function onClick() {\n              // Remove the button\n              elSelectedUsers.removeChild(btn_1.el); // Call the event\n\n              props.onChange ? props.onChange(obj.getValue()) : null;\n            }\n          }\n        }); // Set the data attribute\n\n        btn_1.el.setAttribute(\"data-user\", JSON.stringify(userInfo.stringify()));\n      } // Call the event\n\n\n      props.onChange ? props.onChange(obj.getValue()) : null;\n    }; // See if we are allowing multiple users\n\n\n    var allowMultple = typeof props.multi == \"boolean\" ? props.multi : false;\n\n    if (!allowMultple) {\n      // Remove existing users\n      while (elSelectedUsers.firstChild) {\n        elSelectedUsers.removeChild(elSelectedUsers.firstChild);\n      }\n    } // Ensure this is a user object\n\n\n    if (user.EntityData) {\n      // Ensure the group or user id is set\n      if (user.EntityData.SPGroupID) {\n        // Find the user by id\n        gd_sprest_1.Web().SiteGroups(parseInt(user.EntityData.SPGroupID)).execute(function (group) {\n          // Add the button\n          addButton(group);\n        });\n      } else if (user.EntityData.SPUserID) {\n        // Find the user by id\n        gd_sprest_1.Web().getUserById(parseInt(user.EntityData.SPUserID)).execute(function (userInfo) {\n          // Add the button\n          addButton(userInfo);\n        });\n      } else {\n        // Find the user\n        gd_sprest_1.Web().ensureUser(user.Key).execute(function (userInfo) {\n          // Add the button\n          addButton(userInfo);\n        }, addButton);\n      }\n    } else {\n      // Find the user by id\n      gd_sprest_1.Web().getUserById(user).execute(function (userInfo) {\n        // Add the button\n        addButton(userInfo);\n      });\n    }\n  }; // Method to search for the users\n\n\n  var searchUsers = function searchUsers(el, searchText, searchAll, spGroupId) {\n    if (searchAll === void 0) {\n      searchAll = true;\n    } // Ensure 3 characters exist\n\n\n    if (_filterText.length > 2) {\n      // Search for the user\n      gd_sprest_1.PeoplePicker().clientPeoplePickerSearchUser({\n        MaximumEntitySuggestions: props.maxResults || 25,\n        PrincipalSource: searchAll ? gd_sprest_1.SPTypes.PrincipalSources.All : gd_sprest_1.SPTypes.PrincipalSources.UserInfoList,\n        PrincipalType: props.allowGroups ? gd_sprest_1.SPTypes.PrincipalTypes.All : gd_sprest_1.SPTypes.PrincipalTypes.User,\n        QueryString: _filterText,\n        SharePointGroupID: spGroupId\n      }).execute(function (search) {\n        // Ensure the search text matches\n        if (_filterText != searchText) {\n          return;\n        } // Clear the users results\n\n\n        _users = []; // Set the menu header\n\n        el.innerHTML = '<h6 class=\"dropdown-header\">Search Results for \"' + searchText + '\"</h6>';\n        el.innerHTML += '<div class=\"dropdown-divider\"></div>'; // See if no users were found\n\n        if (search.ClientPeoplePickerSearchUser.length == 0) {\n          // Add a message\n          el.innerHTML += '<h6 class=\"dropdown-header\">No results were found...</h6>';\n          return;\n        } // Parse the users\n\n\n        for (var i = 0; i < search.ClientPeoplePickerSearchUser.length; i++) {\n          var exists = false;\n          var user = search.ClientPeoplePickerSearchUser[i]; // Save the user\n\n          _users.push(user); // Parse the selected users\n\n\n          for (var j = 0; j < elSelectedUsers.children.length; j++) {\n            var userInfo = JSON.parse(elSelectedUsers.children[j].getAttribute(\"data-user\")); // See if this user is already selected\n\n            if (exists = user.Key == userInfo.Key) {\n              break;\n            }\n          } // Ensure the user isn't already selected\n\n\n          if (exists) {\n            continue;\n          } // Create the item\n\n\n          var elItem = document.createElement(\"a\");\n          elItem.className = \"dropdown-item\";\n          elItem.href = \"#\";\n          elItem.innerHTML = user.DisplayText;\n          elItem.setAttribute(\"data-user\", JSON.stringify(user));\n          el.appendChild(elItem); // Set the click event\n\n          elItem.addEventListener(\"click\", function (ev) {\n            var userInfo = ev.currentTarget.getAttribute(\"data-user\"); // Add the user\n\n            addUser(userInfo); // Hide the menu\n\n            _menu.hide(); // Clear the search text\n\n\n            elTextbox.querySelector(\"input\").value = \"\";\n          });\n        }\n      });\n    }\n  }; // Method to set the value\n\n\n  var setValue = function setValue(selectedUsers) {\n    if (selectedUsers === void 0) {\n      selectedUsers = [];\n    } // Clear the selected users\n\n\n    elSelectedUsers.innerHTML = \"\"; // Parse the selected users\n\n    for (var i = 0; i < selectedUsers.length; i++) {\n      // Add the user\n      addUser(selectedUsers[i]);\n    }\n  }; // Create the people picker\n\n\n  var elPeoplePicker = document.createElement(\"div\");\n  elPeoplePicker.className = \"people-picker\"; // Create the menu\n\n  var elMenu = document.createElement(\"div\");\n  elMenu.className = \"dropdown-menu\";\n  elMenu.innerHTML = '<h6 class=\"dropdown-header\">Search requires 3+ characters</h6>'; // Add the selected users\n\n  var elSelectedUsers = document.createElement(\"div\");\n  elSelectedUsers.style.position = \"relative\";\n  elPeoplePicker.appendChild(elSelectedUsers); // Create the textbox\n\n  var elTextbox = core_1.Components.InputGroup({\n    placeholder: props.placeholder == null ? \"Search\" : props.placeholder,\n    onChange: function onChange(searchText) {\n      // See if a value exists\n      if (searchText) {\n        // Set the filter text\n        _filterText = searchText; // Set the header\n\n        elMenu.innerHTML = ['<h6 class=\"dropdown-header\">', _filterText.length > 2 ? 'Searching for \"' + _filterText + '\"' : 'Search requires 3+ characters', '</h6>'].join('\\n'); // Wait 500ms before searching\n\n        setTimeout(function () {\n          // Ensure the filters match\n          if (searchText == _filterText) {\n            // Search for the users\n            searchUsers(elMenu, searchText, props.searchLocal ? false : true, props.groupId);\n          }\n        }, 500);\n      } else {\n        // Set the header\n        elMenu.innerHTML = '<h6 class=\"dropdown-header\">Search requires 3+ characters</h6>';\n      }\n    }\n  }).el;\n  props.readOnly ? elTextbox.classList.add(\"d-none\") : null;\n  elPeoplePicker.appendChild(elTextbox); // Create the popover menu\n\n  _menu = core_1.Components.Popover({\n    target: elTextbox.querySelector(\"input\"),\n    placement: core_1.Components.PopoverPlacements.BottomStart,\n    options: {\n      content: elMenu,\n      hideOnClick: false,\n      trigger: \"focus\"\n    }\n  }); // Set the value and ensure it's a \n\n  var value = props.value || [];\n\n  if (_typeof(props.value) != \"object\") {\n    // Set the default selected users\n    setValue([value]);\n  } else {\n    // See if this is a user object\n    var userValue = value;\n\n    if (userValue.EntityData) {\n      // Set the value\n      value = userValue.EntityData.SPGroupID || userValue.EntityData.SPUserID; // Set the default selected users\n\n      setValue([value]);\n    } // Else, see if the results exist\n    else if (value.results) {\n      var userIds = []; // Parse the results\n\n      for (var i = 0; i < value.results.length; i++) {\n        // Add the user id\n        userIds.push(value.results[i].Id);\n      } // Set the default selected users\n\n\n      setValue(userIds);\n    } else {\n      // Set the default selected users\n      setValue(value);\n    }\n  } // Create the element\n\n\n  var el = document.createElement(\"div\");\n  el.appendChild(elPeoplePicker); // See if we are rendering it to an element\n\n  if (props.el) {\n    // Ensure the parent element exists\n    if (props.el.parentElement && props.el.parentElement.classList) {\n      // Set the bootstrap class\n      props.el.parentElement.classList.contains(\"bs\") ? null : props.el.parentElement.classList.add(\"bs\");\n    } // Append the elements\n\n\n    while (el.children.length > 0) {\n      props.el.appendChild(el.children[0]);\n    } // Update the element\n\n\n    el = props.el;\n  } else {\n    // Set the bootstrap class\n    el.classList.add(\"bs\");\n  } // Create the object\n\n\n  var obj = {\n    el: elPeoplePicker,\n    getValue: function getValue() {\n      var selectedUsers = []; // Parse the selected users\n\n      for (var i = 0; i < elSelectedUsers.children.length; i++) {\n        var userInfo = JSON.parse(elSelectedUsers.children[i].getAttribute(\"data-user\"));\n        var user = gd_sprest_1.Helper.parse(userInfo); // Add this user\n\n        selectedUsers.push(user);\n      } // Return the value\n\n\n      return selectedUsers;\n    },\n    setValue: setValue\n  }; // Execute the assign to event\n\n  props.assignTo ? props.assignTo(obj) : null; // Return the people picker object\n\n  return obj;\n}; // Extend the form controls\n\n\nexports.PeoplePickerControlType = 101;\ncore_1.Components.FormControlTypes[\"PeoplePicker\"] = exports.PeoplePickerControlType;\ncore_1.Components.CustomControls.registerType(exports.PeoplePickerControlType, function (props) {\n  var picker = null; // Set the created method\n\n  var onRendered = props.onControlRendered;\n\n  props.onControlRendered = function (ctrl) {\n    // Render a people picker\n    picker = exports.PeoplePicker({\n      allowGroups: props.allowGroups,\n      className: props.className,\n      el: ctrl.el,\n      groupId: props.groupId,\n      label: props.label,\n      maxResults: props.maxResults,\n      multi: props.multi,\n      placeholder: props.placeholder,\n      readOnly: props.isReadonly,\n      searchLocal: props.searchLocal,\n      value: props.value\n    }); // See if the label exists\n\n    var elLabel = ctrl[\"_elLabel\"];\n\n    if (elLabel) {\n      // Set the id and aria properties\n      elLabel ? elLabel.id = (props.id || props.name) + \"_label\" : null;\n      picker.el.querySelector(\"input\").setAttribute(\"aria-labelledby\", elLabel.id);\n    } // Set the control\n\n\n    ctrl.setControl(picker); // Call the custom render event\n\n    onRendered ? onRendered(ctrl) : null;\n  }; // Register a people picker\n\n\n  props.onGetValue = function (ctrl) {\n    // Return the value\n    return picker ? picker.getValue() : ctrl.value;\n  };\n});\n\n//# sourceURL=webpack://gd-sprest-bs/./build/components/peoplePicker/index.js?");
+eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.PeoplePickerControlType = exports.PeoplePicker = void 0;\n\nvar gd_sprest_1 = __webpack_require__(/*! gd-sprest */ \"./node_modules/.pnpm/gd-sprest@6.7.0/node_modules/gd-sprest/build/index.js\");\n\nvar core_1 = __webpack_require__(/*! ../core */ \"./build/components/core.js\");\n/**\r\n * People Picker\r\n */\n\n\nexports.PeoplePicker = function (props) {\n  var _filterText = null;\n  var _menu = null;\n  var _users = []; // Method to add a user\n\n  var addUser = function addUser(userInfo) {\n    var user = typeof userInfo === \"string\" ? JSON.parse(userInfo) : userInfo; // Adds the button\n\n    var addButton = function addButton(userInfo) {\n      // See if the picker is read only\n      if (props.readOnly) {\n        // Render a button\n        core_1.Components.Button({\n          el: elSelectedUsers,\n          className: \"mr-1 mb-1\",\n          isSmall: true,\n          text: userInfo.Title\n        });\n      } else {\n        // Render a button\n        var btn_1 = core_1.Components.Button({\n          data: userInfo,\n          el: elSelectedUsers,\n          className: \"mr-1 mb-1\",\n          isSmall: true,\n          text: userInfo.Title,\n          badge: {\n            className: \"ml-2\",\n            content: \"&times;\",\n            isPill: true,\n            type: core_1.Components.BadgeTypes.Light,\n            onClick: function onClick() {\n              // Remove the button\n              elSelectedUsers.removeChild(btn_1.el); // Call the event\n\n              props.onChange ? props.onChange(obj.getValue()) : null;\n            }\n          }\n        }); // Set the data attribute\n\n        btn_1.el.setAttribute(\"data-user\", JSON.stringify(userInfo.stringify()));\n      } // Call the event\n\n\n      props.onChange ? props.onChange(obj.getValue()) : null;\n    }; // See if we are allowing multiple users\n\n\n    var allowMultple = typeof props.multi == \"boolean\" ? props.multi : false;\n\n    if (!allowMultple) {\n      // Remove existing users\n      while (elSelectedUsers.firstChild) {\n        elSelectedUsers.removeChild(elSelectedUsers.firstChild);\n      }\n    } // Ensure this is a user object\n\n\n    if (user.EntityData) {\n      // Ensure the group or user id is set\n      if (user.EntityData.SPGroupID) {\n        // Find the user by id\n        gd_sprest_1.Web().SiteGroups(parseInt(user.EntityData.SPGroupID)).execute(function (group) {\n          // Add the button\n          addButton(group);\n        });\n      } else if (user.EntityData.SPUserID) {\n        // Find the user by id\n        gd_sprest_1.Web().getUserById(parseInt(user.EntityData.SPUserID)).execute(function (userInfo) {\n          // Add the button\n          addButton(userInfo);\n        });\n      } else {\n        // Find the user\n        gd_sprest_1.Web().ensureUser(user.Key).execute(function (userInfo) {\n          // Add the button\n          addButton(userInfo);\n        }, addButton);\n      }\n    } else {\n      // Find the user by id\n      gd_sprest_1.Web().getUserById(user).execute(function (userInfo) {\n        // Add the button\n        addButton(userInfo);\n      });\n    }\n  }; // Method to search for the users\n\n\n  var searchUsers = function searchUsers(el, searchText, searchAll, spGroupId) {\n    if (searchAll === void 0) {\n      searchAll = true;\n    } // Ensure 3 characters exist\n\n\n    if (_filterText.length > 2) {\n      // Search for the user\n      gd_sprest_1.PeoplePicker().clientPeoplePickerSearchUser({\n        MaximumEntitySuggestions: props.maxResults || 25,\n        PrincipalSource: searchAll ? gd_sprest_1.SPTypes.PrincipalSources.All : gd_sprest_1.SPTypes.PrincipalSources.UserInfoList,\n        PrincipalType: props.allowGroups ? gd_sprest_1.SPTypes.PrincipalTypes.All : gd_sprest_1.SPTypes.PrincipalTypes.User,\n        QueryString: _filterText,\n        SharePointGroupID: spGroupId\n      }).execute(function (search) {\n        // Ensure the search text matches\n        if (_filterText != searchText) {\n          return;\n        } // Clear the users results\n\n\n        _users = []; // Set the menu header\n\n        el.innerHTML = '<h6 class=\"dropdown-header\">Search Results for \"' + searchText + '\"</h6>';\n        el.innerHTML += '<div class=\"dropdown-divider\"></div>'; // See if no users were found\n\n        if (search.ClientPeoplePickerSearchUser.length == 0) {\n          // Add a message\n          el.innerHTML += '<h6 class=\"dropdown-header\">No results were found...</h6>';\n        } else {\n          // Parse the users\n          for (var i = 0; i < search.ClientPeoplePickerSearchUser.length; i++) {\n            var exists = false;\n            var user = search.ClientPeoplePickerSearchUser[i]; // Save the user\n\n            _users.push(user); // Parse the selected users\n\n\n            for (var j = 0; j < elSelectedUsers.children.length; j++) {\n              var userInfo = JSON.parse(elSelectedUsers.children[j].getAttribute(\"data-user\")); // See if this user is already selected\n\n              if (exists = user.Key == userInfo.Key) {\n                break;\n              }\n            } // Ensure the user isn't already selected\n\n\n            if (exists) {\n              continue;\n            } // Create the item\n\n\n            var elItem = document.createElement(\"a\");\n            elItem.className = \"dropdown-item\";\n            elItem.href = \"#\";\n            elItem.innerHTML = user.DisplayText;\n            elItem.setAttribute(\"data-user\", JSON.stringify(user));\n            el.appendChild(elItem); // Set the click event\n\n            elItem.addEventListener(\"click\", function (ev) {\n              var userInfo = ev.currentTarget.getAttribute(\"data-user\"); // Add the user\n\n              addUser(userInfo); // Hide the menu\n\n              _menu.hide(); // Clear the search text\n\n\n              elTextbox.querySelector(\"input\").value = \"\";\n            });\n          }\n        } // Refresh the popover\n\n\n        _menu.hide();\n\n        _menu.show();\n      });\n    }\n  }; // Method to set the value\n\n\n  var setValue = function setValue(selectedUsers) {\n    if (selectedUsers === void 0) {\n      selectedUsers = [];\n    } // Clear the selected users\n\n\n    elSelectedUsers.innerHTML = \"\"; // Parse the selected users\n\n    for (var i = 0; i < selectedUsers.length; i++) {\n      // Add the user\n      addUser(selectedUsers[i]);\n    }\n  }; // Create the people picker\n\n\n  var elPeoplePicker = document.createElement(\"div\");\n  elPeoplePicker.className = \"people-picker\"; // Create the menu\n\n  var elMenu = document.createElement(\"div\");\n  elMenu.className = \"dropdown-menu\";\n  elMenu.innerHTML = '<h6 class=\"dropdown-header\">Search requires 3+ characters</h6>';\n  elMenu.style.border = \"0\"; // Add the selected users\n\n  var elSelectedUsers = document.createElement(\"div\");\n  elSelectedUsers.style.position = \"relative\";\n  elPeoplePicker.appendChild(elSelectedUsers); // Create the textbox\n\n  var elTextbox = core_1.Components.InputGroup({\n    placeholder: props.placeholder == null ? \"Search\" : props.placeholder,\n    onChange: function onChange(searchText) {\n      var currentHTML = elMenu.innerHTML; // See if a value exists\n\n      if (searchText) {\n        // Set the filter text\n        _filterText = searchText; // Set the header\n\n        elMenu.innerHTML = ['<h6 class=\"dropdown-header\">', _filterText.length > 2 ? 'Searching for \"' + _filterText + '\"' : 'Search requires 3+ characters', '</h6>'].join('\\n'); // Wait 500ms before searching\n\n        setTimeout(function () {\n          // Ensure the filters match\n          if (searchText == _filterText) {\n            // Search for the users\n            searchUsers(elMenu, searchText, props.searchLocal ? false : true, props.groupId);\n          }\n        }, 500);\n      } else {\n        // Set the header\n        elMenu.innerHTML = '<h6 class=\"dropdown-header\">Search requires 3+ characters</h6>';\n      } // See if a refresh is required\n\n\n      if (currentHTML != elMenu.innerHTML) {\n        // Refresh the popover\n        _menu.hide();\n\n        _menu.show();\n      }\n    }\n  }).el;\n  props.readOnly ? elTextbox.classList.add(\"d-none\") : null;\n  elPeoplePicker.appendChild(elTextbox); // Create the popover menu\n\n  _menu = core_1.Components.Popover({\n    target: elTextbox.querySelector(\"input\"),\n    placement: core_1.Components.PopoverPlacements.BottomStart,\n    options: {\n      content: elMenu,\n      hideOnClick: false,\n      trigger: \"focus\"\n    }\n  }); // Set the value and ensure it's a \n\n  var value = props.value || [];\n\n  if (_typeof(props.value) != \"object\") {\n    // Set the default selected users\n    setValue([value]);\n  } else {\n    // See if this is a user object\n    var userValue = value;\n\n    if (userValue.EntityData) {\n      // Set the value\n      value = userValue.EntityData.SPGroupID || userValue.EntityData.SPUserID; // Set the default selected users\n\n      setValue([value]);\n    } // Else, see if the results exist\n    else if (value.results) {\n      var userIds = []; // Parse the results\n\n      for (var i = 0; i < value.results.length; i++) {\n        // Add the user id\n        userIds.push(value.results[i].Id);\n      } // Set the default selected users\n\n\n      setValue(userIds);\n    } else {\n      // Set the default selected users\n      setValue(value);\n    }\n  } // Create the element\n\n\n  var el = document.createElement(\"div\");\n  el.appendChild(elPeoplePicker); // See if we are rendering it to an element\n\n  if (props.el) {\n    // Ensure the parent element exists\n    if (props.el.parentElement && props.el.parentElement.classList) {\n      // Set the bootstrap class\n      props.el.parentElement.classList.contains(\"bs\") ? null : props.el.parentElement.classList.add(\"bs\");\n    } // Append the elements\n\n\n    while (el.children.length > 0) {\n      props.el.appendChild(el.children[0]);\n    } // Update the element\n\n\n    el = props.el;\n  } else {\n    // Set the bootstrap class\n    el.classList.add(\"bs\");\n  } // Create the object\n\n\n  var obj = {\n    el: elPeoplePicker,\n    getValue: function getValue() {\n      var selectedUsers = []; // Parse the selected users\n\n      for (var i = 0; i < elSelectedUsers.children.length; i++) {\n        var userInfo = JSON.parse(elSelectedUsers.children[i].getAttribute(\"data-user\"));\n        var user = gd_sprest_1.Helper.parse(userInfo); // Add this user\n\n        selectedUsers.push(user);\n      } // Return the value\n\n\n      return selectedUsers;\n    },\n    setValue: setValue\n  }; // Execute the assign to event\n\n  props.assignTo ? props.assignTo(obj) : null; // Return the people picker object\n\n  return obj;\n}; // Extend the form controls\n\n\nexports.PeoplePickerControlType = 101;\ncore_1.Components.FormControlTypes[\"PeoplePicker\"] = exports.PeoplePickerControlType;\ncore_1.Components.CustomControls.registerType(exports.PeoplePickerControlType, function (props) {\n  var picker = null; // Set the created method\n\n  var onRendered = props.onControlRendered;\n\n  props.onControlRendered = function (ctrl) {\n    // Render a people picker\n    picker = exports.PeoplePicker({\n      allowGroups: props.allowGroups,\n      className: props.className,\n      el: ctrl.el,\n      groupId: props.groupId,\n      label: props.label,\n      maxResults: props.maxResults,\n      multi: props.multi,\n      placeholder: props.placeholder,\n      readOnly: props.isReadonly,\n      searchLocal: props.searchLocal,\n      value: props.value\n    }); // See if the label exists\n\n    var elLabel = ctrl[\"_elLabel\"];\n\n    if (elLabel) {\n      // Set the id and aria properties\n      elLabel ? elLabel.id = (props.id || props.name) + \"_label\" : null;\n      picker.el.querySelector(\"input\").setAttribute(\"aria-labelledby\", elLabel.id);\n    } // Set the control\n\n\n    ctrl.setControl(picker); // Call the custom render event\n\n    onRendered ? onRendered(ctrl) : null;\n  }; // Register a people picker\n\n\n  props.onGetValue = function (ctrl) {\n    // Return the value\n    return picker ? picker.getValue() : ctrl.value;\n  };\n});\n\n//# sourceURL=webpack://gd-sprest-bs/./build/components/peoplePicker/index.js?");
 
 /***/ }),