@api-client/ui 0.5.57 → 0.6.0

package/src/elements/setup/internals/OrganizationCreateScreen.ts

@@ -0,0 +1,170 @@
+import { html, TemplateResult, LitElement, nothing } from 'lit'
+import { property } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+import { userContext, type IUser } from '../../../providers/user.js'
+
+export type OrgCreateReason = 'setup' | 'add'
+
+/**
+ * An App screen (HTML Element) allowing the user to create a new organization during the setup process.
+ *
+ * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.
+ *
+ * @fires create - Dispatched when the user submits the form with a valid organization name.
+ *                 The event detail contains `{ organization: string }`.
+ * @fires cancel - Dispatched when the user cancels the operation (only available when `reason` is 'add').
+ *
+ * @example
+ * ```html
+ * <organization-create-screen
+ *   reason="setup"
+ *   @create="${this.handleCreate}"
+ * ></organization-create-screen>
+ * ```
+ */
+export default class OrganizationCreateScreen extends LitElement {
+  /**
+   * The current user information.
+   *
+   * This property consumes the `userContext`.
+   */
+  @property({ type: Object, attribute: false })
+  @consume({ context: userContext, subscribe: true })
+  accessor user: IUser | undefined
+
+  /**
+   * Computed user name for welcome message.
+   */
+  get userName(): string {
+    return this.user?.name || ''
+  }
+
+  /**
+   * Computed intro message based on the reason for creating the organization.
+   */
+  get introMessage(): string {
+    if (this.reason === 'setup') {
+      // eslint-disable-next-line max-len
+      return 'Start with adding an organization to your account. Each organization you create has separate billing, teams, and APIs.'
+    }
+    return 'Each organization you create has separate billing, teams, and APIs.'
+  }
+
+  /**
+   * Indicates whether the screen is in the loading state.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor loading = false
+
+  /**
+   * The user-entered organization name. Can be set to pre-fill the input field.
+   * @attribute
+   */
+  @property({ type: String }) accessor organization: string | undefined
+  /**
+   * The reason for creating the organization, affecting the welcome message.
+   *
+   * Possible values are:
+   * - 'setup': for initial setup
+   * - 'add': for adding an additional organization
+   *
+   * @attribute
+   */
+  @property({ type: String }) accessor reason: OrgCreateReason = 'setup'
+
+  protected handleFormSubmit(e: SubmitEvent): void {
+    e.preventDefault()
+    const form = e.target as HTMLFormElement
+    const organization = String(form.organization.value).trim()
+    if (!organization) {
+      return
+    }
+    this.setupOrganization(organization)
+  }
+
+  setupOrganization(organization: string): void {
+    this.organization = organization
+    this.dispatchEvent(
+      new CustomEvent('create', {
+        detail: { organization },
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  protected handleCancel(): void {
+    if (this.reason !== 'add') {
+      return
+    }
+    this.dispatchEvent(
+      new CustomEvent('cancel', {
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <div class="content">
+        <div class="slide account-setup-slide">
+          ${this.renderWelcomeMessage()} ${this.loading ? this.renderLoader() : this.renderForm()}
+        </div>
+      </div>
+    `
+  }
+
+  private renderWelcomeMessage(): TemplateResult {
+    const tagline = this.reason === 'setup' ? 'Setup your first organization' : 'Add another organization'
+    return html`
+      <h1 class="display-medium">Welcome ${this.userName}.</h1>
+      <p class="title-large">${tagline}.</p>
+    `
+  }
+
+  protected renderForm(): TemplateResult {
+    return html`
+      <p class="body-medium">${this.introMessage}</p>
+      ${this.renderOrganizationInput()} ${this.renderInvitationInfo()}
+    `
+  }
+
+  protected renderInvitationInfo(): TemplateResult | typeof nothing {
+    if (this.reason !== 'setup') {
+      return nothing
+    }
+    return html`<p class="body-small">
+      Expected to join an organization? Click on the registration link in the invitation email to get started.
+    </p>`
+  }
+
+  protected renderOrganizationInput(): TemplateResult {
+    const { organization = '' } = this
+    return html`
+      <form class="org-name-form" @submit=${this.handleFormSubmit}>
+        <ui-outlined-text-field
+          label="Organization name"
+          name="organization"
+          autocomplete="organization"
+          required
+          class="org-input"
+          .value="${organization}"
+        ></ui-outlined-text-field>
+        <ui-button class="next" color="filled" type="submit">Next</ui-button>
+        ${this.renderCancelButton()}
+      </form>
+    `
+  }
+
+  protected renderCancelButton(): TemplateResult | typeof nothing {
+    if (this.reason !== 'add') {
+      return nothing
+    }
+    return html`<ui-button class="cancel" color="text" type="button" @click="${this.handleCancel}">Cancel</ui-button>`
+  }
+
+  protected renderLoader(): TemplateResult {
+    return html` <ui-progress indeterminate class="login-progress" aria-label="Creating organization"></ui-progress> `
+  }
+}

package/src/elements/setup/internals/OrganizationSelectionScreen.styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit'
+
+export default css``

package/src/elements/setup/internals/OrganizationSelectionScreen.ts

@@ -0,0 +1,100 @@
+import { html, TemplateResult, LitElement } from 'lit'
+import type { IOrganization } from '@api-client/core/models/store/Organization.js'
+import { property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { consume } from '@lit/context'
+import { organizationsContext } from '../../../providers/organizations.js'
+
+/**
+ * An App screen (HTML Element) allowing the user to select an organization.
+ * Primary use-case is during the initial setup when no organization is selected yet.
+ *
+ * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.
+ */
+export default class OrganizationSelectionScreen extends LitElement {
+  /**
+   * The list of organizations to select from.
+   *
+   * This property consumes the `organizationsContext`.
+   */
+  @property({ type: Array, attribute: false })
+  @consume({ context: organizationsContext, subscribe: true })
+  accessor organizations: IOrganization[] | undefined
+
+  /**
+   * Indicates whether the screen is in the loading state.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor loading = false
+
+  /**
+   * The currently selected organization key, if any. Can be used to pre-select an organization in the list.
+   * When the user makes a selection, an `organization-selected` event is dispatched and this property is updated.
+   * @attribute
+   */
+  @property({ type: String }) accessor selected: string | undefined
+
+  /**
+   * Handles the organization selection form submission.
+   * @param e The submit event
+   */
+  protected async handleOrgSelection(e: SubmitEvent): Promise<void> {
+    e.preventDefault()
+    const form = e.target as HTMLFormElement
+    const organization = String(form.org.value).trim()
+    if (!organization) {
+      return
+    }
+    this.selectOrganization(organization)
+  }
+
+  /**
+   * Selects the organization and persists the state.
+   * @param organization The organization key to select
+   */
+  protected selectOrganization(organization: string): void {
+    this.selected = organization
+    this.dispatchEvent(
+      new CustomEvent('organization-selected', {
+        detail: { organization },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <div class="content">
+        <div class="slide account-setup-slide">
+          <h1 class="display-medium">Select your organization.</h1>
+          ${this.loading ? this.renderLoader() : this.renderForm()}
+        </div>
+      </div>
+    `
+  }
+
+  protected renderForm(): TemplateResult {
+    const { organizations = [], selected } = this
+    return html`
+      <form class="org-name-form" @submit=${this.handleOrgSelection}>
+        <ui-select name="org" class="org-input" required .value="${selected}">
+          ${repeat(
+            organizations,
+            (i) => i.key,
+            (i) =>
+              html`<ui-option value="${i.key}"
+                >${i.name}
+                <div slot="supporting-text">${i.key}</div></ui-option
+              >`
+          )}
+        </ui-select>
+        <ui-button color="filled" type="submit">Continue</ui-button>
+      </form>
+    `
+  }
+
+  protected renderLoader(): TemplateResult {
+    return html` <ui-progress indeterminate class="login-progress" aria-label="Setting up organization"></ui-progress> `
+  }
+}

package/src/elements/setup/internals/OrganizationSelector.styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit'
+
+export default css``

package/src/elements/setup/internals/OrganizationSelector.ts

@@ -0,0 +1,133 @@
+import { html, TemplateResult, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { consume } from '@lit/context'
+import type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js'
+import { type IOrganization, organizationContext } from '../../../providers/organization.js'
+import { organizationsContext } from '../../../providers/organizations.js'
+
+/**
+ * An element that allows selecting an organization from a list.
+ * It renders a button with the current organization name that triggers a dropdown menu with available organizations.
+ *
+ * The component supports creating a new organization via a dedicated menu item.
+ *
+ * @example
+ * ```html
+ * <organization-selector
+ *   .organization="${this.selectedOrg}"
+ *   .organizations="${this.availableOrgs}"
+ *   @select="${this.handleSelection}"
+ *   @create="${this.handleCreate}"
+ * ></organization-selector>
+ * ```
+ *
+ * @fires select - Dispatched when the user selects an organization. The detail object contains the `organization` key.
+ * @fires create - Dispatched when the user clicks on the "New Organization" menu item.
+ */
+export default class OrganizationSelector extends LitElement {
+  /**
+   * The currently selected organization, if any.
+   * When set, the button label will show this organization's name.
+   *
+   * This property consumes the `organizationContext`.
+   */
+  @property({ type: Object, attribute: false })
+  @consume({ context: organizationContext, subscribe: true })
+  accessor organization: IOrganization | undefined
+
+  /**
+   * The list of available organizations to display in the dropdown menu.
+   *
+   * This property consumes the `organizationsContext`.
+   */
+  @property({ type: Array, attribute: false })
+  @consume({ context: organizationsContext, subscribe: true })
+  accessor organizations: IOrganization[] | undefined
+
+  /**
+   * A handler for organization selection from the menu.
+   */
+  protected handleOrgSelect(e: CustomEvent<{ item: UiMenuItemElement }>): void {
+    const { item } = e.detail
+    const { action = '' } = item.dataset
+    if (action === 'select' && item.value) {
+      this.notifySelect(item.value)
+    } else if (action === 'new') {
+      this.notifyCreate()
+    }
+  }
+
+  /**
+   * Notifies about organization selection.
+   * @param organizationKey The key of the organization that was selected by the user.
+   */
+  protected notifySelect(organizationKey: string): void {
+    this.dispatchEvent(
+      new CustomEvent('select', {
+        detail: { organization: organizationKey },
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  /**
+   * Notifies about the request to create a new organization.
+   */
+  protected notifyCreate(): void {
+    this.dispatchEvent(
+      new CustomEvent('create', {
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  protected override render(): unknown {
+    return html`<span class="container">${this.renderTrigger()} ${this.renderMenu()}</span>`
+  }
+
+  protected renderTrigger(): TemplateResult {
+    const { organization } = this
+    const orgName = organization ? organization.name : 'Select Organization'
+    return html`
+      <ui-button
+        id="org-selector-anchor"
+        aria-label="Current organization: ${orgName}"
+        trailingicon
+        color="tonal"
+        popoverTarget="org-selector-menu"
+      >
+        ${orgName}
+        <ui-icon slot="icon">arrow_drop_down</ui-icon>
+      </ui-button>
+    `
+  }
+
+  protected renderMenu(): TemplateResult {
+    const { organization, organizations = [] } = this
+    const orgKey = organization ? organization.key : ''
+    return html`
+      <ui-menu id="org-selector-menu" popover="auto" @select="${this.handleOrgSelect}">
+        ${repeat(
+          organizations,
+          (org) => org.key,
+          (org) =>
+            html`<ui-menu-item
+              showSelectionIcon
+              data-action="select"
+              value="${org.key}"
+              ?selected="${org.key === orgKey}"
+              ><div>${org.name}</div>
+            </ui-menu-item>`
+        )}
+        <ui-divider role="separator"></ui-divider>
+        <ui-menu-item data-action="new">
+          <div>New Organization</div>
+          <ui-icon slot="start">add</ui-icon>
+        </ui-menu-item>
+      </ui-menu>
+    `
+  }
+}

package/src/elements/setup/internals/common.styles.ts

@@ -0,0 +1,72 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .content {
+    background-color: var(--md-sys-color-surface);
+    border: 1px var(--md-sys-color-outline-variant) solid;
+    border-radius: var(--md-sys-shape-corner-medium);
+    overflow: hidden;
+    min-height: 40vh;
+    width: 60vw;
+    display: flex;
+  }
+
+  .slide {
+    gap: 40px;
+    padding: 80px;
+    display: flex;
+    flex: 1;
+  }
+
+  .intro,
+  .login {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .intro {
+    gap: 40px;
+  }
+
+  .login {
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .login-progress {
+    width: 100%;
+  }
+
+  .account-setup-slide {
+    gap: 20px;
+    flex-direction: column;
+  }
+
+  /* from org setup screen and organization selection */
+  .org-name-form {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  /* from org setup screen and organization selection */
+  .org-input {
+    width: 400px;
+  }
+
+  .error {
+    background-color: var(--md-sys-color-error-container);
+    color: var(--md-sys-color-on-error-container);
+  }
+`

package/src/elements/setup/internals/icons.ts

@@ -0,0 +1,43 @@
+import { svg } from 'lit'
+
+export const google = svg`<svg slot="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
+  <path
+    fill="#EA4335"
+    d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+  ></path>
+  <path
+    fill="#4285F4"
+    d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+  ></path>
+  <path
+    fill="#FBBC05"
+    d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+  ></path>
+  <path
+    fill="#34A853"
+    d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+  ></path>
+  <path fill="none" d="M0 0h48v48H0z"></path>
+</svg>`
+
+export const github = svg`<svg slot="icon" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+    fill="#24292f"
+  />
+</svg>`
+
+export const linkedin = svg`<svg slot="icon" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path
+      d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
+      fill="#007EBB"
+    />
+    <path
+      d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
+      fill="#FFF"
+    />
+  </g>
+</svg>`

package/src/elements/setup/invitation-screen.ts

@@ -0,0 +1,20 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/InvitationScreen.js'
+import styles from './internals/InvitationScreen.styles.js'
+import common from './internals/common.styles.js'
+import typography from '../../styles/m3/typography.module.js'
+
+import '@github/relative-time-element/relative-time/define'
+import '../../md/progress/ui-progress.js'
+import '../../md/button/ui-button.js'
+
+@customElement('invitation-screen')
+export class InvitationScreenElement extends Element {
+  static override styles = [common, typography, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'invitation-screen': InvitationScreenElement
+  }
+}

package/src/elements/setup/login-screen.ts

@@ -0,0 +1,19 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/LoginScreen.js'
+import styles from './internals/LoginScreen.styles.js'
+import common from './internals/common.styles.js'
+import typography from '../../styles/m3/typography.module.js'
+
+import '../../md/progress/ui-progress.js'
+import '../../md/button/ui-button.js'
+
+@customElement('login-screen')
+export class LoginScreenElement extends Element {
+  static override styles = [common, typography, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'login-screen': LoginScreenElement
+  }
+}

package/src/elements/setup/organization-create-screen.ts

@@ -0,0 +1,20 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/OrganizationCreateScreen.js'
+import styles from './internals/OrganizationCreateScreen.styles.js'
+import common from './internals/common.styles.js'
+import typography from '../../styles/m3/typography.module.js'
+
+import '../../md/progress/ui-progress.js'
+import '../../md/button/ui-button.js'
+import '../../md/text-field/ui-outlined-text-field.js'
+
+@customElement('organization-create-screen')
+export class OrganizationCreateScreenElement extends Element {
+  static override styles = [common, typography, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'organization-create-screen': OrganizationCreateScreenElement
+  }
+}

package/src/elements/setup/organization-selection-screen.ts

@@ -0,0 +1,21 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/OrganizationSelectionScreen.js'
+import styles from './internals/OrganizationSelectionScreen.styles.js'
+import common from './internals/common.styles.js'
+import typography from '../../styles/m3/typography.module.js'
+
+import '../../md/progress/ui-progress.js'
+import '../../md/select/ui-select.js'
+import '../../md/select/ui-option.js'
+import '../../md/button/ui-button.js'
+
+@customElement('organization-selection-screen')
+export class OrganizationSelectionScreenElement extends Element {
+  static override styles = [common, typography, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'organization-selection-screen': OrganizationSelectionScreenElement
+  }
+}

package/src/elements/setup/organization-selector.ts

@@ -0,0 +1,38 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/OrganizationSelector.js'
+import styles from './internals/OrganizationSelector.styles.js'
+import typography from '../../styles/m3/typography.module.js'
+
+import '../../md/button/ui-button.js'
+import '../../md/icons/ui-icon.js'
+import '../../md/menu/ui-menu.js'
+import '../../md/menu/ui-menu-item.js'
+import '../../md/divider/ui-divider.js'
+
+/**
+ * An element that allows selecting an organization from a list.
+ * It renders a button with the current organization name that triggers a dropdown menu with available organizations.
+ *
+ * The component supports creating a new organization via a dedicated menu item.
+ *
+ * @example
+ * ```html
+ * <organization-selector
+ *   .organization="${this.selectedOrg}"
+ *   .organizations="${this.availableOrgs}"
+ *   @select="${this.handleSelection}"
+ *   @create="${this.handleCreate}"
+ * ></organization-selector>
+ * ```
+ * @element organization-selector
+ */
+@customElement('organization-selector')
+export class OrganizationSelectorElement extends Element {
+  static override styles = [typography, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'organization-selector': OrganizationSelectorElement
+  }
+}

package/src/elements/user/internals/UserAvatar.ts

@@ -1,10 +1,11 @@
 import { html, TemplateResult, PropertyValues, SVGTemplateResult, svg } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
+import { consume } from '@lit/context'
 import { UiElement } from '../../../md/UiElement.js'
 import { setDisabled } from '../../../lib/disabled.js'
-import type { IUser } from '@api-client/core/models/store/User.js'
 import type UiRipple from '../../../md/ripple/internals/ripple.js'
 import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
+import { type IUser, userContext } from '../../../providers/user.js'
 import '../../../md/focus-ring/ui-focus-ring.js'
 import '../../../md/ripple/ui-ripple.js'
 
@@ -31,8 +32,12 @@ export default class UserAvatar extends UiElement {
 
   /**
    * The user object to display the avatar for.
+   *
+   * This property consumes the `userContext`.
    */
-  @property({ type: Object }) accessor user: IUser | undefined
+  @property({ type: Object, attribute: false })
+  @consume({ context: userContext })
+  accessor user: IUser | undefined
   /**
    * The type of avatar to render, either 'button' or 'icon'.
    * @attribute