@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.js

@@ -0,0 +1,531 @@
+import { Component, Host, h, Prop, State, Event, Watch } from '@stencil/core';
+export class DnnPermissionsGrid {
+  constructor() {
+    /** Optionally allows localizing the component strings. */
+    this.resx = {
+      Add: "Add",
+      AllRoles: "All Roles",
+      FilterByGroup: "Filter By Group",
+      GlobalRoles: "Global Roles",
+      Role: "Role",
+      RolePermissions: "Role Permissions",
+      SelectRole: "Select Role",
+      User: "User",
+      UserPermissions: "User Permissions",
+    };
+    /** The list of users to show under the search users field when a search is performed. */
+    this.foundUsers = [];
+    this.selectedRoleGroupId = -1;
+  }
+  handleFoundUsersChanged(newValue) {
+    if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) > 0) {
+      setTimeout(() => {
+        this.userCollapsible.expanded = true;
+      }, 100);
+    }
+  }
+  componentWillLoad() {
+    document.addEventListener("click", this.dismissUserResults.bind(this));
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.disconnectedCallback.bind(this));
+  }
+  dismissUserResults(e) {
+    const dropdownRect = this.roleDropDown.getBoundingClientRect();
+    if (e.pageX > dropdownRect.right ||
+      e.pageX < dropdownRect.left ||
+      e.pageY > dropdownRect.bottom ||
+      e.pageY < dropdownRect.top) {
+      this.userCollapsible.expanded = false;
+    }
+  }
+  handleRoleGroupChanged(dropdown) {
+    const index = dropdown.selectedIndex;
+    const value = Number.parseInt(dropdown.options[index].value);
+    this.selectedRoleGroupId = value;
+  }
+  addRole() {
+    const roleId = Number.parseInt(this.roleDropDown.options[this.roleDropDown.selectedIndex].value);
+    const role = this.roles.filter(r => r.RoleId == roleId)[0];
+    this.permissions = Object.assign(Object.assign({}, this.permissions), { rolePermissions: [
+        ...this.permissions.rolePermissions,
+        {
+          default: false,
+          locked: false,
+          permissions: [],
+          roleId: role.RoleId,
+          roleName: role.RoleName,
+        }
+      ] });
+    this.permissionsChanged.emit(this.permissions);
+  }
+  addUser() {
+    if (this.pickedUser != undefined) {
+      this.permissions = Object.assign(Object.assign({}, this.permissions), { userPermissions: [
+          ...this.permissions.userPermissions,
+          {
+            displayName: this.pickedUser.displayName,
+            permissions: [],
+            userId: this.pickedUser.userId,
+          },
+        ] });
+      this.pickedUser = undefined;
+      this.userQuery = "";
+      this.permissionsChanged.emit(this.permissions);
+    }
+  }
+  getRoles() {
+    const filteredRoles = this.roles.filter(role => !this.permissions.rolePermissions.some(rp => rp.roleId == role.RoleId));
+    if (this.selectedRoleGroupId == -2) {
+      // All Roles
+      return filteredRoles;
+    }
+    if (this.selectedRoleGroupId == -1) {
+      // Global Roles
+      return filteredRoles.filter(role => role.IsSystemRole);
+    }
+    return filteredRoles.filter(role => role.RoleGroupId == this.selectedRoleGroupId);
+  }
+  renderRoleCheckBox(rolePermission, permissionDefinition) {
+    const item = rolePermission.permissions.filter(permission => permission.permissionId == permissionDefinition.permissionId)[0];
+    if (rolePermission.locked) {
+      return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+        h("g", { fill: "none" },
+          h("path", { d: "M0 0h24v24H0V0z" }),
+          h("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })),
+        h("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" })));
+    }
+    const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked";
+    return (h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition) },
+      h("div", { slot: "intermediateicon" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+          h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+          h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }))),
+      h("div", { slot: "uncheckedicon" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+          h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+          h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" }))),
+      h("span", null, permissionDefinition.permissionName)));
+  }
+  renderUserCheckBox(userPermission, permissionDefinition) {
+    const item = userPermission.permissions.filter(permission => permission.permissionId == permissionDefinition.permissionId)[0];
+    const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked";
+    return (h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleUserChanged(e.detail, userPermission, permissionDefinition) },
+      h("div", { slot: "intermediateicon" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+          h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+          h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }))),
+      h("div", { slot: "uncheckedicon" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+          h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+          h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" }))),
+      h("span", null, permissionDefinition.permissionName)));
+  }
+  handleRoleChanged(checked, rolePermission, permissionDefinition) {
+    switch (checked) {
+      case "unchecked":
+        this.permissions = Object.assign(Object.assign({}, this.permissions), { rolePermissions: [
+            ...this.permissions.rolePermissions.map(r => {
+              if (r.roleId != rolePermission.roleId) {
+                return r;
+              }
+              const newRolePermission = Object.assign({}, r);
+              newRolePermission.permissions = [
+                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),
+                {
+                  allowAccess: false,
+                  fullControl: false,
+                  permissionCode: permissionDefinition.permissionCode,
+                  permissionId: permissionDefinition.permissionId,
+                  permissionKey: permissionDefinition.permissionKey,
+                  permissionName: permissionDefinition.permissionName,
+                  view: false,
+                },
+              ];
+              return newRolePermission;
+            }),
+          ] });
+        break;
+      case "checked":
+        this.permissions = Object.assign(Object.assign({}, this.permissions), { rolePermissions: [
+            ...this.permissions.rolePermissions.map(r => {
+              if (r.roleId != rolePermission.roleId) {
+                return r;
+              }
+              const newRolePermission = Object.assign({}, r);
+              newRolePermission.permissions = [
+                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),
+                {
+                  allowAccess: true,
+                  fullControl: false,
+                  permissionCode: permissionDefinition.permissionCode,
+                  permissionId: permissionDefinition.permissionId,
+                  permissionKey: permissionDefinition.permissionKey,
+                  permissionName: permissionDefinition.permissionName,
+                  view: false,
+                },
+              ];
+              return newRolePermission;
+            }),
+          ] });
+        break;
+      case "intermediate":
+        this.permissions = Object.assign(Object.assign({}, this.permissions), { rolePermissions: [
+            ...this.permissions.rolePermissions.map(r => {
+              if (r.roleId != rolePermission.roleId) {
+                return r;
+              }
+              const newRolePermission = Object.assign({}, r);
+              newRolePermission.permissions = [
+                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),
+              ];
+              return newRolePermission;
+            }),
+          ] });
+        break;
+      default:
+        break;
+    }
+    this.permissionsChanged.emit(this.permissions);
+  }
+  handleUserChanged(checked, userPermission, permissionDefinition) {
+    switch (checked) {
+      case "unchecked":
+        this.permissions = Object.assign(Object.assign({}, this.permissions), { userPermissions: [
+            ...this.permissions.userPermissions.map(u => {
+              if (u.userId != userPermission.userId) {
+                return u;
+              }
+              const newUserPermission = Object.assign({}, u);
+              newUserPermission.permissions = [
+                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),
+                {
+                  allowAccess: false,
+                  fullControl: false,
+                  permissionCode: permissionDefinition.permissionCode,
+                  permissionId: permissionDefinition.permissionId,
+                  permissionKey: permissionDefinition.permissionKey,
+                  permissionName: permissionDefinition.permissionName,
+                  view: false,
+                },
+              ];
+              return newUserPermission;
+            }),
+          ] });
+        break;
+      case "checked":
+        this.permissions = Object.assign(Object.assign({}, this.permissions), { userPermissions: [
+            ...this.permissions.userPermissions.map(u => {
+              if (u.userId != userPermission.userId) {
+                return u;
+              }
+              const newUserPermission = Object.assign({}, u);
+              newUserPermission.permissions = [
+                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),
+                {
+                  allowAccess: true,
+                  fullControl: false,
+                  permissionCode: permissionDefinition.permissionCode,
+                  permissionId: permissionDefinition.permissionId,
+                  permissionKey: permissionDefinition.permissionKey,
+                  permissionName: permissionDefinition.permissionName,
+                  view: false,
+                },
+              ];
+              return newUserPermission;
+            }),
+          ] });
+        break;
+      case "intermediate":
+        this.permissions = Object.assign(Object.assign({}, this.permissions), { userPermissions: [
+            ...this.permissions.userPermissions.map(u => {
+              if (u.userId != userPermission.userId) {
+                return u;
+              }
+              const newUserPermission = Object.assign({}, u);
+              newUserPermission.permissions = [
+                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),
+              ];
+              return newUserPermission;
+            }),
+          ] });
+        break;
+      default:
+        break;
+    }
+    this.permissionsChanged.emit(this.permissions);
+  }
+  removeRole(rolePermission) {
+    this.permissions = Object.assign(Object.assign({}, this.permissions), { rolePermissions: [
+        ...this.permissions.rolePermissions.filter(rp => rp.roleId != rolePermission.roleId),
+      ] });
+    this.permissionsChanged.emit();
+  }
+  removeUser(userPermission) {
+    this.permissions = Object.assign(Object.assign({}, this.permissions), { userPermissions: [
+        ...this.permissions.userPermissions.filter(up => up.userId != userPermission.userId),
+      ] });
+    this.permissionsChanged.emit(this.permissions);
+  }
+  handleQueryChanged(query) {
+    this.userQuery = query;
+    if (query == undefined || query.length == 0) {
+      this.userCollapsible.expanded = false;
+      this.pickedUser = undefined;
+      this.foundUsers = [];
+      return;
+    }
+    this.userSearchQueryChanged.emit(query);
+  }
+  handleSearchUserFieldKeyDown(e) {
+    if (e.key != "ArrowDown") {
+      return;
+    }
+    e.preventDefault();
+    const firstButton = this.userCollapsible.querySelector("button");
+    if (firstButton != undefined) {
+      firstButton.focus();
+    }
+  }
+  handleSearchedUserKeyDown(e) {
+    const button = e.target;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        const nextButton = button.nextElementSibling;
+        nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        const previousButton = button.previousElementSibling;
+        previousButton === null || previousButton === void 0 ? void 0 : previousButton.focus();
+        break;
+      default:
+        break;
+    }
+  }
+  handleUserPicked(searchedUser) {
+    this.userQuery = searchedUser.displayName;
+    this.pickedUser = searchedUser;
+  }
+  getFilteredUsers() {
+    return this.foundUsers.filter(fu => !this.permissions.userPermissions.some(up => up.userId == fu.userId));
+  }
+  render() {
+    const filteredRoles = this.getRoles();
+    return (h(Host, null,
+      h("div", { class: "add-role-row" },
+        h("div", { class: "dropdown" },
+          h("label", null,
+            this.resx.FilterByGroup,
+            " :"),
+          h("select", { onChange: e => this.handleRoleGroupChanged(e.target) },
+            h("option", { value: -2, selected: this.selectedRoleGroupId == -2 }, this.resx.AllRoles),
+            h("option", { value: -1, selected: this.selectedRoleGroupId == -1 }, this.resx.GlobalRoles),
+            this.roleGroups.map(roleGroup => h("option", { value: roleGroup.id, selected: this.selectedRoleGroupId == roleGroup.id }, roleGroup.name)))),
+        filteredRoles && filteredRoles.length > 0 && [
+          h("div", { class: "dropdown" },
+            h("label", null,
+              this.resx.SelectRole,
+              " :"),
+            h("select", { ref: el => this.roleDropDown = el }, this.getRoles().map(role => h("option", { value: role.RoleId }, role.RoleName)))),
+          h("dnn-button", { type: "primary", onClick: () => this.addRole() }, this.resx.Add)
+        ]),
+      h("table", { class: "roles-table" },
+        h("caption", null, this.resx.RolePermissions),
+        h("thead", null,
+          h("tr", null,
+            h("th", null, this.resx.Role),
+            this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)),
+            h("th", null, "\u00A0"))),
+        h("tbody", null, this.permissions.rolePermissions.map(rolePermission => h("tr", null,
+          h("th", null, rolePermission.roleName),
+          this.permissions.permissionDefinitions.map(permissionDefinition => h("td", null, this.renderRoleCheckBox(rolePermission, permissionDefinition))),
+          h("td", null, !rolePermission.default &&
+            h("button", { onClick: () => this.removeRole(rolePermission) },
+              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                h("path", { d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })))))))),
+      h("div", { class: "search-user" },
+        h("div", { class: "search-control" },
+          h("dnn-searchbox", { placeholder: this.resx.User, debounced: true, onQueryChanged: e => this.handleQueryChanged(e.detail), onKeyDown: e => this.handleSearchUserFieldKeyDown(e), query: this.userQuery }),
+          h("dnn-collapsible", { ref: el => this.userCollapsible = el },
+            h("div", { class: "dropdown" }, this.getFilteredUsers().map(searchedUser => h("button", { onKeyDown: e => this.handleSearchedUserKeyDown(e), onClick: () => this.handleUserPicked(searchedUser) }, searchedUser.displayName))))),
+        this.pickedUser &&
+          h("dnn-button", { onClick: () => this.addUser() }, this.resx.Add)),
+      this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&
+        h("table", { class: "users-table" },
+          h("caption", null, this.resx.UserPermissions),
+          h("thead", null,
+            h("tr", null,
+              h("th", null, this.resx.User),
+              this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)),
+              h("th", null, "\u00A0"))),
+          h("tbody", null, this.permissions.userPermissions.map(userPermission => h("tr", null,
+            h("th", null, userPermission.displayName),
+            this.permissions.permissionDefinitions.map(permissionDefinition => h("td", null, this.renderUserCheckBox(userPermission, permissionDefinition))),
+            h("td", null,
+              h("button", { onClick: () => this.removeUser(userPermission) },
+                h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                  h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                  h("path", { d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }))))))))));
+  }
+  static get is() { return "dnn-permissions-grid"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-permissions-grid.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-permissions-grid.css"]
+  }; }
+  static get properties() { return {
+    "permissions": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "IPermissions",
+        "resolved": "IPermissions",
+        "references": {
+          "IPermissions": {
+            "location": "import",
+            "path": "./permissions-interface"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The list of permissions."
+      }
+    },
+    "roleGroups": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IRoleGroup[]",
+        "resolved": "IRoleGroup[]",
+        "references": {
+          "IRoleGroup": {
+            "location": "import",
+            "path": "./role-group-interface"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The list of role groups."
+      }
+    },
+    "roles": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IRole[]",
+        "resolved": "IRole[]",
+        "references": {
+          "IRole": {
+            "location": "import",
+            "path": "./role-interface"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The list of possible roles."
+      }
+    },
+    "resx": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ILocalization",
+        "resolved": "ILocalization",
+        "references": {
+          "ILocalization": {
+            "location": "import",
+            "path": "./localization-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optionally allows localizing the component strings."
+      },
+      "defaultValue": "{\n    Add: \"Add\",\n    AllRoles: \"All Roles\",\n    FilterByGroup: \"Filter By Group\",\n    GlobalRoles: \"Global Roles\",\n    Role: \"Role\",\n    RolePermissions: \"Role Permissions\",\n    SelectRole: \"Select Role\",\n    User: \"User\",\n    UserPermissions: \"User Permissions\",\n  }"
+    },
+    "foundUsers": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ISearchedUser[]",
+        "resolved": "ISearchedUser[]",
+        "references": {
+          "ISearchedUser": {
+            "location": "import",
+            "path": "./searched-user-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The list of users to show under the search users field when a search is performed."
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "selectedRoleGroupId": {},
+    "userQuery": {},
+    "pickedUser": {}
+  }; }
+  static get events() { return [{
+      "method": "userSearchQueryChanged",
+      "name": "userSearchQueryChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when searching for users to add to the permissions. Emits the search query."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "permissionsChanged",
+      "name": "permissionsChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when any permissions have changed, can be used for instance to have linked permissions."
+      },
+      "complexType": {
+        "original": "IPermissions",
+        "resolved": "IPermissions",
+        "references": {
+          "IPermissions": {
+            "location": "import",
+            "path": "./permissions-interface"
+          }
+        }
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "foundUsers",
+      "methodName": "handleFoundUsersChanged"
+    }]; }
+}
+//# sourceMappingURL=dnn-permissions-grid.js.map

package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-permissions-grid.js","sourceRoot":"","sources":["../../../../src/components/dnn-permissions-grid/dnn-permissions-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { ILocalization } from './localization-interface';\nimport { IPermissionDefinition, IPermissions, IRolePermission, IUserPermission } from './permissions-interface';\nimport { IRoleGroup } from './role-group-interface';\nimport { IRole } from './role-interface';\nimport { ISearchedUser } from './searched-user-interface';\n\n@Component({\n  tag: 'dnn-permissions-grid',\n  styleUrl: 'dnn-permissions-grid.scss',\n  shadow: true,\n})\nexport class DnnPermissionsGrid {\n\n  /** The list of permissions. */\n  @Prop({mutable: true}) permissions!: IPermissions;\n\n  /** The list of role groups. */\n  @Prop() roleGroups!: IRoleGroup[];\n\n  /** The list of possible roles. */\n  @Prop() roles!: IRole[];\n\n  /** Optionally allows localizing the component strings. */\n  @Prop() resx: ILocalization = {\n    Add: \"Add\",\n    AllRoles: \"All Roles\",\n    FilterByGroup: \"Filter By Group\",\n    GlobalRoles: \"Global Roles\",\n    Role: \"Role\",\n    RolePermissions: \"Role Permissions\",\n    SelectRole: \"Select Role\",\n    User: \"User\",\n    UserPermissions: \"User Permissions\",\n  }\n\n  /** The list of users to show under the search users field when a search is performed. */\n  @Prop() foundUsers: ISearchedUser[] = [];\n\n  /** Fires when searching for users to add to the permissions. Emits the search query. */\n  @Event() userSearchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when any permissions have changed, can be used for instance to have linked permissions. */\n  @Event() permissionsChanged: EventEmitter<IPermissions>;\n\n  @State() selectedRoleGroupId = -1;\n  @State() userQuery: string;\n  @State() pickedUser: ISearchedUser;\n  \n  \n  @Watch(\"foundUsers\")\n  handleFoundUsersChanged(newValue: ISearchedUser[]){\n    if (newValue?.length > 0){\n      setTimeout(() => {\n        this.userCollapsible.expanded = true;\n      }, 100);\n    }\n  }\n  \n  componentWillLoad() {\n    document.addEventListener(\"click\", this.dismissUserResults.bind(this));\n  }\n  \n  disconnectedCallback() {\n    document.removeEventListener(\"click\", this.disconnectedCallback.bind(this));\n  }\n  \n  private roleDropDown: HTMLSelectElement;\n  private userCollapsible: HTMLDnnCollapsibleElement;\n\n  private dismissUserResults(e: MouseEvent){\n    const dropdownRect = this.roleDropDown.getBoundingClientRect();\n    if (\n      e.pageX > dropdownRect.right ||\n      e.pageX < dropdownRect.left ||\n      e.pageY > dropdownRect.bottom ||\n      e.pageY < dropdownRect.top){\n        this.userCollapsible.expanded = false;\n      }\n  } \n\n  private handleRoleGroupChanged(dropdown: HTMLSelectElement): void {\n    const index = dropdown.selectedIndex;\n    const value = Number.parseInt(dropdown.options[index].value);\n    this.selectedRoleGroupId = value;\n  }\n\n  private addRole(): void {\n    const roleId = Number.parseInt(this.roleDropDown.options[this.roleDropDown.selectedIndex].value);\n    const role = this.roles.filter(r => r.RoleId == roleId)[0];\n    this.permissions = {\n      ...this.permissions,\n      rolePermissions: [\n        ...this.permissions.rolePermissions,\n        {\n          default: false,\n          locked: false,\n          permissions: [],\n          roleId: role.RoleId,\n          roleName: role.RoleName,\n        }\n      ]\n    }\n    this.permissionsChanged.emit(this.permissions);\n  }\n\n  private addUser(): void {\n    if (this.pickedUser != undefined){\n      this.permissions = {\n        ...this.permissions,\n        userPermissions: [\n          ...this.permissions.userPermissions,\n          {\n            displayName: this.pickedUser.displayName,\n            permissions: [],\n            userId: this.pickedUser.userId,\n          },\n        ],\n      };\n      this.pickedUser = undefined;\n      this.userQuery = \"\";\n      this.permissionsChanged.emit(this.permissions);\n    }\n  }\n\n  private getRoles(){\n    const filteredRoles = this.roles.filter(role => \n      !this.permissions.rolePermissions.some(rp => rp.roleId == role.RoleId))\n    if (this.selectedRoleGroupId == -2){\n      // All Roles\n      return filteredRoles;\n    }\n\n    if (this.selectedRoleGroupId == -1){\n      // Global Roles\n      return filteredRoles.filter(role => role.IsSystemRole);\n    }\n    \n    return filteredRoles.filter(role => role.RoleGroupId == this.selectedRoleGroupId);\n  }\n\n  private renderRoleCheckBox(rolePermission: IRolePermission, permissionDefinition: IPermissionDefinition) {\n    const item = rolePermission.permissions.filter(permission => permission.permissionId == permissionDefinition.permissionId)[0];\n    if (rolePermission.locked){\n      return(\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g fill=\"none\"><path d=\"M0 0h24v24H0V0z\"/><path d=\"M0 0h24v24H0V0z\" opacity=\".87\"/></g><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"/></svg>\n      )\n    }\n\n    const checked = item == undefined ? \"intermediate\" : item.allowAccess ? \"checked\" : \"unchecked\";\n    return(\n      <dnn-checkbox\n        use-intermediate\n        checked={checked}\n        onCheckedchange={e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)}\n      >\n        <div slot=\"intermediateicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n        </div>\n        <div slot=\"uncheckedicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z\"/></svg>\n        </div>\n        <span>{permissionDefinition.permissionName}</span>\n      </dnn-checkbox>\n    )\n  }\n\n  private renderUserCheckBox(userPermission: IUserPermission, permissionDefinition: IPermissionDefinition) {\n    const item = userPermission.permissions.filter(permission => permission.permissionId == permissionDefinition.permissionId)[0];\n\n    const checked = item == undefined ? \"intermediate\" : item.allowAccess ? \"checked\" : \"unchecked\";\n    return(\n      <dnn-checkbox\n        use-intermediate\n        checked={checked}\n        onCheckedchange={e => this.handleUserChanged(e.detail, userPermission, permissionDefinition)}\n      >\n        <div slot=\"intermediateicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n        </div>\n        <div slot=\"uncheckedicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z\"/></svg>\n        </div>\n        <span>{permissionDefinition.permissionName}</span>\n      </dnn-checkbox>\n    )\n  }\n  \n  private handleRoleChanged(\n    checked: \"checked\" | \"unchecked\" | \"intermediate\",\n    rolePermission: IRolePermission,\n    permissionDefinition: IPermissionDefinition\n  ): void {\n    switch (checked) {\n      case \"unchecked\":\n        this.permissions = {\n          ...this.permissions,\n          rolePermissions: [\n            ...this.permissions.rolePermissions.map(r => {\n              if (r.roleId != rolePermission.roleId){\n                return r;\n              }\n\n              const newRolePermission = Object.assign({}, r);\n              newRolePermission.permissions = [\n                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: false,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newRolePermission;\n            }),\n          ],\n        };\n        break;\n      case \"checked\":\n        this.permissions = {\n          ...this.permissions,\n          rolePermissions: [\n            ...this.permissions.rolePermissions.map(r => {\n              if (r.roleId != rolePermission.roleId){\n                return r;\n              }\n\n              const newRolePermission = Object.assign({}, r);\n              newRolePermission.permissions = [\n                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: true,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newRolePermission;\n            }),\n          ],\n        };\n        break;\n        case \"intermediate\":\n        this.permissions = {\n          ...this.permissions,\n          rolePermissions: [\n            ...this.permissions.rolePermissions.map(r => {\n              if (r.roleId != rolePermission.roleId){\n                return r;\n              }\n\n              const newRolePermission = Object.assign({}, r);\n              newRolePermission.permissions = [\n                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n              ];\n              return newRolePermission;\n            }),\n          ],\n        };\n        break;\n      default:\n        break;\n    }\n    this.permissionsChanged.emit(this.permissions);\n  }\n\n  private handleUserChanged(\n    checked: \"checked\" | \"unchecked\" | \"intermediate\",\n    userPermission: IUserPermission,\n    permissionDefinition: IPermissionDefinition\n  ): void {\n    switch (checked) {\n      case \"unchecked\":\n        this.permissions = {\n          ...this.permissions,\n          userPermissions: [\n            ...this.permissions.userPermissions.map(u => {\n              if (u.userId != userPermission.userId){\n                return u;\n              }\n\n              const newUserPermission = Object.assign({}, u);\n              newUserPermission.permissions = [\n                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: false,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newUserPermission;\n            }),\n          ],\n        };\n        break;\n      case \"checked\":\n        this.permissions = {\n          ...this.permissions,\n          userPermissions: [\n            ...this.permissions.userPermissions.map(u => {\n              if (u.userId != userPermission.userId){\n                return u;\n              }\n\n              const newUserPermission = Object.assign({}, u);\n              newUserPermission.permissions = [\n                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: true,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newUserPermission;\n            }),\n          ],\n        };\n        break;\n        case \"intermediate\":\n        this.permissions = {\n          ...this.permissions,\n          userPermissions: [\n            ...this.permissions.userPermissions.map(u => {\n              if (u.userId != userPermission.userId){\n                return u;\n              }\n\n              const newUserPermission = Object.assign({}, u);\n              newUserPermission.permissions = [\n                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n              ];\n              return newUserPermission;\n            }),\n          ],\n        };\n        break;\n      default:\n        break;\n    }\n    this.permissionsChanged.emit(this.permissions);\n  }\n\n  private removeRole(rolePermission: IRolePermission): void {\n    this.permissions = {\n      ...this.permissions,\n      rolePermissions: [\n        ...this.permissions.rolePermissions.filter(rp => rp.roleId != rolePermission.roleId),\n      ],\n    };\n    this.permissionsChanged.emit();\n  }\n\n  private removeUser(userPermission: IUserPermission): void {\n    this.permissions = {\n      ...this.permissions,\n      userPermissions: [\n        ...this.permissions.userPermissions.filter(up => up.userId != userPermission.userId),\n      ]\n    };\n    this.permissionsChanged.emit(this.permissions);\n  }\n\n  private handleQueryChanged(query: string): void {\n    this.userQuery = query;\n    if (query == undefined || query.length == 0){\n      this.userCollapsible.expanded = false;\n      this.pickedUser = undefined;\n      this.foundUsers = [];\n      return;\n    }\n    this.userSearchQueryChanged.emit(query);\n  }\n\n  private handleSearchUserFieldKeyDown(e: KeyboardEvent): void {\n    if (e.key != \"ArrowDown\"){\n      return;\n    }\n\n    e.preventDefault();\n    const firstButton = this.userCollapsible.querySelector(\"button\");\n    if (firstButton != undefined){\n      firstButton.focus();\n    }\n  }\n\n  private handleSearchedUserKeyDown(e: KeyboardEvent): void {\n    const button = e.target as HTMLButtonElement;\n    \n    switch(e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        const nextButton = button.nextElementSibling as HTMLButtonElement;\n        nextButton?.focus();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        const previousButton = button.previousElementSibling as HTMLButtonElement;\n        previousButton?.focus();\n      break;\n      default:\n        break;\n    }\n  }\n\n  private handleUserPicked(searchedUser: ISearchedUser): void {\n    this.userQuery = searchedUser.displayName;\n    this.pickedUser = searchedUser;\n  }\n\n  private getFilteredUsers() {\n    return this.foundUsers.filter(fu => !this.permissions.userPermissions.some(up => up.userId == fu.userId))\n  }\n  \n  render() {\n    const filteredRoles = this.getRoles();\n    return (\n      <Host>\n        <div class=\"add-role-row\">\n          <div class=\"dropdown\">\n            <label>{this.resx.FilterByGroup} :</label>\n            <select\n              onChange={e => this.handleRoleGroupChanged(e.target as HTMLSelectElement)}\n            >\n              <option\n                value={-2}\n                selected={this.selectedRoleGroupId == -2}\n              >\n                {this.resx.AllRoles}\n              </option>\n              <option\n                value={-1}\n                selected={this.selectedRoleGroupId == -1}\n              >\n                {this.resx.GlobalRoles}\n              </option>\n              {this.roleGroups.map(roleGroup =>\n                <option\n                  value={roleGroup.id}\n                  selected={this.selectedRoleGroupId == roleGroup.id}\n                >\n                  {roleGroup.name}\n                </option>\n              )}\n            </select>\n          </div>\n            {filteredRoles && filteredRoles.length > 0 && [\n              <div class=\"dropdown\">\n                <label>{this.resx.SelectRole} :</label>\n                <select ref={el => this.roleDropDown = el}>\n                  {this.getRoles().map(role =>\n                    <option value={role.RoleId}\n                    >\n                      {role.RoleName}\n                    </option>\n                  )}\n                </select>\n              </div>,\n              <dnn-button\n              type=\"primary\"\n              onClick={() => this.addRole()}\n              >\n                {this.resx.Add}\n              </dnn-button>\n            ]\n          }\n        </div>\n        <table class=\"roles-table\">\n          <caption>{this.resx.RolePermissions}</caption>\n          <thead>\n            <tr>\n              <th>{this.resx.Role}</th>\n              {this.permissions.permissionDefinitions.map(permissionDefinition =>\n                <th>{permissionDefinition.permissionName}</th>\n              )}\n              <th>&nbsp;</th>\n            </tr>\n          </thead>\n          <tbody>\n            {this.permissions.rolePermissions.map(rolePermission =>\n              <tr>\n                <th>{rolePermission.roleName}</th>\n                {this.permissions.permissionDefinitions.map(permissionDefinition =>\n                  <td>\n                    {this.renderRoleCheckBox(rolePermission, permissionDefinition)}\n                  </td>\n                )}\n                <td>\n                  {!rolePermission.default &&\n                    <button\n                      onClick={() => this.removeRole(rolePermission)}\n                    >\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"/></svg>\n                    </button>\n                  }\n                </td>\n              </tr>\n            )}\n          </tbody>\n        </table>\n        <div class=\"search-user\">\n          <div class=\"search-control\">\n            <dnn-searchbox\n              placeholder={this.resx.User}\n              debounced\n              onQueryChanged={e => this.handleQueryChanged(e.detail)}\n              onKeyDown={e => this.handleSearchUserFieldKeyDown(e)}\n              query={this.userQuery}\n            />\n            <dnn-collapsible ref={el => this.userCollapsible = el}>\n              <div class=\"dropdown\">\n                {this.getFilteredUsers().map(searchedUser =>\n                  <button\n                    onKeyDown={e => this.handleSearchedUserKeyDown(e)}\n                    onClick={() => this.handleUserPicked(searchedUser)}\n                  >\n                    {searchedUser.displayName}\n                  </button>\n                )}\n              </div>\n            </dnn-collapsible>\n          </div>\n          {this.pickedUser &&\n            <dnn-button\n              onClick={() => this.addUser()}\n            >\n              {this.resx.Add}\n            </dnn-button>\n          }\n        </div>\n        {this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&\n          <table class=\"users-table\">\n            <caption>{this.resx.UserPermissions}</caption>\n            <thead>\n              <tr>\n                <th>{this.resx.User}</th>\n                {this.permissions.permissionDefinitions.map(permissionDefinition =>\n                  <th>{permissionDefinition.permissionName}</th>\n                )}\n                <th>&nbsp;</th>\n              </tr>\n            </thead>\n            <tbody>\n              {this.permissions.userPermissions.map(userPermission =>\n                <tr>\n                  <th>{userPermission.displayName}</th>\n                  {this.permissions.permissionDefinitions.map(permissionDefinition =>\n                    <td>\n                      {this.renderUserCheckBox(userPermission, permissionDefinition)}\n                    </td>\n                  )}\n                  <td>\n                    <button\n                      onClick={() => this.removeUser(userPermission)}\n                    >\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"/></svg>\n                    </button>\n                </td>\n                </tr>\n              )}\n            </tbody>\n          </table>\n        }\n      </Host>\n    );\n  }\n}"]}