import { __decorate, __metadata } from "tslib";
import { css, html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { i18next, localize } from '@operato/i18n';
let RoleEditForm = class RoleEditForm extends localize(i18next)(LitElement) {
    render() {
        const role = this.role || { name: '', description: '' };
        return html `
      <form field-2column @input="${this.dispatchRoleChanged.bind(this)}">
        <div field>
          <label
            >role name
            <input name="name" value="${role.name}" @click="${e => e.stopPropagation()}" />
          </label>
        </div>

        <div field>
          <label
            >role description
            <input name="description" .value="${role.description}" @click="${e => e.stopPropagation()}" />
          </label>
        </div>
      </form>
    `;
    }
    getRole() {
        const name = this.nameInput.value;
        const description = this.descriptionInput.value;
        if (!name) {
            return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }));
        }
        return { name, description };
    }
    dispatchRoleChanged() {
        this.dispatchEvent(new CustomEvent('roleChanged', {
            detail: this.getRole()
        }));
    }
    showToast(message) {
        document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }));
    }
};
RoleEditForm.styles = css `
    [field-2column] {
      border-radius: var(--border-radius);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px 15px;
      clear: both;
      max-width: var(--input-container-max-width);
    }
    [field] {
      display: flex;
      flex-direction: column;
      padding-bottom: var(--spacing-medium);
    }
    input {
      border: var(--border-dim-color);
      border-radius: var(--border-radius);
      margin: var(--input-margin);
      padding: var(--input-padding);
      min-width: 250px;
      font: var(--input-font);
    }
    label {
      display: flex;
      flex-direction: column;
      font: var(--label-font);
      color: var(--md-sys-color-on-primary);
      text-transform: var(--label-text-transform);
    }
    @media screen and (max-width: 480px) {
      [field] {
        grid-column: span 2;
      }
    }
  `;
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], RoleEditForm.prototype, "role", void 0);
__decorate([
    query('input[name=name]'),
    __metadata("design:type", HTMLInputElement)
], RoleEditForm.prototype, "nameInput", void 0);
__decorate([
    query('input[name=description]'),
    __metadata("design:type", HTMLInputElement)
], RoleEditForm.prototype, "descriptionInput", void 0);
RoleEditForm = __decorate([
    customElement('role-edit-form')
], RoleEditForm);
//# sourceMappingURL=role-edit-form.js.map