@things-factory/auth-ui 10.1.3 → 10.1.6

package/dist-client/components/role-detail.js

@@ -0,0 +1,698 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/checkbox/checkbox.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client, gqlContext } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { getDomain, hasPrivilege } from '@things-factory/auth-base/dist-client';
+/** 아는 축은 사람 말로 쓰고, 그 순서로 세운다. 모르는 축은 자기 이름으로 뒤에 붙는다. */
+const KNOWN_AXES = ['query', 'mutation', 'execute'];
+const AXIS_LABEL = {
+    query: 'label.read',
+    mutation: 'label.write',
+    execute: 'label.execute'
+};
+/**
+ * 한 역할이 무엇을 열 수 있나 — **모듈 × 읽기·쓰기** 격자로 고친다.
+ *
+ * ── 옛 화면이 무엇을 잘못했나 (`components/role-privilege-editor.ts`) ────────
+ * 세 개가 함께 있었고 셋 다 조용했다.
+ *
+ * **① A 의 이름이 B 에 저장된다.** 이름 입력이 `roleChanged` 를 매 글자마다 페이지로 올리고,
+ * 페이지가 그것을 `updateRoleObj` 한 칸에 담아 **모든** 권한 편집기에 내려 줬다. 저장은
+ * `{ ...updateRoleObj, privileges }` 였다. A 를 열어 이름을 고치고 B 를 열어 저장하면 B 의
+ * 이름이 A 가 된다. 여기서는 이름·설명이 **이 컴포넌트의 상태**다 — 페이지가 들지 않는다.
+ *
+ * **② 이름으로 남을 찾는다.** 권한을 읽을 때 `role(name:)` 를 썼는데, 그 질의의 범위는
+ * 「내 도메인 + 부모」다. 부모에 같은 이름의 역할이 있으면 **다른 역할의 권한을 그렸고**,
+ * 저장은 손에 든 id 로 갔다. 여기서는 `rolePrivileges(roleId:)` 하나로 읽는다.
+ *
+ * **③ 저장 범위를 DOM 에서 만든다.** `querySelectorAll('input:checked')` 로 보냈다. 접히거나
+ * 안 그려진 것은 「끈 것」이 되어 **조용히 떨어졌다.** 여기서는 서버가 준 전체 목록이 범위이고,
+ * 검색으로 걸러도 안 보이는 칸은 그대로 유지된다.
+ *
+ * ── 왜 격자인가 ─────────────────────────────────────────────────────────────
+ * 옛 화면은 84줄을 한 줄씩 늘어놓고 `description` 을 라벨로 썼다. 「board 를 편집할 수 있나」를
+ * 알려면 그 줄을 눈으로 찾아야 했다. 모듈이 행이고 읽기·쓰기가 열이면 **한 모듈에서 무엇이
+ * 열려 있나가 한 줄로 보인다.**
+ *
+ * 열은 **데이터가 정한다.** `execute` 는 아직 서버에 없으므로 열이 나오지 않고, 선언이 서면
+ * 화면을 고치지 않고 열이 생긴다 — 없는 것을 있는 것처럼 그리지 않는다.
+ *
+ * ── 빈 칸과 유령 ────────────────────────────────────────────────────────────
+ * 칸이 아예 없는 것(`—`)은 「끈 것」이 아니라 **그 모듈에 그런 권한이 선언되지 않았다**는 뜻이다.
+ * 유령(이 배포의 어떤 코드도 요구하지 않는 권한)은 취소선으로 보이고, **켜는 것만 막는다** —
+ * 이미 켜져 있는 것은 떼야 하니까.
+ */
+let RoleDetail = class RoleDetail extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.description = '';
+        /** 서버가 준 전체 권한. **이것이 저장 범위다** — 화면이 무엇을 그렸는지와 무관하다. */
+        this.rows = [];
+        this.axes = [];
+        this.assigned = new Set();
+        this.holders = [];
+        /*
+         * 지금 어느 도메인에 있나 — **subdomain 으로 견준다.**
+         *
+         * 프로필이 실어 주는 `domain` 에는 `id` 가 없다(`auth-private-process-router.ts` — name·
+         * subdomain·type·theme 만 담는다). 그래서 역할 쪽에서도 `subdomain` 을 함께 읽어 그것으로
+         * 견준다. 두 도메인이 같은 subdomain 을 가질 수 없으므로 id 와 같은 답을 준다.
+         */
+        this.mySubdomain = '';
+        /** 지우기만 선언이 다르다 — 소유권 우회가 없다. 그 선언을 그대로 되묻는다. */
+        this.mayDelete = false;
+        this.keyword = '';
+        this.loading = true;
+        this.failed = false;
+        this.working = false;
+        this.message = '';
+    }
+    static { this.styles = [
+        ButtonContainerStyles,
+        /* The grid scrolls, so it needs the app's 5px bar. Measured 15px here before this line. */
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        min-width: min(560px, 92vw);
+        max-height: 78vh;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      md-filled-text-field {
+        width: 100%;
+      }
+
+      [section] {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin-top: var(--spacing-medium, 8px);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.8rem;
+      }
+
+      [section] [count] {
+        color: var(--md-sys-color-outline);
+      }
+
+      /* 격자만 흐르게 둔다 — 이름과 단추는 언제나 제자리에 있어야 한다. */
+      /*
+       * flex: 1 alone gave this box 69px on a 458px-tall popup whose cap is 644px: a flex
+       * column that shrinks to its content leaves nothing for the child that asked to grow,
+       * so 32 module rows of 31px were read through a 2.2-row window. The floor is what makes
+       * the table legible; flex: 1 still lets it take the rest when the popup is taller.
+       */
+      [scroll] {
+        flex: 1;
+        min-height: min(320px, 40vh);
+        overflow: auto;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.85rem;
+      }
+
+      thead th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        padding: 6px 8px;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface-variant);
+        font-weight: 500;
+        text-align: center;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      thead th:first-child {
+        text-align: left;
+      }
+
+      tbody td {
+        padding: 4px 8px;
+        border-bottom: 1px solid var(--md-sys-color-surface-variant);
+        text-align: center;
+      }
+
+      tbody td:first-child {
+        text-align: left;
+        white-space: nowrap;
+      }
+
+      /* 칸이 없는 것은 「끈 것」이 아니다 — 조용한 색으로 그렇게 말한다. */
+      [absent] {
+        color: var(--md-sys-color-outline);
+      }
+
+      [ghost] {
+        text-decoration: line-through;
+        color: var(--md-sys-color-outline);
+      }
+
+      [note] {
+        padding: 8px 10px;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        font-size: 0.82rem;
+        line-height: 1.5;
+        background-color: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [note][attention] {
+        background-color: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+      }
+
+      ul[holders] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 8px;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        font-size: 0.82rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [invalid] {
+        color: var(--md-sys-color-error);
+        font-size: 0.8rem;
+        min-height: 1.1rem;
+      }
+
+      /* 되돌릴 수 없는 조치 — 선으로 갈라 두고 색은 글자에만 쓴다. */
+      [danger-zone] {
+        margin-top: var(--spacing-small, 4px);
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+        padding-top: var(--spacing-small, 4px);
+      }
+
+      [danger-zone] md-outlined-button {
+        --md-outlined-button-label-text-color: var(--md-sys-color-error);
+        --md-outlined-button-outline-color: var(--md-sys-color-outline-variant);
+        --md-outlined-button-hover-label-text-color: var(--md-sys-color-error);
+        --md-outlined-button-hover-state-layer-color: var(--md-sys-color-error);
+        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-error);
+      }
+    `
+    ]; }
+    get creating() {
+        return !this.role?.id;
+    }
+    /**
+     * **부모 도메인의 역할은 여기서 못 고친다.**
+     *
+     * 목록은 상속으로 부모 역할까지 보여 준다 — 실제로 부여할 수 있는 범위가 그것이기 때문이다.
+     * 그런데 `updateRole`·`deleteRole` 은 `domain.id` 하나로 좁혀 찾으므로 부모 것은 못 찾는다.
+     * 그래서 여기서는 **읽기 전용으로 두고 어디로 가야 하는지 말한다** — 눌리는 단추를 두고 서버가
+     * 거절하면 그것은 안내가 아니라 오류다.
+     */
+    get inherited() {
+        const subdomain = this.role?.domain?.subdomain;
+        return Boolean(subdomain && this.mySubdomain && subdomain !== this.mySubdomain);
+    }
+    /** 저장할 수 있나 — 단추와 처리기가 같은 답을 본다. */
+    get savable() {
+        return !this.loading && !this.failed && !this.working && !this.inherited && Boolean(this.name.trim());
+    }
+    /**
+     * 지울 수 있나.
+     *
+     * 서버가 **가진 사람이 있으면 거절한다**(`deleteRole` — 「cannot delete role because it is
+     * currently in use」). 그러니 사람 목록이 비어 있을 때만 내준다. 그리고 이 하나만 선언이 다르다 —
+     * `@privilege(category:"user", privilege:"mutation")` 로 **소유권 우회가 없다.** 만들기·고치기는
+     * 소유자에게 열려 있는데 지우기만 권한을 요구한다.
+     */
+    get deletable() {
+        return (!this.creating && !this.inherited && !this.loading && !this.working && this.mayDelete && this.holders.length === 0);
+    }
+    /** 보여 줄 행. **저장 범위가 아니다.** */
+    get visible() {
+        const keyword = this.keyword.trim().toLowerCase();
+        return keyword ? this.rows.filter(row => row.category.toLowerCase().includes(keyword)) : this.rows;
+    }
+    render() {
+        return html `
+      <md-filled-text-field
+        type="text"
+        label=${i18next.t('field.name')}
+        .value=${this.name}
+        ?readonly=${this.inherited}
+        @input=${(e) => (this.name = e.target.value)}
+      ></md-filled-text-field>
+
+      <md-filled-text-field
+        type="text"
+        label=${i18next.t('field.description')}
+        .value=${this.description}
+        ?readonly=${this.inherited}
+        @input=${(e) => (this.description = e.target.value)}
+      ></md-filled-text-field>
+
+      <div invalid>${this.message}</div>
+
+      ${this.inherited
+            ? html `<div note attention>
+            ${i18next.t('text.role belongs to x domain and is edited there', {
+                x: this.role?.domain?.name || this.role?.domain?.subdomain
+            })}
+          </div>`
+            : nothing}
+
+      <div section>
+        ${i18next.t('field.privileges')}
+        <span count>${i18next.t('text.x of y on', { x: this.assigned.size, y: this.cellCount() })}</span>
+      </div>
+
+      ${this.renderPrivileges()} ${this.renderHolders()}
+
+      <div class="button-container">
+        <md-elevated-button ?disabled=${!this.savable} @click=${() => this.onSave()}>
+          ${i18next.t('button.save')}
+        </md-elevated-button>
+        <md-elevated-button @click=${() => this.dispatchEvent(new CustomEvent('close'))}>
+          ${i18next.t('button.cancel')}
+        </md-elevated-button>
+      </div>
+
+      ${this.renderDangerZone()}
+    `;
+    }
+    /**
+     * 역할 지우기.
+     *
+     * **왜 안 되는지를 말한다.** 서버는 가진 사람이 있으면 거절하는데(`deleteRole`), 옛 화면은
+     * 언제나 단추를 보여 주고 눌린 뒤에 401 을 받았다. 여기서는 사람이 있으면 단추 대신 그 사실을
+     * 적는다 — 관리자가 다음에 할 일(사람에게서 역할을 떼는 것)이 그 문장에서 나온다.
+     */
+    renderDangerZone() {
+        if (this.creating || this.inherited || this.loading) {
+            return nothing;
+        }
+        return html `
+      <div danger-zone>
+        ${this.holders.length
+            ? html `<div note>${i18next.t('text.remove the role from x people first', { x: this.holders.length })}</div>`
+            : html `<div class="button-container">
+              <md-outlined-button ?disabled=${!this.deletable} @click=${() => this.onDelete()}>
+                ${i18next.t('button.delete role')}
+              </md-outlined-button>
+            </div>`}
+      </div>
+    `;
+    }
+    renderPrivileges() {
+        if (this.loading) {
+            return html `<div note>${i18next.t('text.loading')}</div>`;
+        }
+        if (this.failed) {
+            return html `<div note attention>${i18next.t('text.failed to fetch')}</div>`;
+        }
+        if (!this.rows.length) {
+            /*
+             * 권한 마스터는 부팅 때 `@privilege` 선언으로 채워진다. 비어 있다는 것은 이 배포가 아직
+             * 아무것도 선언하지 않았다는 뜻이므로, 역할에 붙일 것이 없다.
+             */
+            return html `<div note attention>${i18next.t('text.no privilege declared in this deployment')}</div>`;
+        }
+        return html `
+      <md-filled-text-field
+        type="text"
+        label=${i18next.t('field.module')}
+        placeholder=${i18next.t('text.filter by module name')}
+        .value=${this.keyword}
+        @input=${(e) => (this.keyword = e.target.value)}
+      >
+        <md-icon slot="leading-icon">search</md-icon>
+      </md-filled-text-field>
+
+      <div scroll>
+        <table>
+          <thead>
+            <tr>
+              <th>${i18next.t('field.module')}</th>
+              ${this.axes.map(axis => html `<th>${AXIS_LABEL[axis] ? i18next.t(AXIS_LABEL[axis]) : axis}</th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.visible.map(row => html `
+                <tr>
+                  <td>${row.category}</td>
+                  ${this.axes.map(axis => this.renderCell(row, axis))}
+                </tr>
+              `)}
+          </tbody>
+        </table>
+      </div>
+
+      ${this.visible.length === 0
+            ? html `<div note>${i18next.t('text.nothing matches x', { x: this.keyword })}</div>`
+            : nothing}
+    `;
+    }
+    /**
+     * 한 칸.
+     *
+     * ⚠ **설명이 없다.** `description` 은 권한 행의 칸인데 **아무도 채우지 않는다** — 부팅 동기화가
+     * `{ category, name }` 둘만 저장하고(`auth-base/server/index.ts:34-36`), `createPrivilege` 는
+     * 그 칸을 받지만 그것을 부르는 화면이 없다. 그래서 713개 선언이 전부 빈 설명이다.
+     *
+     * 없을 때 `${'$'}{category} ${'$'}{axis}` 를 보여 주던 것을 걷어냈다 — 그건 **코드 낱말을 한 번 더**
+     * 보여 주는 것이고, 관리자가 「배울 것이 없다」고 한 자리가 정확히 그것이다. 지금은 없다고
+     * 말한다. 지어내지 않는다.
+     *
+     * 글이 어디서 오는지는 UX 레인이 정하고 있다(`privilege.category.*` 키가 en·ko 에 이미 하나
+     * 있고 나머지 45개가 비어 있다). 그 키가 오면 이 자리는 tooltip 이 아니라 **본문**으로 옮긴다.
+     */
+    renderCell(row, axis) {
+        const cell = row.cells[axis];
+        if (!cell) {
+            /* 없는 것과 끈 것을 눈으로 갈라 놓는다. */
+            return html `<td absent title=${i18next.t('text.not declared for this module')}>—</td>`;
+        }
+        const on = this.assigned.has(cell.id);
+        return html `
+      <td>
+        <md-checkbox
+          .checked=${on}
+          ?disabled=${this.inherited || (cell.deprecated && !on)}
+          aria-label=${`${row.category} ${axis}`}
+          title=${cell.deprecated
+            ? i18next.t('text.privilege no longer declared')
+            : cell.description || i18next.t('text.no description for this privilege')}
+          @change=${(e) => this.onToggle(cell.id, e.target.checked)}
+        ></md-checkbox>
+        ${cell.deprecated ? html `<span ghost>·</span>` : nothing}
+      </td>
+    `;
+    }
+    /**
+     * 이 역할을 가진 사람.
+     *
+     * 「권한을 어디서 찾나」의 반대 방향이다 — 권한을 고르기 전에 **이걸 바꾸면 누가 영향을
+     * 받는지** 보이는 것이 사람 목록이다. 새로 만드는 자리에는 아직 없다.
+     */
+    renderHolders() {
+        if (this.creating || this.loading) {
+            return nothing;
+        }
+        return html `
+      <div section>
+        ${i18next.t('label.user')} <span count>${this.holders.length}</span>
+      </div>
+      ${this.holders.length
+            ? html `<ul holders>
+            ${this.holders.map(holder => html `<li>${holder.name || holder.email}</li>`)}
+          </ul>`
+            : html `<div note>${i18next.t('text.no one holds this role yet')}</div>`}
+    `;
+    }
+    cellCount() {
+        return this.rows.reduce((sum, row) => sum + Object.keys(row.cells).length, 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.checkGates();
+    }
+    /** 서버 선언을 그대로 되묻고, 지금 도메인을 프로필에서 읽는다. */
+    async checkGates() {
+        this.mayDelete = Boolean(await hasPrivilege({ category: 'user', privilege: 'mutation' }));
+        this.mySubdomain = (await getDomain())?.subdomain || '';
+    }
+    updated(changes) {
+        if (changes.has('role')) {
+            this.name = this.role?.name || '';
+            this.description = this.role?.description || '';
+            this.keyword = '';
+            this.message = '';
+            this.fetch();
+        }
+    }
+    /**
+     * 한 번의 질의로 **전체 목록과 이 역할이 가진 것**을 함께 읽는다(`rolePrivileges(roleId:)`).
+     *
+     * 새로 만드는 자리는 역할이 없으니 `privileges` 로 목록만 읽는다 — 그때 켜진 것은 없다.
+     */
+    async fetch() {
+        this.loading = true;
+        this.failed = false;
+        this.holders = [];
+        const response = this.creating
+            ? await client.query({
+                query: gql `
+            query {
+              privileges {
+                items {
+                  id
+                  name
+                  category
+                  description
+                  deprecated
+                }
+              }
+            }
+          `,
+                context: gqlContext()
+            })
+            : await client.query({
+                query: gql `
+            query ($roleId: String!, $filters: [Filter!]) {
+              rolePrivileges(roleId: $roleId) {
+                id
+                name
+                category
+                description
+                assigned
+                deprecated
+              }
+              roles(filters: $filters) {
+                items {
+                  users {
+                    id
+                    name
+                    email
+                  }
+                }
+              }
+            }
+          `,
+                variables: {
+                    roleId: this.role.id,
+                    filters: [{ name: 'id', operator: 'eq', value: this.role.id }]
+                },
+                context: gqlContext()
+            });
+        if (response.errors?.length) {
+            /* 실패를 「권한이 하나도 없다」로 그리지 않는다 — 저장하면 실제로 그렇게 된다. */
+            this.failed = true;
+            this.loading = false;
+            return;
+        }
+        const privileges = this.creating
+            ? response.data?.privileges?.items || []
+            : response.data?.rolePrivileges || [];
+        this.build(privileges);
+        this.holders = response.data?.roles?.items?.[0]?.users || [];
+        this.loading = false;
+    }
+    /** 평평한 목록을 격자로 세운다. 열은 데이터에 있는 축만. */
+    build(privileges) {
+        const byCategory = new Map();
+        const axes = new Set();
+        const assigned = new Set();
+        for (const privilege of privileges) {
+            const { id, name, category, description, deprecated } = privilege;
+            if (!id || !name || !category) {
+                continue;
+            }
+            axes.add(name);
+            if (privilege.assigned) {
+                assigned.add(id);
+            }
+            const row = byCategory.get(category) || { category, cells: {} };
+            row.cells[name] = { id, assigned: Boolean(privilege.assigned), deprecated: Boolean(deprecated), description };
+            byCategory.set(category, row);
+        }
+        const known = KNOWN_AXES.filter(axis => axes.has(axis));
+        const rest = [...axes].filter(axis => !KNOWN_AXES.includes(axis)).sort();
+        this.axes = [...known, ...rest];
+        this.rows = [...byCategory.values()].sort((a, b) => a.category.localeCompare(b.category));
+        this.assigned = assigned;
+    }
+    onToggle(id, checked) {
+        const next = new Set(this.assigned);
+        checked ? next.add(id) : next.delete(id);
+        this.assigned = next;
+    }
+    /**
+     * 저장.
+     *
+     * **범위는 `rows` 다.** 검색으로 걸러 놓고 저장해도 안 보이던 칸은 켜진 채로 간다 — 옛 화면이
+     * DOM 을 훑어 조용히 떼던 자리다.
+     */
+    async onSave() {
+        if (!this.savable) {
+            return;
+        }
+        this.working = true;
+        this.message = '';
+        try {
+            const privileges = [...this.assigned].map(id => ({ id }));
+            const response = this.creating
+                ? await client.mutate({
+                    mutation: gql `
+              mutation ($role: NewRole!) {
+                createRole(role: $role) {
+                  id
+                }
+              }
+            `,
+                    variables: {
+                        role: { name: this.name.trim(), description: this.description.trim(), privileges }
+                    },
+                    context: gqlContext()
+                })
+                : await client.mutate({
+                    mutation: gql `
+              mutation ($id: String!, $patch: RolePatch!) {
+                updateRole(id: $id, patch: $patch) {
+                  id
+                }
+              }
+            `,
+                    variables: {
+                        id: this.role.id,
+                        patch: { name: this.name.trim(), description: this.description.trim(), privileges }
+                    },
+                    context: gqlContext()
+                });
+            if (response.errors?.length) {
+                this.message = response.errors[0]?.message || '';
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('role-updated', { bubbles: true, composed: true }));
+        }
+        finally {
+            this.working = false;
+        }
+    }
+    /**
+     * 역할을 지운다.
+     *
+     * **누가 잃는지 먼저 말한다.** 옛 화면은 「역할을 삭제하시겠습니까」만 물었다 — 그 역할을 가진
+     * 사람이 몇인지는 같은 화면에 있었는데도 확인 문구에 없었다.
+     */
+    async onDelete() {
+        if (!this.deletable) {
+            return;
+        }
+        const confirmed = await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.delete role'),
+            text: i18next.t('text.are_you_sure_to_delete_x', { x: i18next.t('label.role') }),
+            confirmButton: { text: i18next.t('button.delete') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (!confirmed) {
+            return;
+        }
+        this.working = true;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($id: String!) {
+            deleteRole(id: $id)
+          }
+        `,
+                variables: { id: this.role.id },
+                context: gqlContext()
+            });
+            if (response.errors?.length) {
+                this.message = response.errors[0]?.message || '';
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('role-updated', { bubbles: true, composed: true }));
+        }
+        finally {
+            this.working = false;
+        }
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], RoleDetail.prototype, "role", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleDetail.prototype, "name", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleDetail.prototype, "description", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], RoleDetail.prototype, "rows", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], RoleDetail.prototype, "axes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Set)
+], RoleDetail.prototype, "assigned", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], RoleDetail.prototype, "holders", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleDetail.prototype, "mySubdomain", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RoleDetail.prototype, "mayDelete", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleDetail.prototype, "keyword", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RoleDetail.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RoleDetail.prototype, "failed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RoleDetail.prototype, "working", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleDetail.prototype, "message", void 0);
+RoleDetail = __decorate([
+    customElement('role-detail')
+], RoleDetail);
+export { RoleDetail };
+//# sourceMappingURL=role-detail.js.map