@dnncommunity/dnn-elements 0.24.0-beta.1 → 0.24.0-beta.11

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,H as i}from"./p-978abd50.js";const d=":host{display:block}.add-role-row{display:flex;gap:1em;align-items:center;flex-wrap:wrap}.add-role-row label{margin-right:0.5em}.search-user{display:flex;gap:1em;margin-top:1em}.search-user .search-control{position:relative}.search-user .search-control dnn-collapsible{position:absolute;left:0;top:calc(100% - 2px);width:100%;box-shadow:0px 4px 4px}.search-user .search-control dnn-collapsible .dropdown{background-color:white;border:1px solid lightgray;display:flex;flex-direction:column}.search-user .search-control dnn-collapsible .dropdown button{background-color:transparent;border:none;border-bottom:1px solid lightgray;padding:0.25em;margin:0;text-align:left}table{border:1px solid lightgray;border-collapse:collapse;margin-top:1em}table thead{text-align:center}table thead tr{border-bottom:1px solid lightgray}table thead th{background-color:lightgray;padding:0.25em 0.5em}table thead th:first-child{border-right:1px solid lightgray}table tbody tr{border-bottom:1px dotted lightgray}table tbody tr th{text-align:left;border-right:1px solid lightgray;padding:0 0.5em}table tbody tr td{text-align:center}table tbody tr td dnn-checkbox span{display:none}table tbody tr td button{background-color:transparent;border:0;padding:0;margin:0;margin-right:1em}";const n=d;const o=class{constructor(s){e(this,s);this.userSearchQueryChanged=t(this,"userSearchQueryChanged",7);this.permissionsChanged=t(this,"permissionsChanged",7);this.defaultResx={Add:"Add",AllRoles:"All Roles",FilterByGroup:"Filter By Group",GlobalRoles:"Global Roles",Role:"Role",RolePermissions:"Role Permissions",SelectRole:"Select Role",User:"User",UserPermissions:"User Permissions"};this.permissions=undefined;this.roleGroups=undefined;this.roles=undefined;this.resx=undefined;this.foundUsers=[];this.selectedRoleGroupId=-1;this.userQuery=undefined;this.pickedUser=undefined;this.localResx=undefined;this.focused=false}handleFoundUsersChanged(e){if((e===null||e===void 0?void 0:e.length)>0){setTimeout((()=>{this.userCollapsible.expanded=true}),100)}}resxChanged(){this.mergeResx()}componentWillLoad(){document.addEventListener("click",this.dismissUserResults.bind(this));this.mergeResx()}disconnectedCallback(){document.removeEventListener("click",this.disconnectedCallback.bind(this))}mergeResx(){this.localResx=Object.assign(Object.assign({},this.defaultResx),this.resx)}dismissUserResults(e){const t=this.roleDropDown.getBoundingClientRect();if(e.pageX>t.right||e.pageX<t.left||e.pageY>t.bottom||e.pageY<t.top){this.userCollapsible.expanded=false}}handleRoleGroupChanged(e){const t=e.selectedIndex;const s=Number.parseInt(e.options[t].value);this.selectedRoleGroupId=s}addRole(){const e=Number.parseInt(this.roleDropDown.options[this.roleDropDown.selectedIndex].value);const t=this.roles.filter((t=>t.RoleId==e))[0];this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions,{default:false,locked:false,permissions:[],roleId:t.RoleId,roleName:t.RoleName}]});this.permissionsChanged.emit(this.permissions)}addUser(){if(this.pickedUser!=undefined){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions,{displayName:this.pickedUser.displayName,permissions:[],userId:this.pickedUser.userId}]});this.pickedUser=undefined;this.userQuery="";this.permissionsChanged.emit(this.permissions)}}getRoles(){const e=this.roles.filter((e=>!this.permissions.rolePermissions.some((t=>t.roleId==e.RoleId))));if(this.selectedRoleGroupId==-2){return e}if(this.selectedRoleGroupId==-1){return e.filter((e=>e.IsSystemRole))}return e.filter((e=>e.RoleGroupId==this.selectedRoleGroupId))}renderRoleCheckBox(e,t){const i=e.permissions.filter((e=>e.permissionId==t.permissionId))[0];if(e.locked){return s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},s("g",{fill:"none"},s("path",{d:"M0 0h24v24H0V0z"}),s("path",{d:"M0 0h24v24H0V0z",opacity:".87"})),s("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 d=i==undefined?"intermediate":i.allowAccess?"checked":"unchecked";return s("dnn-checkbox",{"use-intermediate":true,checked:d,onCheckedchange:s=>this.handleRoleChanged(s.detail,e,t)},s("div",{slot:"intermediateicon"},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},s("path",{d:"M0 0h24v24H0V0z",fill:"none"}),s("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"}))),s("div",{slot:"uncheckedicon"},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},s("path",{d:"M0 0h24v24H0V0z",fill:"none"}),s("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"}))),s("span",null,t.permissionName))}renderUserCheckBox(e,t){const i=e.permissions.filter((e=>e.permissionId==t.permissionId))[0];const d=i==undefined?"intermediate":i.allowAccess?"checked":"unchecked";return s("dnn-checkbox",{"use-intermediate":true,checked:d,onCheckedchange:s=>this.handleUserChanged(s.detail,e,t)},s("div",{slot:"intermediateicon"},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},s("path",{d:"M0 0h24v24H0V0z",fill:"none"}),s("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"}))),s("div",{slot:"uncheckedicon"},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},s("path",{d:"M0 0h24v24H0V0z",fill:"none"}),s("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"}))),s("span",null,t.permissionName))}handleRoleChanged(e,t,s){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const i=Object.assign({},e);i.permissions=[...i.permissions.filter((e=>e.permissionId!=s.permissionId)),{allowAccess:false,fullControl:false,permissionCode:s.permissionCode,permissionId:s.permissionId,permissionKey:s.permissionKey,permissionName:s.permissionName,view:false}];return i}))]});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const i=Object.assign({},e);i.permissions=[...i.permissions.filter((e=>e.permissionId!=s.permissionId)),{allowAccess:true,fullControl:false,permissionCode:s.permissionCode,permissionId:s.permissionId,permissionKey:s.permissionKey,permissionName:s.permissionName,view:false}];return i}))]});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const i=Object.assign({},e);i.permissions=[...i.permissions.filter((e=>e.permissionId!=s.permissionId))];return i}))]});break}this.permissionsChanged.emit(this.permissions)}handleUserChanged(e,t,s){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const i=Object.assign({},e);i.permissions=[...i.permissions.filter((e=>e.permissionId!=s.permissionId)),{allowAccess:false,fullControl:false,permissionCode:s.permissionCode,permissionId:s.permissionId,permissionKey:s.permissionKey,permissionName:s.permissionName,view:false}];return i}))]});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const i=Object.assign({},e);i.permissions=[...i.permissions.filter((e=>e.permissionId!=s.permissionId)),{allowAccess:true,fullControl:false,permissionCode:s.permissionCode,permissionId:s.permissionId,permissionKey:s.permissionKey,permissionName:s.permissionName,view:false}];return i}))]});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const i=Object.assign({},e);i.permissions=[...i.permissions.filter((e=>e.permissionId!=s.permissionId))];return i}))]});break}this.permissionsChanged.emit(this.permissions)}removeRole(e){this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.filter((t=>t.roleId!=e.roleId))]});this.permissionsChanged.emit()}removeUser(e){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.filter((t=>t.userId!=e.userId))]});this.permissionsChanged.emit(this.permissions)}handleQueryChanged(e){this.userQuery=e;if(e==undefined||e.length==0){this.userCollapsible.expanded=false;this.pickedUser=undefined;this.foundUsers=[];return}this.userSearchQueryChanged.emit(e)}handleSearchUserFieldKeyDown(e){if(e.key!="ArrowDown"){return}e.preventDefault();const t=this.userCollapsible.querySelector("button");if(t!=undefined){t.focus()}}handleSearchedUserKeyDown(e){const t=e.target;switch(e.key){case"ArrowDown":e.preventDefault();const s=t.nextElementSibling;s===null||s===void 0?void 0:s.focus();break;case"ArrowUp":e.preventDefault();const i=t.previousElementSibling;i===null||i===void 0?void 0:i.focus();break}}handleUserPicked(e){this.userQuery=e.displayName;this.pickedUser=e}getFilteredUsers(){return this.foundUsers.filter((e=>!this.permissions.userPermissions.some((t=>t.userId==e.userId))))}render(){const e=this.getRoles();return s(i,{key:"e5907b6b3f74ee44d8fa46525f5719d4237722ef",tabIndex:this.focused?-1:0,onFocus:()=>this.rolesDropdown.focus(),onBlur:()=>this.rolesDropdown.blur()},s("div",{key:"081639d8c421617eaf2076b88d8d318922dadb38",class:"add-role-row"},s("div",{key:"40a998250e575b7b23d20a876ff0888279a6a2db",class:"dropdown"},s("label",{key:"cc5676f19c420a51635ed21bdcdb78055751e019"},this.localResx.FilterByGroup," :"),s("select",{key:"21feaed59de7361a85e0d024064d4cdc331268f8",ref:e=>this.rolesDropdown=e,onChange:e=>this.handleRoleGroupChanged(e.target),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},s("option",{key:"5d8c5a3eeff8e6bf2d40ebb8a398830a9877f3d9",value:-2,selected:this.selectedRoleGroupId==-2},this.localResx.AllRoles),s("option",{key:"8114e84ae74de4652295f352930626dd3549d684",value:-1,selected:this.selectedRoleGroupId==-1},this.localResx.GlobalRoles),this.roleGroups.map((e=>s("option",{value:e.id,selected:this.selectedRoleGroupId==e.id},e.name))))),e&&e.length>0&&[s("div",{key:"49602732241ed79d924d8e97e8f94f0c19949fb6",class:"dropdown"},s("label",{key:"313891e6018a5496b2e21b44e79ef46bf2260363"},this.localResx.SelectRole," :"),s("select",{key:"4e8c7cb660ec0ebfc6a395f06ef0285133bf99e6",ref:e=>this.roleDropDown=e},this.getRoles().map((e=>s("option",{value:e.RoleId},e.RoleName))))),s("dnn-button",{key:"047ad1df653bd87cf01ae89bfdc26593d6af4b3a",type:"primary",onClick:()=>this.addRole()},this.localResx.Add)]),s("table",{key:"58426da19d5df149dc3f336c886ba95b1467fb70",class:"roles-table"},s("caption",{key:"a14f7ce9ec18cfda4f2d4a289c622aae52ecc816"},this.localResx.RolePermissions),s("thead",{key:"23a3df2896e33b2326260a015923d31ea3ea0077"},s("tr",{key:"4b22414376e99748d3fb4701aa11f580979bb34e"},s("th",{key:"c5ebcee2bd6800ff0773b2b64f6c4f82ef4b64dc"},this.localResx.Role),this.permissions.permissionDefinitions.map((e=>s("th",null,e.permissionName))),s("th",{key:"41c1e2ff05488ec01ea65cce43b1edb638f27f0d"}," "))),s("tbody",{key:"d1f7101961c9c6d27d963d90633455cec41dd33e"},this.permissions.rolePermissions.map((e=>s("tr",null,s("th",null,e.roleName),this.permissions.permissionDefinitions.map((t=>s("td",null,this.renderRoleCheckBox(e,t)))),s("td",null,!e.default&&s("button",{onClick:()=>this.removeRole(e)},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},s("path",{d:"M0 0h24v24H0V0z",fill:"none"}),s("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"}))))))))),s("div",{key:"ab01ee5fe61631a1c0657d070d6bfb553a918708",class:"search-user"},s("div",{key:"a2dce192a50497f700c54552e3daffdc943e00de",class:"search-control"},s("dnn-searchbox",{key:"ba6a143b692551bc5d6746621b794b3c3ee44fa6",placeholder:this.localResx.User,debounced:true,onQueryChanged:e=>this.handleQueryChanged(e.detail),onKeyDown:e=>this.handleSearchUserFieldKeyDown(e),query:this.userQuery}),s("dnn-collapsible",{key:"4f83d017a269e8e0e60cdf346a2e51e78f5fba50",ref:e=>this.userCollapsible=e},s("div",{key:"fd7a4a9ac3d50670706658b8a2843cb43768604c",class:"dropdown"},this.getFilteredUsers().map((e=>s("button",{onKeyDown:e=>this.handleSearchedUserKeyDown(e),onClick:()=>this.handleUserPicked(e)},e.displayName)))))),this.pickedUser&&s("dnn-button",{key:"ee533a07ff736e551f6fe43b95d404344730f153",onClick:()=>this.addUser()},this.localResx.Add)),this.permissions.userPermissions&&this.permissions.userPermissions.length>0&&s("table",{key:"1e98d655ab1b8e7e65ba3fddbf22ce31b2792e67",class:"users-table"},s("caption",{key:"9e3ad415e660b6b820f7d9b984b29791cbb6e71a"},this.localResx.UserPermissions),s("thead",{key:"dcc9cb1d2f358e82c103ee590f15dfd02708b270"},s("tr",{key:"f9d81861d592191b3c8921456a3979883abe03b8"},s("th",{key:"de9e1bfcfba5fc4b8707edcece401f9bd23ef146"},this.localResx.User),this.permissions.permissionDefinitions.map((e=>s("th",null,e.permissionName))),s("th",{key:"6b047767a641547bc26b81dc87da7bfeb39b035d"}," "))),s("tbody",{key:"7d96474562bb6792dc51ee900941f62e7b842288"},this.permissions.userPermissions.map((e=>s("tr",null,s("th",null,e.displayName),this.permissions.permissionDefinitions.map((t=>s("td",null,this.renderUserCheckBox(e,t)))),s("td",null,s("button",{onClick:()=>this.removeUser(e)},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},s("path",{d:"M0 0h24v24H0V0z",fill:"none"}),s("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"],resx:["resxChanged"]}}};o.style=n;export{o as dnn_permissions_grid};
-//# sourceMappingURL=p-b5241c09.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dnnPermissionsGridCss","DnnPermissionsGridStyle0","DnnPermissionsGrid","this","defaultResx","Add","AllRoles","FilterByGroup","GlobalRoles","Role","RolePermissions","SelectRole","User","UserPermissions","handleFoundUsersChanged","newValue","length","setTimeout","userCollapsible","expanded","resxChanged","mergeResx","componentWillLoad","document","addEventListener","dismissUserResults","bind","disconnectedCallback","removeEventListener","localResx","Object","assign","resx","e","dropdownRect","roleDropDown","getBoundingClientRect","pageX","right","left","pageY","bottom","top","handleRoleGroupChanged","dropdown","index","selectedIndex","value","Number","parseInt","options","selectedRoleGroupId","addRole","roleId","role","roles","filter","r","RoleId","permissions","rolePermissions","default","locked","roleName","RoleName","permissionsChanged","emit","addUser","pickedUser","undefined","userPermissions","displayName","userId","userQuery","getRoles","filteredRoles","some","rp","IsSystemRole","RoleGroupId","renderRoleCheckBox","rolePermission","permissionDefinition","item","permission","permissionId","h","xmlns","height","viewBox","width","fill","d","opacity","checked","allowAccess","onCheckedchange","handleRoleChanged","detail","slot","permissionName","renderUserCheckBox","userPermission","handleUserChanged","map","newRolePermission","p","fullControl","permissionCode","permissionKey","view","u","newUserPermission","removeRole","removeUser","up","handleQueryChanged","query","foundUsers","userSearchQueryChanged","handleSearchUserFieldKeyDown","key","preventDefault","firstButton","querySelector","focus","handleSearchedUserKeyDown","button","target","nextButton","nextElementSibling","previousButton","previousElementSibling","handleUserPicked","searchedUser","getFilteredUsers","fu","render","Host","tabIndex","focused","onFocus","rolesDropdown","onBlur","blur","class","ref","el","onChange","selected","roleGroups","roleGroup","id","name","type","onClick","permissionDefinitions","placeholder","debounced","onQueryChanged","onKeyDown"],"sources":["src/components/dnn-permissions-grid/dnn-permissions-grid.scss?tag=dnn-permissions-grid&encapsulation=shadow","src/components/dnn-permissions-grid/dnn-permissions-grid.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.add-role-row{\n  display: flex;\n  gap: 1em;\n  align-items: center;\n  flex-wrap: wrap;\n  label{\n    margin-right:0.5em;\n  }\n}\n.search-user{\n  display: flex;\n  gap: 1em;\n  margin-top: 1em;\n  .search-control{\n    position: relative;\n    dnn-collapsible{\n      position: absolute;\n      left: 0;\n      top: calc(100% - 2px);\n      width: 100%;\n      box-shadow: 0px 4px 4px;\n      .dropdown{\n        background-color: white;\n        border: 1px solid lightgray;\n        display: flex;\n        flex-direction: column;\n        button{\n          background-color: transparent;\n          border: none;\n          border-bottom: 1px solid lightgray;\n          padding: 0.25em;\n          margin: 0;\n          text-align: left;\n        }\n      }\n    }\n  }\n}\ntable{\n  border: 1px solid lightgray;\n  border-collapse: collapse;\n  margin-top: 1em;\n  thead{\n    text-align: center;\n    tr{\n      border-bottom: 1px solid lightgray;\n    }\n    th{\n      background-color: lightgray;\n      padding: 0.25em 0.5em;\n      &:first-child{\n        border-right: 1px solid lightgray;\n      }\n    }\n  }\n  tbody{\n    tr{\n      border-bottom: 1px dotted lightgray;\n      th{\n        text-align: left;\n        border-right: 1px solid lightgray;\n        padding: 0 0.5em;\n      }\n      td{\n        text-align: center;\n        dnn-checkbox{\n          span{\n            display: none;\n          }\n        }\n        button{\n          background-color: transparent;\n          border: 0;\n          padding: 0;\n          margin: 0;\n          margin-right: 1em;\n        }\n      }\n    }\n  }\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { ILocalization } from './localization-interface';\nimport { IPermissionDefinition, IPermissions, IRolePermission, IUserPermission } from './permissions-interface';\nimport { IRoleGroup } from './role-group-interface';\nimport { IRole } from './role-interface';\nimport { ISearchedUser } from './searched-user-interface';\n\n@Component({\n  tag: 'dnn-permissions-grid',\n  styleUrl: 'dnn-permissions-grid.scss',\n  shadow: true,\n})\nexport class DnnPermissionsGrid {\n\n  /** The list of permissions. */\n  @Prop({mutable: true}) permissions!: IPermissions;\n\n  /** The list of role groups. */\n  @Prop() roleGroups!: IRoleGroup[];\n\n  /** The list of possible roles. */\n  @Prop() roles!: IRole[];\n\n  /** Optionally allows localizing the component strings. */\n  @Prop() resx: ILocalization;\n\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      <dnn-checkbox\n        use-intermediate\n        checked={checked}\n        onCheckedchange={e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)}\n      >\n        <div slot=\"intermediateicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n        </div>\n        <div slot=\"uncheckedicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z\"/></svg>\n        </div>\n        <span>{permissionDefinition.permissionName}</span>\n      </dnn-checkbox>\n    )\n  }\n\n  private renderUserCheckBox(userPermission: IUserPermission, permissionDefinition: IPermissionDefinition) {\n    const item = userPermission.permissions.filter(permission => permission.permissionId == permissionDefinition.permissionId)[0];\n\n    const checked = item == undefined ? \"intermediate\" : item.allowAccess ? \"checked\" : \"unchecked\";\n    return(\n      <dnn-checkbox\n        use-intermediate\n        checked={checked}\n        onCheckedchange={e => this.handleUserChanged(e.detail, userPermission, permissionDefinition)}\n      >\n        <div slot=\"intermediateicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n        </div>\n        <div slot=\"uncheckedicon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z\"/></svg>\n        </div>\n        <span>{permissionDefinition.permissionName}</span>\n      </dnn-checkbox>\n    )\n  }\n  \n  private handleRoleChanged(\n    checked: \"checked\" | \"unchecked\" | \"intermediate\",\n    rolePermission: IRolePermission,\n    permissionDefinition: IPermissionDefinition\n  ): void {\n    switch (checked) {\n      case \"unchecked\":\n        this.permissions = {\n          ...this.permissions,\n          rolePermissions: [\n            ...this.permissions.rolePermissions.map(r => {\n              if (r.roleId != rolePermission.roleId){\n                return r;\n              }\n\n              const newRolePermission = Object.assign({}, r);\n              newRolePermission.permissions = [\n                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: false,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newRolePermission;\n            }),\n          ],\n        };\n        break;\n      case \"checked\":\n        this.permissions = {\n          ...this.permissions,\n          rolePermissions: [\n            ...this.permissions.rolePermissions.map(r => {\n              if (r.roleId != rolePermission.roleId){\n                return r;\n              }\n\n              const newRolePermission = Object.assign({}, r);\n              newRolePermission.permissions = [\n                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: true,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newRolePermission;\n            }),\n          ],\n        };\n        break;\n        case \"intermediate\":\n        this.permissions = {\n          ...this.permissions,\n          rolePermissions: [\n            ...this.permissions.rolePermissions.map(r => {\n              if (r.roleId != rolePermission.roleId){\n                return r;\n              }\n\n              const newRolePermission = Object.assign({}, r);\n              newRolePermission.permissions = [\n                ...newRolePermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n              ];\n              return newRolePermission;\n            }),\n          ],\n        };\n        break;\n      default:\n        break;\n    }\n    this.permissionsChanged.emit(this.permissions);\n  }\n\n  private handleUserChanged(\n    checked: \"checked\" | \"unchecked\" | \"intermediate\",\n    userPermission: IUserPermission,\n    permissionDefinition: IPermissionDefinition\n  ): void {\n    switch (checked) {\n      case \"unchecked\":\n        this.permissions = {\n          ...this.permissions,\n          userPermissions: [\n            ...this.permissions.userPermissions.map(u => {\n              if (u.userId != userPermission.userId){\n                return u;\n              }\n\n              const newUserPermission = Object.assign({}, u);\n              newUserPermission.permissions = [\n                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: false,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newUserPermission;\n            }),\n          ],\n        };\n        break;\n      case \"checked\":\n        this.permissions = {\n          ...this.permissions,\n          userPermissions: [\n            ...this.permissions.userPermissions.map(u => {\n              if (u.userId != userPermission.userId){\n                return u;\n              }\n\n              const newUserPermission = Object.assign({}, u);\n              newUserPermission.permissions = [\n                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n                {\n                  allowAccess: true,\n                  fullControl: false,\n                  permissionCode: permissionDefinition.permissionCode,\n                  permissionId: permissionDefinition.permissionId,\n                  permissionKey: permissionDefinition.permissionKey,\n                  permissionName: permissionDefinition.permissionName,\n                  view: false,\n                },\n              ];\n              return newUserPermission;\n            }),\n          ],\n        };\n        break;\n        case \"intermediate\":\n        this.permissions = {\n          ...this.permissions,\n          userPermissions: [\n            ...this.permissions.userPermissions.map(u => {\n              if (u.userId != userPermission.userId){\n                return u;\n              }\n\n              const newUserPermission = Object.assign({}, u);\n              newUserPermission.permissions = [\n                ...newUserPermission.permissions.filter(p => p.permissionId != permissionDefinition.permissionId),\n              ];\n              return newUserPermission;\n            }),\n          ],\n        };\n        break;\n      default:\n        break;\n    }\n    this.permissionsChanged.emit(this.permissions);\n  }\n\n  private removeRole(rolePermission: IRolePermission): void {\n    this.permissions = {\n      ...this.permissions,\n      rolePermissions: [\n        ...this.permissions.rolePermissions.filter(rp => rp.roleId != rolePermission.roleId),\n      ],\n    };\n    this.permissionsChanged.emit();\n  }\n\n  private removeUser(userPermission: IUserPermission): void {\n    this.permissions = {\n      ...this.permissions,\n      userPermissions: [\n        ...this.permissions.userPermissions.filter(up => up.userId != userPermission.userId),\n      ]\n    };\n    this.permissionsChanged.emit(this.permissions);\n  }\n\n  private handleQueryChanged(query: string): void {\n    this.userQuery = query;\n    if (query == undefined || query.length == 0){\n      this.userCollapsible.expanded = false;\n      this.pickedUser = undefined;\n      this.foundUsers = [];\n      return;\n    }\n    this.userSearchQueryChanged.emit(query);\n  }\n\n  private handleSearchUserFieldKeyDown(e: KeyboardEvent): void {\n    if (e.key != \"ArrowDown\"){\n      return;\n    }\n\n    e.preventDefault();\n    const firstButton = this.userCollapsible.querySelector(\"button\");\n    if (firstButton != undefined){\n      firstButton.focus();\n    }\n  }\n\n  private handleSearchedUserKeyDown(e: KeyboardEvent): void {\n    const button = e.target as HTMLButtonElement;\n    \n    switch(e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        const nextButton = button.nextElementSibling as HTMLButtonElement;\n        nextButton?.focus();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        const previousButton = button.previousElementSibling as HTMLButtonElement;\n        previousButton?.focus();\n      break;\n      default:\n        break;\n    }\n  }\n\n  private handleUserPicked(searchedUser: ISearchedUser): void {\n    this.userQuery = searchedUser.displayName;\n    this.pickedUser = searchedUser;\n  }\n\n  private getFilteredUsers() {\n    return this.foundUsers.filter(fu => !this.permissions.userPermissions.some(up => up.userId == fu.userId))\n  }\n  \n  render() {\n    const filteredRoles = this.getRoles();\n    return (\n      <Host\n        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}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,H as e}from"./p-978abd50.js";import{g as n}from"./p-5df01911.js";const h=":host{display:inline-block;--foreground:var(--dnn-color-foreground, #000);--background:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}textarea{border:none;outline:none;background-color:transparent;color:var(--foreground);width:100%;height:100%;resize:none}";const d=h;const a=class{constructor(s){t(this,s);this.valueInput=i(this,"valueInput",7);this.valueChange=i(this,"valueChange",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.resizable="block";this.value=undefined;this.label=undefined;this.name=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.minlength=undefined;this.maxlength=undefined;this.readonly=undefined;this.focused=false;this.valid=true;this.customValidityMessage=undefined}async checkValidity(){return this.textarea.validity}async setCustomValidity(t){this.customValidityMessage=t;return this.textarea.setCustomValidity(t)}componentWillLoad(){this.labelId=n()}formResetCallback(){this.textarea.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){this.value=t;var i=this.textarea.checkValidity();this.valid=i;this.valueInput.emit(this.value)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.textarea.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}render(){var t;return s(e,{key:"b8cc56d28040acdfe84e5bfdb6a997fffc08a919",tabIndex:this.focused?-1:0,onFocus:()=>this.textarea.focus(),onBlur:()=>this.textarea.blur()},s("dnn-fieldset",{key:"a9306871ef7346819922e2d4b8b88833b680a6cd",invalid:!this.valid,focused:this.focused,resizable:this.resizable,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,disabled:this.disabled,id:this.labelId,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.textarea.focus()},s("textarea",{key:"8ff8ec46a9d1e7db73248cd63d37f0065b27f53f",ref:t=>this.textarea=t,name:this.name,value:this.value,required:this.required,onBlur:()=>this.focused=false,onFocus:()=>this.focused=true,onChange:()=>this.handleChange(),onInput:t=>this.handleInput(t.target.value),onInvalid:()=>this.handleInvalid(),disabled:this.disabled,autoComplete:this.autocomplete,minlength:this.minlength,maxlength:this.maxlength,readonly:this.readonly,"aria-labelledby":this.labelId})))}static get formAssociated(){return true}};a.style=d;export{a as dnn_textarea};
-//# sourceMappingURL=p-bdfd829e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dnnTextareaCss","DnnTextareaStyle0","DnnTextarea","checkValidity","this","textarea","validity","setCustomValidity","message","customValidityMessage","componentWillLoad","labelId","generateRandomId","formResetCallback","valid","value","internals","setValidity","setFormValue","handleInput","valueInput","emit","handleInvalid","undefined","validationMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","invalid","resizable","label","_a","required","helpText","disabled","id","floatLabel","onClick","ref","el","onChange","onInput","e","target","onInvalid","autoComplete","autocomplete","minlength","maxlength","readonly"],"sources":["src/components/dnn-textarea/dnn-textarea.scss?tag=dnn-textarea&encapsulation=shadow","src/components/dnn-textarea/dnn-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n    /** @prop --foreground: Defines the foreground color. */\n    --foreground: var(--dnn-color-foreground, #000);\n\n    /** @prop --background: Defines the background color. */\n    --background: var(--dnn-color-background, #fff);\n  \n    /** @prop --focus-color: Defines the color when the component is focused. */\n    --focus-color: var(--dnn-color-primary, #3792ED);\n  \n    /** @prop --danger-color: Defines the danger color used for invalid data. */\n    --danger-color: var(--dnn-color-danger, #900);\n  \n    /** @prop --control-radius: Defines the radius for the control corners. */\n    --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\ntextarea{\n  border: none;\n  outline: none;\n  background-color: transparent;\n  color: var(--foreground);\n  width: 100%;\n  height: 100%;\n  resize: none;\n}","import { Component, Host, h, Prop, AttachInternals, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom textarea component. */\n@Component({\n  tag: 'dnn-textarea',\n  styleUrl: 'dnn-textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnTextarea {\n  /** Can be set to change how the user can resize the field. */\n  @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"block\";\n\n  /** Sets the value of the textarea. */\n  @Prop({mutable: true}) value: string;\n\n  /** The label for this input. */\n  @Prop() label: string;\n\n  /** The name for this input when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n  @Prop() autocomplete: string = \"off\";\n\n  /** Defines the minimum amount of charaters. */\n  @Prop() minlength: number;\n\n  /** Defines the maximum amount of charaters. */\n  @Prop() maxlength: number;\n\n  /** Defines wheter the defined value is readonly. */\n  @Prop() readonly: boolean;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<string>;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    return this.textarea.validity;\n  }\n\n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    this.customValidityMessage = message;\n    return this.textarea.setCustomValidity(message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n\n  @AttachInternals() internals: ElementInternals;\n  \n  private textarea: HTMLTextAreaElement;\n  private labelId: string;\n\n  componentWillLoad() {\n    this.labelId = generateRandomId();\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.textarea.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  private handleInput(value: string): void {\n    this.value = value;\n    var valid = this.textarea.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(this.value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined){\n      this.customValidityMessage = this.textarea.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined){\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n    \n    return true;\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.textarea.focus()}\n        onBlur={() => this.textarea.blur()}\n      >\n        <dnn-fieldset\n          invalid={!this.valid}\n          focused={this.focused}\n          resizable={this.resizable}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          disabled={this.disabled}\n          id={this.labelId}\n          floatLabel={this.shouldLabelFloat()}\n          onClick={() => !this.focused && this.textarea.focus()}\n        >\n          <textarea\n            ref={el => this.textarea = el}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            onBlur={() => this.focused = false}\n            onFocus={() => this.focused=true}\n            onChange={() => this.handleChange()}\n            onInput={e => this.handleInput((e.target as HTMLTextAreaElement).value)}\n            onInvalid={() => this.handleInvalid()}\n            disabled={this.disabled}\n            autoComplete={this.autocomplete}\n            minlength={this.minlength}\n            maxlength={this.maxlength}\n            readonly={this.readonly}\n            aria-labelledby={this.labelId}\n          />\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,4ZACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,wRAEgE,Q,wJAqBvD,M,uFA8BZ,M,WACF,K,qCAZjB,mBAAMC,GACJ,OAAOC,KAAKC,SAASC,Q,CAKvB,uBAAMC,CAAkBC,GACtBJ,KAAKK,sBAAwBD,EAC7B,OAAOJ,KAAKC,SAASE,kBAAkBC,E,CAYzC,iBAAAE,GACEN,KAAKO,QAAUC,G,CAIjB,iBAAAC,GACET,KAAKC,SAASE,kBAAkB,IAChCH,KAAKU,MAAQ,KACbV,KAAKW,MAAQ,GACbX,KAAKY,UAAUC,YAAY,IAC3Bb,KAAKY,UAAUE,aAAa,G,CAGtB,WAAAC,CAAYJ,GAClBX,KAAKW,MAAQA,EACb,IAAID,EAAQV,KAAKC,SAASF,gBAC1BC,KAAKU,MAAQA,EACbV,KAAKgB,WAAWC,KAAKjB,KAAKW,M,CAGpB,aAAAO,GACNlB,KAAKU,MAAQ,MACb,GAAIV,KAAKK,uBAAyBc,UAAU,CAC1CnB,KAAKK,sBAAwBL,KAAKC,SAASmB,iB,EAIvC,YAAAC,GACNrB,KAAKsB,YAAYL,KAAKjB,KAAKW,OAC3B,GAAIX,KAAKuB,MAAQJ,UAAU,CACzB,IAAIK,EAAO,IAAIC,SACfD,EAAKE,OAAO1B,KAAKuB,KAAMvB,KAAKW,MAAMgB,YAClC3B,KAAKY,UAAUE,aAAaU,E,EAIxB,gBAAAI,GACN,GAAI5B,KAAK6B,QAAS,CAChB,OAAO,K,CAGT,GAAI7B,KAAKW,OAASQ,WAAanB,KAAKW,OAAS,GAAI,CAC/C,OAAO,K,CAGT,OAAO,I,CAGT,MAAAmB,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,SAAUlC,KAAK6B,SAAW,EAAI,EAC9BM,QAAS,IAAMnC,KAAKC,SAASmC,QAC7BC,OAAQ,IAAMrC,KAAKC,SAASqC,QAE5BP,EAAA,gBAAAE,IAAA,2CACEM,SAAUvC,KAAKU,MACfmB,QAAS7B,KAAK6B,QACdW,UAAWxC,KAAKwC,UAChBC,MAAO,IAAGC,EAAA1C,KAAKyC,SAAK,MAAAC,SAAA,EAAAA,EAAI,KAAK1C,KAAK2C,SAAW,KAAO,KACpDC,SAAU5C,KAAK4C,SACfC,SAAU7C,KAAK6C,SACfC,GAAI9C,KAAKO,QACTwC,WAAY/C,KAAK4B,mBACjBoB,QAAS,KAAOhD,KAAK6B,SAAW7B,KAAKC,SAASmC,SAE9CL,EAAA,YAAAE,IAAA,2CACEgB,IAAKC,GAAMlD,KAAKC,SAAWiD,EAC3B3B,KAAMvB,KAAKuB,KACXZ,MAAOX,KAAKW,MACZgC,SAAU3C,KAAK2C,SACfN,OAAQ,IAAMrC,KAAK6B,QAAU,MAC7BM,QAAS,IAAMnC,KAAK6B,QAAQ,KAC5BsB,SAAU,IAAMnD,KAAKqB,eACrB+B,QAASC,GAAKrD,KAAKe,YAAasC,EAAEC,OAA+B3C,OACjE4C,UAAW,IAAMvD,KAAKkB,gBACtB2B,SAAU7C,KAAK6C,SACfW,aAAcxD,KAAKyD,aACnBC,UAAW1D,KAAK0D,UAChBC,UAAW3D,KAAK2D,UAChBC,SAAU5D,KAAK4D,SAAQ,kBACN5D,KAAKO,W","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as i}from"./p-978abd50.js";const o=":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background:var(--dnn-color-background, #fff);--fieldset-focus-color:var(--dnn-color-primary, #3792ED);--fieldset-danger-color:var(--dnn-color-danger, #900);--fieldset-control-radius:var(--dnn-controls-radius, 3px)}.container{border:1px solid var(--fieldset-foreground, #000);border-radius:var(--fieldset-control-radius, 3px);padding:0.75em;display:flex;justify-content:space-between;gap:0.1em;position:relative;background-color:var(--fieldset-background);margin-top:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);height:calc(100% - 1em)}.container label{display:inline-flex;position:absolute;opacity:1;transition:all 150ms ease-in-out;left:0.5em;top:-1.5em;padding:0 0.5em;background-color:var(--fieldset-background);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none}.container.focused{border:1px solid var(--fieldset-focus-color);box-shadow:0 0 0 1px var(--fieldset-focus-color)}.container.focused.invalid{border:1px solid var(--fieldset-danger-color);box-shadow:0 0 0 1px var(--fieldset-danger-color)}.container.focused input{color:var(--fieldset-foreground, #000)}.container.float-label label{opacity:0.6;left:0;top:calc(50% - 0.5em);margin-top:0}.container.disabled{opacity:0.5}.container.invalid{border-color:var(--fieldset-danger-color)}.help-text,.error-message{font-style:italic;opacity:0.7;font-size:0.8em;margin:0.25em}.error-message{color:var(--fieldset-danger-color);font-style:normal;font-weight:bold}";const s=o;const r=class{constructor(a){e(this,a);this.focused=undefined;this.disabled=undefined;this.invalid=undefined;this.label=undefined;this.floatLabel=undefined;this.helpText=undefined;this.resizable="none";this.customValidityMessage=undefined}async setFocused(){this.focused=true}async setBlurred(){this.focused=false}async disable(){this.disabled=true}async enable(){this.disabled=false}async pinLabel(){this.floatLabel=false}async unpinLabel(){this.floatLabel=true}async setValidity(e,a){this.invalid=!e;this.customValidityMessage=a}getContainerClasses(){const e=["container"];if(this.focused){e.push("focused")}if(this.disabled){e.push("disabled")}if(this.invalid){e.push("invalid")}if(this.floatLabel&&!this.focused){e.push("float-label")}return e.join(" ")}render(){return a(i,{key:"7ee42e394faac7673753be66dc1c4796f4d3cbf7"},a("div",{key:"cbc711c65ac10f3848014658228f6b28e8c2f855",class:this.getContainerClasses()},this.label&&a("label",{key:"4175e907013de07a8bfff4a1b760f707c47c9780"},a("slot",{key:"c665a4a1e89667b6796fdebf7a399cf73f3a2d5a",name:"label-prefix"}),this.label,a("slot",{key:"f38bc75b747a9690578235e67c614fe7bac802fc",name:"label-suffix"})),a("div",{key:"e94e37a5c5fe4284e60011d15453a0745eed4ef4",class:"resizer",style:{resize:this.resizable,overflow:this.resizable=="none"?"visible":"auto"}},a("div",{key:"eca3a5f55cbdeb75912a091a31a495b0d7abd6d8",class:"inner-container"},a("slot",{key:"6dcfd24831f36fcf33b78a172b2f1a04773957bd"})))),this.invalid&&this.customValidityMessage&&a("div",{key:"6d939440282fa9bf11ef431edaea1199e9183e4b",class:"error-message"},this.customValidityMessage),!this.invalid&&a("div",{key:"14d4661d357fb3a97e2fbba748cb2126389d1c53",class:"help-text"},this.helpText))}};r.style=s;export{r as dnn_fieldset};
-//# sourceMappingURL=p-cb85f0af.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dnnFieldsetCss","DnnFieldsetStyle0","DnnFieldset","setFocused","this","focused","setBlurred","disable","disabled","enable","pinLabel","floatLabel","unpinLabel","setValidity","valid","message","invalid","customValidityMessage","getContainerClasses","classes","push","join","render","h","Host","key","class","label","name","style","resize","resizable","overflow","helpText"],"sources":["src/components/dnn-fieldset/dnn-fieldset.scss?tag=dnn-fieldset&encapsulation=shadow","src/components/dnn-fieldset/dnn-fieldset.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground: Defines the foreground color. */\n  --fieldset-foreground: var(--dnn-color-foreground, #000);\n\n  /** @prop --background: Defines the background color. */\n  --fieldset-background: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --fieldset-focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --fieldset-danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --fieldset-control-radius: var(--dnn-controls-radius, 3px);\n}\n\n.container{\n  border: 1px solid var(--fieldset-foreground, #000);\n  border-radius: var(--fieldset-control-radius, 3px);\n  padding: 0.75em;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.1em;\n  position: relative;\n  background-color: var(--fieldset-background);\n  margin-top: 1em;\n  .resizer{\n    width: 100%;\n  }\n  .inner-container{\n    position: relative;\n    width: 100%;\n    background-color: var(--fieldset-background);\n    height: calc(100% - 1em);\n  }\n  label{\n    display: inline-flex;\n    position: absolute;\n    opacity: 1;\n    transition: all 150ms ease-in-out;\n    left: 0.5em;\n    top: -1.5em;\n    padding: 0 0.5em;\n    background-color: var(--fieldset-background);\n    white-space: nowrap;\n    max-width: 100%;\n    border-radius: var(--fieldset-control-radius);\n    font-size: 1em;\n    margin-top: 1em;\n    z-index: 1;\n    pointer-events: none;\n  }\n  &.focused{\n    border: 1px solid var(--fieldset-focus-color);\n    box-shadow: 0 0 0 1px var(--fieldset-focus-color);\n    &.invalid{\n      border: 1px solid var(--fieldset-danger-color);\n      box-shadow: 0 0 0 1px var(--fieldset-danger-color);\n    }\n    input{\n      color: var(--fieldset-foreground, #000);\n    }\n  }\n  &.float-label{\n    label{\n      opacity: 0.6;\n      left: 0;\n      top: calc(50% - 0.5em);\n      margin-top:0;\n    }\n  }\n  &.disabled{\n    opacity: 0.5;\n  }\n  &.invalid{\n    border-color: var(--fieldset-danger-color);\n  }\n}\n\n.help-text, .error-message{\n  font-style: italic;\n  opacity: 0.7;\n  font-size: 0.8em;\n  margin: 0.25em;\n}\n.error-message{\n  color: var(--fieldset-danger-color);\n  font-style: normal;\n  font-weight: bold;\n}","import { Component, Host, h, Prop, Method, State } from '@stencil/core';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot label-prefix - Can be used to inject content before the labe.\n * @slot label-suffix - Can be used to inject content after the label.\n */\n@Component({\n  tag: 'dnn-fieldset',\n  styleUrl: 'dnn-fieldset.scss',\n  shadow: true,\n})\nexport class DnnFieldset {\n\n  /** If true the fieldset will display as focused. */\n  @Prop({mutable: true, reflect: true}) focused: boolean;\n\n  /** If true, the fieldset will display as disabled. */\n  @Prop({mutable: true, reflect: true}) disabled: boolean;\n\n  /** If true, the  fieldset will display as invalid. */\n  @Prop({mutable: true, reflect: true}) invalid: boolean;\n\n  /** Sets the text of the fieldset label (caption). */\n  @Prop() label: string;\n\n  /** If true, the label will float in the container, set false to show it on top. */\n  @Prop({mutable: true, reflect: true}) floatLabel: boolean;\n\n  /** Can be used to show some help text about this field. */\n  @Prop() helpText: string;\n\n  /** Can be set to specify if the fieldset can be resized by the user. */\n  @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"none\";\n\n  /** Sets the fieldset to the focused state. */\n  @Method()\n  async setFocused() {\n    this.focused = true;\n  }\n\n  /** Unsets the fieldset focused state. */\n  @Method()\n  async setBlurred() {\n    this.focused = false;\n  }\n\n  /** Sets the fieldset to a disabled state. */\n  @Method()\n  async disable() {\n    this.disabled = true;\n  }\n\n  /** Sets the fieldset to an enabled state. */\n  @Method()\n  async enable() {\n    this.disabled = false;\n  }\n\n  /** Places the label on the top of the container. */\n  @Method()\n  async pinLabel() {\n    this.floatLabel = false;\n  }\n\n  /** Places the label in the vertical middle of the container. */\n  @Method()\n  async unpinLabel() {\n    this.floatLabel = true;\n  }\n\n  /** Sets the validity of the field. */\n  @Method()\n  async setValidity(valid: boolean, message?: string) {\n    this.invalid = !valid;\n    this.customValidityMessage = message;\n  }\n\n  @State() customValidityMessage: string;\n\n  private getContainerClasses() {\n    const classes: string[] = [\"container\"];\n    if (this.focused) {\n      classes.push(\"focused\");\n    }\n\n    if (this.disabled)\n    {\n      classes.push(\"disabled\");\n    }\n\n    if (this.invalid){\n      classes.push(\"invalid\");\n    }\n\n    if (this.floatLabel && !this.focused)\n    {\n      classes.push(\"float-label\");\n    }\n\n    return classes.join(\" \");\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getContainerClasses()}>\n          {this.label &&\n            <label>\n              <slot name=\"label-prefix\"></slot>\n              {this.label}\n              <slot name=\"label-suffix\"></slot>\n            </label>\n          }\n          <div class=\"resizer\" style={{resize: this.resizable, overflow: this.resizable == \"none\" ? \"visible\" : \"auto\"}}>\n            <div class=\"inner-container\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n        {this.invalid && this.customValidityMessage &&\n          <div class=\"error-message\">\n            {this.customValidityMessage}\n          </div>\n        }\n        {!this.invalid &&\n          <div class=\"help-text\">{this.helpText}</div>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,wpDACvB,MAAAC,EAAeD,E,MCUFE,EAAW,M,qLAqBgE,O,qCAItF,gBAAMC,GACJC,KAAKC,QAAU,I,CAKjB,gBAAMC,GACJF,KAAKC,QAAU,K,CAKjB,aAAME,GACJH,KAAKI,SAAW,I,CAKlB,YAAMC,GACJL,KAAKI,SAAW,K,CAKlB,cAAME,GACJN,KAAKO,WAAa,K,CAKpB,gBAAMC,GACJR,KAAKO,WAAa,I,CAKpB,iBAAME,CAAYC,EAAgBC,GAChCX,KAAKY,SAAWF,EAChBV,KAAKa,sBAAwBF,C,CAKvB,mBAAAG,GACN,MAAMC,EAAoB,CAAC,aAC3B,GAAIf,KAAKC,QAAS,CAChBc,EAAQC,KAAK,U,CAGf,GAAIhB,KAAKI,SACT,CACEW,EAAQC,KAAK,W,CAGf,GAAIhB,KAAKY,QAAQ,CACfG,EAAQC,KAAK,U,CAGf,GAAIhB,KAAKO,aAAeP,KAAKC,QAC7B,CACEc,EAAQC,KAAK,c,CAGf,OAAOD,EAAQE,KAAK,I,CAGtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOtB,KAAKc,uBACdd,KAAKuB,OACJJ,EAAA,SAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,iBACVxB,KAAKuB,MACNJ,EAAA,QAAAE,IAAA,2CAAMG,KAAK,kBAGfL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUG,MAAO,CAACC,OAAQ1B,KAAK2B,UAAWC,SAAU5B,KAAK2B,WAAa,OAAS,UAAY,SACpGR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,gDAILrB,KAAKY,SAAWZ,KAAKa,uBACpBM,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRtB,KAAKa,wBAGRb,KAAKY,SACLO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAatB,KAAK6B,U","ignoreList":[]}