@dnncommunity/dnn-elements 0.24.3 → 0.25.0

package/dist/cjs/dnn-checkbox.cjs.entry.js

@@ -22,6 +22,7 @@ const DnnCheckbox = class {
         this.useIntermediate = false;
         this.value = "on";
         this.name = undefined;
+        this.nextStateHandler = this.defaultNextStateHandler;
         this.focused = false;
     }
     handleClick() {
@@ -43,6 +44,16 @@ const DnnCheckbox = class {
         this.internals.setValidity({});
         this.checked = this.originalChecked;
     }
+    defaultNextStateHandler(currentState) {
+        switch (currentState) {
+            case "checked":
+                return "intermediate";
+            case "intermediate":
+                return "unchecked";
+            case "unchecked":
+                return "checked";
+        }
+    }
     changeState() {
         if (!this.useIntermediate) {
             switch (this.checked) {
@@ -57,21 +68,11 @@ const DnnCheckbox = class {
             this.checkedchange.emit(this.checked);
             return;
         }
-        switch (this.checked) {
-            case "checked":
-                this.checked = "intermediate";
-                break;
-            case "intermediate":
-                this.checked = "unchecked";
-                break;
-            case "unchecked":
-                this.checked = "checked";
-                break;
-        }
+        this.checked = this.nextStateHandler(this.checked);
         this.checkedchange.emit(this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '33f0a20c02ea3d1be40803102dca7298fc9f0a8d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("button", { key: '7249f860fea2548cd7469daf88594ceaa36ad69c', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}` }, index.h("div", { key: '8033ce35b1ad4733c5bc3151e183bcef5ad3608c', class: "unchecked" }, index.h("slot", { key: 'bd22365edda141a1d99f12197579ef08f145e298', name: "uncheckedicon" }, index.h("svg", { key: 'b8fdd87c069040ec31552c9c97fe9a73d6b1566b', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '786778ac6170c2efe8e60399ce377cb3f4b81496', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '2875985769c607626e17552bc86ee7eef8f1bd2b', 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" })))), index.h("div", { key: '3b1022f97690827381751638a2326806f6bbc914', class: "checked" }, index.h("slot", { key: 'd47bf5c9b8227f72f5af9d8a9497ef90fe9ed54a', name: "checkedicon" }, index.h("svg", { key: '579f8cedf788976a23929f230afe489be49056a3', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'a22e16649d8fcbae5f382f585ec44d877592d072', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'f851cbcf9ff4ea371c3abeb9fdfbd73199d95633', d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })))), index.h("div", { key: 'dac2ba83db7a5f2a791db48ef4366c846ece0ac1', class: "intermediate" }, index.h("slot", { key: '99794fb6b191a7c61efcf77683125d5e38075347', name: "intermediateicon" }, index.h("svg", { key: 'b3c5fa7961169fd5ea9437346cd5246a3c3f2dc3', class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", { key: '53bfc9815a54ee36bd9cde2b35ca35bdb052a559' }, index.h("rect", { key: '6938a2a44ea6a23b3896ea7186d1109d2e06b4f8', fill: "none", height: "24", width: "24" })), index.h("g", { key: 'beea185432ee31b13f4368cd288195fda4798569' }, index.h("g", { key: '8c9b0636ce4685fd714ae76d2cd8e63ffdc0e590' }, index.h("g", { key: 'b6a8198cb9067af8bd439948e2a23e58b6ff29dc' }, index.h("path", { key: '5e0f01cc5c7033845f7f41f3721e903cc8436f91', d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" }))))))))));
+        return (index.h(index.Host, { key: '203ef65e8e0fe77de58322857c05a37c0c1dab28', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("button", { key: 'dadc71798f00a3f5f5187298a19ba1e1ec521e68', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}` }, index.h("div", { key: 'a6d9d15cb1775a32fb90ec701607c3c1b0103fd8', class: "unchecked" }, index.h("slot", { key: '587b36e647585f3b0dd888557ce06dbd014568ec', name: "uncheckedicon" }, index.h("svg", { key: '1034bdab291e80ef743ed69cdf0161b6d2fcb41c', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '92391ad8827b032fc6ce9ac296fd693097c9fd2b', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '185f2a78f5e3fe761bf28a16154383e2435253c4', 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" })))), index.h("div", { key: 'f006e6133f020fa6c3efbb502a3fa43934c6a46f', class: "checked" }, index.h("slot", { key: 'b1e0190f34c0788d435a77d3e775160f3a201bfa', name: "checkedicon" }, index.h("svg", { key: '6dec3ff7ca88000ae655d5c9e717cc471eb59155', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '466b5cd85a05c0b1a6e48720419f4f92dc97ded1', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'd3737cd5c0f21b2d272d8995c9042af3aa28f30a', d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })))), index.h("div", { key: 'b0f81a2a1f2dd89c82510640f1ae0d9c3c2ae3f0', class: "intermediate" }, index.h("slot", { key: '24139853e12c94dc834fddc547396d508aac252d', name: "intermediateicon" }, index.h("svg", { key: '4c84a480f7c1fb3c72f727477602341a44e605d5', class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", { key: '808466f6ebab722b0fc256b0d7a5fa04f967e829' }, index.h("rect", { key: '82357c3a4d3b23752a0e034676b26cef3f271b29', fill: "none", height: "24", width: "24" })), index.h("g", { key: 'a192fd5a937f1d5ba68b563af131ae99bd4bafcf' }, index.h("g", { key: 'afd6449f0339e18d7ab621648c69d585aa417ebd' }, index.h("g", { key: '1a94075684aae413678947650d9f91cd8a010ee0' }, index.h("path", { key: 'a6472c7416dcc350397319d9e106ec679284418a', d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" }))))))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/dnn-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-checkbox.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx"],"sourcesContent":[":host {\n    /**\n    * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\n    */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin: 3px;\n}\nbutton{\n  cursor: pointer; \n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  .unchecked, .checked, .intermediate{\n    display: none;\n  }\n  &.checked .checked, &.unchecked .unchecked, &.intermediate .intermediate{\n    display: block;\n  }\n  svg.undefined{\n    opacity: 0.45;\n    cursor: default;\n  }\n  &:focus-visible{\n    box-shadow: 0 0 2px 2px var(--focus-color);\n  }\n}\nlabel {\n  cursor: pointer; \n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State, Listen } from '@stencil/core';\nimport { CheckedState } from './types';\n\n/**\n * @slot @deprecated - The label for the checkbox - Obsolete, implement your own label.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n  tag: 'dnn-checkbox',\n  styleUrl: 'dnn-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnCheckbox {\n  @Element() el: HTMLDnnCheckboxElement;\n\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n  @Prop({mutable: true}) checked: CheckedState = \"unchecked\";\n\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n  @Prop() useIntermediate: boolean = false;\n\n  /** The value for this checkbox (not to be confused with its checked state). */\n  @Prop() value: string = \"on\";\n\n  /** The name to show in the formData (if using forms). */\n  @Prop() name: string;\n\n  /** Fires up when the checkbox checked property changes. */\n  @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n  @Listen(\"click\", { capture: true })\n  handleClick() {\n    this.changeState();\n  }\n\n  @State() focused = false;\n  \n  @AttachInternals() internals: ElementInternals;\n  \n  private originalChecked: CheckedState;\n  private button: HTMLButtonElement;\n\n  componentWillLoad() {\n    this.originalChecked = this.checked;\n    this.internals.setFormValue(this.checked);\n  }\n\n  @Watch(\"checked\")\n  handleCheckedChange(newValue: CheckedState, oldValue: CheckedState) {\n    if (newValue !== oldValue && this.checked == \"checked\") {\n      var data = new FormData();\n      data.append(this.name, this.value);\n      this.internals.setFormValue(data);\n    }\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.checked = this.originalChecked;\n  }\n\n  private changeState(): void {\n    if (!this.useIntermediate){\n      switch (this.checked) {\n        case \"checked\":\n          this.checked = \"unchecked\";\n          break;\n        case \"unchecked\":\n        case \"intermediate\":\n          this.checked = \"checked\";\n          break;\n        default:\n          break;\n      }\n      this.checkedchange.emit(this.checked);\n      return;\n    }\n    switch (this.checked) {\n      case \"checked\":\n        this.checked = \"intermediate\";\n        break;\n      case \"intermediate\":\n        this.checked = \"unchecked\";\n        break;\n      case \"unchecked\":\n        this.checked = \"checked\";\n        break;\n      default:\n        break;\n    }\n    this.checkedchange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.button.focus()}\n        onBlur={() => this.button.blur()}\n      >\n        <button\n          ref={el => this.button = el}\n          onFocus={() => this.focused = true}\n          onBlur={() => this.focused = false}\n          class={`icon ${this.checked}`}\n        >\n          <div class=\"unchecked\">\n            <slot name=\"uncheckedicon\">\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=\"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            </slot>\n          </div>\n          <div class=\"checked\">\n            <slot name=\"checkedicon\">\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=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"intermediate\">\n            <slot name=\"intermediateicon\">\n              <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n            </slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"dnn-checkbox.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx"],"sourcesContent":[":host {\n    /**\n    * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\n    */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin: 3px;\n}\nbutton{\n  cursor: pointer; \n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  .unchecked, .checked, .intermediate{\n    display: none;\n  }\n  &.checked .checked, &.unchecked .unchecked, &.intermediate .intermediate{\n    display: block;\n  }\n  svg.undefined{\n    opacity: 0.45;\n    cursor: default;\n  }\n  &:focus-visible{\n    box-shadow: 0 0 2px 2px var(--focus-color);\n  }\n}\nlabel {\n  cursor: pointer; \n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State, Listen } from '@stencil/core';\nimport { CheckedState } from './types';\n\n/**\n * @slot @deprecated - The label for the checkbox - Obsolete, implement your own label.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n  tag: 'dnn-checkbox',\n  styleUrl: 'dnn-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnCheckbox {\n  @Element() el: HTMLDnnCheckboxElement;\n\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n  @Prop({mutable: true}) checked: CheckedState = \"unchecked\";\n\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n  @Prop() useIntermediate: boolean = false;\n\n  /** The value for this checkbox (not to be confused with its checked state). */\n  @Prop() value: string = \"on\";\n\n  /** The name to show in the formData (if using forms). */\n  @Prop() name: string;\n\n  /** A function that will be called when the checkbox needs to change state and returns the next state.\n   * Can be used to customize the order of the states when the component is clicked.\n   * Only called if you also use the tri-state feature (useIntermediate).\n   */\n  @Prop() nextStateHandler: (currentState: CheckedState) => CheckedState = this.defaultNextStateHandler;\n\n  /** Fires up when the checkbox checked property changes. */\n  @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n  @Listen(\"click\", { capture: true })\n  handleClick() {\n    this.changeState();\n  }\n\n  @State() focused = false;\n  \n  @AttachInternals() internals: ElementInternals;\n  \n  private originalChecked: CheckedState;\n  private button: HTMLButtonElement;\n\n  componentWillLoad() {\n    this.originalChecked = this.checked;\n    this.internals.setFormValue(this.checked);\n  }\n\n  @Watch(\"checked\")\n  handleCheckedChange(newValue: CheckedState, oldValue: CheckedState) {\n    if (newValue !== oldValue && this.checked == \"checked\") {\n      var data = new FormData();\n      data.append(this.name, this.value);\n      this.internals.setFormValue(data);\n    }\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.checked = this.originalChecked;\n  }\n\n  private defaultNextStateHandler(currentState: CheckedState): CheckedState {\n    switch (currentState) {\n      case \"checked\":\n          return \"intermediate\";\n        case \"intermediate\":\n          return \"unchecked\";\n        case \"unchecked\":\n          return \"checked\";\n    }\n  }\n\n  private changeState(): void {\n    if (!this.useIntermediate){\n      switch (this.checked) {\n        case \"checked\":\n          this.checked = \"unchecked\";\n          break;\n        case \"unchecked\":\n        case \"intermediate\":\n          this.checked = \"checked\";\n          break;\n        default:\n          break;\n      }\n      this.checkedchange.emit(this.checked);\n      return;\n    }\n    \n    this.checked = this.nextStateHandler(this.checked);\n    this.checkedchange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.button.focus()}\n        onBlur={() => this.button.blur()}\n      >\n        <button\n          ref={el => this.button = el}\n          onFocus={() => this.focused = true}\n          onBlur={() => this.focused = false}\n          class={`icon ${this.checked}`}\n        >\n          <div class=\"unchecked\">\n            <slot name=\"uncheckedicon\">\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=\"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            </slot>\n          </div>\n          <div class=\"checked\">\n            <slot name=\"checkedicon\">\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=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"intermediate\">\n            <slot name=\"intermediateicon\">\n              <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n            </slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -116,12 +116,22 @@ const DnnPermissionsGrid = class {
             return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", { fill: "none" }, index.h("path", { d: "M0 0h24v24H0V0z" }), index.h("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })), index.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 (index.h("label", null, index.h("span", { class: "hidden" }, permissionDefinition.permissionName), index.h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition) }, index.h("div", { slot: "intermediateicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))), index.h("div", { slot: "uncheckedicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))))));
+        return (index.h("label", null, index.h("span", { class: "hidden" }, permissionDefinition.permissionName), index.h("dnn-checkbox", { useIntermediate: true, nextStateHandler: state => this.handleNextState(state), checked: checked, onCheckedchange: e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition) }, index.h("div", { slot: "intermediateicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))), index.h("div", { slot: "uncheckedicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))))));
     }
     renderUserCheckBox(userPermission, permissionDefinition) {
         const item = userPermission.permissions.filter(permission => permission.permissionId == permissionDefinition.permissionId)[0];
         const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked";
-        return (index.h("label", null, index.h("span", { class: "hidden" }, permissionDefinition.permissionName), index.h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleUserChanged(e.detail, userPermission, permissionDefinition) }, index.h("div", { slot: "intermediateicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))), index.h("div", { slot: "uncheckedicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))))));
+        return (index.h("label", null, index.h("span", { class: "hidden" }, permissionDefinition.permissionName), index.h("dnn-checkbox", { useIntermediate: true, nextStateHandler: state => this.handleNextState(state), checked: checked, onCheckedchange: e => this.handleUserChanged(e.detail, userPermission, permissionDefinition) }, index.h("div", { slot: "intermediateicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))), index.h("div", { slot: "uncheckedicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))))));
+    }
+    handleNextState(state) {
+        switch (state) {
+            case "checked":
+                return "unchecked";
+            case "unchecked":
+                return "intermediate";
+            default:
+                return "checked";
+        }
     }
     handleRoleChanged(checked, rolePermission, permissionDefinition) {
         switch (checked) {
@@ -309,13 +319,13 @@ const DnnPermissionsGrid = class {
     }
     render() {
         const filteredRoles = this.getRoles();
-        return (index.h(index.Host, { key: 'cf72a4f914f45cc67dc2c3eda77f9edde7f60270', tabIndex: this.focused ? -1 : 0, onFocus: () => this.rolesDropdown.focus(), onBlur: () => this.rolesDropdown.blur() }, index.h("div", { key: '8c4ebce85c93f4f08c4ad24f0b6223de8dc6449c', class: "add-role-row" }, index.h("div", { key: '585768e943955c909194a25dba06a8b84ae4e7be', class: "dropdown" }, index.h("label", { key: 'e9823e0e553a3ae23384e79354696de2c649bea2' }, this.localResx.FilterByGroup, " :"), index.h("select", { key: '5a8cc2742a103bd024243708b18c069b43e70674', ref: el => this.rolesDropdown = el, onChange: e => this.handleRoleGroupChanged(e.target), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("option", { key: 'daa1a622f34c7b08145b8486201ffaacbb129b78', value: -2, selected: this.selectedRoleGroupId == -2 }, this.localResx.AllRoles), index.h("option", { key: '039fb0a46c56712dccc0d76b3a8872ff8b2d06db', value: -1, selected: this.selectedRoleGroupId == -1 }, this.localResx.GlobalRoles), this.roleGroups.map(roleGroup => index.h("option", { value: roleGroup.id, selected: this.selectedRoleGroupId == roleGroup.id }, roleGroup.name)))), filteredRoles && filteredRoles.length > 0 && [
-            index.h("div", { key: '1db52ea02ecf75268ec9996fbd68ea7726733679', class: "dropdown" }, index.h("label", { key: '7fa52a0247951ca88ad80cbf810e7810688dc918' }, this.localResx.SelectRole, " :"), index.h("select", { key: 'cf7baac0e6c22c33ddcac117f05046b942ad6d4e', ref: el => this.roleDropDown = el }, this.getRoles().map(role => index.h("option", { value: role.RoleId }, role.RoleName)))),
-            index.h("dnn-button", { key: 'b95196cf538d86c255440a5a88a7f85f019b6632', type: "primary", onClick: () => this.addRole() }, this.localResx.Add)
-        ]), index.h("table", { key: '51110cb5293a2b753f808572418210094bdc1f7d', class: "roles-table" }, index.h("caption", { key: '2c1abc3f0fe54307b48be57e7f9b61939b4822b3' }, this.localResx.RolePermissions), index.h("thead", { key: 'b7e89b31ba60e0b0c866f2c4f83f5df98d6f83b3' }, index.h("tr", { key: '4f2c16c8425483d7dc1aba76cedd20083dcf9dc3' }, index.h("th", { key: '4c0910460873ecab0b9f55352be83c56c575f6a6' }, this.localResx.Role), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("th", null, permissionDefinition.permissionName)), index.h("th", { key: 'a41f294b08733b13d2f75032d9b99891727a6b21' }, "\u00A0"))), index.h("tbody", { key: '66367d43acd71c2660ee7e38a383c2cc4cdeff2b' }, this.permissions.rolePermissions.map(rolePermission => index.h("tr", null, index.h("th", null, rolePermission.roleName), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("td", null, this.renderRoleCheckBox(rolePermission, permissionDefinition))), index.h("td", null, !rolePermission.default &&
-            index.h("button", { onClick: () => this.removeRole(rolePermission) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" })))))))), index.h("div", { key: '96d18900b0c2e1915b49dbae8dfca84ce22f9224', class: "search-user" }, index.h("div", { key: 'cd5f5916d43a53a827654226fb2ca5cf2842d2fd', class: "search-control" }, index.h("dnn-searchbox", { key: '47a8f6b69fba9e87806a02c2101d8eac0d65cfb7', placeholder: this.localResx.User, debounced: true, onQueryChanged: e => this.handleQueryChanged(e.detail), onKeyDown: e => this.handleSearchUserFieldKeyDown(e), query: this.userQuery }), index.h("dnn-collapsible", { key: '21e8ecd420d7a4174a1e8633a00ff609c88391d3', ref: el => this.userCollapsible = el }, index.h("div", { key: 'e8996049d1743358d16515c6e7a62fbf1c3449f4', class: "dropdown" }, this.getFilteredUsers().map(searchedUser => index.h("button", { onKeyDown: e => this.handleSearchedUserKeyDown(e), onClick: () => this.handleUserPicked(searchedUser) }, searchedUser.displayName))))), this.pickedUser &&
-            index.h("dnn-button", { key: '5a3159e4b75a1eaf7e04d76a5e7c207efbcb4bbd', onClick: () => this.addUser() }, this.localResx.Add)), this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&
-            index.h("table", { key: '1c67fd050abc84cc1d46c2f22ac54b72536c059c', class: "users-table" }, index.h("caption", { key: '5a94b92f18104a0307e2282945f36855d055c09a' }, this.localResx.UserPermissions), index.h("thead", { key: '85447eb661dae9d68aa076275b4bc6a3d710d86c' }, index.h("tr", { key: '896a922a18c02b682a48ee613088bf3140291d02' }, index.h("th", { key: 'd6606accc9147704a1e71a401550b161f76a132c' }, this.localResx.User), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("th", null, permissionDefinition.permissionName)), index.h("th", { key: '87d8b97ab435a913177f828afa637740ba4a2d7b' }, "\u00A0"))), index.h("tbody", { key: '8649339d5206c4d2c096d97705fa84c56735a8d1' }, this.permissions.userPermissions.map(userPermission => index.h("tr", null, index.h("th", null, userPermission.displayName), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("td", null, this.renderUserCheckBox(userPermission, permissionDefinition))), index.h("td", null, index.h("button", { onClick: () => this.removeUser(userPermission) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))))))))));
+        return (index.h(index.Host, { key: 'aa5bcb726609a04b6dad78274a67511950d761f4', tabIndex: this.focused ? -1 : 0, onFocus: () => this.rolesDropdown.focus(), onBlur: () => this.rolesDropdown.blur() }, index.h("div", { key: '787605cbb898d983fdd66311a165febdc3604365', class: "add-role-row" }, index.h("div", { key: '5b0a39fb334f9b24e9b2a7bfdd4dddac29a1a38e', class: "dropdown" }, index.h("label", { key: '3fe9beefb2addc2f48e62f1b00c49a24c3dd077f' }, this.localResx.FilterByGroup, " :"), index.h("select", { key: '6949c0de5aa4e33c41083cf208988a041955a5f8', ref: el => this.rolesDropdown = el, onChange: e => this.handleRoleGroupChanged(e.target), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("option", { key: 'a68744b35d50c76c74ecab7f9444161b6a0ad357', value: -2, selected: this.selectedRoleGroupId == -2 }, this.localResx.AllRoles), index.h("option", { key: '298a553685cd393efea7c19fc84ff3f5b6e2c14e', value: -1, selected: this.selectedRoleGroupId == -1 }, this.localResx.GlobalRoles), this.roleGroups.map(roleGroup => index.h("option", { value: roleGroup.id, selected: this.selectedRoleGroupId == roleGroup.id }, roleGroup.name)))), filteredRoles && filteredRoles.length > 0 && [
+            index.h("div", { key: '81aa6af63532b45a12de309d61d91025487bb89b', class: "dropdown" }, index.h("label", { key: 'f7955613ad565920eea350fbc5e43f71b3128077' }, this.localResx.SelectRole, " :"), index.h("select", { key: 'f5f2ea97e2c65deaf9055f4a4add81e4c2e86653', ref: el => this.roleDropDown = el }, this.getRoles().map(role => index.h("option", { value: role.RoleId }, role.RoleName)))),
+            index.h("dnn-button", { key: '49323d82e9b75d60b3787c7c68f78ba5d9e6d616', type: "primary", onClick: () => this.addRole() }, this.localResx.Add)
+        ]), index.h("table", { key: 'f7d507656eba61da5880b112a25771969409b941', class: "roles-table" }, index.h("caption", { key: 'd2ba5d535514136ff3b5c9fd0eeac03c19d45319' }, this.localResx.RolePermissions), index.h("thead", { key: 'bd72016d4f96ba53cddccdc9a531fec20525539b' }, index.h("tr", { key: '22b3eef061501e40073da370b30802c59993b189' }, index.h("th", { key: 'f6d5a5aebf0d0e5dc808d39b5c17541164bd332a' }, this.localResx.Role), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("th", null, permissionDefinition.permissionName)), index.h("th", { key: 'e02583f0aef2fd21feff52337f4335a448a67522' }, "\u00A0"))), index.h("tbody", { key: '1b70292a7899c4f725b390a1e796f240545a39ad' }, this.permissions.rolePermissions.map(rolePermission => index.h("tr", null, index.h("th", null, rolePermission.roleName), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("td", null, this.renderRoleCheckBox(rolePermission, permissionDefinition))), index.h("td", null, !rolePermission.default &&
+            index.h("button", { onClick: () => this.removeRole(rolePermission) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" })))))))), index.h("div", { key: '16e671a7cacf95f877aa6a9242da51aec6d67398', class: "search-user" }, index.h("div", { key: 'a6bc24d1671bd627cff7dffaef13922fb81ccf18', class: "search-control" }, index.h("dnn-searchbox", { key: '5a3b908694e84abff8e5740a8da755ff9995c32b', placeholder: this.localResx.User, debounced: true, onQueryChanged: e => this.handleQueryChanged(e.detail), onKeyDown: e => this.handleSearchUserFieldKeyDown(e), query: this.userQuery }), index.h("dnn-collapsible", { key: '6478187d9dfcbf009990ce49010fae65376be1a0', ref: el => this.userCollapsible = el }, index.h("div", { key: '5831710ea3e9523f2f2955cb987c288097c9b44f', class: "dropdown" }, this.getFilteredUsers().map(searchedUser => index.h("button", { onKeyDown: e => this.handleSearchedUserKeyDown(e), onClick: () => this.handleUserPicked(searchedUser) }, searchedUser.displayName))))), this.pickedUser &&
+            index.h("dnn-button", { key: '64ca8f8e60428143cdb477da38c75b7e80cd9914', onClick: () => this.addUser() }, this.localResx.Add)), this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&
+            index.h("table", { key: '48ff3fcbf41ce24fb959f74d71bcea858702a13d', class: "users-table" }, index.h("caption", { key: '854a089a39b2b5002f931957b90863c8a2f2612c' }, this.localResx.UserPermissions), index.h("thead", { key: 'd807e93f1b48ec6ee9c5b72be8f3b1c8806eaa49' }, index.h("tr", { key: '7e8e9b09ff162e742e2c8170f7ad1ee086a1e215' }, index.h("th", { key: '9c54de787b6e1cedba6a0eab6e8d736236ad88d0' }, this.localResx.User), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("th", null, permissionDefinition.permissionName)), index.h("th", { key: '6a6a730933492b0ab4dc6c3ae482adf657a3e8b0' }, "\u00A0"))), index.h("tbody", { key: '95d21c93c57e14e63e3719f25dc96db7a119d1a5' }, this.permissions.userPermissions.map(userPermission => index.h("tr", null, index.h("th", null, userPermission.displayName), this.permissions.permissionDefinitions.map(permissionDefinition => index.h("td", null, this.renderUserCheckBox(userPermission, permissionDefinition))), index.h("td", null, index.h("button", { onClick: () => this.removeUser(userPermission) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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"],

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

@@ -1 +1 @@
-{"file":"dnn-permissions-grid.entry.cjs.js","mappings":"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","names":["h","Host"],"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        label{\n          .hidden{\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\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  @State() localResx: ILocalization;\n  @State() focused = false;\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  @Watch(\"resx\")\n  resxChanged(){\n    this.mergeResx();\n  }\n  \n  componentWillLoad() {\n    document.addEventListener(\"click\", this.dismissUserResults.bind(this));\n    this.mergeResx();\n  }\n  \n  disconnectedCallback() {\n    document.removeEventListener(\"click\", this.disconnectedCallback.bind(this));\n  }\n  \n  private roleDropDown: HTMLSelectElement;\n  private userCollapsible: HTMLDnnCollapsibleElement;\n  private rolesDropdown: HTMLSelectElement;\n  private defaultResx: 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  private mergeResx(): void {\n    this.localResx = {...this.defaultResx, ...this.resx};\n  }\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      <label>\n        <span class=\"hidden\">{permissionDefinition.permissionName}</span>\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        </dnn-checkbox>\n      </label>\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      <label>\n        <span class=\"hidden\">{permissionDefinition.permissionName}</span>\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        </dnn-checkbox>\n      </label>\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        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.rolesDropdown.focus()}\n        onBlur={() => this.rolesDropdown.blur()}\n      >\n        <div class=\"add-role-row\">\n          <div class=\"dropdown\">\n            <label>{this.localResx.FilterByGroup} :</label>\n            <select\n              ref={el => this.rolesDropdown = el}\n              onChange={e => this.handleRoleGroupChanged(e.target as HTMLSelectElement)}\n              onFocus={() => this.focused = true}\n              onBlur={() => this.focused = false}\n            >\n              <option\n                value={-2}\n                selected={this.selectedRoleGroupId == -2}\n              >\n                {this.localResx.AllRoles}\n              </option>\n              <option\n                value={-1}\n                selected={this.selectedRoleGroupId == -1}\n              >\n                {this.localResx.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.localResx.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.localResx.Add}\n              </dnn-button>\n            ]\n          }\n        </div>\n        <table class=\"roles-table\">\n          <caption>{this.localResx.RolePermissions}</caption>\n          <thead>\n            <tr>\n              <th>{this.localResx.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.localResx.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.localResx.Add}\n            </dnn-button>\n          }\n        </div>\n        {this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&\n          <table class=\"users-table\">\n            <caption>{this.localResx.UserPermissions}</caption>\n            <thead>\n              <tr>\n                <th>{this.localResx.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}
+{"file":"dnn-permissions-grid.entry.cjs.js","mappings":"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","names":["h","Host"],"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        label{\n          .hidden{\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';\nimport { CheckedState } from '../dnn-checkbox/types';\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\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  @State() localResx: ILocalization;\n  @State() focused = false;\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  @Watch(\"resx\")\n  resxChanged(){\n    this.mergeResx();\n  }\n  \n  componentWillLoad() {\n    document.addEventListener(\"click\", this.dismissUserResults.bind(this));\n    this.mergeResx();\n  }\n  \n  disconnectedCallback() {\n    document.removeEventListener(\"click\", this.disconnectedCallback.bind(this));\n  }\n  \n  private roleDropDown: HTMLSelectElement;\n  private userCollapsible: HTMLDnnCollapsibleElement;\n  private rolesDropdown: HTMLSelectElement;\n  private defaultResx: 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  private mergeResx(): void {\n    this.localResx = {...this.defaultResx, ...this.resx};\n  }\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      <label>\n        <span class=\"hidden\">{permissionDefinition.permissionName}</span>\n        <dnn-checkbox\n          useIntermediate\n          nextStateHandler={state => this.handleNextState(state)}\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        </dnn-checkbox>\n      </label>\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      <label>\n        <span class=\"hidden\">{permissionDefinition.permissionName}</span>\n        <dnn-checkbox\n          useIntermediate\n          nextStateHandler={state => this.handleNextState(state)}\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        </dnn-checkbox>\n      </label>\n    )\n  }\n  \n  private handleNextState(state: string): CheckedState {\n    switch (state) {\n      case \"checked\":\n        return \"unchecked\";\n      case \"unchecked\":\n        return \"intermediate\";\n      default:\n        return \"checked\";\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: CheckedState,\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        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.rolesDropdown.focus()}\n        onBlur={() => this.rolesDropdown.blur()}\n      >\n        <div class=\"add-role-row\">\n          <div class=\"dropdown\">\n            <label>{this.localResx.FilterByGroup} :</label>\n            <select\n              ref={el => this.rolesDropdown = el}\n              onChange={e => this.handleRoleGroupChanged(e.target as HTMLSelectElement)}\n              onFocus={() => this.focused = true}\n              onBlur={() => this.focused = false}\n            >\n              <option\n                value={-2}\n                selected={this.selectedRoleGroupId == -2}\n              >\n                {this.localResx.AllRoles}\n              </option>\n              <option\n                value={-1}\n                selected={this.selectedRoleGroupId == -1}\n              >\n                {this.localResx.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.localResx.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.localResx.Add}\n              </dnn-button>\n            ]\n          }\n        </div>\n        <table class=\"roles-table\">\n          <caption>{this.localResx.RolePermissions}</caption>\n          <thead>\n            <tr>\n              <th>{this.localResx.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.localResx.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.localResx.Add}\n            </dnn-button>\n          }\n        </div>\n        {this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&\n          <table class=\"users-table\">\n            <caption>{this.localResx.UserPermissions}</caption>\n            <thead>\n              <tr>\n                <th>{this.localResx.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/cjs/dnn-richtext.cjs.entry.js

@@ -29301,6 +29301,8 @@ const DnnRichtext = class {
         this.options = undefined;
         this.value = undefined;
         this.name = undefined;
+        this.plugins = [];
+        this.customizeOptions = undefined;
         this.focused = false;
     }
     watchValueChanged(newValue) {
@@ -29310,7 +29312,11 @@ const DnnRichtext = class {
         this.setFormValue();
     }
     componentDidLoad() {
-        var mergedOptions = Object.assign(Object.assign(Object.assign({}, this.dnnDefaultOptions), this.options), { globalFullSize: false, shadowRoot: this.host.shadowRoot });
+        var mergedOptions = Object.assign(Object.assign(Object.assign({}, this.dnnDefaultOptions), this.options), { shadowRoot: this.host.shadowRoot });
+        if (this.customizeOptions != undefined) {
+            mergedOptions = this.customizeOptions(mergedOptions);
+        }
+        this.plugins.forEach(plugin => Jodit$1.plugins.add(plugin.name, plugin.callback));
         this.editor = Jodit$1.make(this.textArea, mergedOptions);
         this.editor.value = stringUtilities.decodeHtml(this.value);
         this.setFormValue();
@@ -29336,10 +29342,10 @@ const DnnRichtext = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'd96ebad0f68149a2cbe89656c3e474a5ff184ebf', tabIndex: this.focused ? -1 : 0, onFocus: () => {
+        return (index$1.h(index$1.Host, { key: 'b338b503c7144bb23910b7cfd4c1cef63b851a14', tabIndex: this.focused ? -1 : 0, onFocus: () => {
                 this.focused = true;
                 this.editor.focus();
-            }, onBlur: () => this.focused = false }, index$1.h("textarea", { key: '790f6c0991227fe006e5c288f6c02f75bdb61279', ref: el => this.textArea = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false })));
+            }, onBlur: () => this.focused = false }, index$1.h("textarea", { key: '930d3522793a458645b5b3e632eed80f6470161f', ref: el => this.textArea = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false })));
     }
     static get formAssociated() { return true; }
     get host() { return index$1.getElement(this); }