@dnncommunity/dnn-elements 0.24.3 → 0.25.0

package/dist/dnn/p-bff377d5.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c,h as t,H as a,g as d}from"./p-91d08ab2.js";const i=":host{--focus-color:var(--dnn-color-primary, #3792ED);display:inline-flex;align-items:center;gap:0.25rem;margin:3px}button{cursor:pointer;background-color:transparent;border:0;padding:0;margin:0;outline:none;display:flex;justify-content:center;align-items:center}button .unchecked,button .checked,button .intermediate{display:none}button.checked .checked,button.unchecked .unchecked,button.intermediate .intermediate{display:block}button svg.undefined{opacity:0.45;cursor:default}button:focus-visible{box-shadow:0 0 2px 2px var(--focus-color)}label{cursor:pointer}";const s=i;const n=class{constructor(t){e(this,t);this.checkedchange=c(this,"checkedchange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.checked="unchecked";this.useIntermediate=false;this.value="on";this.name=undefined;this.nextStateHandler=this.defaultNextStateHandler;this.focused=false}handleClick(){this.changeState()}componentWillLoad(){this.originalChecked=this.checked;this.internals.setFormValue(this.checked)}handleCheckedChange(e,c){if(e!==c&&this.checked=="checked"){var t=new FormData;t.append(this.name,this.value);this.internals.setFormValue(t)}}formResetCallback(){this.internals.setValidity({});this.checked=this.originalChecked}defaultNextStateHandler(e){switch(e){case"checked":return"intermediate";case"intermediate":return"unchecked";case"unchecked":return"checked"}}changeState(){if(!this.useIntermediate){switch(this.checked){case"checked":this.checked="unchecked";break;case"unchecked":case"intermediate":this.checked="checked";break}this.checkedchange.emit(this.checked);return}this.checked=this.nextStateHandler(this.checked);this.checkedchange.emit(this.checked)}render(){return t(a,{key:"203ef65e8e0fe77de58322857c05a37c0c1dab28",tabIndex:this.focused?-1:0,onFocus:()=>this.button.focus(),onBlur:()=>this.button.blur()},t("button",{key:"dadc71798f00a3f5f5187298a19ba1e1ec521e68",ref:e=>this.button=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false,class:`icon ${this.checked}`},t("div",{key:"a6d9d15cb1775a32fb90ec701607c3c1b0103fd8",class:"unchecked"},t("slot",{key:"587b36e647585f3b0dd888557ce06dbd014568ec",name:"uncheckedicon"},t("svg",{key:"1034bdab291e80ef743ed69cdf0161b6d2fcb41c",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},t("path",{key:"92391ad8827b032fc6ce9ac296fd693097c9fd2b",d:"M0 0h24v24H0z",fill:"none"}),t("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"})))),t("div",{key:"f006e6133f020fa6c3efbb502a3fa43934c6a46f",class:"checked"},t("slot",{key:"b1e0190f34c0788d435a77d3e775160f3a201bfa",name:"checkedicon"},t("svg",{key:"6dec3ff7ca88000ae655d5c9e717cc471eb59155",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},t("path",{key:"466b5cd85a05c0b1a6e48720419f4f92dc97ded1",d:"M0 0h24v24H0z",fill:"none"}),t("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"})))),t("div",{key:"b0f81a2a1f2dd89c82510640f1ae0d9c3c2ae3f0",class:"intermediate"},t("slot",{key:"24139853e12c94dc834fddc547396d508aac252d",name:"intermediateicon"},t("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"},t("g",{key:"808466f6ebab722b0fc256b0d7a5fa04f967e829"},t("rect",{key:"82357c3a4d3b23752a0e034676b26cef3f271b29",fill:"none",height:"24",width:"24"})),t("g",{key:"a192fd5a937f1d5ba68b563af131ae99bd4bafcf"},t("g",{key:"afd6449f0339e18d7ab621648c69d585aa417ebd"},t("g",{key:"1a94075684aae413678947650d9f91cd8a010ee0"},t("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 d(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};n.style=s;export{n as dnn_checkbox};
+//# sourceMappingURL=p-bff377d5.entry.js.map

package/dist/dnn/p-bff377d5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dnnCheckboxCss","DnnCheckboxStyle0","DnnCheckbox","this","defaultNextStateHandler","handleClick","changeState","componentWillLoad","originalChecked","checked","internals","setFormValue","handleCheckedChange","newValue","oldValue","data","FormData","append","name","value","formResetCallback","setValidity","currentState","useIntermediate","checkedchange","emit","nextStateHandler","render","h","Host","key","tabIndex","focused","onFocus","button","focus","onBlur","blur","ref","el","class","xmlns","height","viewBox","width","fill","d"],"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"],"mappings":"2DAAA,MAAMA,EAAiB,ujBACvB,MAAAC,EAAeD,E,MCcFE,EAAW,M,mPAIyB,Y,qBAGZ,M,WAGX,K,0CASiDC,KAAKC,wB,aAU3D,K,CAJnB,WAAAC,GACEF,KAAKG,a,CAUP,iBAAAC,GACEJ,KAAKK,gBAAkBL,KAAKM,QAC5BN,KAAKO,UAAUC,aAAaR,KAAKM,Q,CAInC,mBAAAG,CAAoBC,EAAwBC,GAC1C,GAAID,IAAaC,GAAYX,KAAKM,SAAW,UAAW,CACtD,IAAIM,EAAO,IAAIC,SACfD,EAAKE,OAAOd,KAAKe,KAAMf,KAAKgB,OAC5BhB,KAAKO,UAAUC,aAAaI,E,EAKhC,iBAAAK,GACEjB,KAAKO,UAAUW,YAAY,IAC3BlB,KAAKM,QAAUN,KAAKK,e,CAGd,uBAAAJ,CAAwBkB,GAC9B,OAAQA,GACN,IAAK,UACD,MAAO,eACT,IAAK,eACH,MAAO,YACT,IAAK,YACH,MAAO,U,CAIP,WAAAhB,GACN,IAAKH,KAAKoB,gBAAgB,CACxB,OAAQpB,KAAKM,SACX,IAAK,UACHN,KAAKM,QAAU,YACf,MACF,IAAK,YACL,IAAK,eACHN,KAAKM,QAAU,UACf,MAIJN,KAAKqB,cAAcC,KAAKtB,KAAKM,SAC7B,M,CAGFN,KAAKM,QAAUN,KAAKuB,iBAAiBvB,KAAKM,SAC1CN,KAAKqB,cAAcC,KAAKtB,KAAKM,Q,CAG/B,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,SAAU5B,KAAK6B,SAAW,EAAI,EAC9BC,QAAS,IAAM9B,KAAK+B,OAAOC,QAC3BC,OAAQ,IAAMjC,KAAK+B,OAAOG,QAE1BT,EAAA,UAAAE,IAAA,2CACEQ,IAAKC,GAAMpC,KAAK+B,OAASK,EACzBN,QAAS,IAAM9B,KAAK6B,QAAU,KAC9BI,OAAQ,IAAMjC,KAAK6B,QAAU,MAC7BQ,MAAO,QAAQrC,KAAKM,WAEpBmB,EAAA,OAAAE,IAAA,2CAAKU,MAAM,aACTZ,EAAA,QAAAE,IAAA,2CAAMZ,KAAK,iBACTU,EAAA,OAAAE,IAAA,2CAAKW,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUjB,EAAA,QAAAE,IAAA,2CAAMgB,EAAE,gBAAgBD,KAAK,SAAQjB,EAAA,QAAAE,IAAA,2CAAMgB,EAAE,kGAGvJlB,EAAA,OAAAE,IAAA,2CAAKU,MAAM,WACTZ,EAAA,QAAAE,IAAA,2CAAMZ,KAAK,eACTU,EAAA,OAAAE,IAAA,2CAAKW,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUjB,EAAA,QAAAE,IAAA,2CAAMgB,EAAE,gBAAgBD,KAAK,SAAQjB,EAAA,QAAAE,IAAA,2CAAMgB,EAAE,2IAGvJlB,EAAA,OAAAE,IAAA,2CAAKU,MAAM,gBACTZ,EAAA,QAAAE,IAAA,2CAAMZ,KAAK,oBACTU,EAAA,OAAAE,IAAA,2CAAKU,MAAM,YAAYC,MAAM,6BAA4B,oBAAmB,gBAAgBC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUjB,EAAA,KAAAE,IAAA,4CAAGF,EAAA,QAAAE,IAAA,2CAAMe,KAAK,OAAOH,OAAO,KAAKE,MAAM,QAAUhB,EAAA,KAAAE,IAAA,4CAAGF,EAAA,KAAAE,IAAA,4CAAGF,EAAA,KAAAE,IAAA,4CAAGF,EAAA,QAAAE,IAAA,2CAAMgB,EAAE,kH","ignoreList":[]}

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

@@ -18,6 +18,7 @@ const DnnCheckbox = class {
         this.useIntermediate = false;
         this.value = "on";
         this.name = undefined;
+        this.nextStateHandler = this.defaultNextStateHandler;
         this.focused = false;
     }
     handleClick() {
@@ -39,6 +40,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) {
@@ -53,21 +64,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 (h(Host, { key: '33f0a20c02ea3d1be40803102dca7298fc9f0a8d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("button", { key: '7249f860fea2548cd7469daf88594ceaa36ad69c', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}` }, h("div", { key: '8033ce35b1ad4733c5bc3151e183bcef5ad3608c', class: "unchecked" }, h("slot", { key: 'bd22365edda141a1d99f12197579ef08f145e298', name: "uncheckedicon" }, h("svg", { key: 'b8fdd87c069040ec31552c9c97fe9a73d6b1566b', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '786778ac6170c2efe8e60399ce377cb3f4b81496', d: "M0 0h24v24H0z", fill: "none" }), 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" })))), h("div", { key: '3b1022f97690827381751638a2326806f6bbc914', class: "checked" }, h("slot", { key: 'd47bf5c9b8227f72f5af9d8a9497ef90fe9ed54a', name: "checkedicon" }, h("svg", { key: '579f8cedf788976a23929f230afe489be49056a3', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'a22e16649d8fcbae5f382f585ec44d877592d072', d: "M0 0h24v24H0z", fill: "none" }), 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" })))), h("div", { key: 'dac2ba83db7a5f2a791db48ef4366c846ece0ac1', class: "intermediate" }, h("slot", { key: '99794fb6b191a7c61efcf77683125d5e38075347', name: "intermediateicon" }, 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" }, h("g", { key: '53bfc9815a54ee36bd9cde2b35ca35bdb052a559' }, h("rect", { key: '6938a2a44ea6a23b3896ea7186d1109d2e06b4f8', fill: "none", height: "24", width: "24" })), h("g", { key: 'beea185432ee31b13f4368cd288195fda4798569' }, h("g", { key: '8c9b0636ce4685fd714ae76d2cd8e63ffdc0e590' }, h("g", { key: 'b6a8198cb9067af8bd439948e2a23e58b6ff29dc' }, 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 (h(Host, { key: '203ef65e8e0fe77de58322857c05a37c0c1dab28', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("button", { key: 'dadc71798f00a3f5f5187298a19ba1e1ec521e68', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}` }, h("div", { key: 'a6d9d15cb1775a32fb90ec701607c3c1b0103fd8', class: "unchecked" }, h("slot", { key: '587b36e647585f3b0dd888557ce06dbd014568ec', name: "uncheckedicon" }, h("svg", { key: '1034bdab291e80ef743ed69cdf0161b6d2fcb41c', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '92391ad8827b032fc6ce9ac296fd693097c9fd2b', d: "M0 0h24v24H0z", fill: "none" }), 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" })))), h("div", { key: 'f006e6133f020fa6c3efbb502a3fa43934c6a46f', class: "checked" }, h("slot", { key: 'b1e0190f34c0788d435a77d3e775160f3a201bfa', name: "checkedicon" }, h("svg", { key: '6dec3ff7ca88000ae655d5c9e717cc471eb59155', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '466b5cd85a05c0b1a6e48720419f4f92dc97ded1', d: "M0 0h24v24H0z", fill: "none" }), 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" })))), h("div", { key: 'b0f81a2a1f2dd89c82510640f1ae0d9c3c2ae3f0', class: "intermediate" }, h("slot", { key: '24139853e12c94dc834fddc547396d508aac252d', name: "intermediateicon" }, 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" }, h("g", { key: '808466f6ebab722b0fc256b0d7a5fa04f967e829' }, h("rect", { key: '82357c3a4d3b23752a0e034676b26cef3f271b29', fill: "none", height: "24", width: "24" })), h("g", { key: 'a192fd5a937f1d5ba68b563af131ae99bd4bafcf' }, h("g", { key: 'afd6449f0339e18d7ab621648c69d585aa417ebd' }, h("g", { key: '1a94075684aae413678947650d9f91cd8a010ee0' }, 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 getElement(this); }

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

@@ -1 +1 @@
-{"file":"dnn-checkbox.entry.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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/esm/dnn-permissions-grid.entry.js

@@ -112,12 +112,22 @@ const DnnPermissionsGrid = class {
             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("label", null, h("span", { class: "hidden" }, permissionDefinition.permissionName), 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" }))))));
+        return (h("label", null, h("span", { class: "hidden" }, permissionDefinition.permissionName), h("dnn-checkbox", { useIntermediate: true, nextStateHandler: state => this.handleNextState(state), 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" }))))));
     }
     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("label", null, h("span", { class: "hidden" }, permissionDefinition.permissionName), 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" }))))));
+        return (h("label", null, h("span", { class: "hidden" }, permissionDefinition.permissionName), h("dnn-checkbox", { useIntermediate: true, nextStateHandler: state => this.handleNextState(state), 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" }))))));
+    }
+    handleNextState(state) {
+        switch (state) {
+            case "checked":
+                return "unchecked";
+            case "unchecked":
+                return "intermediate";
+            default:
+                return "checked";
+        }
     }
     handleRoleChanged(checked, rolePermission, permissionDefinition) {
         switch (checked) {
@@ -305,13 +315,13 @@ const DnnPermissionsGrid = class {
     }
     render() {
         const filteredRoles = this.getRoles();
-        return (h(Host, { key: 'cf72a4f914f45cc67dc2c3eda77f9edde7f60270', tabIndex: this.focused ? -1 : 0, onFocus: () => this.rolesDropdown.focus(), onBlur: () => this.rolesDropdown.blur() }, h("div", { key: '8c4ebce85c93f4f08c4ad24f0b6223de8dc6449c', class: "add-role-row" }, h("div", { key: '585768e943955c909194a25dba06a8b84ae4e7be', class: "dropdown" }, h("label", { key: 'e9823e0e553a3ae23384e79354696de2c649bea2' }, this.localResx.FilterByGroup, " :"), h("select", { key: '5a8cc2742a103bd024243708b18c069b43e70674', ref: el => this.rolesDropdown = el, onChange: e => this.handleRoleGroupChanged(e.target), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("option", { key: 'daa1a622f34c7b08145b8486201ffaacbb129b78', value: -2, selected: this.selectedRoleGroupId == -2 }, this.localResx.AllRoles), h("option", { key: '039fb0a46c56712dccc0d76b3a8872ff8b2d06db', value: -1, selected: this.selectedRoleGroupId == -1 }, this.localResx.GlobalRoles), this.roleGroups.map(roleGroup => h("option", { value: roleGroup.id, selected: this.selectedRoleGroupId == roleGroup.id }, roleGroup.name)))), filteredRoles && filteredRoles.length > 0 && [
-            h("div", { key: '1db52ea02ecf75268ec9996fbd68ea7726733679', class: "dropdown" }, h("label", { key: '7fa52a0247951ca88ad80cbf810e7810688dc918' }, this.localResx.SelectRole, " :"), h("select", { key: 'cf7baac0e6c22c33ddcac117f05046b942ad6d4e', ref: el => this.roleDropDown = el }, this.getRoles().map(role => h("option", { value: role.RoleId }, role.RoleName)))),
-            h("dnn-button", { key: 'b95196cf538d86c255440a5a88a7f85f019b6632', type: "primary", onClick: () => this.addRole() }, this.localResx.Add)
-        ]), h("table", { key: '51110cb5293a2b753f808572418210094bdc1f7d', class: "roles-table" }, h("caption", { key: '2c1abc3f0fe54307b48be57e7f9b61939b4822b3' }, this.localResx.RolePermissions), h("thead", { key: 'b7e89b31ba60e0b0c866f2c4f83f5df98d6f83b3' }, h("tr", { key: '4f2c16c8425483d7dc1aba76cedd20083dcf9dc3' }, h("th", { key: '4c0910460873ecab0b9f55352be83c56c575f6a6' }, this.localResx.Role), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: 'a41f294b08733b13d2f75032d9b99891727a6b21' }, "\u00A0"))), h("tbody", { key: '66367d43acd71c2660ee7e38a383c2cc4cdeff2b' }, 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", { key: '96d18900b0c2e1915b49dbae8dfca84ce22f9224', class: "search-user" }, h("div", { key: 'cd5f5916d43a53a827654226fb2ca5cf2842d2fd', class: "search-control" }, 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 }), h("dnn-collapsible", { key: '21e8ecd420d7a4174a1e8633a00ff609c88391d3', ref: el => this.userCollapsible = el }, h("div", { key: 'e8996049d1743358d16515c6e7a62fbf1c3449f4', class: "dropdown" }, this.getFilteredUsers().map(searchedUser => h("button", { onKeyDown: e => this.handleSearchedUserKeyDown(e), onClick: () => this.handleUserPicked(searchedUser) }, searchedUser.displayName))))), this.pickedUser &&
-            h("dnn-button", { key: '5a3159e4b75a1eaf7e04d76a5e7c207efbcb4bbd', onClick: () => this.addUser() }, this.localResx.Add)), this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&
-            h("table", { key: '1c67fd050abc84cc1d46c2f22ac54b72536c059c', class: "users-table" }, h("caption", { key: '5a94b92f18104a0307e2282945f36855d055c09a' }, this.localResx.UserPermissions), h("thead", { key: '85447eb661dae9d68aa076275b4bc6a3d710d86c' }, h("tr", { key: '896a922a18c02b682a48ee613088bf3140291d02' }, h("th", { key: 'd6606accc9147704a1e71a401550b161f76a132c' }, this.localResx.User), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: '87d8b97ab435a913177f828afa637740ba4a2d7b' }, "\u00A0"))), h("tbody", { key: '8649339d5206c4d2c096d97705fa84c56735a8d1' }, 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" }))))))))));
+        return (h(Host, { key: 'aa5bcb726609a04b6dad78274a67511950d761f4', tabIndex: this.focused ? -1 : 0, onFocus: () => this.rolesDropdown.focus(), onBlur: () => this.rolesDropdown.blur() }, h("div", { key: '787605cbb898d983fdd66311a165febdc3604365', class: "add-role-row" }, h("div", { key: '5b0a39fb334f9b24e9b2a7bfdd4dddac29a1a38e', class: "dropdown" }, h("label", { key: '3fe9beefb2addc2f48e62f1b00c49a24c3dd077f' }, this.localResx.FilterByGroup, " :"), h("select", { key: '6949c0de5aa4e33c41083cf208988a041955a5f8', ref: el => this.rolesDropdown = el, onChange: e => this.handleRoleGroupChanged(e.target), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("option", { key: 'a68744b35d50c76c74ecab7f9444161b6a0ad357', value: -2, selected: this.selectedRoleGroupId == -2 }, this.localResx.AllRoles), h("option", { key: '298a553685cd393efea7c19fc84ff3f5b6e2c14e', value: -1, selected: this.selectedRoleGroupId == -1 }, this.localResx.GlobalRoles), this.roleGroups.map(roleGroup => h("option", { value: roleGroup.id, selected: this.selectedRoleGroupId == roleGroup.id }, roleGroup.name)))), filteredRoles && filteredRoles.length > 0 && [
+            h("div", { key: '81aa6af63532b45a12de309d61d91025487bb89b', class: "dropdown" }, h("label", { key: 'f7955613ad565920eea350fbc5e43f71b3128077' }, this.localResx.SelectRole, " :"), h("select", { key: 'f5f2ea97e2c65deaf9055f4a4add81e4c2e86653', ref: el => this.roleDropDown = el }, this.getRoles().map(role => h("option", { value: role.RoleId }, role.RoleName)))),
+            h("dnn-button", { key: '49323d82e9b75d60b3787c7c68f78ba5d9e6d616', type: "primary", onClick: () => this.addRole() }, this.localResx.Add)
+        ]), h("table", { key: 'f7d507656eba61da5880b112a25771969409b941', class: "roles-table" }, h("caption", { key: 'd2ba5d535514136ff3b5c9fd0eeac03c19d45319' }, this.localResx.RolePermissions), h("thead", { key: 'bd72016d4f96ba53cddccdc9a531fec20525539b' }, h("tr", { key: '22b3eef061501e40073da370b30802c59993b189' }, h("th", { key: 'f6d5a5aebf0d0e5dc808d39b5c17541164bd332a' }, this.localResx.Role), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: 'e02583f0aef2fd21feff52337f4335a448a67522' }, "\u00A0"))), h("tbody", { key: '1b70292a7899c4f725b390a1e796f240545a39ad' }, 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", { key: '16e671a7cacf95f877aa6a9242da51aec6d67398', class: "search-user" }, h("div", { key: 'a6bc24d1671bd627cff7dffaef13922fb81ccf18', class: "search-control" }, 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 }), h("dnn-collapsible", { key: '6478187d9dfcbf009990ce49010fae65376be1a0', ref: el => this.userCollapsible = el }, h("div", { key: '5831710ea3e9523f2f2955cb987c288097c9b44f', class: "dropdown" }, this.getFilteredUsers().map(searchedUser => h("button", { onKeyDown: e => this.handleSearchedUserKeyDown(e), onClick: () => this.handleUserPicked(searchedUser) }, searchedUser.displayName))))), this.pickedUser &&
+            h("dnn-button", { key: '64ca8f8e60428143cdb477da38c75b7e80cd9914', onClick: () => this.addUser() }, this.localResx.Add)), this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&
+            h("table", { key: '48ff3fcbf41ce24fb959f74d71bcea858702a13d', class: "users-table" }, h("caption", { key: '854a089a39b2b5002f931957b90863c8a2f2612c' }, this.localResx.UserPermissions), h("thead", { key: 'd807e93f1b48ec6ee9c5b72be8f3b1c8806eaa49' }, h("tr", { key: '7e8e9b09ff162e742e2c8170f7ad1ee086a1e215' }, h("th", { key: '9c54de787b6e1cedba6a0eab6e8d736236ad88d0' }, this.localResx.User), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: '6a6a730933492b0ab4dc6c3ae482adf657a3e8b0' }, "\u00A0"))), h("tbody", { key: '95d21c93c57e14e63e3719f25dc96db7a119d1a5' }, 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"],

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

@@ -1 +1 @@
-{"file":"dnn-permissions-grid.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,wuCAAwuC,CAAC;AACvwC,iCAAe,qBAAqB;;MCWvB,kBAAkB;;;;;QAwDrB,gBAAW,GAAkB;YACnC,GAAG,EAAE,KAAK;YACV,QAAQ,EAAE,WAAW;YACrB,aAAa,EAAE,iBAAiB;YAChC,WAAW,EAAE,cAAc;YAC3B,IAAI,EAAE,MAAM;YACZ,eAAe,EAAE,kBAAkB;YACnC,UAAU,EAAE,aAAa;YACzB,IAAI,EAAE,MAAM;YACZ,eAAe,EAAE,kBAAkB;SACpC,CAAC;;;;;0BAnDoC,EAAE;mCAQT,CAAC,CAAC;;;;uBAId,KAAK;;IAIxB,uBAAuB,CAAC,QAAyB;QAC/C,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,IAAG,CAAC,EAAC;YACvB,UAAU,CAAC;gBACT,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,IAAI,CAAC;aACtC,EAAE,GAAG,CAAC,CAAC;SACT;KACF;IAGD,WAAW;QACT,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC7E;IAiBO,SAAS;QACf,IAAI,CAAC,SAAS,mCAAO,IAAI,CAAC,WAAW,GAAK,IAAI,CAAC,IAAI,CAAC,CAAC;KACtD;IAEO,kBAAkB,CAAC,CAAa;QACtC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;QAC/D,IACE,CAAC,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK;YAC5B,CAAC,CAAC,KAAK,GAAG,YAAY,CAAC,IAAI;YAC3B,CAAC,CAAC,KAAK,GAAG,YAAY,CAAC,MAAM;YAC7B,CAAC,CAAC,KAAK,GAAG,YAAY,CAAC,GAAG,EAAC;YACzB,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvC;KACJ;IAEO,sBAAsB,CAAC,QAA2B;QACxD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC;QACrC,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;QAC7D,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;KAClC;IAEO,OAAO;QACb,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAC;QACjG,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;gBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe;gBACnC;oBACE,OAAO,EAAE,KAAK;oBACd,MAAM,EAAE,KAAK;oBACb,WAAW,EAAE,EAAE;oBACf,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;aACF,GACF,CAAA;QACD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAChD;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,UAAU,IAAI,SAAS,EAAC;YAC/B,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;oBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe;oBACnC;wBACE,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW;wBACxC,WAAW,EAAE,EAAE;wBACf,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM;qBAC/B;iBACF,GACF,CAAC;YACF,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAChD;KACF;IAEO,QAAQ;QACd,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAC1C,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;QACzE,IAAI,IAAI,CAAC,mBAAmB,IAAI,CAAC,CAAC,EAAC;;YAEjC,OAAO,aAAa,CAAC;SACtB;QAED,IAAI,IAAI,CAAC,mBAAmB,IAAI,CAAC,CAAC,EAAC;;YAEjC,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;SACxD;QAED,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACnF;IAEO,kBAAkB,CAAC,cAA+B,EAAE,oBAA2C;QACrG,MAAM,IAAI,GAAG,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,IAAI,UAAU,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9H,IAAI,cAAc,CAAC,MAAM,EAAC;YACxB,QACE,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,SAAG,IAAI,EAAC,MAAM,IAAC,YAAM,CAAC,EAAC,iBAAiB,GAAE,EAAA,YAAM,CAAC,EAAC,iBAAiB,EAAC,OAAO,EAAC,KAAK,GAAE,CAAI,EAAA,YAAM,CAAC,EAAC,6NAA6N,GAAE,CAAM,EAC3a;SACF;QAED,MAAM,OAAO,GAAG,IAAI,IAAI,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;QAChG,QACE,iBACE,YAAM,KAAK,EAAC,QAAQ,IAAE,oBAAoB,CAAC,cAAc,CAAQ,EACjE,8CAEE,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,oBAAoB,CAAC,IAE5F,WAAK,IAAI,EAAC,kBAAkB,IAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,4FAA4F,GAAE,CAAM,CACrP,EACN,WAAK,IAAI,EAAC,eAAe,IACvB,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,2OAA2O,GAAE,CAAM,CACpY,CACO,CACT,EACT;KACF;IAEO,kBAAkB,CAAC,cAA+B,EAAE,oBAA2C;QACrG,MAAM,IAAI,GAAG,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,IAAI,UAAU,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QAE9H,MAAM,OAAO,GAAG,IAAI,IAAI,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;QAChG,QACE,iBACE,YAAM,KAAK,EAAC,QAAQ,IAAE,oBAAoB,CAAC,cAAc,CAAQ,EACjE,8CAEE,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,oBAAoB,CAAC,IAE5F,WAAK,IAAI,EAAC,kBAAkB,IAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,4FAA4F,GAAE,CAAM,CACrP,EACN,WAAK,IAAI,EAAC,eAAe,IACvB,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,2OAA2O,GAAE,CAAM,CACpY,CACO,CACT,EACT;KACF;IAEO,iBAAiB,CACvB,OAAiD,EACjD,cAA+B,EAC/B,oBAA2C;QAE3C,QAAQ,OAAO;YACb,KAAK,WAAW;gBACd,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;wBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;4BACvC,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,EAAC;gCACpC,OAAO,CAAC,CAAC;6BACV;4BAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC/C,iBAAiB,CAAC,WAAW,GAAG;gCAC9B,GAAG,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC;gCACjG;oCACE,WAAW,EAAE,KAAK;oCAClB,WAAW,EAAE,KAAK;oCAClB,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,YAAY,EAAE,oBAAoB,CAAC,YAAY;oCAC/C,aAAa,EAAE,oBAAoB,CAAC,aAAa;oCACjD,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,IAAI,EAAE,KAAK;iCACZ;6BACF,CAAC;4BACF,OAAO,iBAAiB,CAAC;yBAC1B,CAAC;qBACH,GACF,CAAC;gBACF,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;wBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;4BACvC,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,EAAC;gCACpC,OAAO,CAAC,CAAC;6BACV;4BAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC/C,iBAAiB,CAAC,WAAW,GAAG;gCAC9B,GAAG,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC;gCACjG;oCACE,WAAW,EAAE,IAAI;oCACjB,WAAW,EAAE,KAAK;oCAClB,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,YAAY,EAAE,oBAAoB,CAAC,YAAY;oCAC/C,aAAa,EAAE,oBAAoB,CAAC,aAAa;oCACjD,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,IAAI,EAAE,KAAK;iCACZ;6BACF,CAAC;4BACF,OAAO,iBAAiB,CAAC;yBAC1B,CAAC;qBACH,GACF,CAAC;gBACF,MAAM;YACN,KAAK,cAAc;gBACnB,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;wBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;4BACvC,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,EAAC;gCACpC,OAAO,CAAC,CAAC;6BACV;4BAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC/C,iBAAiB,CAAC,WAAW,GAAG;gCAC9B,GAAG,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC;6BAClG,CAAC;4BACF,OAAO,iBAAiB,CAAC;yBAC1B,CAAC;qBACH,GACF,CAAC;gBACF,MAAM;SAGT;QACD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAChD;IAEO,iBAAiB,CACvB,OAAiD,EACjD,cAA+B,EAC/B,oBAA2C;QAE3C,QAAQ,OAAO;YACb,KAAK,WAAW;gBACd,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;wBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;4BACvC,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,EAAC;gCACpC,OAAO,CAAC,CAAC;6BACV;4BAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC/C,iBAAiB,CAAC,WAAW,GAAG;gCAC9B,GAAG,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC;gCACjG;oCACE,WAAW,EAAE,KAAK;oCAClB,WAAW,EAAE,KAAK;oCAClB,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,YAAY,EAAE,oBAAoB,CAAC,YAAY;oCAC/C,aAAa,EAAE,oBAAoB,CAAC,aAAa;oCACjD,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,IAAI,EAAE,KAAK;iCACZ;6BACF,CAAC;4BACF,OAAO,iBAAiB,CAAC;yBAC1B,CAAC;qBACH,GACF,CAAC;gBACF,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;wBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;4BACvC,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,EAAC;gCACpC,OAAO,CAAC,CAAC;6BACV;4BAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC/C,iBAAiB,CAAC,WAAW,GAAG;gCAC9B,GAAG,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC;gCACjG;oCACE,WAAW,EAAE,IAAI;oCACjB,WAAW,EAAE,KAAK;oCAClB,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,YAAY,EAAE,oBAAoB,CAAC,YAAY;oCAC/C,aAAa,EAAE,oBAAoB,CAAC,aAAa;oCACjD,cAAc,EAAE,oBAAoB,CAAC,cAAc;oCACnD,IAAI,EAAE,KAAK;iCACZ;6BACF,CAAC;4BACF,OAAO,iBAAiB,CAAC;yBAC1B,CAAC;qBACH,GACF,CAAC;gBACF,MAAM;YACN,KAAK,cAAc;gBACnB,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;wBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;4BACvC,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,EAAC;gCACpC,OAAO,CAAC,CAAC;6BACV;4BAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC/C,iBAAiB,CAAC,WAAW,GAAG;gCAC9B,GAAG,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,IAAI,oBAAoB,CAAC,YAAY,CAAC;6BAClG,CAAC;4BACF,OAAO,iBAAiB,CAAC;yBAC1B,CAAC;qBACH,GACF,CAAC;gBACF,MAAM;SAGT;QACD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAChD;IAEO,UAAU,CAAC,cAA+B;QAChD,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;gBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,CAAC;aACrF,GACF,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAEO,UAAU,CAAC,cAA+B;QAChD,IAAI,CAAC,WAAW,mCACX,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE;gBACf,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,CAAC;aACrF,GACF,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAChD;IAEO,kBAAkB,CAAC,KAAa;QACtC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,KAAK,IAAI,SAAS,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAC;YAC1C,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,OAAO;SACR;QACD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzC;IAEO,4BAA4B,CAAC,CAAgB;QACnD,IAAI,CAAC,CAAC,GAAG,IAAI,WAAW,EAAC;YACvB,OAAO;SACR;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjE,IAAI,WAAW,IAAI,SAAS,EAAC;YAC3B,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;KACF;IAEO,yBAAyB,CAAC,CAAgB;QAChD,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAE7C,QAAO,CAAC,CAAC,GAAG;YACV,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,UAAU,GAAG,MAAM,CAAC,kBAAuC,CAAC;gBAClE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,EAAE,CAAC;gBACpB,MAAM;YACR,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,cAAc,GAAG,MAAM,CAAC,sBAA2C,CAAC;gBAC1E,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,EAAE,CAAC;gBAC1B,MAAM;SAGP;KACF;IAEO,gBAAgB,CAAC,YAA2B;QAClD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC,WAAW,CAAC;QAC1C,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC;KAChC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;KAC1G;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QACtC,QACE,EAAC,IAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,EACzC,MAAM,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAEvC,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,UAAU,IACnB,gEAAQ,IAAI,CAAC,SAAS,CAAC,aAAa,OAAW,EAC/C,+DACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,aAAa,GAAG,EAAE,EAClC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAA2B,CAAC,EACzE,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,IAElC,+DACE,KAAK,EAAE,CAAC,CAAC,EACT,QAAQ,EAAE,IAAI,CAAC,mBAAmB,IAAI,CAAC,CAAC,IAEvC,IAAI,CAAC,SAAS,CAAC,QAAQ,CACjB,EACT,+DACE,KAAK,EAAE,CAAC,CAAC,EACT,QAAQ,EAAE,IAAI,CAAC,mBAAmB,IAAI,CAAC,CAAC,IAEvC,IAAI,CAAC,SAAS,CAAC,WAAW,CACpB,EACR,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,IAC5B,cACE,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,QAAQ,EAAE,IAAI,CAAC,mBAAmB,IAAI,SAAS,CAAC,EAAE,IAEjD,SAAS,CAAC,IAAI,CACR,CACV,CACM,CACL,EACH,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI;YAC5C,4DAAK,KAAK,EAAC,UAAU,IACnB,gEAAQ,IAAI,CAAC,SAAS,CAAC,UAAU,OAAW,EAC5C,+DAAQ,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IACtC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,IACvB,cAAQ,KAAK,EAAE,IAAI,CAAC,MAAM,IAEvB,IAAI,CAAC,QAAQ,CACP,CACV,CACM,CACL;YACN,mEACA,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,IAE1B,IAAI,CAAC,SAAS,CAAC,GAAG,CACR;SACd,CAEC,EACN,8DAAO,KAAK,EAAC,aAAa,IACxB,kEAAU,IAAI,CAAC,SAAS,CAAC,eAAe,CAAW,EACnD,gEACE,6DACE,6DAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAM,EAC7B,IAAI,CAAC,WAAW,CAAC,qBAAqB,CAAC,GAAG,CAAC,oBAAoB,IAC9D,cAAK,oBAAoB,CAAC,cAAc,CAAM,CAC/C,EACD,sEAAe,CACZ,CACC,EACR,gEACG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,cAAc,IAClD,cACE,cAAK,cAAc,CAAC,QAAQ,CAAM,EACjC,IAAI,CAAC,WAAW,CAAC,qBAAqB,CAAC,GAAG,CAAC,oBAAoB,IAC9D,cACG,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAC3D,CACN,EACD,cACG,CAAC,cAAc,CAAC,OAAO;YACtB,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAE9C,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,2OAA2O,GAAE,CAAM,CACjY,CAER,CACF,CACN,CACK,CACF,EACR,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,gBAAgB,IACzB,sEACE,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAChC,SAAS,QACT,cAAc,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,EACtD,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,EACpD,KAAK,EAAE,IAAI,CAAC,SAAS,GACrB,EACF,wEAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACnD,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,CAAC,YAAY,IACvC,cACE,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,EACjD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAEjD,YAAY,CAAC,WAAW,CAClB,CACV,CACG,CACU,CACd,EACL,IAAI,CAAC,UAAU;YACd,mEACE,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,IAE5B,IAAI,CAAC,SAAS,CAAC,GAAG,CACR,CAEX,EACL,IAAI,CAAC,WAAW,CAAC,eAAe,IAAI,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC;YAC9E,8DAAO,KAAK,EAAC,aAAa,IACxB,kEAAU,IAAI,CAAC,SAAS,CAAC,eAAe,CAAW,EACnD,gEACE,6DACE,6DAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAM,EAC7B,IAAI,CAAC,WAAW,CAAC,qBAAqB,CAAC,GAAG,CAAC,oBAAoB,IAC9D,cAAK,oBAAoB,CAAC,cAAc,CAAM,CAC/C,EACD,sEAAe,CACZ,CACC,EACR,gEACG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,cAAc,IAClD,cACE,cAAK,cAAc,CAAC,WAAW,CAAM,EACpC,IAAI,CAAC,WAAW,CAAC,qBAAqB,CAAC,GAAG,CAAC,oBAAoB,IAC9D,cACG,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAC3D,CACN,EACD,cACE,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAE9C,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,2OAA2O,GAAE,CAAM,CACjY,CACR,CACA,CACN,CACK,CACF,CAEL,EACP;KACH;;;;;;;;;;","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        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.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        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/esm/dnn-richtext.entry.js

@@ -29297,6 +29297,8 @@ const DnnRichtext = class {
         this.options = undefined;
         this.value = undefined;
         this.name = undefined;
+        this.plugins = [];
+        this.customizeOptions = undefined;
         this.focused = false;
     }
     watchValueChanged(newValue) {
@@ -29306,7 +29308,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 = decodeHtml(this.value);
         this.setFormValue();
@@ -29332,10 +29338,10 @@ const DnnRichtext = class {
         }
     }
     render() {
-        return (h(Host, { key: 'd96ebad0f68149a2cbe89656c3e474a5ff184ebf', tabIndex: this.focused ? -1 : 0, onFocus: () => {
+        return (h(Host, { key: 'b338b503c7144bb23910b7cfd4c1cef63b851a14', tabIndex: this.focused ? -1 : 0, onFocus: () => {
                 this.focused = true;
                 this.editor.focus();
-            }, onBlur: () => this.focused = false }, h("textarea", { key: '790f6c0991227fe006e5c288f6c02f75bdb61279', ref: el => this.textArea = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false })));
+            }, onBlur: () => this.focused = false }, 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 getElement(this); }