@dnncommunity/dnn-elements 0.15.0-beta.7 → 0.15.0

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

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

package/dist/dnn/dnn-searchbox.entry.js

@@ -1,62 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-20e42ad7.js';
-import { D as Debounce } from './debounce-6be67abd.js';
-
-const dnnSearchboxCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const DnnSearchbox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.queryChanged = createEvent(this, "queryChanged", 7);
-    /**
-     * Sets the field placeholder text.
-     */
-    this.placeholder = "";
-    /**
-     * Debounces the queryChanged by 500ms.
-     */
-    this.debounced = true;
-    /** Sets the query */
-    this.query = "";
-  }
-  fireQueryChanged() {
-    if (this.debounced) {
-      this.debouncedHandleQueryChanged();
-    }
-    else {
-      this.handleQueryChanged();
-    }
-  }
-  handleQueryChanged() {
-    this.queryChanged.emit(this.query);
-  }
-  debouncedHandleQueryChanged() {
-    this.handleQueryChanged();
-  }
-  render() {
-    return (h(Host, null, h("input", { type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.query = e.target.value }), this.query !== "" ?
-      h("button", { class: "svg clear", onClick: () => this.query = "" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" })))
-      :
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))));
-  }
-  static get watchers() { return {
-    "query": ["fireQueryChanged"]
-  }; }
-};
-__decorate([
-  Debounce(500)
-], DnnSearchbox.prototype, "debouncedHandleQueryChanged", null);
-DnnSearchbox.style = dnnSearchboxCss;
-
-export { DnnSearchbox as dnn_searchbox };
-
-//# sourceMappingURL=dnn-searchbox.entry.js.map

package/dist/dnn/dnn-searchbox.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-searchbox.entry.esm.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,uoCAAuoC;;;;;;;;;;;;MCOlpC,YAAY;EALzB;;;;;;IAUU,gBAAW,GAAY,EAAE,CAAC;;;;IAK1B,cAAS,GAAY,IAAI,CAAC;;IAGX,UAAK,GAAW,EAAE,CAAC;GA+C3C;EAtCC,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAC;MACjB,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;SACG;MACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;GACF;EAEO,kBAAkB;IACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACpC;EAGO,2BAA2B;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,aAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,GAC/D,EACD,IAAI,CAAC,KAAK,KAAK,EAAE;MAChB,cAAQ,KAAK,EAAC,WAAW,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,IAE9B,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;;QAEX,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,4OAA4O,GAAE,CAAM,CAElY,EACP;GACH;;;;;AAtBD;EADC,QAAQ,CAAC,GAAG,CAAC;+DAGb;;;;;","names":[],"sources":["./src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","./src/components/dnn-searchbox/dnn-searchbox.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  --background-color: transparent;\n  --color: #333;\n  --border-size: 1px;\n  --border-color: grey;\n  --border-active-color: black;\n  --border-radius: var(--dnn-controls-radius, 5px);\n  --padding: var(--dnn-controls-padding, 5px);\n  --focus-color: var(--dnn-color-primary, blue);\n  input {\n    width:100%;\n    border: var(--border-size) solid var(--border-color);\n    outline: none;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    padding-right: 32px;\n    transition: all 300ms ease-in-out;\n    &:focus, &:hover{\n      outline: none;\n      box-shadow: 0 0 2px 2px var(--focus-color);\n    }\n  }\n  svg{\n    position: absolute;\n    top:0;\n    right:0;\n    height: 100%;\n    transform: scale(0.7);\n    fill: var(--color);\n    outline: var(--color);\n    color: var(--color);\n    transition: all 300ms ease-in-out;\n  }\n  button{\n    background: transparent;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    &:focus, &:hover{\n      svg{\n        fill: var(--focus-color);\n      outline: var(--focus-color);\n      color: var(--focus-color);\n      }\n    }\n  }\n}\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\nimport { Debounce } from '../../utilities/debounce';\n@Component({\n  tag: 'dnn-searchbox',\n  styleUrl: 'dnn-searchbox.scss',\n  shadow: true\n})\nexport class DnnSearchbox {\n\n  /**\n   * Sets the field placeholder text.\n   */\n  @Prop() placeholder?: string = \"\";\n\n  /**\n   * Debounces the queryChanged by 500ms.\n   */\n  @Prop() debounced: boolean = true;\n\n  /** Sets the query */\n  @Prop({mutable: true}) query: string = \"\";\n\n  /**\n   * Fires up each time the search query changes.\n   * The data passed is the new query.\n   */\n  @Event() queryChanged: EventEmitter<string>;\n\n  @Watch('query')\n  fireQueryChanged(){\n    if (this.debounced){\n      this.debouncedHandleQueryChanged();\n    }\n    else{\n      this.handleQueryChanged();\n    }\n  }\n  \n  private handleQueryChanged(){\n    this.queryChanged.emit(this.query);\n  }\n\n  @Debounce(500)\n  private debouncedHandleQueryChanged(){\n    this.handleQueryChanged();\n  }\n\n  render() {\n    return (\n      <Host>\n        <input type=\"text\" value={this.query}\n          placeholder={this.placeholder}\n          onInput={e => this.query = (e.target as HTMLInputElement).value}\n        />\n        {this.query !== \"\" ?\n          <button class=\"svg clear\"\n            onClick={() => this.query = \"\"}\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n          </button>\n        :\n        <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=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/dnn/dnn-searchbox.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./index-c3cc3b5b.system.js","./debounce-db438a09.system.js"],(function(e){"use strict";var t,r,o,n,i;return{setters:[function(e){t=e.r;r=e.e;o=e.h;n=e.f},function(e){i=e.D}],execute:function(){var a=":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";var s=undefined&&undefined.__decorate||function(e,t,r,o){var n=arguments.length,i=n<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)if(a=e[s])i=(n<3?a(i):n>3?a(t,r,i):a(t,r))||i;return n>3&&i&&Object.defineProperty(t,r,i),i};var l=e("dnn_searchbox",function(){function e(e){t(this,e);this.queryChanged=r(this,"queryChanged",7);this.placeholder="";this.debounced=true;this.query=""}e.prototype.fireQueryChanged=function(){if(this.debounced){this.debouncedHandleQueryChanged()}else{this.handleQueryChanged()}};e.prototype.handleQueryChanged=function(){this.queryChanged.emit(this.query)};e.prototype.debouncedHandleQueryChanged=function(){this.handleQueryChanged()};e.prototype.render=function(){var e=this;return o(n,null,o("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:function(t){return e.query=t.target.value}}),this.query!==""?o("button",{class:"svg clear",onClick:function(){return e.query=""}},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}))):o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))};Object.defineProperty(e,"watchers",{get:function(){return{query:["fireQueryChanged"]}},enumerable:false,configurable:true});return e}());s([i(500)],l.prototype,"debouncedHandleQueryChanged",null);l.style=a}}}));
-//# sourceMappingURL=dnn-searchbox.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","src/components/dnn-searchbox/dnn-searchbox.tsx"],"names":["dnnSearchboxCss","DnnSearchbox","exports","class_1","hostRef","this","placeholder","debounced","query","prototype","fireQueryChanged","debouncedHandleQueryChanged","handleQueryChanged","queryChanged","emit","render","_this","h","Host","type","value","onInput","e","target","class","onClick","xmlns","height","viewBox","width","fill","d","__decorate","Debounce"],"mappings":"mNAAA,IAAMA,EAAkB,u/CCOXC,EAAYC,EAAA,gBAAA,WALzB,SAAAC,EAAAC,wDAUUC,KAAAC,YAAuB,GAKvBD,KAAAE,UAAqB,KAGNF,KAAAG,MAAgB,GASvCL,EAAAM,UAAAC,iBAAA,WACE,GAAIL,KAAKE,UAAU,CACjBF,KAAKM,kCAEH,CACFN,KAAKO,uBAIDT,EAAAM,UAAAG,mBAAA,WACNP,KAAKQ,aAAaC,KAAKT,KAAKG,QAItBL,EAAAM,UAAAE,4BAAA,WACNN,KAAKO,sBAGPT,EAAAM,UAAAM,OAAA,WAAA,IAAAC,EAAAX,KACE,OACEY,EAACC,EAAI,KACHD,EAAA,QAAA,CAAOE,KAAK,OAAOC,MAAOf,KAAKG,MAC7BF,YAAaD,KAAKC,YAClBe,QAAS,SAAAC,GAAK,OAAAN,EAAKR,MAASc,EAAEC,OAA4BH,SAE3Df,KAAKG,QAAU,GACdS,EAAA,SAAA,CAAQO,MAAM,YACZC,QAAS,WAAM,OAAAT,EAAKR,MAAQ,KAE5BS,EAAA,MAAA,CAAKS,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUb,EAAA,OAAA,CAAMc,EAAE,gBAAgBD,KAAK,SAAQb,EAAA,OAAA,CAAMc,EAAE,sLAGvJd,EAAA,MAAA,CAAKS,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUb,EAAA,OAAA,CAAMc,EAAE,gBAAgBD,KAAK,SAAQb,EAAA,OAAA,CAAMc,EAAE,uXAtDlI,IAoCvBC,EAAA,CADCC,EAAS","sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  --background-color: transparent;\n  --color: #333;\n  --border-size: 1px;\n  --border-color: grey;\n  --border-active-color: black;\n  --border-radius: var(--dnn-controls-radius, 5px);\n  --padding: var(--dnn-controls-padding, 5px);\n  --focus-color: var(--dnn-color-primary, blue);\n  input {\n    width:100%;\n    border: var(--border-size) solid var(--border-color);\n    outline: none;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    padding-right: 32px;\n    transition: all 300ms ease-in-out;\n    &:focus, &:hover{\n      outline: none;\n      box-shadow: 0 0 2px 2px var(--focus-color);\n    }\n  }\n  svg{\n    position: absolute;\n    top:0;\n    right:0;\n    height: 100%;\n    transform: scale(0.7);\n    fill: var(--color);\n    outline: var(--color);\n    color: var(--color);\n    transition: all 300ms ease-in-out;\n  }\n  button{\n    background: transparent;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    &:focus, &:hover{\n      svg{\n        fill: var(--focus-color);\n      outline: var(--focus-color);\n      color: var(--focus-color);\n      }\n    }\n  }\n}\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\nimport { Debounce } from '../../utilities/debounce';\n@Component({\n  tag: 'dnn-searchbox',\n  styleUrl: 'dnn-searchbox.scss',\n  shadow: true\n})\nexport class DnnSearchbox {\n\n  /**\n   * Sets the field placeholder text.\n   */\n  @Prop() placeholder?: string = \"\";\n\n  /**\n   * Debounces the queryChanged by 500ms.\n   */\n  @Prop() debounced: boolean = true;\n\n  /** Sets the query */\n  @Prop({mutable: true}) query: string = \"\";\n\n  /**\n   * Fires up each time the search query changes.\n   * The data passed is the new query.\n   */\n  @Event() queryChanged: EventEmitter<string>;\n\n  @Watch('query')\n  fireQueryChanged(){\n    if (this.debounced){\n      this.debouncedHandleQueryChanged();\n    }\n    else{\n      this.handleQueryChanged();\n    }\n  }\n  \n  private handleQueryChanged(){\n    this.queryChanged.emit(this.query);\n  }\n\n  @Debounce(500)\n  private debouncedHandleQueryChanged(){\n    this.handleQueryChanged();\n  }\n\n  render() {\n    return (\n      <Host>\n        <input type=\"text\" value={this.query}\n          placeholder={this.placeholder}\n          onInput={e => this.query = (e.target as HTMLInputElement).value}\n        />\n        {this.query !== \"\" ?\n          <button class=\"svg clear\"\n            onClick={() => this.query = \"\"}\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n          </button>\n        :\n        <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=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\n        }\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/dnn/dnn-sort-icon.entry.js

@@ -1,39 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-20e42ad7.js';
-
-const dnnSortIconCss = ":host{--color:#888;--color-sorted:var(--dnn-color-primary, rgb(2,139,255));--color-hover:var(--dnn-color-primary-light, #36a1ff);display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color)}button.active svg{fill:var(--color-sorted)}button:hover svg,button:focus svg{fill:var(--color-hover)}";
-
-const DnnSortIcon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sortChanged = createEvent(this, "sortChanged", 7);
-    /** Defines the current sort direction */
-    this.sortDirection = "none";
-  }
-  changeSort() {
-    switch (this.sortDirection) {
-      case "asc":
-        this.sortDirection = "desc";
-        break;
-      case "desc":
-        this.sortDirection = "asc";
-        break;
-      case "none":
-        this.sortDirection = "asc";
-        break;
-      default:
-        break;
-    }
-    this.sortChanged.emit(this.sortDirection);
-  }
-  render() {
-    return (h(Host, null, h("button", { class: { "active": this.sortDirection != "none" }, onClick: () => this.changeSort() }, this.sortDirection == "none" &&
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, h("path", { d: "M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z" })), this.sortDirection == "asc" &&
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, h("path", { d: "M 0 7 H 12 L 6 0 Z" })), this.sortDirection == "desc" &&
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, h("path", { d: "M 0 9 H 12 L 6 16 Z" })))));
-  }
-};
-DnnSortIcon.style = dnnSortIconCss;
-
-export { DnnSortIcon as dnn_sort_icon };
-
-//# sourceMappingURL=dnn-sort-icon.entry.js.map

package/dist/dnn/dnn-sort-icon.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-sort-icon.entry.esm.js","mappings":";;AAAA,MAAM,cAAc,GAAG,idAAid;;MCO3d,WAAW;EALxB;;;;IAOU,kBAAa,GAA4B,MAAM,CAAC;GA2CzD;EAtCS,UAAU;IAChB,QAAQ,IAAI,CAAC,aAAa;MACxB,KAAK,KAAK;QACR,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR;QACE,MAAM;KACT;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC3C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,IAAI,MAAM,EAAC,EAC/C,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAE/B,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM,EAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;MAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM,EAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","./src/components/dnn-sort-icon/dnn-sort-icon.tsx"],"sourcesContent":[":host {\n  /**\n  * @prop --color: Normal Color of the inactive sort icon.\n  * @prop --color-sorted: Color of the sorted sort icon.\n  * @prop --color-hover: Color of the icons when hovered.\n  */\n  --color: #888;\n  --color-sorted: var(--dnn-color-primary, rgb(2,139,255));\n  --color-hover: var(--dnn-color-primary-light, #36a1ff);\n  \n  display: inline-block;\n}\n\nbutton {\n  outline: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  outline: none;\n  display: inline-block;\n  line-height: 1em;\n  position: relative;\n  top: 0.25em;\n  svg{\n    height: 1.5em;\n    width: auto;\n    fill: var(--color);\n  }\n  &.active{\n    svg{\n      fill: var(--color-sorted);\n    }\n  }\n  &:hover, &:focus{\n    svg{\n      fill: var(--color-hover);\n    }\n  }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-sort-icon',\n  styleUrl: 'dnn-sort-icon.scss',\n  shadow: true\n})\nexport class DnnSortIcon {\n  /** Defines the current sort direction */\n  @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\n\n  /** Emitted when the sort is changed. */\n  @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\n  \n  private changeSort(): void {\n    switch (this.sortDirection) {\n      case \"asc\":\n        this.sortDirection = \"desc\";\n        break;\n      case \"desc\":\n        this.sortDirection = \"asc\";\n        break;\n      case \"none\":\n        this.sortDirection = \"asc\";\n        break;\n      default:\n        break;\n    }\n\n    this.sortChanged.emit(this.sortDirection);\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\"active\": this.sortDirection != \"none\"}}\n          onClick={() => this.changeSort()}\n        >\n          {this.sortDirection == \"none\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\n          }\n          {this.sortDirection == \"asc\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\n          }\n          {this.sortDirection == \"desc\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\n          }\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/dnn/dnn-sort-icon.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./index-c3cc3b5b.system.js"],(function(t){"use strict";var o,r,n,e;return{setters:[function(t){o=t.r;r=t.e;n=t.h;e=t.f}],execute:function(){var i=":host{--color:#888;--color-sorted:var(--dnn-color-primary, rgb(2,139,255));--color-hover:var(--dnn-color-primary-light, #36a1ff);display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color)}button.active svg{fill:var(--color-sorted)}button:hover svg,button:focus svg{fill:var(--color-hover)}";var s=t("dnn_sort_icon",function(){function t(t){o(this,t);this.sortChanged=r(this,"sortChanged",7);this.sortDirection="none"}t.prototype.changeSort=function(){switch(this.sortDirection){case"asc":this.sortDirection="desc";break;case"desc":this.sortDirection="asc";break;case"none":this.sortDirection="asc";break;default:break}this.sortChanged.emit(this.sortDirection)};t.prototype.render=function(){var t=this;return n(e,null,n("button",{class:{active:this.sortDirection!="none"},onClick:function(){return t.changeSort()}},this.sortDirection=="none"&&n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},n("path",{d:"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z"})),this.sortDirection=="asc"&&n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},n("path",{d:"M 0 7 H 12 L 6 0 Z"})),this.sortDirection=="desc"&&n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},n("path",{d:"M 0 9 H 12 L 6 16 Z"}))))};return t}());s.style=i}}}));
-//# sourceMappingURL=dnn-sort-icon.system.entry.js.map

package/dist/dnn/dnn-sort-icon.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","src/components/dnn-sort-icon/dnn-sort-icon.tsx"],"names":["dnnSortIconCss","DnnSortIcon","exports","class_1","hostRef","this","sortDirection","prototype","changeSort","sortChanged","emit","render","_this","h","Host","class","active","onClick","xmlns","viewBox","d"],"mappings":"8JAAA,IAAMA,EAAiB,sdCOVC,EAAWC,EAAA,gBAAA,WALxB,SAAAC,EAAAC,sDAOUC,KAAAC,cAAyC,OAKzCH,EAAAI,UAAAC,WAAA,WACN,OAAQH,KAAKC,eACX,IAAK,MACHD,KAAKC,cAAgB,OACrB,MACF,IAAK,OACHD,KAAKC,cAAgB,MACrB,MACF,IAAK,OACHD,KAAKC,cAAgB,MACrB,MACF,QACE,MAGJD,KAAKI,YAAYC,KAAKL,KAAKC,gBAG7BH,EAAAI,UAAAI,OAAA,WAAA,IAAAC,EAAAP,KACE,OACEQ,EAACC,EAAI,KACHD,EAAA,SAAA,CACEE,MAAO,CAACC,OAAUX,KAAKC,eAAiB,QACxCW,QAAS,WAAM,OAAAL,EAAKJ,eAEnBH,KAAKC,eAAiB,QACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,4CAErEf,KAAKC,eAAiB,OACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,wBAErEf,KAAKC,eAAiB,QACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,qCAvCxD","sourcesContent":[":host {\n  /**\n  * @prop --color: Normal Color of the inactive sort icon.\n  * @prop --color-sorted: Color of the sorted sort icon.\n  * @prop --color-hover: Color of the icons when hovered.\n  */\n  --color: #888;\n  --color-sorted: var(--dnn-color-primary, rgb(2,139,255));\n  --color-hover: var(--dnn-color-primary-light, #36a1ff);\n  \n  display: inline-block;\n}\n\nbutton {\n  outline: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  outline: none;\n  display: inline-block;\n  line-height: 1em;\n  position: relative;\n  top: 0.25em;\n  svg{\n    height: 1.5em;\n    width: auto;\n    fill: var(--color);\n  }\n  &.active{\n    svg{\n      fill: var(--color-sorted);\n    }\n  }\n  &:hover, &:focus{\n    svg{\n      fill: var(--color-hover);\n    }\n  }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-sort-icon',\n  styleUrl: 'dnn-sort-icon.scss',\n  shadow: true\n})\nexport class DnnSortIcon {\n  /** Defines the current sort direction */\n  @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\n\n  /** Emitted when the sort is changed. */\n  @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\n  \n  private changeSort(): void {\n    switch (this.sortDirection) {\n      case \"asc\":\n        this.sortDirection = \"desc\";\n        break;\n      case \"desc\":\n        this.sortDirection = \"asc\";\n        break;\n      case \"none\":\n        this.sortDirection = \"asc\";\n        break;\n      default:\n        break;\n    }\n\n    this.sortChanged.emit(this.sortDirection);\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\"active\": this.sortDirection != \"none\"}}\n          onClick={() => this.changeSort()}\n        >\n          {this.sortDirection == \"none\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\n          }\n          {this.sortDirection == \"asc\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\n          }\n          {this.sortDirection == \"desc\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\n          }\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/dnn/dnn-tab.entry.js

@@ -1,27 +0,0 @@
-import { r as registerInstance, h, f as Host } from './index-20e42ad7.js';
-
-const dnnTabCss = "";
-
-const DnnTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.visible = false;
-  }
-  /** Shows the tab. */
-  async show() {
-    this.visible = true;
-  }
-  /** Hides the modal */
-  async hide() {
-    this.visible = false;
-  }
-  render() {
-    return (h(Host, null, this.visible &&
-      h("slot", null)));
-  }
-};
-DnnTab.style = dnnTabCss;
-
-export { DnnTab as dnn_tab };
-
-//# sourceMappingURL=dnn-tab.entry.js.map

package/dist/dnn/dnn-tab.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-tab.entry.esm.js","mappings":";;AAAA,MAAM,SAAS,GAAG,EAAE;;MCQP,MAAM;EALnB;;IASa,YAAO,GAAY,KAAK,CAAC;GAuBrC;;EAnBG,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACvB;;EAID,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACxB;EAED,MAAM;IACF,QACI,EAAC,IAAI,QACA,IAAI,CAAC,OAAO;MACT,eAAa,CAEd,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","./src/components/dnn-tab/dnn-tab.tsx"],"sourcesContent":["","import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n    tag: 'dnn-tab',\r\n    styleUrl: 'dnn-tab.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTab {\r\n    /** Defines the tab title. */\r\n    @Prop() tabTitle!: string;\r\n\r\n    @State() visible: boolean = false;\r\n\r\n    /** Shows the tab. */\r\n    @Method()\r\n    async show(){\r\n        this.visible = true;\r\n    }\r\n\r\n    /** Hides the modal */\r\n    @Method()\r\n    async hide(){\r\n        this.visible = false;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                {this.visible &&\r\n                    <slot></slot>\r\n                }\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

package/dist/dnn/dnn-tab.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function u(t){try{c(r.next(t))}catch(t){o(t)}}function a(t){try{c(r["throw"](t))}catch(t){o(t)}}function c(t){t.done?n(t.value):i(t.value).then(u,a)}c((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(t){return function(e){return c([t,e])}}function c(u){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){n.label=u[1];break}if(u[0]===6&&n.label<o[1]){n.label=o[1];o=u;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(u);break}if(o[2])n.ops.pop();n.trys.pop();continue}u=e.call(t,n)}catch(t){u=[6,t];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./index-c3cc3b5b.system.js"],(function(t){"use strict";var e,n,r;return{setters:[function(t){e=t.r;n=t.h;r=t.f}],execute:function(){var i="";var o=t("dnn_tab",function(){function t(t){e(this,t);this.visible=false}t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.visible=true;return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.visible=false;return[2]}))}))};t.prototype.render=function(){return n(r,null,this.visible&&n("slot",null))};return t}());o.style=i}}}));
-//# sourceMappingURL=dnn-tab.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","src/components/dnn-tab/dnn-tab.tsx"],"names":["dnnTabCss","DnnTab","exports","class_1","hostRef","this","visible","prototype","show","hide","render","h","Host"],"mappings":"+kDAAA,IAAMA,EAAY,OCQLC,EAAMC,EAAA,UAAA,WALnB,SAAAC,EAAAC,aASaC,KAAAC,QAAmB,MAItBH,EAAAI,UAAAC,KAAN,gGACIH,KAAKC,QAAU,sBAKbH,EAAAI,UAAAE,KAAN,gGACIJ,KAAKC,QAAU,uBAGnBH,EAAAI,UAAAG,OAAA,WACI,OACIC,EAACC,EAAI,KACAP,KAAKC,SACFK,EAAA,OAAA,iBAtBD","sourcesContent":[null,"import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n    tag: 'dnn-tab',\r\n    styleUrl: 'dnn-tab.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTab {\r\n    /** Defines the tab title. */\r\n    @Prop() tabTitle!: string;\r\n\r\n    @State() visible: boolean = false;\r\n\r\n    /** Shows the tab. */\r\n    @Method()\r\n    async show(){\r\n        this.visible = true;\r\n    }\r\n\r\n    /** Hides the modal */\r\n    @Method()\r\n    async hide(){\r\n        this.visible = false;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                {this.visible &&\r\n                    <slot></slot>\r\n                }\r\n            </Host>\r\n        );\r\n    }\r\n}"]}

package/dist/dnn/dnn-tabs.entry.js

@@ -1,48 +0,0 @@
-import { r as registerInstance, h, f as Host } from './index-20e42ad7.js';
-
-const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
-
-const DnnTabs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabTitles = [];
-    this.selectedTabTitle = "";
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      this.updateTitles();
-      this.showFirstTab();
-    });
-  }
-  getTabs() {
-    return this.component.shadowRoot.querySelector("slot").assignedElements();
-  }
-  updateTitles() {
-    const tabs = this.getTabs();
-    tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);
-  }
-  showFirstTab() {
-    const tab = this.getTabs()[0];
-    tab.show();
-    this.selectedTabTitle = tab.tabTitle;
-  }
-  showTab(tabTitle) {
-    const tabs = this.getTabs();
-    tabs.forEach(tab => {
-      if (tab.tabTitle == tabTitle) {
-        tab.show();
-        return;
-      }
-      tab.hide();
-    });
-    this.selectedTabTitle = tabTitle;
-  }
-  render() {
-    return (h(Host, { ref: el => this.component = el }, h("div", { class: "tabTitles" }, this.tabTitles.map(tabTitle => h("button", { class: this.selectedTabTitle == tabTitle ? "visible" : "", onClick: () => this.showTab(tabTitle) }, tabTitle))), h("div", { class: "currentTab" }, h("slot", null))));
-  }
-};
-DnnTabs.style = dnnTabsCss;
-
-export { DnnTabs as dnn_tabs };
-
-//# sourceMappingURL=dnn-tabs.entry.js.map

package/dist/dnn/dnn-tabs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-tabs.entry.esm.js","mappings":";;AAAA,MAAM,UAAU,GAAG,uyBAAuyB;;MCO7yB,OAAO;EALpB;;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC;MAClB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB,CAAC,CAAC;GACN;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;GACpG;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC3E;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;GACxC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG;MACZ,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;KACd,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

package/dist/dnn/dnn-tabs.system.entry.js

@@ -1,2 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(t,r,o){if(o||arguments.length===2)for(var e=0,a=r.length,n;e<a;e++){if(n||!(e in r)){if(!n)n=Array.prototype.slice.call(r,0,e);n[e]=r[e]}}return t.concat(n||Array.prototype.slice.call(r))};System.register(["./index-c3cc3b5b.system.js"],(function(t){"use strict";var r,o,e;return{setters:[function(t){r=t.r;o=t.h;e=t.f}],execute:function(){var a=":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";var n=t("dnn_tabs",function(){function t(t){r(this,t);this.tabTitles=[];this.selectedTabTitle=""}t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){t.updateTitles();t.showFirstTab()}))};t.prototype.getTabs=function(){return this.component.shadowRoot.querySelector("slot").assignedElements()};t.prototype.updateTitles=function(){var t=this;var r=this.getTabs();r.forEach((function(r){return t.tabTitles=__spreadArray(__spreadArray([],t.tabTitles,true),[r.tabTitle],false)}))};t.prototype.showFirstTab=function(){var t=this.getTabs()[0];t.show();this.selectedTabTitle=t.tabTitle};t.prototype.showTab=function(t){var r=this.getTabs();r.forEach((function(r){if(r.tabTitle==t){r.show();return}r.hide()}));this.selectedTabTitle=t};t.prototype.render=function(){var t=this;return o(e,{ref:function(r){return t.component=r}},o("div",{class:"tabTitles"},this.tabTitles.map((function(r){return o("button",{class:t.selectedTabTitle==r?"visible":"",onClick:function(){return t.showTab(r)}},r)}))),o("div",{class:"currentTab"},o("slot",null)))};return t}());n.style=a}}}));
-//# sourceMappingURL=dnn-tabs.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","src/components/dnn-tabs/dnn-tabs.tsx"],"names":["dnnTabsCss","DnnTabs","exports","class_1","hostRef","this","tabTitles","selectedTabTitle","prototype","componentDidLoad","_this","requestAnimationFrame","updateTitles","showFirstTab","getTabs","component","shadowRoot","querySelector","assignedElements","tabs","forEach","tab","__spreadArray","tabTitle","show","showTab","hide","render","h","Host","ref","el","class","map","onClick"],"mappings":"wYAAA,IAAMA,EAAa,4yBCONC,EAAOC,EAAA,WAAA,WALpB,SAAAC,EAAAC,aAQaC,KAAAC,UAAsB,GACtBD,KAAAE,iBAA2B,GAEpCJ,EAAAK,UAAAC,iBAAA,WAAA,IAAAC,EAAAL,KACIM,uBAAsB,WAClBD,EAAKE,eACLF,EAAKG,mBAILV,EAAAK,UAAAM,QAAA,WACJ,OAAOT,KAAKU,UAAUC,WAAWC,cAAc,QAAQC,oBAGnDf,EAAAK,UAAAI,aAAA,WAAA,IAAAF,EAAAL,KACJ,IAAMc,EAAOd,KAAKS,UAClBK,EAAKC,SAAQ,SAAAC,GAAO,OAAAX,EAAKJ,UAASgB,cAAAA,cAAA,GAAOZ,EAAKJ,UAAS,MAAA,CAAEe,EAAIE,UAAQ,WAGjEpB,EAAAK,UAAAK,aAAA,WACJ,IAAMQ,EAAMhB,KAAKS,UAAU,GAC3BO,EAAIG,OACJnB,KAAKE,iBAAmBc,EAAIE,UAGxBpB,EAAAK,UAAAiB,QAAA,SAAQF,GACZ,IAAMJ,EAAOd,KAAKS,UAClBK,EAAKC,SAAQ,SAAAC,GACT,GAAIA,EAAIE,UAAYA,EAAS,CACzBF,EAAIG,OACJ,OAGJH,EAAIK,UAERrB,KAAKE,iBAAmBgB,GAG5BpB,EAAAK,UAAAmB,OAAA,WAAA,IAAAjB,EAAAL,KACI,OACIuB,EAACC,EAAI,CAACC,IAAK,SAAAC,GAAM,OAAArB,EAAKK,UAAYgB,IAC9BH,EAAA,MAAA,CAAKI,MAAM,aACN3B,KAAKC,UAAU2B,KAAI,SAAAV,GAChB,OAAAK,EAAA,SAAA,CACII,MAAOtB,EAAKH,kBAAoBgB,EAAW,UAAW,GACtDW,QAAS,WAAM,OAAAxB,EAAKe,QAAQF,KAE3BA,OAIbK,EAAA,MAAA,CAAKI,MAAM,cACPJ,EAAA,OAAA,kBAvDA","sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"]}

package/dist/dnn/dnn-toggle.entry.js

@@ -1,33 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20e42ad7.js';
-
-const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--handle-border-radius, var(--dnn-controls-radius, 50%));position:absolute;top:calc(50% - 0.5em);left:2px}";
-
-const DnnToggle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.checkChanged = createEvent(this, "checkChanged", 7);
-    /** If 'true' the toggle is checked (on). */
-    this.checked = false;
-    /** If 'true' the toggle is not be interacted with. */
-    this.disabled = false;
-  }
-  checkedChanged(isChecked) {
-    this.checkChanged.emit({ checked: isChecked });
-  }
-  render() {
-    return (h(Host, null, h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
-        if (!this.disabled) {
-          this.checked = !this.checked;
-        }
-      } }, h("div", { class: "handle" }))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "checked": ["checkedChanged"]
-  }; }
-};
-DnnToggle.style = dnnToggleCss;
-
-export { DnnToggle as dnn_toggle };
-
-//# sourceMappingURL=dnn-toggle.entry.js.map

package/dist/dnn/dnn-toggle.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-toggle.entry.esm.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6+BAA6+B;;MCSr/B,SAAS;EALtB;;;;IAU2B,YAAO,GAAG,KAAK,CAAC;;IAG/B,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;GAChD;EAED,MAAM;IACF,QACI,EAAC,IAAI,QACD,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAChC;OACJ,IAED,WAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,EACT;GACL;;;;;;;;;;","names":[],"sources":["./src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","./src/components/dnn-toggle/dnn-toggle.tsx"],"sourcesContent":[":host {\n    /**\n     * @prop --background: Background of the toggle.\n     * @prop --background-checked: Background of the toggle when checked.\n     * @prop --handle-background:  Background of the handle.\n     * @prop --handle-background-checked:  Background of the handle when checked.\n     * @prop --border-radius: The radius of the background borders.\n     * @prop --handle-border-radius: The radius of the handle.\n    */\n\n    display: inline-block;\n    outline: none;\n    cursor: pointer;\n}\n\nbutton {\n    height: 1.5em;\n    width: 2.5em;\n    outline: none;\n    background-color: var(--background, #888);\n    border: 0;\n    border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\n    padding: 0.1em;\n    position: relative;\n    margin: 0;\n    transition: background-color 300ms ease-in-out;\n    position: relative;\n    cursor: pointer;\n    &:hover, &:focus{\n        box-shadow: 0 0 2px 2px var(--dnn-color-primary);\n    }\n    &.checked{\n        background-color: var(--background-checked, var(--dnn-color-primary, blue));\n        .handle{\n            left: calc(1em + 4px);\n        }\n    }\n    &:disabled{\n        opacity: 0.5;\n        cursor: not-allowed;\n        box-shadow: none;\n    }\n    .handle{\n        transition: all 300ms ease-in-out;\n        background-color:white;\n        width: 1em;\n        height: 1em;\n        border-radius: var(--handle-border-radius, var(--dnn-controls-radius, 50%));\n        position: absolute;\n        top: calc(50% - 0.5em);\n        left: 2px;\n    }\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\n\n\n@Component({\n    tag: \"dnn-toggle\",\n    styleUrl: \"dnn-toggle.scss\",\n    shadow: true\n})\nexport class DnnToggle {\n\n    @Element() element: HTMLDnnToggleElement;\n\n    /** If 'true' the toggle is checked (on). */\n    @Prop({mutable: true}) checked = false;\n\n    /** If 'true' the toggle is not be interacted with. */\n    @Prop() disabled = false;\n\n    /** Fires when the toggle changed */\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\n\n    @Watch(\"checked\")\n    checkedChanged(isChecked: boolean){\n        this.checkChanged.emit({checked: isChecked});\n    }\n\n    render() {\n        return (\n            <Host>\n                <button disabled={this.disabled} class={{'checked': this.checked}}\n                    onClick={() => {\n                        if (!this.disabled) {\n                            this.checked = !this.checked;\n                        }\n                    }}\n                >\n                    <div class=\"handle\"></div>\n                </button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/dnn/dnn-toggle.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./index-c3cc3b5b.system.js"],(function(e){"use strict";var t,n,o,r,i;return{setters:[function(e){t=e.r;n=e.e;o=e.h;r=e.f;i=e.g}],execute:function(){var c=":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--handle-border-radius, var(--dnn-controls-radius, 50%));position:absolute;top:calc(50% - 0.5em);left:2px}";var a=e("dnn_toggle",function(){function e(e){t(this,e);this.checkChanged=n(this,"checkChanged",7);this.checked=false;this.disabled=false}e.prototype.checkedChanged=function(e){this.checkChanged.emit({checked:e})};e.prototype.render=function(){var e=this;return o(r,null,o("button",{disabled:this.disabled,class:{checked:this.checked},onClick:function(){if(!e.disabled){e.checked=!e.checked}}},o("div",{class:"handle"})))};Object.defineProperty(e.prototype,"element",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedChanged"]}},enumerable:false,configurable:true});return e}());a.style=c}}}));
-//# sourceMappingURL=dnn-toggle.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","src/components/dnn-toggle/dnn-toggle.tsx"],"names":["dnnToggleCss","DnnToggle","exports","class_1","hostRef","this","checked","disabled","prototype","checkedChanged","isChecked","checkChanged","emit","render","_this","h","Host","class","onClick"],"mappings":"sKAAA,IAAMA,EAAe,k/BCSRC,EAASC,EAAA,aAAA,WALtB,SAAAC,EAAAC,wDAU2BC,KAAAC,QAAU,MAGzBD,KAAAE,SAAW,MAMnBJ,EAAAK,UAAAC,eAAA,SAAeC,GACXL,KAAKM,aAAaC,KAAK,CAACN,QAASI,KAGrCP,EAAAK,UAAAK,OAAA,WAAA,IAAAC,EAAAT,KACI,OACIU,EAACC,EAAI,KACDD,EAAA,SAAA,CAAQR,SAAUF,KAAKE,SAAUU,MAAO,CAACX,QAAWD,KAAKC,SACrDY,QAAS,WACL,IAAKJ,EAAKP,SAAU,CAChBO,EAAKR,SAAWQ,EAAKR,WAI7BS,EAAA,MAAA,CAAKE,MAAM,oQA5BT","sourcesContent":[":host {\n    /**\n     * @prop --background: Background of the toggle.\n     * @prop --background-checked: Background of the toggle when checked.\n     * @prop --handle-background:  Background of the handle.\n     * @prop --handle-background-checked:  Background of the handle when checked.\n     * @prop --border-radius: The radius of the background borders.\n     * @prop --handle-border-radius: The radius of the handle.\n    */\n\n    display: inline-block;\n    outline: none;\n    cursor: pointer;\n}\n\nbutton {\n    height: 1.5em;\n    width: 2.5em;\n    outline: none;\n    background-color: var(--background, #888);\n    border: 0;\n    border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\n    padding: 0.1em;\n    position: relative;\n    margin: 0;\n    transition: background-color 300ms ease-in-out;\n    position: relative;\n    cursor: pointer;\n    &:hover, &:focus{\n        box-shadow: 0 0 2px 2px var(--dnn-color-primary);\n    }\n    &.checked{\n        background-color: var(--background-checked, var(--dnn-color-primary, blue));\n        .handle{\n            left: calc(1em + 4px);\n        }\n    }\n    &:disabled{\n        opacity: 0.5;\n        cursor: not-allowed;\n        box-shadow: none;\n    }\n    .handle{\n        transition: all 300ms ease-in-out;\n        background-color:white;\n        width: 1em;\n        height: 1em;\n        border-radius: var(--handle-border-radius, var(--dnn-controls-radius, 50%));\n        position: absolute;\n        top: calc(50% - 0.5em);\n        left: 2px;\n    }\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\n\n\n@Component({\n    tag: \"dnn-toggle\",\n    styleUrl: \"dnn-toggle.scss\",\n    shadow: true\n})\nexport class DnnToggle {\n\n    @Element() element: HTMLDnnToggleElement;\n\n    /** If 'true' the toggle is checked (on). */\n    @Prop({mutable: true}) checked = false;\n\n    /** If 'true' the toggle is not be interacted with. */\n    @Prop() disabled = false;\n\n    /** Fires when the toggle changed */\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\n\n    @Watch(\"checked\")\n    checkedChanged(isChecked: boolean){\n        this.checkChanged.emit({checked: isChecked});\n    }\n\n    render() {\n        return (\n            <Host>\n                <button disabled={this.disabled} class={{'checked': this.checked}}\n                    onClick={() => {\n                        if (!this.disabled) {\n                            this.checked = !this.checked;\n                        }\n                    }}\n                >\n                    <div class=\"handle\"></div>\n                </button>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/dnn/dnn-treeview-item.entry.js

@@ -1,64 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20e42ad7.js';
-
-const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";
-
-const DnnTreeviewItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.userExpanded = createEvent(this, "userExpanded", 3);
-    this.userCollapsed = createEvent(this, "userCollapsed", 3);
-    /** Defines if the current node is expanded.  */
-    this.expanded = false;
-    /** Manages state for whether or not item has children. */
-    this.hasChildren = false;
-  }
-  /** Watch expanded Prop */
-  watchExpanded(expanded) {
-    if (expanded) {
-      this.expander.classList.add("expanded");
-      this.collapsible.expanded = true;
-      return;
-    }
-    this.expander.classList.remove("expanded");
-    this.collapsible.expanded = false;
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      const child = this.childElement.children[0];
-      const count = child.assignedElements().length;
-      if (count > 0) {
-        this.hasChildren = true;
-      }
-      if (this.expanded) {
-        this.expander.classList.add("expanded");
-        this.collapsible.expanded = false;
-        setTimeout(() => {
-          this.collapsible.expanded = true;
-        }, 300);
-      }
-    });
-  }
-  toggleCollapse() {
-    this.expanded = !this.expanded;
-    if (this.expanded) {
-      this.expander.classList.add("expanded");
-      this.userExpanded.emit();
-      return;
-    }
-    this.expander.classList.remove("expanded");
-    this.userCollapsed.emit();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
-      h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.childElement = el }, h("slot", { name: "children" }))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "expanded": ["watchExpanded"]
-  }; }
-};
-DnnTreeviewItem.style = dnnTreeviewItemCss;
-
-export { DnnTreeviewItem as dnn_treeview_item };
-
-//# sourceMappingURL=dnn-treeview-item.entry.js.map

package/dist/dnn/dnn-treeview-item.entry.js.map

@@ -1 +0,0 @@
-{"file":"dnn-treeview-item.entry.esm.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;MCWr7B,eAAe;EAL5B;;;;;IAYwC,aAAQ,GAAY,KAAK,CAAC;;IASvD,gBAAW,GAAY,KAAK,CAAC;GAyEvC;;EArEC,aAAa,CAAC,QAAiB;IAC7B,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;MACjC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;GACnC;EAMD,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAC7C,IAAI,KAAK,GAAG,CAAC,EAAC;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;OACzB;MACD,IAAI,IAAI,CAAC,QAAQ,EAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;QAClC,UAAU,CAAC;UACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;SAClC,EAAE,GAAG,CAAC,CAAC;OACT;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;MACzB,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IACpC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\n  display: flex;\n  overflow: visible;\n}\n.expander{\n  width: 24px;\n  height: 24px;\n  button{\n    transition: all 150ms ease-in-out;\n    background-color:transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    height: 1em;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    top: 2px;\n    svg{\n      :first-child{\n        transition: all 150ms ease-in-out;\n        fill: white;\n        stroke: black\n      }\n    }\n  }\n  &.expanded{\n    button{\n      transform: rotate(45deg);\n      svg{\n        :first-child{\n          fill: black;\n          stroke: black;\n        }\n      }\n    }\n  }\n}\ndiv.item{\n  .item-slot{\n    display: flex;\n    align-items: center;\n    gap: 0.25em;\n    min-height: 24px;\n  }\n  div.children{\n    overflow: hidden;\n    height:0;\n    transition: all 150ms ease-in-out;\n  }\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\n\n/** \n * @slot - The content of this node.\n * @slot children - The content nested under this node.\n*/\n@Component({\n  tag: 'dnn-treeview-item',\n  styleUrl: 'dnn-treeview-item.scss',\n  shadow: true,\n})\nexport class DnnTreeviewItem {\n  \n  private expander!: HTMLDivElement;\n\n  @Element() el!: HTMLDnnTreeviewItemElement;\n  \n  /** Defines if the current node is expanded.  */\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\n\n  /** Fires when the user expands a node. */\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\n\n  /** Fires when the user collapses a node. */\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\n\n  /** Manages state for whether or not item has children. */\n  @State() hasChildren: boolean = false;\n\n  /** Watch expanded Prop */\n  @Watch('expanded')\n  watchExpanded(expanded: boolean) {\n    if (expanded) {\n      this.expander.classList.add(\"expanded\");\n      this.collapsible.expanded = true;\n      return;\n    }\n    \n    this.expander.classList.remove(\"expanded\");\n    this.collapsible.expanded = false;\n  }\n      \n  \n  private childElement!: HTMLDivElement;\n  private collapsible!: HTMLDnnCollapsibleElement;\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      const child = this.childElement.children[0] as HTMLSlotElement;\n      const count = child.assignedElements().length\n      if (count > 0){\n        this.hasChildren = true;\n      }\n      if (this.expanded){\n        this.expander.classList.add(\"expanded\");\n        this.collapsible.expanded = false;\n        setTimeout(() => {\n          this.collapsible.expanded = true;\n        }, 300);\n      }\n    });\n  }\n\n  private toggleCollapse(): void {\n    this.expanded = !this.expanded;\n    if (this.expanded){\n      this.expander.classList.add(\"expanded\");\n      this.userExpanded.emit();\n      return;\n    }\n\n    this.expander.classList.remove(\"expanded\");\n    this.userCollapsed.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"expander\" ref={el => this.expander = el}>\n          {this.hasChildren &&\n            <button\n              onClick={() => this.toggleCollapse()}\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\n            </button>\n          }\n        </div>\n        <div class=\"item\">\n          <div class=\"item-slot\">\n            <slot></slot>\n          </div>\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\n            <div ref={el => this.childElement = el}>\n              <slot name=\"children\"></slot>\n            </div>\n          </dnn-collapsible>\n          </div>\n      </Host>\n    );\n  }\n}\n\nexport interface ExpandedToggledEvent{\n  state: \"expanded\" | \"collapsed\";\n  height: number;\n}"],"version":3}

package/dist/dnn/dnn-treeview-item.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./index-c3cc3b5b.system.js"],(function(e){"use strict";var t,n,i,s,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;s=e.f;a=e.g}],execute:function(){var r=":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";var l=e("dnn_treeview_item",function(){function e(e){t(this,e);this.userExpanded=n(this,"userExpanded",3);this.userCollapsed=n(this,"userCollapsed",3);this.expanded=false;this.hasChildren=false}e.prototype.watchExpanded=function(e){if(e){this.expander.classList.add("expanded");this.collapsible.expanded=true;return}this.expander.classList.remove("expanded");this.collapsible.expanded=false};e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){var t=e.childElement.children[0];var n=t.assignedElements().length;if(n>0){e.hasChildren=true}if(e.expanded){e.expander.classList.add("expanded");e.collapsible.expanded=false;setTimeout((function(){e.collapsible.expanded=true}),300)}}))};e.prototype.toggleCollapse=function(){this.expanded=!this.expanded;if(this.expanded){this.expander.classList.add("expanded");this.userExpanded.emit();return}this.expander.classList.remove("expanded");this.userCollapsed.emit()};e.prototype.render=function(){var e=this;return i(s,null,i("div",{class:"expander",ref:function(t){return e.expander=t}},this.hasChildren&&i("button",{onClick:function(){return e.toggleCollapse()}},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M10 17l5-5-5-5v10z"}),i("path",{d:"M0 24V0h24v24H0z",fill:"none"})))),i("div",{class:"item"},i("div",{class:"item-slot"},i("slot",null)),i("dnn-collapsible",{ref:function(t){return e.collapsible=t},expanded:this.expanded},i("div",{ref:function(t){return e.childElement=t}},i("slot",{name:"children"})))))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{expanded:["watchExpanded"]}},enumerable:false,configurable:true});return e}());l.style=r}}}));
-//# sourceMappingURL=dnn-treeview-item.system.entry.js.map

package/dist/dnn/dnn-treeview-item.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":["dnnTreeviewItemCss","DnnTreeviewItem","exports","class_1","hostRef","this","expanded","hasChildren","prototype","watchExpanded","expander","classList","add","collapsible","remove","componentDidLoad","_this","requestAnimationFrame","child","childElement","children","count","assignedElements","length","setTimeout","toggleCollapse","userExpanded","emit","userCollapsed","render","h","Host","class","ref","el","onClick","xmlns","height","viewBox","width","fill","d","name"],"mappings":"sKAAA,IAAMA,EAAqB,46BCWdC,EAAeC,EAAA,oBAAA,WAL5B,SAAAC,EAAAC,qGAYwCC,KAAAC,SAAoB,MASjDD,KAAAE,YAAuB,MAIhCJ,EAAAK,UAAAC,cAAA,SAAcH,GACZ,GAAIA,EAAU,CACZD,KAAKK,SAASC,UAAUC,IAAI,YAC5BP,KAAKQ,YAAYP,SAAW,KAC5B,OAGFD,KAAKK,SAASC,UAAUG,OAAO,YAC/BT,KAAKQ,YAAYP,SAAW,OAO9BH,EAAAK,UAAAO,iBAAA,WAAA,IAAAC,EAAAX,KACEY,uBAAsB,WACpB,IAAMC,EAAQF,EAAKG,aAAaC,SAAS,GACzC,IAAMC,EAAQH,EAAMI,mBAAmBC,OACvC,GAAIF,EAAQ,EAAE,CACZL,EAAKT,YAAc,KAErB,GAAIS,EAAKV,SAAS,CAChBU,EAAKN,SAASC,UAAUC,IAAI,YAC5BI,EAAKH,YAAYP,SAAW,MAC5BkB,YAAW,WACTR,EAAKH,YAAYP,SAAW,OAC3B,UAKDH,EAAAK,UAAAiB,eAAA,WACNpB,KAAKC,UAAYD,KAAKC,SACtB,GAAID,KAAKC,SAAS,CAChBD,KAAKK,SAASC,UAAUC,IAAI,YAC5BP,KAAKqB,aAAaC,OAClB,OAGFtB,KAAKK,SAASC,UAAUG,OAAO,YAC/BT,KAAKuB,cAAcD,QAGrBxB,EAAAK,UAAAqB,OAAA,WAAA,IAAAb,EAAAX,KACE,OACEyB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAM,WAAWC,IAAK,SAAAC,GAAM,OAAAlB,EAAKN,SAAWwB,IAC9C7B,KAAKE,aACJuB,EAAA,SAAA,CACEK,QAAS,WAAM,OAAAnB,EAAKS,mBAEpBK,EAAA,MAAA,CAAKM,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,OAAA,CAAMW,EAAE,uBAAsBX,EAAA,OAAA,CAAMW,EAAE,mBAAmBD,KAAK,YAI1KV,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,MAAA,CAAKE,MAAM,aACTF,EAAA,OAAA,OAEFA,EAAA,kBAAA,CAAiBG,IAAK,SAAAC,GAAM,OAAAlB,EAAKH,YAAcqB,GAAI5B,SAAUD,KAAKC,UAChEwB,EAAA,MAAA,CAAKG,IAAK,SAAAC,GAAM,OAAAlB,EAAKG,aAAee,IAClCJ,EAAA,OAAA,CAAMY,KAAK,mQAlFG","sourcesContent":[":host {\n  display: flex;\n  overflow: visible;\n}\n.expander{\n  width: 24px;\n  height: 24px;\n  button{\n    transition: all 150ms ease-in-out;\n    background-color:transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    height: 1em;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    top: 2px;\n    svg{\n      :first-child{\n        transition: all 150ms ease-in-out;\n        fill: white;\n        stroke: black\n      }\n    }\n  }\n  &.expanded{\n    button{\n      transform: rotate(45deg);\n      svg{\n        :first-child{\n          fill: black;\n          stroke: black;\n        }\n      }\n    }\n  }\n}\ndiv.item{\n  .item-slot{\n    display: flex;\n    align-items: center;\n    gap: 0.25em;\n    min-height: 24px;\n  }\n  div.children{\n    overflow: hidden;\n    height:0;\n    transition: all 150ms ease-in-out;\n  }\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\n\n/** \n * @slot - The content of this node.\n * @slot children - The content nested under this node.\n*/\n@Component({\n  tag: 'dnn-treeview-item',\n  styleUrl: 'dnn-treeview-item.scss',\n  shadow: true,\n})\nexport class DnnTreeviewItem {\n  \n  private expander!: HTMLDivElement;\n\n  @Element() el!: HTMLDnnTreeviewItemElement;\n  \n  /** Defines if the current node is expanded.  */\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\n\n  /** Fires when the user expands a node. */\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\n\n  /** Fires when the user collapses a node. */\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\n\n  /** Manages state for whether or not item has children. */\n  @State() hasChildren: boolean = false;\n\n  /** Watch expanded Prop */\n  @Watch('expanded')\n  watchExpanded(expanded: boolean) {\n    if (expanded) {\n      this.expander.classList.add(\"expanded\");\n      this.collapsible.expanded = true;\n      return;\n    }\n    \n    this.expander.classList.remove(\"expanded\");\n    this.collapsible.expanded = false;\n  }\n      \n  \n  private childElement!: HTMLDivElement;\n  private collapsible!: HTMLDnnCollapsibleElement;\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      const child = this.childElement.children[0] as HTMLSlotElement;\n      const count = child.assignedElements().length\n      if (count > 0){\n        this.hasChildren = true;\n      }\n      if (this.expanded){\n        this.expander.classList.add(\"expanded\");\n        this.collapsible.expanded = false;\n        setTimeout(() => {\n          this.collapsible.expanded = true;\n        }, 300);\n      }\n    });\n  }\n\n  private toggleCollapse(): void {\n    this.expanded = !this.expanded;\n    if (this.expanded){\n      this.expander.classList.add(\"expanded\");\n      this.userExpanded.emit();\n      return;\n    }\n\n    this.expander.classList.remove(\"expanded\");\n    this.userCollapsed.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"expander\" ref={el => this.expander = el}>\n          {this.hasChildren &&\n            <button\n              onClick={() => this.toggleCollapse()}\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\n            </button>\n          }\n        </div>\n        <div class=\"item\">\n          <div class=\"item-slot\">\n            <slot></slot>\n          </div>\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\n            <div ref={el => this.childElement = el}>\n              <slot name=\"children\"></slot>\n            </div>\n          </dnn-collapsible>\n          </div>\n      </Host>\n    );\n  }\n}\n\nexport interface ExpandedToggledEvent{\n  state: \"expanded\" | \"collapsed\";\n  height: number;\n}"]}