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

package/dist/dnn/dnn-modal.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","src/components/dnn-modal/dnn-modal.tsx"],"names":["dnnModalCss","DnnModal","exports","class_1","hostRef","this","backdropDismiss","closeText","showCloseButton","visible","prototype","show","hide","handleDismiss","dismissed","emit","handleBackdropClick","e","element","target","id","render","_this","h","Host","class","onClick","aria-label","xmlns","height","viewBox","width","fill","d"],"mappings":"+lDAAA,IAAMA,EAAc,4lDCOPC,EAAQC,EAAA,YAAA,WALrB,SAAAC,EAAAC,kDAYUC,KAAAC,gBAA2B,KAM3BD,KAAAE,UAAqB,cAOrBF,KAAAG,gBAA4B,KAE3BH,KAAAI,QAAmB,MAMtBN,EAAAO,UAAAC,KAAN,gGACEN,KAAKI,QAAU,sBAOXN,EAAAO,UAAAE,KAAN,gGACEP,KAAKI,QAAU,uBAQTN,EAAAO,UAAAG,cAAA,WACNR,KAAKI,QAAU,MACfJ,KAAKS,UAAUC,QAGTZ,EAAAO,UAAAM,oBAAA,SAAoBC,GAC1B,IAAMC,EAAWD,EAAEE,OACnB,GAAID,EAAQE,KAAO,YAAcf,KAAKC,gBAAgB,CACpDD,KAAKQ,kBAITV,EAAAO,UAAAW,OAAA,WAAA,IAAAC,EAAAjB,KACE,OACEkB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKH,GAAG,WACNK,MAAOpB,KAAKI,QAAU,kBAAoB,UAC1CiB,QAAS,SAAAT,GAAK,OAAAK,EAAKN,oBAAoBC,KAEvCM,EAAA,MAAA,CAAKE,MAAM,SACRpB,KAAKG,iBACJe,EAAA,SAAA,CACEE,MAAM,QAAOE,aACDtB,KAAKE,UACjBmB,QAAS,WAAM,OAAAJ,EAAKT,kBAEpBU,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUT,EAAA,OAAA,CAAMU,EAAE,gBAAgBD,KAAK,SAAQT,EAAA,OAAA,CAAMU,EAAE,sLAGvJV,EAAA,OAAA,+HA1ES","sourcesContent":[":host {\r\n  /**\r\n   * @prop --max-width: The maximum width of the module.\r\n  */\r\n  display: block;\r\n  .overlay{\r\n    background-color: rgba(0,0,0,0.5);\r\n    position: fixed;\r\n    top:0;\r\n    left:0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    backdrop-filter: blur(2px);\r\n    transition: all 300ms ease-in-out;\r\n    visibility: hidden;\r\n    opacity: 0;\r\n    .modal{\r\n      max-width: var(--max-width, 1200px);\r\n      background-color: white;\r\n      padding: 30px;\r\n      transform: scale(2);\r\n      transition: all 300ms ease-in-out;\r\n      z-index: 2;\r\n      position: relative;\r\n      margin: 10%;\r\n      max-height: 80%;\r\n      border-radius: var(--dnn-controls-radius, 5px);\r\n      box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\r\n      display: block;\r\n      .close{\r\n        position: absolute;\r\n        background-color:white;\r\n        border: 2px solid white;\r\n        border-radius: 50%;\r\n        padding: 0;\r\n        margin: 0;\r\n        top: -12px;\r\n        right: -12px;\r\n        outline: none;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        &:focus, &:hover{\r\n          box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\r\n        }\r\n        svg{\r\n          width: 24px;\r\n          height: 24px;\r\n          color: grey;\r\n        }\r\n      }\r\n    }\r\n    &.visible{\r\n      visibility: visible;\r\n      opacity: 1;\r\n      .modal{\r\n        transform: scale(1);\r\n        box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-modal',\r\n  styleUrl: 'dnn-modal.scss',\r\n  shadow: true\r\n})\r\nexport class DnnModal {\r\n  \r\n  @Element() el!: HTMLDnnModalElement;\r\n  \r\n  /**\r\n   * Pass false to remove the backdrop click auto-dismiss feature.\r\n   */\r\n  @Prop() backdropDismiss: boolean = true;\r\n\r\n  /**\r\n   * Optionally pass the aria-label text for the close button.\r\n   * Defaults to \"Close modal\" if not provided.\r\n   */\r\n  @Prop() closeText?: string = \"Close modal\";\r\n\r\n  /**\r\n   * Optionally you can pass false to not show the close button.\r\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n   * or provide your own dismissal logic in the modal content.\r\n   */\r\n  @Prop() showCloseButton?: boolean = true;\r\n\r\n  @State() visible: boolean = false;\r\n\r\n  /**\r\n   * Shows the modal\r\n   */\r\n  @Method()\r\n  async show() {\r\n    this.visible = true;\r\n  }\r\n\r\n  /**\r\n   * Hides the modal\r\n   */\r\n  @Method()\r\n  async hide() {\r\n    this.visible = false;\r\n  }\r\n\r\n  /**\r\n   * Fires when the modal is dismissed.\r\n   */\r\n  @Event() dismissed!: EventEmitter;\r\n\r\n  private handleDismiss(){\r\n    this.visible = false;\r\n    this.dismissed.emit();\r\n  }\r\n\r\n  private handleBackdropClick(e: MouseEvent): void {\r\n    const element = (e.target as HTMLElement);\r\n    if (element.id === \"backdrop\" && this.backdropDismiss){\r\n      this.handleDismiss();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"backdrop\"\r\n          class={this.visible ? 'overlay visible' : 'overlay'}\r\n          onClick={e => this.handleBackdropClick(e)}\r\n        >\r\n          <div class=\"modal\">\r\n            {this.showCloseButton &&\r\n              <button\r\n                class=\"close\"\r\n                aria-label={this.closeText}\r\n                onClick={() => this.handleDismiss()}\r\n              >\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n              </button>\r\n            }\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","src/components/dnn-modal/dnn-modal.tsx"],"names":["dnnModalCss","DnnModal","exports","class_1","hostRef","this","backdropDismiss","closeText","showCloseButton","visible","prototype","show","hide","handleDismiss","dismissed","emit","handleBackdropClick","e","element","target","id","render","_this","h","Host","class","onClick","aria-label","xmlns","height","viewBox","width","fill","d"],"mappings":"+lDAAA,IAAMA,EAAc,4lDCOPC,EAAQC,EAAA,YAAA,WALrB,SAAAC,EAAAC,kDAYUC,KAAAC,gBAA2B,KAM3BD,KAAAE,UAAqB,cAOrBF,KAAAG,gBAA4B,KAKEH,KAAAI,QAAmB,MAMnDN,EAAAO,UAAAC,KAAN,gGACEN,KAAKI,QAAU,sBAOXN,EAAAO,UAAAE,KAAN,gGACEP,KAAKI,QAAU,uBAQTN,EAAAO,UAAAG,cAAA,WACNR,KAAKI,QAAU,MACfJ,KAAKS,UAAUC,QAGTZ,EAAAO,UAAAM,oBAAA,SAAoBC,GAC1B,IAAMC,EAAWD,EAAEE,OACnB,GAAID,EAAQE,KAAO,YAAcf,KAAKC,gBAAgB,CACpDD,KAAKQ,kBAITV,EAAAO,UAAAW,OAAA,WAAA,IAAAC,EAAAjB,KACE,OACEkB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKH,GAAG,WACNK,MAAOpB,KAAKI,QAAU,kBAAoB,UAC1CiB,QAAS,SAAAT,GAAK,OAAAK,EAAKN,oBAAoBC,KAEvCM,EAAA,MAAA,CAAKE,MAAM,SACRpB,KAAKG,iBACJe,EAAA,SAAA,CACEE,MAAM,QAAOE,aACDtB,KAAKE,UACjBmB,QAAS,WAAM,OAAAJ,EAAKT,kBAEpBU,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUT,EAAA,OAAA,CAAMU,EAAE,gBAAgBD,KAAK,SAAQT,EAAA,OAAA,CAAMU,EAAE,sLAGvJV,EAAA,OAAA,+HA7ES","sourcesContent":[":host {\n  /**\n   * @prop --max-width: The maximum width of the module.\n  */\n  display: block;\n  .overlay{\n    background-color: rgba(0,0,0,0.5);\n    position: fixed;\n    top:0;\n    left:0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backdrop-filter: blur(2px);\n    transition: all 300ms ease-in-out;\n    visibility: hidden;\n    opacity: 0;\n    .modal{\n      max-width: var(--max-width, 1200px);\n      background-color: white;\n      padding: 30px;\n      transform: scale(2);\n      transition: all 300ms ease-in-out;\n      z-index: 2;\n      position: relative;\n      margin: 10%;\n      max-height: 80%;\n      border-radius: var(--dnn-controls-radius, 5px);\n      box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\n      display: block;\n      .close{\n        position: absolute;\n        background-color:white;\n        border: 2px solid white;\n        border-radius: 50%;\n        padding: 0;\n        margin: 0;\n        top: -12px;\n        right: -12px;\n        outline: none;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        &:focus, &:hover{\n          box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\n        }\n        svg{\n          width: 24px;\n          height: 24px;\n          color: grey;\n        }\n      }\n    }\n    &.visible{\n      visibility: visible;\n      opacity: 1;\n      .modal{\n        transform: scale(1);\n        box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\n        display: block;\n      }\n    }\n  }\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-modal',\n  styleUrl: 'dnn-modal.scss',\n  shadow: true\n})\nexport class DnnModal {\n  \n  @Element() el!: HTMLDnnModalElement;\n  \n  /**\n   * Pass false to remove the backdrop click auto-dismiss feature.\n   */\n  @Prop() backdropDismiss: boolean = true;\n\n  /**\n   * Optionally pass the aria-label text for the close button.\n   * Defaults to \"Close modal\" if not provided.\n   */\n  @Prop() closeText?: string = \"Close modal\";\n\n  /**\n   * Optionally you can pass false to not show the close button.\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\n   * or provide your own dismissal logic in the modal content.\n   */\n  @Prop() showCloseButton?: boolean = true;\n\n  /**\n   * Reflects the visible state of the modal.\n   */\n  @Prop({mutable: true, reflect: true}) visible: boolean = false;\n\n  /**\n   * Shows the modal\n   */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  /**\n   * Hides the modal\n   */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /**\n   * Fires when the modal is dismissed.\n   */\n  @Event() dismissed!: EventEmitter;\n\n  private handleDismiss(){\n    this.visible = false;\n    this.dismissed.emit();\n  }\n\n  private handleBackdropClick(e: MouseEvent): void {\n    const element = (e.target as HTMLElement);\n    if (element.id === \"backdrop\" && this.backdropDismiss){\n      this.handleDismiss();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"backdrop\"\n          class={this.visible ? 'overlay visible' : 'overlay'}\n          onClick={e => this.handleBackdropClick(e)}\n        >\n          <div class=\"modal\">\n            {this.showCloseButton &&\n              <button\n                class=\"close\"\n                aria-label={this.closeText}\n                onClick={() => this.handleDismiss()}\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n              </button>\n            }\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/dnn/dnn-permissions-grid.entry.js

@@ -0,0 +1,316 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-20e42ad7.js';
+
+const dnnPermissionsGridCss = ":host{display:block}.add-role-row{display:-ms-flexbox;display:flex;gap:1em;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.add-role-row label{margin-right:0.5em}.search-user{display:-ms-flexbox;display:flex;gap:1em;margin-top:1em}.search-user .search-control{position:relative}.search-user .search-control dnn-collapsible{position:absolute;left:0;top:calc(100% - 2px);width:100%;-webkit-box-shadow:0px 4px 4px;box-shadow:0px 4px 4px}.search-user .search-control dnn-collapsible .dropdown{background-color:white;border:1px solid lightgray;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.search-user .search-control dnn-collapsible .dropdown button{background-color:transparent;border:none;border-bottom:1px solid lightgray;padding:0.25em;margin:0;text-align:left}table{border:1px solid lightgray;border-collapse:collapse;margin-top:1em}table thead{text-align:center}table thead tr{border-bottom:1px solid lightgray}table thead th{background-color:lightgray;padding:0.25em 0.5em}table thead th:first-child{border-right:1px solid lightgray}table tbody tr{border-bottom:1px dotted lightgray}table tbody tr th{text-align:left;border-right:1px solid lightgray;padding:0 0.5em}table tbody tr td{text-align:center}table tbody tr td dnn-checkbox span{display:none}table tbody tr td button{background-color:transparent;border:0;padding:0;margin:0;margin-right:1em}";
+
+const DnnPermissionsGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.userSearchQueryChanged = createEvent(this, "userSearchQueryChanged", 7);
+    this.permissionsChanged = createEvent(this, "permissionsChanged", 7);
+    /** 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 watchers() { return {
+    "foundUsers": ["handleFoundUsersChanged"]
+  }; }
+};
+DnnPermissionsGrid.style = dnnPermissionsGridCss;
+
+export { DnnPermissionsGrid as dnn_permissions_grid };
+
+//# sourceMappingURL=dnn-permissions-grid.entry.js.map

package/dist/dnn/dnn-permissions-grid.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-permissions-grid.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-permissions-grid/dnn-permissions-grid.scss?tag=dnn-permissions-grid&encapsulation=shadow","./src/components/dnn-permissions-grid/dnn-permissions-grid.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.add-role-row{\n  display: flex;\n  gap: 1em;\n  align-items: center;\n  flex-wrap: wrap;\n  label{\n    margin-right:0.5em;\n  }\n}\n.search-user{\n  display: flex;\n  gap: 1em;\n  margin-top: 1em;\n  .search-control{\n    position: relative;\n    dnn-collapsible{\n      position: absolute;\n      left: 0;\n      top: calc(100% - 2px);\n      width: 100%;\n      box-shadow: 0px 4px 4px;\n      .dropdown{\n        background-color: white;\n        border: 1px solid lightgray;\n        display: flex;\n        flex-direction: column;\n        button{\n          background-color: transparent;\n          border: none;\n          border-bottom: 1px solid lightgray;\n          padding: 0.25em;\n          margin: 0;\n          text-align: left;\n        }\n      }\n    }\n  }\n}\ntable{\n  border: 1px solid lightgray;\n  border-collapse: collapse;\n  margin-top: 1em;\n  thead{\n    text-align: center;\n    tr{\n      border-bottom: 1px solid lightgray;\n    }\n    th{\n      background-color: lightgray;\n      padding: 0.25em 0.5em;\n      &:first-child{\n        border-right: 1px solid lightgray;\n      }\n    }\n  }\n  tbody{\n    tr{\n      border-bottom: 1px dotted lightgray;\n      th{\n        text-align: left;\n        border-right: 1px solid lightgray;\n        padding: 0 0.5em;\n      }\n      td{\n        text-align: center;\n        dnn-checkbox{\n          span{\n            display: none;\n          }\n        }\n        button{\n          background-color: transparent;\n          border: 0;\n          padding: 0;\n          margin: 0;\n          margin-right: 1em;\n        }\n      }\n    }\n  }\n}","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}"],"version":3}

package/dist/dnn/dnn-permissions-grid.system.entry.js

@@ -0,0 +1,2 @@
+var __spreadArray=this&&this.__spreadArray||function(e,s,r){if(r||arguments.length===2)for(var i=0,n=s.length,t;i<n;i++){if(t||!(i in s)){if(!t)t=Array.prototype.slice.call(s,0,i);t[i]=s[i]}}return e.concat(t||Array.prototype.slice.call(s))};System.register(["./index-c3cc3b5b.system.js"],(function(e){"use strict";var s,r,i,n;return{setters:[function(e){s=e.r;r=e.e;i=e.h;n=e.f}],execute:function(){var t=":host{display:block}.add-role-row{display:-ms-flexbox;display:flex;gap:1em;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.add-role-row label{margin-right:0.5em}.search-user{display:-ms-flexbox;display:flex;gap:1em;margin-top:1em}.search-user .search-control{position:relative}.search-user .search-control dnn-collapsible{position:absolute;left:0;top:calc(100% - 2px);width:100%;-webkit-box-shadow:0px 4px 4px;box-shadow:0px 4px 4px}.search-user .search-control dnn-collapsible .dropdown{background-color:white;border:1px solid lightgray;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.search-user .search-control dnn-collapsible .dropdown button{background-color:transparent;border:none;border-bottom:1px solid lightgray;padding:0.25em;margin:0;text-align:left}table{border:1px solid lightgray;border-collapse:collapse;margin-top:1em}table thead{text-align:center}table thead tr{border-bottom:1px solid lightgray}table thead th{background-color:lightgray;padding:0.25em 0.5em}table thead th:first-child{border-right:1px solid lightgray}table tbody tr{border-bottom:1px dotted lightgray}table tbody tr th{text-align:left;border-right:1px solid lightgray;padding:0 0.5em}table tbody tr td{text-align:center}table tbody tr td dnn-checkbox span{display:none}table tbody tr td button{background-color:transparent;border:0;padding:0;margin:0;margin-right:1em}";var o=e("dnn_permissions_grid",function(){function e(e){s(this,e);this.userSearchQueryChanged=r(this,"userSearchQueryChanged",7);this.permissionsChanged=r(this,"permissionsChanged",7);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"};this.foundUsers=[];this.selectedRoleGroupId=-1}e.prototype.handleFoundUsersChanged=function(e){var s=this;if((e===null||e===void 0?void 0:e.length)>0){setTimeout((function(){s.userCollapsible.expanded=true}),100)}};e.prototype.componentWillLoad=function(){document.addEventListener("click",this.dismissUserResults.bind(this))};e.prototype.disconnectedCallback=function(){document.removeEventListener("click",this.disconnectedCallback.bind(this))};e.prototype.dismissUserResults=function(e){var s=this.roleDropDown.getBoundingClientRect();if(e.pageX>s.right||e.pageX<s.left||e.pageY>s.bottom||e.pageY<s.top){this.userCollapsible.expanded=false}};e.prototype.handleRoleGroupChanged=function(e){var s=e.selectedIndex;var r=Number.parseInt(e.options[s].value);this.selectedRoleGroupId=r};e.prototype.addRole=function(){var e=Number.parseInt(this.roleDropDown.options[this.roleDropDown.selectedIndex].value);var s=this.roles.filter((function(s){return s.RoleId==e}))[0];this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:__spreadArray(__spreadArray([],this.permissions.rolePermissions,true),[{default:false,locked:false,permissions:[],roleId:s.RoleId,roleName:s.RoleName}],false)});this.permissionsChanged.emit(this.permissions)};e.prototype.addUser=function(){if(this.pickedUser!=undefined){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:__spreadArray(__spreadArray([],this.permissions.userPermissions,true),[{displayName:this.pickedUser.displayName,permissions:[],userId:this.pickedUser.userId}],false)});this.pickedUser=undefined;this.userQuery="";this.permissionsChanged.emit(this.permissions)}};e.prototype.getRoles=function(){var e=this;var s=this.roles.filter((function(s){return!e.permissions.rolePermissions.some((function(e){return e.roleId==s.RoleId}))}));if(this.selectedRoleGroupId==-2){return s}if(this.selectedRoleGroupId==-1){return s.filter((function(e){return e.IsSystemRole}))}return s.filter((function(s){return s.RoleGroupId==e.selectedRoleGroupId}))};e.prototype.renderRoleCheckBox=function(e,s){var r=this;var n=e.permissions.filter((function(e){return e.permissionId==s.permissionId}))[0];if(e.locked){return i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",{fill:"none"},i("path",{d:"M0 0h24v24H0V0z"}),i("path",{d:"M0 0h24v24H0V0z",opacity:".87"})),i("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"}))}var t=n==undefined?"intermediate":n.allowAccess?"checked":"unchecked";return i("dnn-checkbox",{"use-intermediate":true,checked:t,onCheckedchange:function(i){return r.handleRoleChanged(i.detail,e,s)}},i("div",{slot:"intermediateicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("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"}))),i("div",{slot:"uncheckedicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("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"}))),i("span",null,s.permissionName))};e.prototype.renderUserCheckBox=function(e,s){var r=this;var n=e.permissions.filter((function(e){return e.permissionId==s.permissionId}))[0];var t=n==undefined?"intermediate":n.allowAccess?"checked":"unchecked";return i("dnn-checkbox",{"use-intermediate":true,checked:t,onCheckedchange:function(i){return r.handleUserChanged(i.detail,e,s)}},i("div",{slot:"intermediateicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("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"}))),i("div",{slot:"uncheckedicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("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"}))),i("span",null,s.permissionName))};e.prototype.handleRoleChanged=function(e,s,r){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:__spreadArray([],this.permissions.rolePermissions.map((function(e){if(e.roleId!=s.roleId){return e}var i=Object.assign({},e);i.permissions=__spreadArray(__spreadArray([],i.permissions.filter((function(e){return e.permissionId!=r.permissionId})),true),[{allowAccess:false,fullControl:false,permissionCode:r.permissionCode,permissionId:r.permissionId,permissionKey:r.permissionKey,permissionName:r.permissionName,view:false}],false);return i})),true)});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:__spreadArray([],this.permissions.rolePermissions.map((function(e){if(e.roleId!=s.roleId){return e}var i=Object.assign({},e);i.permissions=__spreadArray(__spreadArray([],i.permissions.filter((function(e){return e.permissionId!=r.permissionId})),true),[{allowAccess:true,fullControl:false,permissionCode:r.permissionCode,permissionId:r.permissionId,permissionKey:r.permissionKey,permissionName:r.permissionName,view:false}],false);return i})),true)});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:__spreadArray([],this.permissions.rolePermissions.map((function(e){if(e.roleId!=s.roleId){return e}var i=Object.assign({},e);i.permissions=__spreadArray([],i.permissions.filter((function(e){return e.permissionId!=r.permissionId})),true);return i})),true)});break;default:break}this.permissionsChanged.emit(this.permissions)};e.prototype.handleUserChanged=function(e,s,r){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:__spreadArray([],this.permissions.userPermissions.map((function(e){if(e.userId!=s.userId){return e}var i=Object.assign({},e);i.permissions=__spreadArray(__spreadArray([],i.permissions.filter((function(e){return e.permissionId!=r.permissionId})),true),[{allowAccess:false,fullControl:false,permissionCode:r.permissionCode,permissionId:r.permissionId,permissionKey:r.permissionKey,permissionName:r.permissionName,view:false}],false);return i})),true)});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:__spreadArray([],this.permissions.userPermissions.map((function(e){if(e.userId!=s.userId){return e}var i=Object.assign({},e);i.permissions=__spreadArray(__spreadArray([],i.permissions.filter((function(e){return e.permissionId!=r.permissionId})),true),[{allowAccess:true,fullControl:false,permissionCode:r.permissionCode,permissionId:r.permissionId,permissionKey:r.permissionKey,permissionName:r.permissionName,view:false}],false);return i})),true)});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:__spreadArray([],this.permissions.userPermissions.map((function(e){if(e.userId!=s.userId){return e}var i=Object.assign({},e);i.permissions=__spreadArray([],i.permissions.filter((function(e){return e.permissionId!=r.permissionId})),true);return i})),true)});break;default:break}this.permissionsChanged.emit(this.permissions)};e.prototype.removeRole=function(e){this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:__spreadArray([],this.permissions.rolePermissions.filter((function(s){return s.roleId!=e.roleId})),true)});this.permissionsChanged.emit()};e.prototype.removeUser=function(e){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:__spreadArray([],this.permissions.userPermissions.filter((function(s){return s.userId!=e.userId})),true)});this.permissionsChanged.emit(this.permissions)};e.prototype.handleQueryChanged=function(e){this.userQuery=e;if(e==undefined||e.length==0){this.userCollapsible.expanded=false;this.pickedUser=undefined;this.foundUsers=[];return}this.userSearchQueryChanged.emit(e)};e.prototype.handleSearchUserFieldKeyDown=function(e){if(e.key!="ArrowDown"){return}e.preventDefault();var s=this.userCollapsible.querySelector("button");if(s!=undefined){s.focus()}};e.prototype.handleSearchedUserKeyDown=function(e){var s=e.target;switch(e.key){case"ArrowDown":e.preventDefault();var r=s.nextElementSibling;r===null||r===void 0?void 0:r.focus();break;case"ArrowUp":e.preventDefault();var i=s.previousElementSibling;i===null||i===void 0?void 0:i.focus();break;default:break}};e.prototype.handleUserPicked=function(e){this.userQuery=e.displayName;this.pickedUser=e};e.prototype.getFilteredUsers=function(){var e=this;return this.foundUsers.filter((function(s){return!e.permissions.userPermissions.some((function(e){return e.userId==s.userId}))}))};e.prototype.render=function(){var e=this;var s=this.getRoles();return i(n,null,i("div",{class:"add-role-row"},i("div",{class:"dropdown"},i("label",null,this.resx.FilterByGroup," :"),i("select",{onChange:function(s){return e.handleRoleGroupChanged(s.target)}},i("option",{value:-2,selected:this.selectedRoleGroupId==-2},this.resx.AllRoles),i("option",{value:-1,selected:this.selectedRoleGroupId==-1},this.resx.GlobalRoles),this.roleGroups.map((function(s){return i("option",{value:s.id,selected:e.selectedRoleGroupId==s.id},s.name)})))),s&&s.length>0&&[i("div",{class:"dropdown"},i("label",null,this.resx.SelectRole," :"),i("select",{ref:function(s){return e.roleDropDown=s}},this.getRoles().map((function(e){return i("option",{value:e.RoleId},e.RoleName)})))),i("dnn-button",{type:"primary",onClick:function(){return e.addRole()}},this.resx.Add)]),i("table",{class:"roles-table"},i("caption",null,this.resx.RolePermissions),i("thead",null,i("tr",null,i("th",null,this.resx.Role),this.permissions.permissionDefinitions.map((function(e){return i("th",null,e.permissionName)})),i("th",null," "))),i("tbody",null,this.permissions.rolePermissions.map((function(s){return i("tr",null,i("th",null,s.roleName),e.permissions.permissionDefinitions.map((function(r){return i("td",null,e.renderRoleCheckBox(s,r))})),i("td",null,!s.default&&i("button",{onClick:function(){return e.removeRole(s)}},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("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"})))))})))),i("div",{class:"search-user"},i("div",{class:"search-control"},i("dnn-searchbox",{placeholder:this.resx.User,debounced:true,onQueryChanged:function(s){return e.handleQueryChanged(s.detail)},onKeyDown:function(s){return e.handleSearchUserFieldKeyDown(s)},query:this.userQuery}),i("dnn-collapsible",{ref:function(s){return e.userCollapsible=s}},i("div",{class:"dropdown"},this.getFilteredUsers().map((function(s){return i("button",{onKeyDown:function(s){return e.handleSearchedUserKeyDown(s)},onClick:function(){return e.handleUserPicked(s)}},s.displayName)}))))),this.pickedUser&&i("dnn-button",{onClick:function(){return e.addUser()}},this.resx.Add)),this.permissions.userPermissions&&this.permissions.userPermissions.length>0&&i("table",{class:"users-table"},i("caption",null,this.resx.UserPermissions),i("thead",null,i("tr",null,i("th",null,this.resx.User),this.permissions.permissionDefinitions.map((function(e){return i("th",null,e.permissionName)})),i("th",null," "))),i("tbody",null,this.permissions.userPermissions.map((function(s){return i("tr",null,i("th",null,s.displayName),e.permissions.permissionDefinitions.map((function(r){return i("td",null,e.renderUserCheckBox(s,r))})),i("td",null,i("button",{onClick:function(){return e.removeUser(s)}},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("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"})))))})))))};Object.defineProperty(e,"watchers",{get:function(){return{foundUsers:["handleFoundUsersChanged"]}},enumerable:false,configurable:true});return e}());o.style=t}}}));
+//# sourceMappingURL=dnn-permissions-grid.system.entry.js.map

package/dist/dnn/dnn-permissions-grid.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dnn-permissions-grid/dnn-permissions-grid.scss?tag=dnn-permissions-grid&encapsulation=shadow","src/components/dnn-permissions-grid/dnn-permissions-grid.tsx"],"names":["dnnPermissionsGridCss","DnnPermissionsGrid","exports","class_1","hostRef","this","resx","Add","AllRoles","FilterByGroup","GlobalRoles","Role","RolePermissions","SelectRole","User","UserPermissions","foundUsers","selectedRoleGroupId","prototype","handleFoundUsersChanged","newValue","_this","length","setTimeout","userCollapsible","expanded","componentWillLoad","document","addEventListener","dismissUserResults","bind","disconnectedCallback","removeEventListener","e","dropdownRect","roleDropDown","getBoundingClientRect","pageX","right","left","pageY","bottom","top","handleRoleGroupChanged","dropdown","index","selectedIndex","value","Number","parseInt","options","addRole","roleId","role","roles","filter","r","RoleId","permissions","Object","assign","rolePermissions","__spreadArray","default","locked","roleName","RoleName","permissionsChanged","emit","addUser","pickedUser","undefined","userPermissions","displayName","userId","userQuery","getRoles","filteredRoles","some","rp","IsSystemRole","RoleGroupId","renderRoleCheckBox","rolePermission","permissionDefinition","item","permission","permissionId","h","xmlns","height","viewBox","width","fill","d","opacity","checked","allowAccess","use-intermediate","onCheckedchange","handleRoleChanged","detail","slot","permissionName","renderUserCheckBox","userPermission","handleUserChanged","map","newRolePermission","p","fullControl","permissionCode","permissionKey","view","u","newUserPermission","removeRole","removeUser","up","handleQueryChanged","query","userSearchQueryChanged","handleSearchUserFieldKeyDown","key","preventDefault","firstButton","querySelector","focus","handleSearchedUserKeyDown","button","target","nextButton","nextElementSibling","previousButton","previousElementSibling","handleUserPicked","searchedUser","getFilteredUsers","fu","render","Host","class","onChange","selected","roleGroups","roleGroup","id","name","ref","el","type","onClick","permissionDefinitions","placeholder","debounced","onQueryChanged","onKeyDown"],"mappings":"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","sourcesContent":[":host {\n  display: block;\n}\n\n.add-role-row{\n  display: flex;\n  gap: 1em;\n  align-items: center;\n  flex-wrap: wrap;\n  label{\n    margin-right:0.5em;\n  }\n}\n.search-user{\n  display: flex;\n  gap: 1em;\n  margin-top: 1em;\n  .search-control{\n    position: relative;\n    dnn-collapsible{\n      position: absolute;\n      left: 0;\n      top: calc(100% - 2px);\n      width: 100%;\n      box-shadow: 0px 4px 4px;\n      .dropdown{\n        background-color: white;\n        border: 1px solid lightgray;\n        display: flex;\n        flex-direction: column;\n        button{\n          background-color: transparent;\n          border: none;\n          border-bottom: 1px solid lightgray;\n          padding: 0.25em;\n          margin: 0;\n          text-align: left;\n        }\n      }\n    }\n  }\n}\ntable{\n  border: 1px solid lightgray;\n  border-collapse: collapse;\n  margin-top: 1em;\n  thead{\n    text-align: center;\n    tr{\n      border-bottom: 1px solid lightgray;\n    }\n    th{\n      background-color: lightgray;\n      padding: 0.25em 0.5em;\n      &:first-child{\n        border-right: 1px solid lightgray;\n      }\n    }\n  }\n  tbody{\n    tr{\n      border-bottom: 1px dotted lightgray;\n      th{\n        text-align: left;\n        border-right: 1px solid lightgray;\n        padding: 0 0.5em;\n      }\n      td{\n        text-align: center;\n        dnn-checkbox{\n          span{\n            display: none;\n          }\n        }\n        button{\n          background-color: transparent;\n          border: 0;\n          padding: 0;\n          margin: 0;\n          margin-right: 1em;\n        }\n      }\n    }\n  }\n}","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}"]}