import { __decorate, __metadata } from "tslib";
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
let RoleSelector = class RoleSelector extends LitElement {
    constructor() {
        super(...arguments);
        this.roleCategory = 'Roles';
        this.user = {};
        this.roles = [];
        this.userRoles = [];
    }
    render() {
        const userRoleIds = (this.userRoles || []).map(userRole => userRole.id);
        return html `
      ${this.roles.length
            ? html `
            <div>
              ${this.roleCategory ? html `<h3 subtitle>${this.roleCategory}</h3>` : nothing}
              <input id="checkAll" type="checkbox" @change=${this.checkAll.bind(this)} />
              <label for="checkAll">Check all</label>
            </div>

            <ul roles>
              ${this.roles.map(role => html `
                  <li>
                    <input
                      id="${role.id}"
                      type="checkbox"
                      .checked=${userRoleIds.indexOf(role.id) >= 0}
                      .data-role=${role}
                    />
                    <label for="${role.id}">${role.name}</label>
                  </li>
                `)}
            </ul>
          `
            : ''}
    `;
    }
    checkAll(e) {
        const checked = e.currentTarget.checked;
        Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]')).forEach(checkbox => (checkbox.checked = checked));
    }
    selectedRoles() {
        return Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]'))
            .filter(input => input.checked)
            .map(input => {
            const { id, name } = input['data-role'];
            return { id, name };
        });
    }
};
RoleSelector.styles = [
    css `
      [subtitle] {
        margin: 0;
        padding: var(--subtitle-padding);
        font: var(--subtitle-font);
        color: var(--subtitle-text-color);
      }
      div {
        margin: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
      }
      ul {
        flex: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        overflow: auto;
        margin: 0;
        padding: var(--spacing-medium);
        list-style: none;
        border: 1px dashed rgba(0, 0, 0, 0.1);
        border-width: 1px 0;
      }
      input[type='checkbox'] {
        display: inline;
      }
      label {
        padding-left: var(--spacing-small);
        text-transform: capitalize;
        font: var(--label-font);
        color: var(--label-color, var(--md-sys-color-on-surface));
      }
      li {
        padding: var(--spacing-small);
      }
      #checkAll,
      [for='checkAll'] {
        margin-bottom: var(--spacing-medium);
        padding-bottom: var(--spacing-small);
        font-weight: bold;
      }
    `
];
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], RoleSelector.prototype, "roleCategory", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], RoleSelector.prototype, "user", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], RoleSelector.prototype, "roles", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], RoleSelector.prototype, "userRoles", void 0);
RoleSelector = __decorate([
    customElement('role-selector')
], RoleSelector);
export { RoleSelector };
//# sourceMappingURL=role-selector.js.map