@things-factory/auth-ui 7.0.1-beta.6 → 7.0.1-beta.7

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(--theme-white-color);\n      background-color: var(--md-sys-color-surface);\n      margin: var(--margin-wide) 0;\n      padding: var(--padding-wide);\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    }\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(--margin-wide) 0;\n      padding: var(--padding-wide);\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    }\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

@@ -50,7 +50,7 @@ let CreateUser = class CreateUser extends LitElement {
 };
 CreateUser.styles = css `
     :host {
-      --md-text-field-fill-color: var(--theme-white-color);
+      --md-text-field-fill-color: var(--md-sys-color-on-primary);
       background-color: var(--md-sys-color-surface);
       margin: var(--margin-wide) 0;
       padding: var(--padding-wide);

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":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAuCjC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;gBAIC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;;;;;;gBAMjE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;;mCAGb,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;WACpD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE;gBACpC,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAiC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;aAClF;YAED,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;gBACzB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;aACtE;YAED,MAAM,IAAI,GAAG;gBACX,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE;aACpC,CAAA;YAED,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAE1E,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;YACzB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAA;SAC3B;QAAC,OAAO,CAAM,EAAE;YACf,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE;oBACN,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;iBACxC;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC;;AAvFM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAA;AAED;IAAC,KAAK,CAAC,aAAa,CAAC;8BAAa,gBAAgB;6CAAA;AAClD;IAAC,KAAK,CAAC,cAAc,CAAC;8BAAc,gBAAgB;8CAAA;AArChD,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CAyFf","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('create-user')\nclass CreateUser extends LitElement {\n  static styles = css`\n    :host {\n      --md-text-field-fill-color: var(--theme-white-color);\n      background-color: var(--md-sys-color-surface);\n      margin: var(--margin-wide) 0;\n      padding: var(--padding-wide);\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    }\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=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-outlined-text-field\n        type=\"text\"\n        name=\"name\"\n        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}\n      ></md-outlined-text-field>\n\n      <md-outlined-text-field\n        type=\"email\"\n        name=\"email\"\n        label=${String(i18next.t('field.email'))}\n      ></md-outlined-text-field>\n\n      <md-outlined-button @click=${this.onCreateUser.bind(this)}\n        >${String(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateUser() {\n    try {\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        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.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":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAuCjC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;gBAIC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;;;;;;gBAMjE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;;mCAGb,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;WACpD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE;gBACpC,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAiC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;aAClF;YAED,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;gBACzB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;aACtE;YAED,MAAM,IAAI,GAAG;gBACX,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE;aACpC,CAAA;YAED,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAE1E,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;YACzB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAA;SAC3B;QAAC,OAAO,CAAM,EAAE;YACf,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE;oBACN,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;iBACxC;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC;;AAvFM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAA;AAED;IAAC,KAAK,CAAC,aAAa,CAAC;8BAAa,gBAAgB;6CAAA;AAClD;IAAC,KAAK,CAAC,cAAc,CAAC;8BAAc,gBAAgB;8CAAA;AArChD,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CAyFf","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\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(--margin-wide) 0;\n      padding: var(--padding-wide);\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    }\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=email]') emailInput!: HTMLInputElement\n\n  render() {\n    return html`\n      <md-outlined-text-field\n        type=\"text\"\n        name=\"name\"\n        label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}\n      ></md-outlined-text-field>\n\n      <md-outlined-text-field\n        type=\"email\"\n        name=\"email\"\n        label=${String(i18next.t('field.email'))}\n      ></md-outlined-text-field>\n\n      <md-outlined-button @click=${this.onCreateUser.bind(this)}\n        >${String(i18next.t('button.create'))}</md-outlined-button\n      >\n    `\n  }\n\n  async onCreateUser() {\n    try {\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        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.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/domain-switch.js

@@ -66,7 +66,7 @@ DomainSwitch.styles = [
         padding: 2px;
         border-radius: 50%;
         font-size: var(--fontsize-large);
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
       span,
       select {
@@ -97,12 +97,12 @@ DomainSwitch.styles = [
       }
       :host([dark]) span,
       :host([dark]) select {
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
         font: bold 13px/13px var(--theme-font);
       }
       :host([dark]) option {
         background-color: var(--primary-color, #585858);
-        color: var(--theme-white-color, #fff);
+        color: var(--md-sys-color-on-primary, #fff);
       }
       :host([dark]) span {
         line-height: 23px;

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,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAoB;AAC9C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAY;AACvC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAA0B;AACtE;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;0CAAc;AApF/C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoHxB;SApHY,YAAY","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: rgba(var(--primary-color-rgb), 0.1);\n        border-bottom: var(--border-dark-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(--padding-default);\n      }\n\n      md-icon {\n        background-color: rgba(var(--primary-color-rgb), 0.8);\n        margin-right: var(--margin-narrow);\n        padding: 2px;\n        border-radius: 50%;\n        font-size: var(--fontsize-large);\n        color: var(--theme-white-color);\n      }\n      span,\n      select {\n        flex: 1;\n        color: var(--md-sys-color-secondary);\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(--theme-white-color);\n        font: bold 13px/13px var(--theme-font);\n      }\n      :host([dark]) option {\n        background-color: var(--primary-color, #585858);\n        color: var(--theme-white-color, #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-dark-color);\n      }\n      :host([rounded-corner]) div {\n        padding: var(--padding-narrow) var(--padding-default);\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;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,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAoB;AAC9C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAY;AACvC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAA0B;AACtE;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;0CAAc;AApF/C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoHxB;SApHY,YAAY","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: rgba(var(--primary-color-rgb), 0.1);\n        border-bottom: var(--border-dark-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(--padding-default);\n      }\n\n      md-icon {\n        background-color: rgba(var(--primary-color-rgb), 0.8);\n        margin-right: var(--margin-narrow);\n        padding: 2px;\n        border-radius: 50%;\n        font-size: var(--fontsize-large);\n        color: var(--md-sys-color-on-primary);\n      }\n      span,\n      select {\n        flex: 1;\n        color: var(--md-sys-color-secondary);\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-dark-color);\n      }\n      :host([rounded-corner]) div {\n        padding: var(--padding-narrow) var(--padding-default);\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"]}

package/dist-client/components/partner-info-card.js

@@ -71,7 +71,7 @@ PartnerInfoCard.styles = [
         flex-direction: column;
 
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       @media screen and (max-width: 480px) {

package/dist-client/components/partner-info-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"partner-info-card.js","sourceRoot":"","sources":["../../client/components/partner-info-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGhC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IA2D7C,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA;;;;;iBAKE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;+DACuB,OAAO,CAAC,IAAI,IAAI,EAAE;;;;;;iBAMhE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;sEACuB,OAAO,CAAC,WAAW,IAAI,EAAE;;;;;KAK1F,CAAA;IACH,CAAC;;AAhFM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAa;AAzD7B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAkF3B;SAlFY,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('partner-info-card')\nexport class PartnerInfoCard extends LitElement {\n  static styles = [\n    css`\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: transparent;\n        font: var(--input-font);\n\n        flex: 1;\n      }\n      #vendors {\n        display: flex;\n        max-height: 45vh;\n        flex-direction: row;\n        background-color: var(--md-sys-color-surface-variant);\n        margin: 0;\n        padding: 0;\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n        overflow: hidden;\n      }\n      [field-2column] {\n        overflow: auto;\n        flex: 1;\n        background-color: var(--md-sys-color-surface-variant);\n        padding: var(--padding-default);\n        border-radius: var(--border-radius);\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 5px 15px;\n        clear: both;\n        max-width: var(--input-container-max-width);\n      }\n      [field] {\n        display: flex;\n        flex-direction: column;\n        padding-bottom: var(--padding-default);\n      }\n      label {\n        display: flex;\n        flex-direction: column;\n\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\n      }\n      @media screen and (max-width: 480px) {\n        [field] {\n          grid-column: span 2;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) partner: any\n\n  render() {\n    const partner = this.partner || {}\n\n    return html`\n      <div id=\"vendors\">\n        <div field-2column>\n          <div field>\n            <label\n              >${i18next.t('label.name')}\n              <input type=\"text\" name=\"name\" readonly .value=${partner.name || ''} />\n            </label>\n          </div>\n\n          <div field>\n            <label\n              >${i18next.t('label.description')}\n              <input type=\"text\" name=\"description\" readonly .value=${partner.description || ''} />\n            </label>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"partner-info-card.js","sourceRoot":"","sources":["../../client/components/partner-info-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGhC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IA2D7C,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA;;;;;iBAKE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;+DACuB,OAAO,CAAC,IAAI,IAAI,EAAE;;;;;;iBAMhE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;sEACuB,OAAO,CAAC,WAAW,IAAI,EAAE;;;;;KAK1F,CAAA;IACH,CAAC;;AAhFM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAa;AAzD7B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAkF3B;SAlFY,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('partner-info-card')\nexport class PartnerInfoCard extends LitElement {\n  static styles = [\n    css`\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: transparent;\n        font: var(--input-font);\n\n        flex: 1;\n      }\n      #vendors {\n        display: flex;\n        max-height: 45vh;\n        flex-direction: row;\n        background-color: var(--md-sys-color-surface-variant);\n        margin: 0;\n        padding: 0;\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n        overflow: hidden;\n      }\n      [field-2column] {\n        overflow: auto;\n        flex: 1;\n        background-color: var(--md-sys-color-surface-variant);\n        padding: var(--padding-default);\n        border-radius: var(--border-radius);\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 5px 15px;\n        clear: both;\n        max-width: var(--input-container-max-width);\n      }\n      [field] {\n        display: flex;\n        flex-direction: column;\n        padding-bottom: var(--padding-default);\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      @media screen and (max-width: 480px) {\n        [field] {\n          grid-column: span 2;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) partner: any\n\n  render() {\n    const partner = this.partner || {}\n\n    return html`\n      <div id=\"vendors\">\n        <div field-2column>\n          <div field>\n            <label\n              >${i18next.t('label.name')}\n              <input type=\"text\" name=\"name\" readonly .value=${partner.name || ''} />\n            </label>\n          </div>\n\n          <div field>\n            <label\n              >${i18next.t('label.description')}\n              <input type=\"text\" name=\"description\" readonly .value=${partner.description || ''} />\n            </label>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/components/role-edit-form.js

@@ -66,7 +66,7 @@ RoleEditForm.styles = css `
       display: flex;
       flex-direction: column;
       font: var(--label-font);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-on-primary);
       text-transform: var(--label-text-transform);
     }
     @media screen and (max-width: 480px) {

package/dist-client/components/role-edit-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"role-edit-form.js","sourceRoot":"","sources":["../../client/components/role-edit-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAsCtD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;wCAI/B,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;;;gDAOtC,IAAI,CAAC,WAAW,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;KAIhG,CAAA;IACH,CAAC;IAKD,OAAO;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAA;QAE/C,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAA;SAC7F;QAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;SACvB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;AAnFM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkClB,CAAA;AACD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAU;AAwBrC;IAAC,KAAK,CAAC,kBAAkB,CAAC;8BAAa,gBAAgB;+CAAA;AACvD;IAAC,KAAK,CAAC,yBAAyB,CAAC;8BAAoB,gBAAgB;sDAAA;AA7DjE,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAqFjB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('role-edit-form')\nclass RoleEditForm extends localize(i18next)(LitElement) {\n  static styles = css`\n    [field-2column] {\n      border-radius: var(--border-radius);\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n    }\n    [field] {\n      display: flex;\n      flex-direction: column;\n      padding-bottom: var(--padding-default);\n    }\n    input {\n      border: var(--border-dark-color);\n      border-radius: var(--border-radius);\n      margin: var(--input-margin);\n      padding: var(--input-padding);\n      min-width: 250px;\n      font: var(--input-font);\n    }\n    label {\n      display: flex;\n      flex-direction: column;\n      font: var(--label-font);\n      color: var(--theme-white-color);\n      text-transform: var(--label-text-transform);\n    }\n    @media screen and (max-width: 480px) {\n      [field] {\n        grid-column: span 2;\n      }\n    }\n  `\n  @property({ type: Object }) role: any\n\n  render() {\n    const role = this.role || { name: '', description: '' }\n\n    return html`\n      <form field-2column @input=\"${this.dispatchRoleChanged.bind(this)}\">\n        <div field>\n          <label\n            >role name\n            <input name=\"name\" value=\"${role.name}\" @click=\"${e => e.stopPropagation()}\" />\n          </label>\n        </div>\n\n        <div field>\n          <label\n            >role description\n            <input name=\"description\" .value=\"${role.description}\" @click=\"${e => e.stopPropagation()}\" />\n          </label>\n        </div>\n      </form>\n    `\n  }\n\n  @query('input[name=name]') nameInput!: HTMLInputElement\n  @query('input[name=description]') descriptionInput!: HTMLInputElement\n\n  getRole() {\n    const name = this.nameInput.value\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    return { name, description }\n  }\n\n  dispatchRoleChanged() {\n    this.dispatchEvent(\n      new CustomEvent('roleChanged', {\n        detail: this.getRole()\n      })\n    )\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}
+{"version":3,"file":"role-edit-form.js","sourceRoot":"","sources":["../../client/components/role-edit-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAsCtD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;wCAI/B,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;;;gDAOtC,IAAI,CAAC,WAAW,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;KAIhG,CAAA;IACH,CAAC;IAKD,OAAO;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAA;QAE/C,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAA;SAC7F;QAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;SACvB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;AAnFM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkClB,CAAA;AACD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAU;AAwBrC;IAAC,KAAK,CAAC,kBAAkB,CAAC;8BAAa,gBAAgB;+CAAA;AACvD;IAAC,KAAK,CAAC,yBAAyB,CAAC;8BAAoB,gBAAgB;sDAAA;AA7DjE,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAqFjB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('role-edit-form')\nclass RoleEditForm extends localize(i18next)(LitElement) {\n  static styles = css`\n    [field-2column] {\n      border-radius: var(--border-radius);\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 5px 15px;\n      clear: both;\n      max-width: var(--input-container-max-width);\n    }\n    [field] {\n      display: flex;\n      flex-direction: column;\n      padding-bottom: var(--padding-default);\n    }\n    input {\n      border: var(--border-dark-color);\n      border-radius: var(--border-radius);\n      margin: var(--input-margin);\n      padding: var(--input-padding);\n      min-width: 250px;\n      font: var(--input-font);\n    }\n    label {\n      display: flex;\n      flex-direction: column;\n      font: var(--label-font);\n      color: var(--md-sys-color-on-primary);\n      text-transform: var(--label-text-transform);\n    }\n    @media screen and (max-width: 480px) {\n      [field] {\n        grid-column: span 2;\n      }\n    }\n  `\n  @property({ type: Object }) role: any\n\n  render() {\n    const role = this.role || { name: '', description: '' }\n\n    return html`\n      <form field-2column @input=\"${this.dispatchRoleChanged.bind(this)}\">\n        <div field>\n          <label\n            >role name\n            <input name=\"name\" value=\"${role.name}\" @click=\"${e => e.stopPropagation()}\" />\n          </label>\n        </div>\n\n        <div field>\n          <label\n            >role description\n            <input name=\"description\" .value=\"${role.description}\" @click=\"${e => e.stopPropagation()}\" />\n          </label>\n        </div>\n      </form>\n    `\n  }\n\n  @query('input[name=name]') nameInput!: HTMLInputElement\n  @query('input[name=description]') descriptionInput!: HTMLInputElement\n\n  getRole() {\n    const name = this.nameInput.value\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    return { name, description }\n  }\n\n  dispatchRoleChanged() {\n    this.dispatchEvent(\n      new CustomEvent('roleChanged', {\n        detail: this.getRole()\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/role-selector.js

@@ -80,7 +80,7 @@ RoleSelector.styles = [
         padding-left: var(--padding-narrow);
         text-transform: capitalize;
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
       }
       li {
         padding: var(--padding-narrow);

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

@@ -1 +1 @@
-{"version":3,"file":"role-selector.js","sourceRoot":"","sources":["../../client/components/role-selector.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA6CuB,iBAAY,GAAW,OAAO,CAAA;QAC9B,SAAI,GAAQ,EAAE,CAAA;QACf,UAAK,GAAU,EAAE,CAAA;QACjB,cAAS,GAAU,EAAE,CAAA;IAiDlD,CAAC;IA/CC,MAAM;QACJ,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;QAEvE,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,KAAK,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;gBAEE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,CAAC,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO;6DAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;gBAKrE,IAAI,CAAC,KAAK,CAAC,GAAG,CACd,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;4BAGA,IAAI,CAAC,EAAE;;iCAEF,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC;mCAC/B,IAAI;;kCAEL,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI;;iBAEtC,CACF;;WAEJ;YACH,CAAC,CAAC,EAAE;KACP,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,CAAC;QACR,MAAM,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;QACvC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gCAAgC,CAAC,CAAC,CAAC,OAAO,CACpF,QAAQ,CAAC,EAAE,CAAC,CAAE,QAA6B,CAAC,OAAO,GAAG,OAAO,CAAC,CAC/D,CAAA;IACH,CAAC;IAED,aAAa;QACX,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gCAAgC,CAAC,CAAC;aAClF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,OAAO,CAAC;aACpD,GAAG,CAAC,KAAK,CAAC,EAAE;YACX,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,CAAA;YACvC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAA;QACrB,CAAC,CAAC,CAAA;IACN,CAAC;;AA/FM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAA+B;AAC1D;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2CAAkB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;+CAAsB;AAhDrC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAiGxB;SAjGY,YAAY","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('role-selector')\nexport class RoleSelector extends LitElement {\n  static styles = [\n    css`\n      [subtitle] {\n        margin: 0;\n        padding: var(--subtitle-padding);\n        font: var(--subtitle-font);\n        color: var(--subtitle-text-color);\n      }\n      div {\n        margin: 0 var(--margin-default) var(--margin-default) var(--margin-default);\n      }\n      ul {\n        flex: 1;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        column-gap: 20px;\n        overflow: auto;\n        margin: 0;\n        padding: var(--padding-default);\n        list-style: none;\n        border: 1px dashed rgba(0, 0, 0, 0.1);\n        border-width: 1px 0;\n      }\n      input[type='checkbox'] {\n        display: inline;\n      }\n      label {\n        padding-left: var(--padding-narrow);\n        text-transform: capitalize;\n        font: var(--label-font);\n        color: var(--label-color);\n      }\n      li {\n        padding: var(--padding-narrow);\n      }\n      #checkAll,\n      [for='checkAll'] {\n        margin-bottom: var(--margin-default);\n        padding-bottom: var(--padding-narrow);\n        font-weight: bold;\n      }\n    `\n  ]\n\n  @property({ type: String }) roleCategory: string = 'Roles'\n  @property({ type: Object }) user: any = {}\n  @property({ type: Array }) roles: any[] = []\n  @property({ type: Array }) userRoles: any[] = []\n\n  render() {\n    const userRoleIds = (this.userRoles || []).map(userRole => userRole.id)\n\n    return html`\n      ${this.roles.length\n        ? html`\n            <div>\n              ${this.roleCategory ? html`<h3 subtitle>${this.roleCategory}</h3>` : nothing}\n              <input id=\"checkAll\" type=\"checkbox\" @change=${this.checkAll.bind(this)} />\n              <label for=\"checkAll\">Check all</label>\n            </div>\n\n            <ul roles>\n              ${this.roles.map(\n                role => html`\n                  <li>\n                    <input\n                      id=\"${role.id}\"\n                      type=\"checkbox\"\n                      .checked=${userRoleIds.indexOf(role.id) >= 0}\n                      .data-role=${role}\n                    />\n                    <label for=\"${role.id}\">${role.name}</label>\n                  </li>\n                `\n              )}\n            </ul>\n          `\n        : ''}\n    `\n  }\n\n  checkAll(e) {\n    const checked = e.currentTarget.checked\n    Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]')).forEach(\n      checkbox => ((checkbox as HTMLInputElement).checked = checked)\n    )\n  }\n\n  selectedRoles() {\n    return Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]'))\n      .filter(input => (input as HTMLInputElement).checked)\n      .map(input => {\n        const { id, name } = input['data-role']\n        return { id, name }\n      })\n  }\n}\n"]}
+{"version":3,"file":"role-selector.js","sourceRoot":"","sources":["../../client/components/role-selector.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA6CuB,iBAAY,GAAW,OAAO,CAAA;QAC9B,SAAI,GAAQ,EAAE,CAAA;QACf,UAAK,GAAU,EAAE,CAAA;QACjB,cAAS,GAAU,EAAE,CAAA;IAiDlD,CAAC;IA/CC,MAAM;QACJ,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;QAEvE,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,KAAK,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;gBAEE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,CAAC,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO;6DAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;gBAKrE,IAAI,CAAC,KAAK,CAAC,GAAG,CACd,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;4BAGA,IAAI,CAAC,EAAE;;iCAEF,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC;mCAC/B,IAAI;;kCAEL,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI;;iBAEtC,CACF;;WAEJ;YACH,CAAC,CAAC,EAAE;KACP,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,CAAC;QACR,MAAM,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;QACvC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gCAAgC,CAAC,CAAC,CAAC,OAAO,CACpF,QAAQ,CAAC,EAAE,CAAC,CAAE,QAA6B,CAAC,OAAO,GAAG,OAAO,CAAC,CAC/D,CAAA;IACH,CAAC;IAED,aAAa;QACX,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,gCAAgC,CAAC,CAAC;aAClF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,OAAO,CAAC;aACpD,GAAG,CAAC,KAAK,CAAC,EAAE;YACX,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,CAAA;YACvC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAA;QACrB,CAAC,CAAC,CAAA;IACN,CAAC;;AA/FM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAA+B;AAC1D;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2CAAkB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;+CAAsB;AAhDrC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAiGxB;SAjGY,YAAY","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('role-selector')\nexport class RoleSelector extends LitElement {\n  static styles = [\n    css`\n      [subtitle] {\n        margin: 0;\n        padding: var(--subtitle-padding);\n        font: var(--subtitle-font);\n        color: var(--subtitle-text-color);\n      }\n      div {\n        margin: 0 var(--margin-default) var(--margin-default) var(--margin-default);\n      }\n      ul {\n        flex: 1;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        column-gap: 20px;\n        overflow: auto;\n        margin: 0;\n        padding: var(--padding-default);\n        list-style: none;\n        border: 1px dashed rgba(0, 0, 0, 0.1);\n        border-width: 1px 0;\n      }\n      input[type='checkbox'] {\n        display: inline;\n      }\n      label {\n        padding-left: var(--padding-narrow);\n        text-transform: capitalize;\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n      }\n      li {\n        padding: var(--padding-narrow);\n      }\n      #checkAll,\n      [for='checkAll'] {\n        margin-bottom: var(--margin-default);\n        padding-bottom: var(--padding-narrow);\n        font-weight: bold;\n      }\n    `\n  ]\n\n  @property({ type: String }) roleCategory: string = 'Roles'\n  @property({ type: Object }) user: any = {}\n  @property({ type: Array }) roles: any[] = []\n  @property({ type: Array }) userRoles: any[] = []\n\n  render() {\n    const userRoleIds = (this.userRoles || []).map(userRole => userRole.id)\n\n    return html`\n      ${this.roles.length\n        ? html`\n            <div>\n              ${this.roleCategory ? html`<h3 subtitle>${this.roleCategory}</h3>` : nothing}\n              <input id=\"checkAll\" type=\"checkbox\" @change=${this.checkAll.bind(this)} />\n              <label for=\"checkAll\">Check all</label>\n            </div>\n\n            <ul roles>\n              ${this.roles.map(\n                role => html`\n                  <li>\n                    <input\n                      id=\"${role.id}\"\n                      type=\"checkbox\"\n                      .checked=${userRoleIds.indexOf(role.id) >= 0}\n                      .data-role=${role}\n                    />\n                    <label for=\"${role.id}\">${role.name}</label>\n                  </li>\n                `\n              )}\n            </ul>\n          `\n        : ''}\n    `\n  }\n\n  checkAll(e) {\n    const checked = e.currentTarget.checked\n    Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]')).forEach(\n      checkbox => ((checkbox as HTMLInputElement).checked = checked)\n    )\n  }\n\n  selectedRoles() {\n    return Array.from(this.renderRoot.querySelectorAll('ul[roles] input[type=checkbox]'))\n      .filter(input => (input as HTMLInputElement).checked)\n      .map(input => {\n        const { id, name } = input['data-role']\n        return { id, name }\n      })\n  }\n}\n"]}

package/dist-client/entries/auth/activate.js

@@ -139,7 +139,7 @@ AuthActivate.styles = [
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background);
+        background-color: var(--auth-background, var(--md-sys-color-primary));
       }
 
       .wrap {
@@ -157,7 +157,7 @@ AuthActivate.styles = [
       .auth-brand img {
         margin: 15% auto 5px auto;
         width: 100px;
-        border: 3px solid var(--theme-white-color);
+        border: 3px solid var(--md-sys-color-on-primary);
         border-radius: 25px;
         box-shadow: var(--box-shadow);
       }
@@ -172,14 +172,14 @@ AuthActivate.styles = [
         margin: 50px 0 0 0;
         padding: 0;
         font-size: 24px;
-        color: var(--auth-title-color);
+        color: var(--auth-title-color, var(--md-sys-color-on-primary));
       }
 
       p {
         margin: 0;
         padding: var(--auth-description-padding);
         font: var(--auth-description-font);
-        color: var(--auth-description-color);
+        color: var(--auth-description-color, var(--md-sys-color-on-secondary));
       }
 
       #button-area {
@@ -188,9 +188,9 @@ AuthActivate.styles = [
       }
 
       md-elevated-button {
-        --md-theme-primary: var(--auth-button-background-color);
+        --md-theme-primary: var(--md-sys-color-on-primary);
         --md-theme-on-primary: var(--md-sys-color-primary);
-        --md-button-horizontal-padding: var(--padding-default);
+        --md-button-horizontal-padding: var(--spacing-medium);
         --md-button-ink-color: var(--md-sys-color-primary);
       }
 

package/dist-client/entries/auth/activate.js.map

@@ -1 +1 @@
-{"version":3,"file":"activate.js","sourceRoot":"","sources":["../../../client/entries/auth/activate.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/layout/ox-snack-bar.js'\nimport '@operato/lottie-player'\nimport '../../components/contact-us'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('auth-activate')\nexport class AuthActivate extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n        background-color: var(--auth-background);\n      }\n\n      .wrap {\n        display: block;\n        width: 450px;\n        min-width: 350px;\n        margin: 0 auto;\n        text-align: center;\n      }\n\n      .auth-brand {\n        color: #fff;\n      }\n\n      .auth-brand img {\n        margin: 15% auto 5px auto;\n        width: 100px;\n        border: 3px solid var(--theme-white-color);\n        border-radius: 25px;\n        box-shadow: var(--box-shadow);\n      }\n\n      .name {\n        display: block;\n        font: var(--auth-brand-name);\n        text-shadow: var(--auth-brand-name-shadow);\n      }\n\n      h1 {\n        margin: 50px 0 0 0;\n        padding: 0;\n        font-size: 24px;\n        color: var(--auth-title-color);\n      }\n\n      p {\n        margin: 0;\n        padding: var(--auth-description-padding);\n        font: var(--auth-description-font);\n        color: var(--auth-description-color);\n      }\n\n      #button-area {\n        border-top: 1px dashed #ccc;\n        padding-top: 10px;\n      }\n\n      md-elevated-button {\n        --md-theme-primary: var(--auth-button-background-color);\n        --md-theme-on-primary: var(--md-sys-color-primary);\n        --md-button-horizontal-padding: var(--padding-default);\n        --md-button-ink-color: var(--md-sys-color-primary);\n      }\n\n      contact-us {\n        display: flex;\n        padding: 50px;\n        flex-direction: column;\n      }\n\n      .lottie-container {\n        width: 100%;\n        height: 300px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n\n      .lottie-container lottie-player {\n        position: absolute;\n        bottom: -6%;\n        width: 100%;\n        height: auto;\n      }\n\n      @media (max-width: 450px) {\n        .wrap {\n          width: 85%;\n          min-width: 320px;\n          padding-bottom: 100px;\n        }\n\n        .auth-form {\n          grid-template-columns: 1fr;\n        }\n\n        .auth-brand img {\n          margin: 12% auto 5px auto;\n          width: 75px;\n        }\n\n        .lottie-container {\n          overflow: hidden;\n          height: 200px;\n          pointer-events: none;\n        }\n\n        .lottie-container lottie-player {\n          width: 1200px;\n          left: -30%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) email?: string | null\n\n  @query('#form') form!: HTMLFormElement\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <h1><ox-i18n msgid=\"text.your account is not activated\"></ox-i18n></h1>\n\n        <!--description message container-->\n        <p></p>\n\n        <form\n          id=\"form\"\n          action=\"/auth/resend-verification-email\"\n          method=\"POST\"\n          @submit=${e => {\n            this.requestResend(e)\n          }}\n          hidden\n        >\n          <input name=\"email\" type=\"hidden\" .value=${this.email || ''} required />\n          <button id=\"submit-button\" type=\"submit\"><ox-i18n msgid=\"label.change password\"></ox-i18n></button>\n        </form>\n\n        <div id=\"button-area\">\n          <md-elevated-button @click=${e => this.requestResend(e)}>\n            <md-icon slot=\"icon\">mail_outline</md-icon>\n            ${i18next.t('label.send activation email')}\n          </md-elevated-button>\n          <md-elevated-button\n            @click=${e => {\n              window.location.replace('/auth/signin')\n            }}\n          >\n            <md-icon slot=\"icon\">home</md-icon>\n            ${i18next.t('button.go to home')}\n          </md-elevated-button>\n        </div>\n        <contact-us></contact-us>\n\n        <!--lottie animation begin-->\n        <div class=\"lottie-container\">\n          <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n        </div>\n        <!--lottie animation end-->\n      </div>\n\n      <ox-snack-bar id=\"snackbar\"></ox-snack-bar>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n\n  firstUpdated() {\n    var searchParams = new URLSearchParams(window.location.search)\n    this.email = searchParams.get('email')\n  }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.email = this.data?.email\n    }\n  }\n\n  async requestResend(e) {\n    var timer\n    var formData = new FormData(this.form)\n    var button = e.target\n    try {\n      var controller = new AbortController()\n      var signal = controller.signal\n\n      button.disabled = true\n      timer = setTimeout(() => {\n        controller.abort()\n        throw new Error('timeout')\n      }, 30 * 1000)\n\n      var response = await fetch('/auth/resend-verification-email', {\n        credentials: 'include',\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(Object.fromEntries(formData.entries())),\n        signal\n      })\n\n      if (response) {\n        this.showSnackbar({\n          level: response.ok ? 'info' : 'error',\n          message: await response.text()\n        })\n      }\n    } catch (e) {\n    } finally {\n      button.disabled = false\n      clearTimeout(timer)\n    }\n  }\n\n  showSnackbar({ level, message, timer = 3000 }: { level: 'info' | 'error'; message: string; timer?: number }) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: 'info' | 'error'\n      message: string\n      active: boolean\n    }\n\n    snackbar.level = level\n    snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        snackbar.active = false\n      }, timer)\n  }\n}\n"]}
+{"version":3,"file":"activate.js","sourceRoot":"","sources":["../../../client/entries/auth/activate.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/layout/ox-snack-bar.js'\nimport '@operato/lottie-player'\nimport '../../components/contact-us'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('auth-activate')\nexport class AuthActivate extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n        background-color: var(--auth-background, var(--md-sys-color-primary));\n      }\n\n      .wrap {\n        display: block;\n        width: 450px;\n        min-width: 350px;\n        margin: 0 auto;\n        text-align: center;\n      }\n\n      .auth-brand {\n        color: #fff;\n      }\n\n      .auth-brand img {\n        margin: 15% auto 5px auto;\n        width: 100px;\n        border: 3px solid var(--md-sys-color-on-primary);\n        border-radius: 25px;\n        box-shadow: var(--box-shadow);\n      }\n\n      .name {\n        display: block;\n        font: var(--auth-brand-name);\n        text-shadow: var(--auth-brand-name-shadow);\n      }\n\n      h1 {\n        margin: 50px 0 0 0;\n        padding: 0;\n        font-size: 24px;\n        color: var(--auth-title-color, var(--md-sys-color-on-primary));\n      }\n\n      p {\n        margin: 0;\n        padding: var(--auth-description-padding);\n        font: var(--auth-description-font);\n        color: var(--auth-description-color, var(--md-sys-color-on-secondary));\n      }\n\n      #button-area {\n        border-top: 1px dashed #ccc;\n        padding-top: 10px;\n      }\n\n      md-elevated-button {\n        --md-theme-primary: var(--md-sys-color-on-primary);\n        --md-theme-on-primary: var(--md-sys-color-primary);\n        --md-button-horizontal-padding: var(--spacing-medium);\n        --md-button-ink-color: var(--md-sys-color-primary);\n      }\n\n      contact-us {\n        display: flex;\n        padding: 50px;\n        flex-direction: column;\n      }\n\n      .lottie-container {\n        width: 100%;\n        height: 300px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n\n      .lottie-container lottie-player {\n        position: absolute;\n        bottom: -6%;\n        width: 100%;\n        height: auto;\n      }\n\n      @media (max-width: 450px) {\n        .wrap {\n          width: 85%;\n          min-width: 320px;\n          padding-bottom: 100px;\n        }\n\n        .auth-form {\n          grid-template-columns: 1fr;\n        }\n\n        .auth-brand img {\n          margin: 12% auto 5px auto;\n          width: 75px;\n        }\n\n        .lottie-container {\n          overflow: hidden;\n          height: 200px;\n          pointer-events: none;\n        }\n\n        .lottie-container lottie-player {\n          width: 1200px;\n          left: -30%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) email?: string | null\n\n  @query('#form') form!: HTMLFormElement\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <h1><ox-i18n msgid=\"text.your account is not activated\"></ox-i18n></h1>\n\n        <!--description message container-->\n        <p></p>\n\n        <form\n          id=\"form\"\n          action=\"/auth/resend-verification-email\"\n          method=\"POST\"\n          @submit=${e => {\n            this.requestResend(e)\n          }}\n          hidden\n        >\n          <input name=\"email\" type=\"hidden\" .value=${this.email || ''} required />\n          <button id=\"submit-button\" type=\"submit\"><ox-i18n msgid=\"label.change password\"></ox-i18n></button>\n        </form>\n\n        <div id=\"button-area\">\n          <md-elevated-button @click=${e => this.requestResend(e)}>\n            <md-icon slot=\"icon\">mail_outline</md-icon>\n            ${i18next.t('label.send activation email')}\n          </md-elevated-button>\n          <md-elevated-button\n            @click=${e => {\n              window.location.replace('/auth/signin')\n            }}\n          >\n            <md-icon slot=\"icon\">home</md-icon>\n            ${i18next.t('button.go to home')}\n          </md-elevated-button>\n        </div>\n        <contact-us></contact-us>\n\n        <!--lottie animation begin-->\n        <div class=\"lottie-container\">\n          <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n        </div>\n        <!--lottie animation end-->\n      </div>\n\n      <ox-snack-bar id=\"snackbar\"></ox-snack-bar>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n\n  firstUpdated() {\n    var searchParams = new URLSearchParams(window.location.search)\n    this.email = searchParams.get('email')\n  }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.email = this.data?.email\n    }\n  }\n\n  async requestResend(e) {\n    var timer\n    var formData = new FormData(this.form)\n    var button = e.target\n    try {\n      var controller = new AbortController()\n      var signal = controller.signal\n\n      button.disabled = true\n      timer = setTimeout(() => {\n        controller.abort()\n        throw new Error('timeout')\n      }, 30 * 1000)\n\n      var response = await fetch('/auth/resend-verification-email', {\n        credentials: 'include',\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(Object.fromEntries(formData.entries())),\n        signal\n      })\n\n      if (response) {\n        this.showSnackbar({\n          level: response.ok ? 'info' : 'error',\n          message: await response.text()\n        })\n      }\n    } catch (e) {\n    } finally {\n      button.disabled = false\n      clearTimeout(timer)\n    }\n  }\n\n  showSnackbar({ level, message, timer = 3000 }: { level: 'info' | 'error'; message: string; timer?: number }) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: 'info' | 'error'\n      message: string\n      active: boolean\n    }\n\n    snackbar.level = level\n    snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        snackbar.active = false\n      }, timer)\n  }\n}\n"]}

package/dist-client/entries/auth/checkin.js

@@ -100,7 +100,7 @@ AuthCheckIn.styles = [
         display: flex;
         flex-direction: column;
         margin: auto;
-        background-color: var(--auth-background);
+        background-color: var(--auth-background, var(--md-sys-color-primary));
         height: 100vh;
         height: 100dvh;
       }

package/dist-client/entries/auth/checkin.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../../auth-style-sign'\n\n@customElement('auth-checkin')\nexport class AuthCheckIn extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        margin: auto;\n        background-color: var(--auth-background);\n        height: 100vh;\n        height: 100dvh;\n      }\n      .header {\n        background-color: var(--md-sys-color-primary);\n        height: var(--checkin-header-height);\n      }\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .domains {\n        margin: var(--margin-wide) 0;\n        padding: 0;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--border-radius);\n        border: var(--border-dark-color);\n        list-style: none;\n      }\n      li {\n        border-bottom: var(--border-dark-color);\n        margin-bottom: -1px;\n        padding: var(--padding-default) var(--padding-wide);\n        font-size: 18px;\n        color: var(--md-sys-color-secondary);\n        text-align: left;\n\n        cursor: pointer;\n      }\n      li:hover {\n        background-color: rgba(var(--primary-color-rgb), 0.2);\n      }\n      li span {\n        display: block;\n        font: normal var(--fontsize-default) var(--theme-font);\n        color: var(--secondary-text-color);\n      }\n      li md-icon {\n        float: right;\n        margin: 2px 0 0 0;\n        opacity: 0.5;\n      }\n      .button-container {\n        text-align: center;\n      }\n      .button-container md-elevated-button {\n        margin-left: var(--margin-narrow);\n      }\n\n      @media (max-width: 450px) {\n        .button-container md-elevated-button {\n          width: 100%;\n          margin: var(--margin-default) 0 0 0;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: String }) domainType?: string\n  @property({ type: Object }) user: any\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n  private redirectTo?: string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon || ''} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <h3>${i18next.t('label.select_domain')}</h3>\n\n          ${this.domains?.length\n            ? html`\n                <ul class=\"domains\">\n                  ${this.domains.map(\n                    domain => html`\n                      <li\n                        @click=${() =>\n                          (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}\n                      >\n                        <md-icon>keyboard_arrow_right</md-icon>\n                        <strong>${domain.name}</strong>\n                        <span>${domain.description}</span>\n                      </li>\n                    `\n                  )}\n                </ul>\n              `\n            : html` <h3>${i18next.t('text.no domain available')}</h3> `}\n\n          <div class=\"button-container\">\n            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}\n              >${String(i18next.t('button.logout'))}</md-elevated-button\n            >\n\n            ${this.domainType?.toLowerCase() === 'company'\n              ? html`<md-elevated-button\n                  @click=${e => (location.href = `/public/business-register?email=${this.user?.email}`)}\n                  >${String(i18next.t('button.register business domain'))}</md-elevated-button\n                > `\n              : ''}\n          </div>\n\n          ${isSafari()\n            ? html``\n            : html`\n                <div class=\"lottie-container\">\n                  <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n                </div>\n              `}\n        </div>\n      </div>\n    `\n  }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.domains = this.data.domains\n      this.user = this.data.user\n      this.domainType = this.data.domainType\n      this.redirectTo = this.data.redirectTo\n\n      this.requestUpdate()\n    }\n  }\n\n  navigateToUrl(url) {\n    location.pathname = url\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../../auth-style-sign'\n\n@customElement('auth-checkin')\nexport class AuthCheckIn extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        margin: auto;\n        background-color: var(--auth-background, var(--md-sys-color-primary));\n        height: 100vh;\n        height: 100dvh;\n      }\n      .header {\n        background-color: var(--md-sys-color-primary);\n        height: var(--checkin-header-height);\n      }\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .domains {\n        margin: var(--margin-wide) 0;\n        padding: 0;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--border-radius);\n        border: var(--border-dark-color);\n        list-style: none;\n      }\n      li {\n        border-bottom: var(--border-dark-color);\n        margin-bottom: -1px;\n        padding: var(--padding-default) var(--padding-wide);\n        font-size: 18px;\n        color: var(--md-sys-color-secondary);\n        text-align: left;\n\n        cursor: pointer;\n      }\n      li:hover {\n        background-color: rgba(var(--primary-color-rgb), 0.2);\n      }\n      li span {\n        display: block;\n        font: normal var(--fontsize-default) var(--theme-font);\n        color: var(--secondary-text-color);\n      }\n      li md-icon {\n        float: right;\n        margin: 2px 0 0 0;\n        opacity: 0.5;\n      }\n      .button-container {\n        text-align: center;\n      }\n      .button-container md-elevated-button {\n        margin-left: var(--margin-narrow);\n      }\n\n      @media (max-width: 450px) {\n        .button-container md-elevated-button {\n          width: 100%;\n          margin: var(--margin-default) 0 0 0;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: String }) domainType?: string\n  @property({ type: Object }) user: any\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n  private redirectTo?: string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon || ''} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <h3>${i18next.t('label.select_domain')}</h3>\n\n          ${this.domains?.length\n            ? html`\n                <ul class=\"domains\">\n                  ${this.domains.map(\n                    domain => html`\n                      <li\n                        @click=${() =>\n                          (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}\n                      >\n                        <md-icon>keyboard_arrow_right</md-icon>\n                        <strong>${domain.name}</strong>\n                        <span>${domain.description}</span>\n                      </li>\n                    `\n                  )}\n                </ul>\n              `\n            : html` <h3>${i18next.t('text.no domain available')}</h3> `}\n\n          <div class=\"button-container\">\n            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}\n              >${String(i18next.t('button.logout'))}</md-elevated-button\n            >\n\n            ${this.domainType?.toLowerCase() === 'company'\n              ? html`<md-elevated-button\n                  @click=${e => (location.href = `/public/business-register?email=${this.user?.email}`)}\n                  >${String(i18next.t('button.register business domain'))}</md-elevated-button\n                > `\n              : ''}\n          </div>\n\n          ${isSafari()\n            ? html``\n            : html`\n                <div class=\"lottie-container\">\n                  <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n                </div>\n              `}\n        </div>\n      </div>\n    `\n  }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.domains = this.data.domains\n      this.user = this.data.user\n      this.domainType = this.data.domainType\n      this.redirectTo = this.data.redirectTo\n\n      this.requestUpdate()\n    }\n  }\n\n  navigateToUrl(url) {\n    location.pathname = url\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

package/dist-client/entries/auth/result.js

@@ -71,7 +71,7 @@ AuthResult.styles = [
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background);
+        background-color: var(--auth-background, var(--md-sys-color-primary));
       }
       .wrap {
         display: block;
@@ -86,7 +86,7 @@ AuthResult.styles = [
       .auth-brand img {
         margin: 15% auto 5px auto;
         width: 100px;
-        border: 3px solid var(--theme-white-color);
+        border: 3px solid var(--md-sys-color-on-primary);
         border-radius: 25px;
         box-shadow: var(--box-shadow);
       }
@@ -99,13 +99,13 @@ AuthResult.styles = [
         margin: 50px 0 0 0;
         padding: 0;
         font-size: 24px;
-        color: var(--auth-title-color);
+        color: var(--auth-title-color, var(--md-sys-color-on-primary));
       }
       p {
         margin: 0;
         padding: var(--auth-description-padding);
         font: var(--auth-description-font);
-        color: var(--auth-description-color);
+        color: var(--auth-description-color, var(--md-sys-color-on-secondary));
       }
       :host *:focus {
         outline: none;

package/dist-client/entries/auth/result.js.map

@@ -1 +1 @@
-{"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAqH3D,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;SAC5D;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE;;;;;;;qBAOb,CAAC,CAAC,EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;cAGC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;UAIlC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE5G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAhLM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACrC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAjHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkLtB;SAlLY,UAAU","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\nimport '../../components/profile-component'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n        background-color: var(--auth-background);\n      }\n      .wrap {\n        display: block;\n        width: 450px;\n        min-width: 350px;\n        margin: 0 auto;\n        text-align: center;\n      }\n      .auth-brand {\n        color: #fff;\n      }\n      .auth-brand img {\n        margin: 15% auto 5px auto;\n        width: 100px;\n        border: 3px solid var(--theme-white-color);\n        border-radius: 25px;\n        box-shadow: var(--box-shadow);\n      }\n      .name {\n        display: block;\n        font: var(--auth-brand-name);\n        text-shadow: var(--auth-brand-name-shadow);\n      }\n      h1 {\n        margin: 50px 0 0 0;\n        padding: 0;\n        font-size: 24px;\n        color: var(--auth-title-color);\n      }\n      p {\n        margin: 0;\n        padding: var(--auth-description-padding);\n        font: var(--auth-description-font);\n        color: var(--auth-description-color);\n      }\n      :host *:focus {\n        outline: none;\n      }\n      .user {\n        background: url(/assets/images/icon-profile.png) center top no-repeat;\n        margin: var(--profile-icon-margin);\n        padding: 180px 20px 20px 20px;\n        color: var(--md-sys-color-secondary);\n        font: var(--header-bar-title);\n        text-align: center;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n      }\n      #button-area {\n        border-top: 1px dashed rgba(0, 0, 0, 0.1);\n        padding-top: 10px;\n      }\n      md-elevated-button {\n        --md-theme-primary: var(--auth-button-background-color);\n        --md-theme-on-primary: var(--md-sys-color-primary);\n        --md-button-horizontal-padding: var(--padding-default);\n        --md-button-ink-color: var(--md-sys-color-primary);\n      }\n      .lottie-container {\n        width: 100%;\n        height: 300px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n      .lottie-container lottie-player {\n        position: absolute;\n        bottom: -6%;\n        width: 100%;\n        height: auto;\n      }\n\n      @media (max-width: 450px) {\n        .wrap {\n          width: 85%;\n          min-width: 320px;\n          padding-bottom: 100px;\n        }\n        .auth-form {\n          grid-template-columns: 1fr;\n        }\n        .auth-brand img {\n          margin: 12% auto 5px auto;\n          width: 75px;\n        }\n        .lottie-container {\n          overflow: hidden;\n          height: 200px;\n          pointer-events: none;\n        }\n        .lottie-container lottie-player {\n          width: 1200px;\n          left: -30%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: String }) resultType?: string\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.message = this.data.message\n      this.resultType = this.data.resultType || 'congratulations'\n    }\n  }\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"wrap ${this.resultType}\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div id=\"message-area\">\n          <h1>${this.message || ''}</h1>\n\n          <!--description message container-->\n          <p></p>\n        </div>\n        <div id=\"button-area\">\n          <md-elevated-button\n            @click=${e => {\n              window.location.replace('/auth/signin')\n            }}\n          >\n            <md-icon slot=\"icon\">home</md-icon>\n            ${i18next.t('button.go to home')}\n          </md-elevated-button>\n        </div>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAqH3D,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;SAC5D;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE;;;;;;;qBAOb,CAAC,CAAC,EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;cAGC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;UAIlC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE5G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAhLM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACrC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAjHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkLtB;SAlLY,UAAU","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\nimport '../../components/profile-component'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n        background-color: var(--auth-background, var(--md-sys-color-primary));\n      }\n      .wrap {\n        display: block;\n        width: 450px;\n        min-width: 350px;\n        margin: 0 auto;\n        text-align: center;\n      }\n      .auth-brand {\n        color: #fff;\n      }\n      .auth-brand img {\n        margin: 15% auto 5px auto;\n        width: 100px;\n        border: 3px solid var(--md-sys-color-on-primary);\n        border-radius: 25px;\n        box-shadow: var(--box-shadow);\n      }\n      .name {\n        display: block;\n        font: var(--auth-brand-name);\n        text-shadow: var(--auth-brand-name-shadow);\n      }\n      h1 {\n        margin: 50px 0 0 0;\n        padding: 0;\n        font-size: 24px;\n        color: var(--auth-title-color, var(--md-sys-color-on-primary));\n      }\n      p {\n        margin: 0;\n        padding: var(--auth-description-padding);\n        font: var(--auth-description-font);\n        color: var(--auth-description-color, var(--md-sys-color-on-secondary));\n      }\n      :host *:focus {\n        outline: none;\n      }\n      .user {\n        background: url(/assets/images/icon-profile.png) center top no-repeat;\n        margin: var(--profile-icon-margin);\n        padding: 180px 20px 20px 20px;\n        color: var(--md-sys-color-secondary);\n        font: var(--header-bar-title);\n        text-align: center;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n      }\n      #button-area {\n        border-top: 1px dashed rgba(0, 0, 0, 0.1);\n        padding-top: 10px;\n      }\n      md-elevated-button {\n        --md-theme-primary: var(--auth-button-background-color);\n        --md-theme-on-primary: var(--md-sys-color-primary);\n        --md-button-horizontal-padding: var(--padding-default);\n        --md-button-ink-color: var(--md-sys-color-primary);\n      }\n      .lottie-container {\n        width: 100%;\n        height: 300px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n      .lottie-container lottie-player {\n        position: absolute;\n        bottom: -6%;\n        width: 100%;\n        height: auto;\n      }\n\n      @media (max-width: 450px) {\n        .wrap {\n          width: 85%;\n          min-width: 320px;\n          padding-bottom: 100px;\n        }\n        .auth-form {\n          grid-template-columns: 1fr;\n        }\n        .auth-brand img {\n          margin: 12% auto 5px auto;\n          width: 75px;\n        }\n        .lottie-container {\n          overflow: hidden;\n          height: 200px;\n          pointer-events: none;\n        }\n        .lottie-container lottie-player {\n          width: 1200px;\n          left: -30%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: String }) resultType?: string\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n  updated(changed) {\n    if (changed.has('data')) {\n      this.message = this.data.message\n      this.resultType = this.data.resultType || 'congratulations'\n    }\n  }\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"wrap ${this.resultType}\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div id=\"message-area\">\n          <h1>${this.message || ''}</h1>\n\n          <!--description message container-->\n          <p></p>\n        </div>\n        <div id=\"button-area\">\n          <md-elevated-button\n            @click=${e => {\n              window.location.replace('/auth/signin')\n            }}\n          >\n            <md-icon slot=\"icon\">home</md-icon>\n            ${i18next.t('button.go to home')}\n          </md-elevated-button>\n        </div>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

package/dist-client/entries/oauth2/oauth2-decision-page.js

@@ -173,7 +173,7 @@ OAuth2DecisionPage.styles = [
         display: flex;
         flex-direction: column;
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
 

package/dist-client/entries/oauth2/oauth2-decision-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '../../components/role-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        border: 1px solid var(--md-sys-color-primary);\n        margin: var(--margin-default);\n        padding: var(--padding-default);\n        font: normal 15px var(--theme-font);\n        color: var(--md-sys-color-secondary);\n      }\n\n      [field-2column] {\n        border-radius: var(--border-radius);\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 5px 15px;\n        clear: both;\n        max-width: var(--input-container-max-width);\n      }\n\n      [field] {\n        display: flex;\n        flex-direction: column;\n        padding-bottom: var(--padding-default);\n      }\n\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        min-width: 250px;\n        font: var(--input-font);\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\n      }\n\n      md-elevated-button {\n        margin-right: var(--padding-narrow);\n      }\n\n      [danger] {\n        --md-theme-primary: var(--md-danger-button-primary-color);\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any = {}\n  @property({ type: Object }) user: any = {}\n  @property({ type: Object }) client: any = {}\n  @property({ type: Object }) domain: any = {}\n  @property({ type: Object }) req: any = {}\n  @property({ type: String }) redirectURI: string = ''\n  @property({ type: String }) transactionID: string = ''\n  @property({ type: Array }) roles: any[] = []\n\n  @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n  render() {\n    return html`\n      <h2>Application Binding</h2>\n      <p>Hi ${this.user.name}!</p>\n      <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n      <p>Do you approve?</p>\n\n      <form field-2column>\n        <div field>\n          <label\n            >${i18next.t('label.company')}\n            <input readonly value=\"${this.domain.subdomain}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.client-id')}\n            <input readonly value=\"${this.req.clientID}\" />\n          </label>\n        </div>\n\n        <div field>\n          <label\n            >${i18next.t('label.redirect_uri')}\n            <input readonly value=\"${this.redirectURI}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.state')}\n            <input readonly value=\"${this.req.state}\" />\n          </label>\n        </div>\n      </form>\n\n      <role-selector .roleCategory=\"${this.domain.name}\" .roles=\"${this.roles}\"></role-selector>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></md-elevated-button>\n        <md-elevated-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></md-elevated-button>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    this.fetchMyRoles()\n  }\n\n  updated(changedProps) {\n    if (changedProps.has('data')) {\n      this.user = this.data?.oauth2?.user || this.user\n      this.client = this.data?.oauth2?.client || this.client\n      this.domain = this.data?.domain || this.domain\n      this.req = this.data?.oauth2?.req || this.req\n      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI\n      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID\n    }\n  }\n\n  async fetchMyRoles() {\n    const response = await client.query({\n      query: gql`\n        query myRoles {\n          myRoles {\n            id\n            name\n            description\n          }\n        }\n      `\n    })\n\n    if (!response.errors?.length) {\n      this.roles = response.data.myRoles\n    }\n  }\n\n  async decision(allowOrCancel) {\n    const selectedRoles = this.selectedRoles()\n    if (allowOrCancel && !selectedRoles?.length) {\n      await OxPrompt.open({\n        title: i18next.t('title.nothing selected'),\n        text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      return\n    }\n\n    let data: any = {\n      transaction_id: this.transactionID,\n      subdomain: this.domain.subdomain,\n      appKey: this.req.clientID,\n      state: this.req.state,\n      email: this.user.email,\n      scopes: selectedRoles\n    }\n    if (!allowOrCancel) {\n      data.cancel = 'Deny'\n    }\n\n    const response = await fetch('/oauth/decision', {\n      method: 'POST',\n      mode: 'cors',\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json'\n      },\n      redirect: 'follow',\n      body: JSON.stringify(data)\n    })\n\n    if (response.redirected) {\n      location.href = response.url\n    }\n  }\n\n  selectedRoles() {\n    return this.roleSelector.selectedRoles()\n  }\n}\n"]}
+{"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '../../components/role-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        border: 1px solid var(--md-sys-color-primary);\n        margin: var(--margin-default);\n        padding: var(--padding-default);\n        font: normal 15px var(--theme-font);\n        color: var(--md-sys-color-secondary);\n      }\n\n      [field-2column] {\n        border-radius: var(--border-radius);\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 5px 15px;\n        clear: both;\n        max-width: var(--input-container-max-width);\n      }\n\n      [field] {\n        display: flex;\n        flex-direction: column;\n        padding-bottom: var(--padding-default);\n      }\n\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        min-width: 250px;\n        font: var(--input-font);\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\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      md-elevated-button {\n        margin-right: var(--padding-narrow);\n      }\n\n      [danger] {\n        --md-theme-primary: var(--md-danger-button-primary-color);\n      }\n    `\n  ]\n\n  @property({ type: Object }) data: any = {}\n  @property({ type: Object }) user: any = {}\n  @property({ type: Object }) client: any = {}\n  @property({ type: Object }) domain: any = {}\n  @property({ type: Object }) req: any = {}\n  @property({ type: String }) redirectURI: string = ''\n  @property({ type: String }) transactionID: string = ''\n  @property({ type: Array }) roles: any[] = []\n\n  @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n  render() {\n    return html`\n      <h2>Application Binding</h2>\n      <p>Hi ${this.user.name}!</p>\n      <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n      <p>Do you approve?</p>\n\n      <form field-2column>\n        <div field>\n          <label\n            >${i18next.t('label.company')}\n            <input readonly value=\"${this.domain.subdomain}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.client-id')}\n            <input readonly value=\"${this.req.clientID}\" />\n          </label>\n        </div>\n\n        <div field>\n          <label\n            >${i18next.t('label.redirect_uri')}\n            <input readonly value=\"${this.redirectURI}\" />\n          </label>\n\n          <label\n            >${i18next.t('label.state')}\n            <input readonly value=\"${this.req.state}\" />\n          </label>\n        </div>\n      </form>\n\n      <role-selector .roleCategory=\"${this.domain.name}\" .roles=\"${this.roles}\"></role-selector>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></md-elevated-button>\n        <md-elevated-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></md-elevated-button>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    this.fetchMyRoles()\n  }\n\n  updated(changedProps) {\n    if (changedProps.has('data')) {\n      this.user = this.data?.oauth2?.user || this.user\n      this.client = this.data?.oauth2?.client || this.client\n      this.domain = this.data?.domain || this.domain\n      this.req = this.data?.oauth2?.req || this.req\n      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI\n      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID\n    }\n  }\n\n  async fetchMyRoles() {\n    const response = await client.query({\n      query: gql`\n        query myRoles {\n          myRoles {\n            id\n            name\n            description\n          }\n        }\n      `\n    })\n\n    if (!response.errors?.length) {\n      this.roles = response.data.myRoles\n    }\n  }\n\n  async decision(allowOrCancel) {\n    const selectedRoles = this.selectedRoles()\n    if (allowOrCancel && !selectedRoles?.length) {\n      await OxPrompt.open({\n        title: i18next.t('title.nothing selected'),\n        text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),\n        confirmButton: { text: i18next.t('button.confirm') }\n      })\n\n      return\n    }\n\n    let data: any = {\n      transaction_id: this.transactionID,\n      subdomain: this.domain.subdomain,\n      appKey: this.req.clientID,\n      state: this.req.state,\n      email: this.user.email,\n      scopes: selectedRoles\n    }\n    if (!allowOrCancel) {\n      data.cancel = 'Deny'\n    }\n\n    const response = await fetch('/oauth/decision', {\n      method: 'POST',\n      mode: 'cors',\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json'\n      },\n      redirect: 'follow',\n      body: JSON.stringify(data)\n    })\n\n    if (response.redirected) {\n      location.href = response.url\n    }\n  }\n\n  selectedRoles() {\n    return this.roleSelector.selectedRoles()\n  }\n}\n"]}

package/dist-client/pages/app-binding/app-binding.js

@@ -284,7 +284,7 @@ AppBinding.styles = [
 
       label {
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {