@things-factory/auth-ui 9.0.0-beta.8 → 9.0.0

package/dist-client/components/create-domain-popup.js

@@ -8,6 +8,48 @@ import { i18next, localize } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { CommonHeaderStyles } from '@operato/styles';
 let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitElement) {
+    static { this.styles = [
+        CommonHeaderStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-background);
+        overflow: auto;
+      }
+
+      form {
+        flex: 1;
+        padding: var(--spacing-large);
+      }
+
+      input.checkValidName {
+        background-color: #fce6e6;
+      }
+
+      label {
+        display: flex;
+        flex-direction: column;
+
+        font: var(--label-font);
+        color: var(--label-color, var(--md-sys-color-on-surface));
+        text-transform: var(--label-text-transform);
+      }
+
+      input {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        background-color: var(--md-sys-color-surface);
+        font: var(--input-font);
+      }
+
+      [field] {
+        grid-column: span 2;
+      }
+    `
+    ]; }
     render() {
         return html `
       <form>
@@ -81,48 +123,6 @@ let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitEle
         document.dispatchEvent(new CustomEvent('notify', { detail: { message } }));
     }
 };
-CreateDomainPopup.styles = [
-    CommonHeaderStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-background);
-        overflow: auto;
-      }
-
-      form {
-        flex: 1;
-        padding: var(--spacing-large);
-      }
-
-      input.checkValidName {
-        background-color: #fce6e6;
-      }
-
-      label {
-        display: flex;
-        flex-direction: column;
-
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        background-color: var(--md-sys-color-surface);
-        font: var(--input-font);
-      }
-
-      [field] {
-        grid-column: span 2;
-      }
-    `
-];
 __decorate([
     query('input[name="name"]'),
     __metadata("design:type", HTMLInputElement)

package/dist-client/components/create-domain-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { CommonHeaderStyles } from '@operato/styles'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n        overflow: auto;\n      }\n\n      form {\n        flex: 1;\n        padding: var(--spacing-large);\n      }\n\n      input.checkValidName {\n        background-color: #fce6e6;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      input {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: var(--md-sys-color-surface);\n        font: var(--input-font);\n      }\n\n      [field] {\n        grid-column: span 2;\n      }\n    `\n  ]\n\n  @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <form>\n        <div field grid-span>\n          <label\n            >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n              type=\"text\"\n              name=\"name\"\n              @input=${this.checkValidation}\n              autofocus\n          /></label>\n        </div>\n\n        <div field grid-span>\n          <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n        </div>\n      </form>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${e => this.onCreateDomain()} done><md-icon>add</md-icon>${i18next.t('button.create')}</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.nameInput.focus() // autofocus\n  }\n\n  get inputData() {\n    return this.renderRoot.querySelectorAll('input')\n  }\n\n  checkValidation(e) {\n    const currentInput = e.currentTarget\n    const regExp = /^[a-zA-Z ]+$/\n\n    if (!regExp.test(currentInput.value)) {\n      currentInput.classList.add('checkValidName')\n    } else {\n      currentInput.classList.remove('checkValidName')\n    }\n  }\n\n  async onCreateDomain() {\n    const domainInput: { [prop: string]: string } = {}\n    this.inputData.forEach(data => (domainInput[data.name] = data.value))\n    const regExp = /^[a-zA-z0-9- ]+$/\n\n    if (!regExp.test(domainInput.name)) {\n      return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation domainRegister($domainInput: DomainGeneratorInput!) {\n          domainRegister(domainInput: $domainInput) {\n            id\n            name\n          }\n        }\n      `,\n      variables: { domainInput }\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        type: 'success',\n        title: i18next.t('text.completed'),\n        text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      history.back()\n\n      this.dispatchEvent(new CustomEvent('fetch-data'))\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}
+{"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { CommonHeaderStyles } from '@operato/styles'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-background);\n        overflow: auto;\n      }\n\n      form {\n        flex: 1;\n        padding: var(--spacing-large);\n      }\n\n      input.checkValidName {\n        background-color: #fce6e6;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      input {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: var(--md-sys-color-surface);\n        font: var(--input-font);\n      }\n\n      [field] {\n        grid-column: span 2;\n      }\n    `\n  ]\n\n  @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <form>\n        <div field grid-span>\n          <label\n            >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n              type=\"text\"\n              name=\"name\"\n              @input=${this.checkValidation}\n              autofocus\n          /></label>\n        </div>\n\n        <div field grid-span>\n          <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n        </div>\n      </form>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${e => this.onCreateDomain()} done><md-icon>add</md-icon>${i18next.t('button.create')}</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.nameInput.focus() // autofocus\n  }\n\n  get inputData() {\n    return this.renderRoot.querySelectorAll('input')\n  }\n\n  checkValidation(e) {\n    const currentInput = e.currentTarget\n    const regExp = /^[a-zA-Z ]+$/\n\n    if (!regExp.test(currentInput.value)) {\n      currentInput.classList.add('checkValidName')\n    } else {\n      currentInput.classList.remove('checkValidName')\n    }\n  }\n\n  async onCreateDomain() {\n    const domainInput: { [prop: string]: string } = {}\n    this.inputData.forEach(data => (domainInput[data.name] = data.value))\n    const regExp = /^[a-zA-z0-9- ]+$/\n\n    if (!regExp.test(domainInput.name)) {\n      return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation domainRegister($domainInput: DomainGeneratorInput!) {\n          domainRegister(domainInput: $domainInput) {\n            id\n            name\n          }\n        }\n      `,\n      variables: { domainInput }\n    })\n\n    if (!response.errors) {\n      await OxPrompt.open({\n        type: 'success',\n        title: i18next.t('text.completed'),\n        text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      history.back()\n\n      this.dispatchEvent(new CustomEvent('fetch-data'))\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

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

@@ -7,6 +7,41 @@ import { client, gqlContext } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
+    static { this.styles = css `
+    :host {
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+
+      display: grid;
+      grid-template-columns: 1fr 2fr auto;
+      gap: 5px 15px;
+      clear: both;
+      max-width: var(--input-container-max-width);
+
+      align-items: center;
+    }
+
+    md-outlined-button {
+      margin: var(--input-margin);
+      text-transform: capitalize;
+    }
+
+    @media screen and (max-width: 480px) {
+      :host {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      md-outlined-button {
+        grid-column: span 2;
+
+        margin: var(--input-margin);
+      }
+    }
+  `; }
     render() {
         return html `
       <md-filled-text-field
@@ -68,41 +103,6 @@ let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
         document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }));
     }
 };
-CreateRole.styles = css `
-    :host {
-      --md-text-field-fill-color: var(--md-sys-color-on-primary);
-      background-color: var(--md-sys-color-surface);
-      margin: var(--spacing-large) 0;
-      padding: var(--spacing-large);
-      border-radius: var(--border-radius);
-      box-shadow: var(--box-shadow);
-
-      display: grid;
-      grid-template-columns: 1fr 2fr auto;
-      gap: 5px 15px;
-      clear: both;
-      max-width: var(--input-container-max-width);
-
-      align-items: center;
-    }
-
-    md-outlined-button {
-      margin: var(--input-margin);
-      text-transform: capitalize;
-    }
-
-    @media screen and (max-width: 480px) {
-      :host {
-        grid-template-columns: 1fr 1fr;
-      }
-
-      md-outlined-button {
-        grid-column: span 2;
-
-        margin: var(--input-margin);
-      }
-    }
-  `;
 __decorate([
     query('[name=name]'),
     __metadata("design:type", HTMLInputElement)

package/dist-client/components/create-role.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-role.js","sourceRoot":"","sources":["../../client/components/create-role.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('create-role')\nclass CreateRole extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      --md-text-field-fill-color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-surface);\n      margin: var(--spacing-large) 0;\n      padding: var(--spacing-large);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n\n      display: grid;\n      grid-template-columns: 1fr 2fr auto;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n\n      align-items: center;\n    }\n\n    md-outlined-button {\n      margin: var(--input-margin);\n      text-transform: capitalize;\n    }\n\n    @media screen and (max-width: 480px) {\n      :host {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      md-outlined-button {\n        grid-column: span 2;\n\n        margin: var(--input-margin);\n      }\n    }\n  `\n\n  @query('[name=name]') nameInput!: HTMLInputElement\n  @query('[name=description]') descriptionInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-filled-text-field\n        type=\"text\"\n        name=\"name\"\n        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}\n      ></md-filled-text-field>\n      <md-filled-text-field\n        type=\"text\"\n        name=\"description\"\n        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}\n      ></md-filled-text-field>\n\n      <md-outlined-button @click=${this.onCreateRole.bind(this)}\n        >${String(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateRole() {\n    let role: { name?: string; description?: string } = {}\n\n    const name = this.nameInput.value.trim()\n    const description = this.descriptionInput.value\n\n    if (!name) {\n      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n    }\n\n    role.name = name\n    role.description = description\n\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation createRole($role: NewRole!) {\n            createRole(role: $role) {\n              name\n            }\n          }\n        `,\n        variables: { role },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.data_uploaded_successfully'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        this.nameInput.value = ''\n        this.descriptionInput.value = ''\n      }\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}
+{"version":3,"file":"create-role.js","sourceRoot":"","sources":["../../client/components/create-role.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('create-role')\nclass CreateRole extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      --md-text-field-fill-color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-surface);\n      margin: var(--spacing-large) 0;\n      padding: var(--spacing-large);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n\n      display: grid;\n      grid-template-columns: 1fr 2fr auto;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n\n      align-items: center;\n    }\n\n    md-outlined-button {\n      margin: var(--input-margin);\n      text-transform: capitalize;\n    }\n\n    @media screen and (max-width: 480px) {\n      :host {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      md-outlined-button {\n        grid-column: span 2;\n\n        margin: var(--input-margin);\n      }\n    }\n  `\n\n  @query('[name=name]') nameInput!: HTMLInputElement\n  @query('[name=description]') descriptionInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-filled-text-field\n        type=\"text\"\n        name=\"name\"\n        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}\n      ></md-filled-text-field>\n      <md-filled-text-field\n        type=\"text\"\n        name=\"description\"\n        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}\n      ></md-filled-text-field>\n\n      <md-outlined-button @click=${this.onCreateRole.bind(this)}\n        >${String(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateRole() {\n    let role: { name?: string; description?: string } = {}\n\n    const name = this.nameInput.value.trim()\n    const description = this.descriptionInput.value\n\n    if (!name) {\n      return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n    }\n\n    role.name = name\n    role.description = description\n\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation createRole($role: NewRole!) {\n            createRole(role: $role) {\n              name\n            }\n          }\n        `,\n        variables: { role },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.data_uploaded_successfully'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        this.nameInput.value = ''\n        this.descriptionInput.value = ''\n      }\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}

package/dist-client/components/create-user.js

@@ -8,6 +8,40 @@ function capitalize(str) {
     return str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
 }
 let CreateUser = class CreateUser extends LitElement {
+    static { this.styles = css `
+    :host {
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-surface);
+      margin: var(--spacing-large) 0;
+      padding: var(--spacing-large);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+
+      display: grid;
+      grid-template-columns: 1fr 2fr 2fr auto;
+      gap: 5px 15px;
+      clear: both;
+      max-width: var(--input-container-max-width);
+
+      align-items: center;
+    }
+
+    md-outlined-button {
+      margin: var(--input-margin);
+    }
+
+    @media screen and (max-width: 480px) {
+      :host {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      md-outlined-button {
+        grid-column: span 2;
+
+        margin: var(--input-margin);
+      }
+    }
+  `; }
     render() {
         return html `
       <md-filled-text-field
@@ -65,40 +99,6 @@ let CreateUser = class CreateUser extends LitElement {
         }
     }
 };
-CreateUser.styles = css `
-    :host {
-      --md-text-field-fill-color: var(--md-sys-color-on-primary);
-      background-color: var(--md-sys-color-surface);
-      margin: var(--spacing-large) 0;
-      padding: var(--spacing-large);
-      border-radius: var(--border-radius);
-      box-shadow: var(--box-shadow);
-
-      display: grid;
-      grid-template-columns: 1fr 2fr 2fr auto;
-      gap: 5px 15px;
-      clear: both;
-      max-width: var(--input-container-max-width);
-
-      align-items: center;
-    }
-
-    md-outlined-button {
-      margin: var(--input-margin);
-    }
-
-    @media screen and (max-width: 480px) {
-      :host {
-        grid-template-columns: 1fr 1fr;
-      }
-
-      md-outlined-button {
-        grid-column: span 2;
-
-        margin: var(--input-margin);
-      }
-    }
-  `;
 __decorate([
     query('[name=name]'),
     __metadata("design:type", HTMLInputElement)

package/dist-client/components/create-user.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-user.js","sourceRoot":"","sources":["../../client/components/create-user.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/outlined-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nfunction capitalize(str) {\n  return str ? str.charAt(0).toUpperCase() + str.slice(1) : ''\n}\n\n@customElement('create-user')\nclass CreateUser extends LitElement {\n  static styles = css`\n    :host {\n      --md-text-field-fill-color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-surface);\n      margin: var(--spacing-large) 0;\n      padding: var(--spacing-large);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n\n      display: grid;\n      grid-template-columns: 1fr 2fr 2fr auto;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n\n      align-items: center;\n    }\n\n    md-outlined-button {\n      margin: var(--input-margin);\n    }\n\n    @media screen and (max-width: 480px) {\n      :host {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      md-outlined-button {\n        grid-column: span 2;\n\n        margin: var(--input-margin);\n      }\n    }\n  `\n\n  @query('[name=name]') nameInput!: HTMLInputElement\n  @query('[name=username]') usernameInput!: HTMLInputElement\n  @query('[name=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-filled-text-field\n        type=\"text\"\n        name=\"username\"\n        label=${capitalize(i18next.t('label.user-id'))}\n        pattern=\"^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$\"\n        ><md-icon slot=\"leading-icon\">badge</md-icon></md-filled-text-field\n      >\n\n      <md-filled-text-field\n        type=\"text\"\n        name=\"name\"\n        label=${capitalize(i18next.t('label.x name', { x: i18next.t('label.user') }))}\n        ><md-icon slot=\"leading-icon\">id_card</md-icon></md-filled-text-field\n      >\n\n      <md-filled-text-field type=\"email\" name=\"email\" label=${capitalize(i18next.t('field.email'))}\n        ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n      >\n\n      <md-outlined-button @click=${this.onCreateUser.bind(this)}\n        >${capitalize(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateUser() {\n    try {\n      if (!this.usernameInput.value) {\n        throw new Error(i18next.t('error.value is empty', { value: 'name' }))\n      }\n\n      if (!this.emailInput.checkValidity()) {\n        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))\n      }\n\n      if (!this.nameInput.value) {\n        throw new Error(i18next.t('error.value is empty', { value: 'name' }))\n      }\n\n      const user = {\n        username: this.usernameInput.value.trim(),\n        name: this.nameInput.value.trim(),\n        email: this.emailInput.value.trim()\n      }\n\n      await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))\n\n      this.usernameInput.value = ''\n      this.nameInput.value = ''\n      this.emailInput.value = ''\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"create-user.js","sourceRoot":"","sources":["../../client/components/create-user.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/outlined-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nfunction capitalize(str) {\n  return str ? str.charAt(0).toUpperCase() + str.slice(1) : ''\n}\n\n@customElement('create-user')\nclass CreateUser extends LitElement {\n  static styles = css`\n    :host {\n      --md-text-field-fill-color: var(--md-sys-color-on-primary);\n      background-color: var(--md-sys-color-surface);\n      margin: var(--spacing-large) 0;\n      padding: var(--spacing-large);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n\n      display: grid;\n      grid-template-columns: 1fr 2fr 2fr auto;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n\n      align-items: center;\n    }\n\n    md-outlined-button {\n      margin: var(--input-margin);\n    }\n\n    @media screen and (max-width: 480px) {\n      :host {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      md-outlined-button {\n        grid-column: span 2;\n\n        margin: var(--input-margin);\n      }\n    }\n  `\n\n  @query('[name=name]') nameInput!: HTMLInputElement\n  @query('[name=username]') usernameInput!: HTMLInputElement\n  @query('[name=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-filled-text-field\n        type=\"text\"\n        name=\"username\"\n        label=${capitalize(i18next.t('label.user-id'))}\n        pattern=\"^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$\"\n        ><md-icon slot=\"leading-icon\">badge</md-icon></md-filled-text-field\n      >\n\n      <md-filled-text-field\n        type=\"text\"\n        name=\"name\"\n        label=${capitalize(i18next.t('label.x name', { x: i18next.t('label.user') }))}\n        ><md-icon slot=\"leading-icon\">id_card</md-icon></md-filled-text-field\n      >\n\n      <md-filled-text-field type=\"email\" name=\"email\" label=${capitalize(i18next.t('field.email'))}\n        ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n      >\n\n      <md-outlined-button @click=${this.onCreateUser.bind(this)}\n        >${capitalize(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateUser() {\n    try {\n      if (!this.usernameInput.value) {\n        throw new Error(i18next.t('error.value is empty', { value: 'name' }))\n      }\n\n      if (!this.emailInput.checkValidity()) {\n        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))\n      }\n\n      if (!this.nameInput.value) {\n        throw new Error(i18next.t('error.value is empty', { value: 'name' }))\n      }\n\n      const user = {\n        username: this.usernameInput.value.trim(),\n        name: this.nameInput.value.trim(),\n        email: this.emailInput.value.trim()\n      }\n\n      await this.dispatchEvent(new CustomEvent('create-user', { detail: user }))\n\n      this.usernameInput.value = ''\n      this.nameInput.value = ''\n      this.emailInput.value = ''\n    } catch (e: any) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'message' in e ? e.message : e\n          }\n        })\n      )\n    }\n  }\n}\n"]}

package/dist-client/components/credential-manager.js

@@ -6,6 +6,14 @@ let CredentialManager = class CredentialManager extends LitElement {
         super(...arguments);
         this.credentials = [];
     }
+    static { this.styles = css `
+    div {
+      margin: 20px;
+    }
+    button {
+      margin: 5px;
+    }
+  `; }
     connectedCallback() {
         super.connectedCallback();
         this.fetchCredentials();
@@ -45,14 +53,6 @@ let CredentialManager = class CredentialManager extends LitElement {
     `;
     }
 };
-CredentialManager.styles = css `
-    div {
-      margin: 20px;
-    }
-    button {
-      margin: 5px;
-    }
-  `;
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)

package/dist-client/components/credential-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"credential-manager.js","sourceRoot":"","sources":["../../client/components/credential-manager.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACsB,gBAAW,GAEhC,EAAE,CAAA;IAqDV,CAAC;IA1CC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,mBAAmB,EAAE;YAChD,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QACF,IAAI,CAAC,WAAW,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;IAC1C,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,YAAoB;QACzC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,gBAAgB,YAAY,EAAE,EAAE;YAC3D,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QACF,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,EAAE,CAAA;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,WAAW,CAAC,GAAG,CACpB,UAAU,CAAC,EAAE,CAAC,IAAI,CAAA;;kBAEZ,UAAU,CAAC,YAAY;iCACR,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,YAAY,CAAC;;aAExE,CACF;;;KAGN,CAAA;IACH,CAAC;;AAlDM,wBAAM,GAAG,GAAG,CAAA;;;;;;;GAOlB,AAPY,CAOZ;AAX0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;sDAElB;AAHG,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAwD7B","sourcesContent":["import gql from 'graphql-tag'\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\n@customElement('credential-manager')\nexport class CredentialManager extends LitElement {\n  @property({ type: Array }) credentials: {\n    credentialId: string\n  }[] = []\n\n  static styles = css`\n    div {\n      margin: 20px;\n    }\n    button {\n      margin: 5px;\n    }\n  `\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.fetchCredentials()\n  }\n\n  async fetchCredentials() {\n    const response = await fetch('/auth/credentials', {\n      method: 'GET',\n      credentials: 'include'\n    })\n    this.credentials = await response.json()\n  }\n\n  async deleteCredential(credentialId: string) {\n    const response = await fetch(`/credentials/${credentialId}`, {\n      method: 'DELETE',\n      credentials: 'include'\n    })\n    if (response.ok) {\n      this.fetchCredentials()\n    } else {\n      console.error('Failed to delete credential')\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        <h2>Manage Your WebAuthn Credentials</h2>\n        <ul>\n          ${this.credentials.map(\n            credential => html`\n              <li>\n                ${credential.credentialId}\n                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>\n              </li>\n            `\n          )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"credential-manager.js","sourceRoot":"","sources":["../../client/components/credential-manager.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACsB,gBAAW,GAEhC,EAAE,CAAA;IAqDV,CAAC;aAnDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;GAOlB,AAPY,CAOZ;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,mBAAmB,EAAE;YAChD,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QACF,IAAI,CAAC,WAAW,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;IAC1C,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,YAAoB;QACzC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,gBAAgB,YAAY,EAAE,EAAE;YAC3D,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QACF,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,EAAE,CAAA;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,WAAW,CAAC,GAAG,CACpB,UAAU,CAAC,EAAE,CAAC,IAAI,CAAA;;kBAEZ,UAAU,CAAC,YAAY;iCACR,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,YAAY,CAAC;;aAExE,CACF;;;KAGN,CAAA;IACH,CAAC;;AAtD0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;sDAElB;AAHG,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAwD7B","sourcesContent":["import gql from 'graphql-tag'\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\n@customElement('credential-manager')\nexport class CredentialManager extends LitElement {\n  @property({ type: Array }) credentials: {\n    credentialId: string\n  }[] = []\n\n  static styles = css`\n    div {\n      margin: 20px;\n    }\n    button {\n      margin: 5px;\n    }\n  `\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.fetchCredentials()\n  }\n\n  async fetchCredentials() {\n    const response = await fetch('/auth/credentials', {\n      method: 'GET',\n      credentials: 'include'\n    })\n    this.credentials = await response.json()\n  }\n\n  async deleteCredential(credentialId: string) {\n    const response = await fetch(`/credentials/${credentialId}`, {\n      method: 'DELETE',\n      credentials: 'include'\n    })\n    if (response.ok) {\n      this.fetchCredentials()\n    } else {\n      console.error('Failed to delete credential')\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        <h2>Manage Your WebAuthn Credentials</h2>\n        <ul>\n          ${this.credentials.map(\n            credential => html`\n              <li>\n                ${credential.credentialId}\n                <button @click=${() => this.deleteCredential(credential.credentialId)}>Delete</button>\n              </li>\n            `\n          )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/components/delete-user-popup.js

@@ -6,48 +6,8 @@ import { i18next, localize } from '@operato/i18n';
 import { notify } from '@operato/layout';
 import { auth } from '@things-factory/auth-base/dist-client/auth.js';
 let DeleteUserPopup = class DeleteUserPopup extends localize(i18next)(LitElement) {
-    render() {
-        return html `
-      <h1><ox-i18n msgid="label.delete account"></ox-i18n></h1>
-      <span><ox-i18n msgid="text.delete account warning message"></ox-i18n></span>
-      <form @submit=${e => this.submit(e)}>
-        <div class="field">
-          <label for="email"><ox-i18n msgid="label.email"></ox-i18n></label>
-          <input id="email" type="email" name="email" autocapitalize="off" required />
-          <label for="password"><ox-i18n msgid="label.password"></ox-i18n></label>
-          <input id="password" type="password" name="password" required />
-        </div>
-
-        <button class="ui button" type="submit"><ox-i18n msgid="label.delete account"></ox-i18n></button>
-      </form>
-    `;
-    }
-    async submit(e) {
-        e.preventDefault();
-        const form = e.target;
-        var params = {};
-        new FormData(form).forEach((value, key) => {
-            params[key] = value;
-        });
-        try {
-            const message = await auth.deleteUser(params);
-            notify({
-                level: 'info',
-                message
-            });
-            auth.signout();
-        }
-        catch (e) {
-            form.reset();
-            notify({
-                level: 'error',
-                message: 'message' in e ? e.message : e
-            });
-        }
-    }
-};
-DeleteUserPopup.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: flex;
         flex-direction: column;
@@ -105,7 +65,47 @@ DeleteUserPopup.styles = [
         border: var(--button-active-border);
       }
     `
-];
+    ]; }
+    render() {
+        return html `
+      <h1><ox-i18n msgid="label.delete account"></ox-i18n></h1>
+      <span><ox-i18n msgid="text.delete account warning message"></ox-i18n></span>
+      <form @submit=${e => this.submit(e)}>
+        <div class="field">
+          <label for="email"><ox-i18n msgid="label.email"></ox-i18n></label>
+          <input id="email" type="email" name="email" autocapitalize="off" required />
+          <label for="password"><ox-i18n msgid="label.password"></ox-i18n></label>
+          <input id="password" type="password" name="password" required />
+        </div>
+
+        <button class="ui button" type="submit"><ox-i18n msgid="label.delete account"></ox-i18n></button>
+      </form>
+    `;
+    }
+    async submit(e) {
+        e.preventDefault();
+        const form = e.target;
+        var params = {};
+        new FormData(form).forEach((value, key) => {
+            params[key] = value;
+        });
+        try {
+            const message = await auth.deleteUser(params);
+            notify({
+                level: 'info',
+                message
+            });
+            auth.signout();
+        }
+        catch (e) {
+            form.reset();
+            notify({
+                level: 'error',
+                message: 'message' in e ? e.message : e
+            });
+        }
+    }
+};
 DeleteUserPopup = __decorate([
     customElement('delete-user-popup')
 ], DeleteUserPopup);

package/dist-client/components/delete-user-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"delete-user-popup.js","sourceRoot":"","sources":["../../client/components/delete-user-popup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AAG7D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA8DhE,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;;;;;;;;;;KAUpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;QAExC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;YAC7C,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;YAEF,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,EAAE,CAAA;YAEZ,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;;AAxGM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDF;CACF,AA3DY,CA2DZ;AA5DU,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0G3B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('delete-user-popup')\nexport class DeleteUserPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        color: var(--popup-content-color);\n        background-color: var(--popup-content-background-color);\n        padding: var(--popup-content-padding);\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n      *:focus {\n        outline: none;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n      }\n\n      input {\n        border: var(--change-password-field-border);\n        border-radius: var(--change-password-field-border-radius);\n        padding: var(--change-password-field-padding);\n\n        font: var(--change-password-field-font);\n        width: var(--change-password-field-width);\n      }\n      input:focus {\n        border: 1px solid var(--focus-background-color);\n      }\n\n      div.field {\n        padding-bottom: 10px;\n      }\n\n      ::placeholder {\n        font-size: 0.8rem;\n        text-transform: capitalize;\n      }\n\n      button {\n        background-color: var(--status-danger-color, #d14946);\n        margin: 2px 2px 10px 2px;\n        height: var(--button-height, 28px);\n        color: var(--button-color, #fff);\n        font: var(--button-font);\n        border-radius: var(--button-radius, 5px);\n        border: var(--button-border, 1px solid transparent);\n        line-height: 1.5;\n      }\n      button:hover,\n      button:active {\n        background-color: var(--button-active-background-color, #22a6a7);\n        border: var(--button-active-border);\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <h1><ox-i18n msgid=\"label.delete account\"></ox-i18n></h1>\n      <span><ox-i18n msgid=\"text.delete account warning message\"></ox-i18n></span>\n      <form @submit=${e => this.submit(e)}>\n        <div class=\"field\">\n          <label for=\"email\"><ox-i18n msgid=\"label.email\"></ox-i18n></label>\n          <input id=\"email\" type=\"email\" name=\"email\" autocapitalize=\"off\" required />\n          <label for=\"password\"><ox-i18n msgid=\"label.password\"></ox-i18n></label>\n          <input id=\"password\" type=\"password\" name=\"password\" required />\n        </div>\n\n        <button class=\"ui button\" type=\"submit\"><ox-i18n msgid=\"label.delete account\"></ox-i18n></button>\n      </form>\n    `\n  }\n\n  async submit(e: Event) {\n    e.preventDefault()\n\n    const form = e.target as HTMLFormElement\n\n    var params = {}\n    new FormData(form).forEach((value, key) => {\n      params[key] = value\n    })\n\n    try {\n      const message = await auth.deleteUser(params)\n      notify({\n        level: 'info',\n        message\n      })\n\n      auth.signout()\n    } catch (e: any) {\n      form.reset()\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n}\n"]}
+{"version":3,"file":"delete-user-popup.js","sourceRoot":"","sources":["../../client/components/delete-user-popup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AAG7D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACzD,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDF;KACF,AA3DY,CA2DZ;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;;;;;;;;;;KAUpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;QAExC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;YAC7C,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;YAEF,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,EAAE,CAAA;YAEZ,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;;AAzGU,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0G3B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('delete-user-popup')\nexport class DeleteUserPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        color: var(--popup-content-color);\n        background-color: var(--popup-content-background-color);\n        padding: var(--popup-content-padding);\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n      *:focus {\n        outline: none;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n      }\n\n      input {\n        border: var(--change-password-field-border);\n        border-radius: var(--change-password-field-border-radius);\n        padding: var(--change-password-field-padding);\n\n        font: var(--change-password-field-font);\n        width: var(--change-password-field-width);\n      }\n      input:focus {\n        border: 1px solid var(--focus-background-color);\n      }\n\n      div.field {\n        padding-bottom: 10px;\n      }\n\n      ::placeholder {\n        font-size: 0.8rem;\n        text-transform: capitalize;\n      }\n\n      button {\n        background-color: var(--status-danger-color, #d14946);\n        margin: 2px 2px 10px 2px;\n        height: var(--button-height, 28px);\n        color: var(--button-color, #fff);\n        font: var(--button-font);\n        border-radius: var(--button-radius, 5px);\n        border: var(--button-border, 1px solid transparent);\n        line-height: 1.5;\n      }\n      button:hover,\n      button:active {\n        background-color: var(--button-active-background-color, #22a6a7);\n        border: var(--button-active-border);\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <h1><ox-i18n msgid=\"label.delete account\"></ox-i18n></h1>\n      <span><ox-i18n msgid=\"text.delete account warning message\"></ox-i18n></span>\n      <form @submit=${e => this.submit(e)}>\n        <div class=\"field\">\n          <label for=\"email\"><ox-i18n msgid=\"label.email\"></ox-i18n></label>\n          <input id=\"email\" type=\"email\" name=\"email\" autocapitalize=\"off\" required />\n          <label for=\"password\"><ox-i18n msgid=\"label.password\"></ox-i18n></label>\n          <input id=\"password\" type=\"password\" name=\"password\" required />\n        </div>\n\n        <button class=\"ui button\" type=\"submit\"><ox-i18n msgid=\"label.delete account\"></ox-i18n></button>\n      </form>\n    `\n  }\n\n  async submit(e: Event) {\n    e.preventDefault()\n\n    const form = e.target as HTMLFormElement\n\n    var params = {}\n    new FormData(form).forEach((value, key) => {\n      params[key] = value\n    })\n\n    try {\n      const message = await auth.deleteUser(params)\n      notify({\n        level: 'info',\n        message\n      })\n\n      auth.signout()\n    } catch (e: any) {\n      form.reset()\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n}\n"]}

package/dist-client/components/domain-switch.js

@@ -11,37 +11,9 @@ let DomainSwitch = class DomainSwitch extends connect(store)(LitElement) {
         this.domains = [];
         this.attrname = 'name';
     }
-    render() {
-        var _a;
-        const domains = this.domains || [];
-        const domain = this.domain || {};
-        const attrname = this.attrname || 'name';
-        return html `
-      <div>
-        ${this.icon ? html `<md-icon>${this.icon}</md-icon>` : nothing}
-        ${domains.length <= 1
-            ? html ` <span>${((_a = domains[0]) === null || _a === void 0 ? void 0 : _a[attrname]) || domain.name}</span> `
-            : html `
-              <select
-                .value=${domain.subdomain}
-                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
-              >
-                ${domains.map(d => html `
-                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>
-                  `)}
-              </select>
-            `}
-      </div>
-    `;
-    }
-    stateChanged(state) {
-        this.domains = state.app.domains;
-        this.domain = state.app.domain;
-    }
-};
-DomainSwitch.styles = [
-    ScrollbarStyles,
-    css `
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
       :host {
         display: flex;
         max-width: 100%;
@@ -117,7 +89,34 @@ DomainSwitch.styles = [
         padding: var(--spacing-small) var(--spacing-medium);
       }
     `
-];
+    ]; }
+    render() {
+        const domains = this.domains || [];
+        const domain = this.domain || {};
+        const attrname = this.attrname || 'name';
+        return html `
+      <div>
+        ${this.icon ? html `<md-icon>${this.icon}</md-icon>` : nothing}
+        ${domains.length <= 1
+            ? html ` <span>${domains[0]?.[attrname] || domain.name}</span> `
+            : html `
+              <select
+                .value=${domain.subdomain}
+                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
+              >
+                ${domains.map(d => html `
+                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>
+                  `)}
+              </select>
+            `}
+      </div>
+    `;
+    }
+    stateChanged(state) {
+        this.domains = state.app.domains;
+        this.domain = state.app.domain;
+    }
+};
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)

package/dist-client/components/domain-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/components/domain-switch.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAArD;;QAiFsB,YAAO,GAAU,EAAE,CAAA;QAED,aAAQ,GAAW,MAAM,CAAA;IAiCxE,CAAC;IA9BC,MAAM;;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAA;QAExC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,OAAO;UAC3D,OAAO,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA,UAAU,CAAA,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAG,QAAQ,CAAC,KAAI,MAAM,CAAC,IAAI,UAAU;YAC/D,CAAC,CAAC,IAAI,CAAA;;yBAES,MAAM,CAAC,SAAS;0BACf,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;kBAE3E,OAAO,CAAC,GAAG,CACX,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;qCACU,CAAC,CAAC,SAAS,cAAc,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC;mBACzF,CACF;;aAEJ;;KAER,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAA;IAChC,CAAC;;AAlHM,mBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EF;CACF,AA9EY,CA8EZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAoB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAY;AACM;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAA0B;AACzB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;0CAAc;AApF/C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoHxB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('domain-switch')\nexport class DomainSwitch extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        max-width: 100%;\n        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));\n        border-bottom: var(--border-dim-color);\n      }\n\n      :host * {\n        vertical-align: middle;\n      }\n\n      div {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        padding: var(--spacing-small);\n      }\n\n      md-icon {\n        background-color: var(--md-sys-color-primary, rgb(46 121 190));\n        margin-right: var(--spacing-small);\n        padding: 2px;\n        border-radius: 50%;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));\n      }\n      span,\n      select {\n        flex: 1;\n        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));\n        font: bold 14px/20px var(--theme-font);\n      }\n\n      select {\n        border: none;\n        background-color: transparent;\n      }\n\n      select:focus {\n        outline: 0;\n      }\n      :host([dark]) {\n        background-color: rgba(0, 0, 0, 0.2);\n        padding: 0 !important;\n        border-bottom: none;\n      }\n      :host([dark]) md-icon {\n        background-color: var(--secondary-text-color);\n        margin: 1px 4px 0px 0px;\n        padding: 1px 2px;\n        border-radius: 50%;\n        line-height: 19px;\n      }\n      :host([dark]) span,\n      :host([dark]) select {\n        color: var(--md-sys-color-on-primary);\n        font: bold 13px/13px var(--theme-font);\n      }\n      :host([dark]) option {\n        background-color: var(--primary-color, #585858);\n        color: var(--md-sys-color-on-primary, #fff);\n      }\n      :host([dark]) span {\n        line-height: 23px;\n      }\n\n      :host([rounded-corner]) {\n        height: 30px;\n        border-radius: 20px;\n        border: var(--border-dim-color);\n      }\n      :host([rounded-corner]) div {\n        padding: var(--spacing-small) var(--spacing-medium);\n      }\n    `\n  ]\n\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: Object }) domain: any\n  @property({ type: String, attribute: true }) attrname: string = 'name'\n  @property({ type: String, attribute: true }) icon?: string\n\n  render() {\n    const domains = this.domains || []\n    const domain = this.domain || {}\n    const attrname = this.attrname || 'name'\n\n    return html`\n      <div>\n        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}\n        ${domains.length <= 1\n          ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `\n          : html`\n              <select\n                .value=${domain.subdomain}\n                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}\n              >\n                ${domains.map(\n                  d => html`\n                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>\n                  `\n                )}\n              </select>\n            `}\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.domains = state.app.domains\n    this.domain = state.app.domain\n  }\n}\n"]}
+{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/components/domain-switch.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAArD;;QAiFsB,YAAO,GAAU,EAAE,CAAA;QAED,aAAQ,GAAW,MAAM,CAAA;IAiCxE,CAAC;aAnHQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EF;KACF,AA9EY,CA8EZ;IAOD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAA;QAExC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,OAAO;UAC3D,OAAO,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA,UAAU,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,IAAI,UAAU;YAC/D,CAAC,CAAC,IAAI,CAAA;;yBAES,MAAM,CAAC,SAAS;0BACf,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;kBAE3E,OAAO,CAAC,GAAG,CACX,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;qCACU,CAAC,CAAC,SAAS,cAAc,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC;mBACzF,CACF;;aAEJ;;KAER,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAA;IAChC,CAAC;;AAlC0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAoB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAY;AACM;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAA0B;AACzB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;0CAAc;AApF/C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoHxB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('domain-switch')\nexport class DomainSwitch extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        max-width: 100%;\n        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));\n        border-bottom: var(--border-dim-color);\n      }\n\n      :host * {\n        vertical-align: middle;\n      }\n\n      div {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        padding: var(--spacing-small);\n      }\n\n      md-icon {\n        background-color: var(--md-sys-color-primary, rgb(46 121 190));\n        margin-right: var(--spacing-small);\n        padding: 2px;\n        border-radius: 50%;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));\n      }\n      span,\n      select {\n        flex: 1;\n        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));\n        font: bold 14px/20px var(--theme-font);\n      }\n\n      select {\n        border: none;\n        background-color: transparent;\n      }\n\n      select:focus {\n        outline: 0;\n      }\n      :host([dark]) {\n        background-color: rgba(0, 0, 0, 0.2);\n        padding: 0 !important;\n        border-bottom: none;\n      }\n      :host([dark]) md-icon {\n        background-color: var(--secondary-text-color);\n        margin: 1px 4px 0px 0px;\n        padding: 1px 2px;\n        border-radius: 50%;\n        line-height: 19px;\n      }\n      :host([dark]) span,\n      :host([dark]) select {\n        color: var(--md-sys-color-on-primary);\n        font: bold 13px/13px var(--theme-font);\n      }\n      :host([dark]) option {\n        background-color: var(--primary-color, #585858);\n        color: var(--md-sys-color-on-primary, #fff);\n      }\n      :host([dark]) span {\n        line-height: 23px;\n      }\n\n      :host([rounded-corner]) {\n        height: 30px;\n        border-radius: 20px;\n        border: var(--border-dim-color);\n      }\n      :host([rounded-corner]) div {\n        padding: var(--spacing-small) var(--spacing-medium);\n      }\n    `\n  ]\n\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: Object }) domain: any\n  @property({ type: String, attribute: true }) attrname: string = 'name'\n  @property({ type: String, attribute: true }) icon?: string\n\n  render() {\n    const domains = this.domains || []\n    const domain = this.domain || {}\n    const attrname = this.attrname || 'name'\n\n    return html`\n      <div>\n        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}\n        ${domains.length <= 1\n          ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `\n          : html`\n              <select\n                .value=${domain.subdomain}\n                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}\n              >\n                ${domains.map(\n                  d => html`\n                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>\n                  `\n                )}\n              </select>\n            `}\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.domains = state.app.domains\n    this.domain = state.app.domain\n  }\n}\n"]}