@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.139 → 2.0.0-next.140

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/bundle/openbridge-webcomponents.bundle.js +55 -19
  2. package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
  3. package/custom-elements.json +21 -3
  4. package/dist/components/user-menu/user-menu.css.js +4 -0
  5. package/dist/components/user-menu/user-menu.css.js.map +1 -1
  6. package/dist/components/user-menu/user-menu.d.ts +13 -3
  7. package/dist/components/user-menu/user-menu.d.ts.map +1 -1
  8. package/dist/components/user-menu/user-menu.js +51 -19
  9. package/dist/components/user-menu/user-menu.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/user-menu/user-menu.css +4 -0
  12. package/src/components/user-menu/user-menu.stories.ts +29 -21
  13. package/src/components/user-menu/user-menu.ts +101 -52
package/custom-elements.json CHANGED
@@ -8405,7 +8405,7 @@
8405
8405
  {
8406
8406
  "kind": "variable",
8407
8407
  "name": "ObcUserMenu",
8408
- "default": "class extends LitElement { constructor() { super(...arguments); this.type = \"sign-in\"; this.size = \"regular\"; this.hasRecentlySignedIn = false; this.username = \"\"; this.password = \"\"; this.usernameError = \"\"; this.passwordError = \"\"; this.recentUsers = []; this.signedInActions = []; } get showRecentUsers() { return this.hasRecentlySignedIn && this.recentUsers.length > 0; } renderTextInput(placeholder, type = HTMLInputTypeAttribute.Text, value = \"\", onInput, errorText = \"\") { const isPassword = type === HTMLInputTypeAttribute.Password; return html` <obc-text-input-field .placeholder=${placeholder} .type=${type} .textAlign=${ObcTextInputFieldTextAlign.Left} .value=${value} .error=${Boolean(errorText)} .errorText=${errorText} .required=${true} .hasClearButton=${!isPassword} @input=${onInput} > </obc-text-input-field> `; } renderUserButtons(count, isLarge) { const size = isLarge ? Size.large : Size.regular; const users = this.recentUsers.slice(0, count); return html` <div class=${classMap({ users: true, large: isLarge, single: users.length === 1 })} > ${users.map( (user) => html` <obc-user-button .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${size} .initials=${user.initials} .label=${user.label} @click=${() => this.handleRecentUserClick(user)} ></obc-user-button> ` )} </div> `; } renderUserProfile(layout, size) { if (!this.userInitials && !this.userLabel) { return nothing; } const userButtonSize = size === \"large\" ? Size.large : Size.regular; return html` <div class=${classMap({ \"user-profile\": true, [layout]: true })} > <obc-user-button class=${classMap({ \"user-avatar\": true, [`size-${size}`]: true })} .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${userButtonSize} .initials=${this.userInitials ?? \"\"} .label=${this.userLabel ?? \"\"} ></obc-user-button> </div> `; } getSignedInActionIcon(actionId) { switch (actionId) { case \"calendar\": return html`<obi-calendar-google></obi-calendar-google>`; case \"log\": return html`<obi-log-open-google></obi-log-open-google>`; case \"preferences\": return html`<obi-settings-iec></obi-settings-iec>`; case \"user-account\": return html`<obi-user></obi-user>`; default: return nothing; } } normalizeActionId(actionId) { return actionId.trim().toLowerCase().replace(/[^a-z0-9]+/g, \"-\"); } handleSignedInActionClick(action) { this.dispatchEvent( new CustomEvent(\"signed-in-action-click\", { detail: { id: action.id, label: action.label } }) ); } handleRecentUserClick(user) { this.dispatchEvent( new CustomEvent(\"recent-user-click\", { detail: { initials: user.initials, label: user.label } }) ); } handleUsernameInput(event) { const target = event.target; this.username = target.value ?? \"\"; if (this.username) { this.usernameError = \"\"; } } handlePasswordInput(event) { const target = event.target; this.password = target.value ?? \"\"; if (this.password) { this.passwordError = \"\"; } } validateSignIn() { let valid = true; const needsUsername = this.type === \"sign-in\"; if (needsUsername && !this.username) { this.usernameError = msg(\"Username is required\"); valid = false; } if (!this.password) { this.passwordError = msg(\"Password is required\"); valid = false; } return valid; } handleSignInClick() { if (!this.validateSignIn()) { return; } this.dispatchEvent( new CustomEvent(\"sign-in-click\", { detail: { username: this.username, password: this.password } }) ); } handleSignOutClick() { this.dispatchEvent(new CustomEvent(\"sign-out-click\")); } renderSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError )} ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError )} ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"divider\" aria-hidden=\"true\"></div> <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderUserSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"login-container\"> <div class=\"user-primary\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"fields\"> ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> </div> ${this.showRecentUsers ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderUserSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=\"login-container\"> ${this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError )} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"divider\" aria-hidden=\"true\"></div> <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderLoadingSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"vertical\", \"large\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderLoadingSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderSignedIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-primary signed-in\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"divider\" aria-hidden=\"true\"></div> ${this.signedInActions.length ? html` <div class=\"nav-container\"> ${this.signedInActions.map((action) => { const normalizedId = this.normalizeActionId(action.id); return html` <obc-navigation-item .label=${action.label} hasIcon @click=${() => this.handleSignedInActionClick(action)} > <span slot=\"icon\"> <slot name=\"signed-in-action-icon-${normalizedId}\"> ${this.getSignedInActionIcon(normalizedId)} </slot> </span> </obc-navigation-item> `; })} </div> ` : nothing} <div class=\"button-container\"> <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } renderSignedInSmall() { const primaryAction = this.signedInActions.find( (action) => action.id === this.primaryActionId ); return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=\"button-container\"> ${primaryAction ? html` <obc-button variant=${ButtonVariant.normal} fullWidth @click=${() => this.handleSignedInActionClick(primaryAction)} > ${primaryAction.label} </obc-button> ` : nothing} <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } render() { let content = nothing; if (this.type === \"sign-in\") { content = this.size === \"small\" ? this.renderSignInSmall() : this.renderSignIn(); } if (this.type === \"user-sign-in\") { content = this.size === \"small\" ? this.renderUserSignInSmall() : this.renderUserSignIn(); } if (this.type === \"loading-sign-in\") { content = this.size === \"small\" ? this.renderLoadingSignInSmall() : this.renderLoadingSignIn(); } if (this.type === \"signed-in\") { content = this.size === \"small\" ? this.renderSignedInSmall() : this.renderSignedIn(); } return html` <div class=${classMap({ card: true, [`size-${this.size}`]: true, [`type-${this.type}`]: true })} > ${content} </div> `; } }"
8408
+ "default": "class extends LitElement { constructor() { super(...arguments); this.type = \"sign-in\"; this.size = \"regular\"; this.hasRecentlySignedIn = false; this.showUsername = true; this.username = \"\"; this.showPassword = true; this.password = \"\"; this.usernameError = \"\"; this.passwordError = \"\"; this.recentUsers = []; this.signedInActions = []; } get showRecentUsers() { return this.hasRecentlySignedIn && this.recentUsers.length > 0; } renderTextInput(placeholder, type = HTMLInputTypeAttribute.Text, value = \"\", onInput, errorText = \"\") { const isPassword = type === HTMLInputTypeAttribute.Password; return html` <obc-text-input-field .placeholder=${placeholder} .type=${type} .textAlign=${ObcTextInputFieldTextAlign.Left} .value=${value} .error=${Boolean(errorText)} .errorText=${errorText} .required=${true} .hasClearButton=${!isPassword} @input=${onInput} > </obc-text-input-field> `; } renderUserButtons(count, isLarge) { const size = isLarge ? Size.large : Size.regular; const users = this.recentUsers.slice(0, count); return html` <div class=${classMap({ users: true, large: isLarge, single: users.length === 1 })} > ${users.map( (user) => html` <obc-user-button .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${size} .initials=${user.initials} .label=${user.label} @click=${() => this.handleRecentUserClick(user)} ></obc-user-button> ` )} </div> `; } renderUserProfile(layout, size) { if (!this.userInitials && !this.userLabel) { return nothing; } const userButtonSize = size === \"large\" ? Size.large : Size.regular; return html` <div class=${classMap({ \"user-profile\": true, [layout]: true })} > <obc-user-button class=${classMap({ \"user-avatar\": true, [`size-${size}`]: true })} .variant=${Variant.initials} .styleType=${StyleType.normal} .size=${userButtonSize} .initials=${this.userInitials ?? \"\"} .label=${this.userLabel ?? \"\"} ></obc-user-button> </div> `; } getSignedInActionIcon(actionId) { switch (actionId) { case \"calendar\": return html`<obi-calendar-google></obi-calendar-google>`; case \"log\": return html`<obi-log-open-google></obi-log-open-google>`; case \"preferences\": return html`<obi-settings-iec></obi-settings-iec>`; case \"user-account\": return html`<obi-user></obi-user>`; default: return nothing; } } normalizeActionId(actionId) { return actionId.trim().toLowerCase().replace(/[^a-z0-9]+/g, \"-\"); } handleSignedInActionClick(action) { this.dispatchEvent( new CustomEvent(\"signed-in-action-click\", { detail: { id: action.id, label: action.label } }) ); } handleRecentUserClick(user) { this.dispatchEvent( new CustomEvent(\"recent-user-click\", { detail: { initials: user.initials, label: user.label } }) ); } handleUsernameInput(event) { const target = event.target; this.username = target.value ?? \"\"; if (this.username) { this.usernameError = \"\"; } } handlePasswordInput(event) { const target = event.target; this.password = target.value ?? \"\"; if (this.password) { this.passwordError = \"\"; } } validateSignIn() { let valid = true; const needsUsername = this.type === \"sign-in\" && this.showUsername; const needsPassword = this.showPassword; if (needsUsername && !this.username) { this.usernameError = msg(\"Username is required\"); valid = false; } if (needsPassword && !this.password) { this.passwordError = msg(\"Password is required\"); valid = false; } return valid; } handleSignInClick() { if (!this.validateSignIn()) { return; } this.dispatchEvent( new CustomEvent(\"sign-in-click\", { detail: { username: this.showUsername ? this.username : void 0, password: this.showPassword ? this.password : void 0 } }) ); } handleSignOutClick() { this.dispatchEvent(new CustomEvent(\"sign-out-click\")); } renderSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=${classMap({ \"login-container\": true, \"signin-only\": !this.showRecentUsers })} > ${this.showUsername ? this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError ) : nothing} ${this.showPassword ? this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError ) : nothing} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=${classMap({ \"login-container\": true, \"signin-only\": !this.showRecentUsers })} > ${this.showUsername ? this.renderTextInput( msg(\"Username\"), HTMLInputTypeAttribute.Text, this.username, this.handleUsernameInput.bind(this), this.usernameError ) : nothing} ${this.showPassword ? this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError ) : nothing} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"divider\" aria-hidden=\"true\"></div> <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderUserSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=${classMap({ \"login-container\": true, \"signin-only\": !this.showRecentUsers })} > <div class=\"user-primary\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"fields\"> ${this.showPassword ? this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError ) : nothing} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> </div> ${this.showRecentUsers ? html` <div class=\"recent-container\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recently signed in\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, true)} </div> </div> ` : nothing} `; } renderUserSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=${classMap({ \"login-container\": true, \"signin-only\": !this.showRecentUsers })} > ${this.showPassword ? this.renderTextInput( msg(\"Password\"), HTMLInputTypeAttribute.Password, this.password, this.handlePasswordInput.bind(this), this.passwordError ) : nothing} <obc-button variant=${ButtonVariant.raised} fullWidth @click=${this.handleSignInClick} > ${msg(\"Sign in\")} </obc-button> </div> ${this.showRecentUsers ? html` <div class=\"divider\" aria-hidden=\"true\"></div> <div class=\"recent-container recent\"> <div class=\"title-container\"> <div class=\"subtitle\">${msg(\"Recent\")}</div> </div> <div class=\"actions-container\"> ${this.renderUserButtons(3, false)} </div> </div> ` : nothing} `; } renderLoadingSignIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"vertical\", \"large\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderLoadingSignInSmall() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"Sign in\")}</h3> </div> <div class=\"user-primary loading\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} <obc-progress-bar class=\"progress\" type=${ProgressBarType.linear} mode=${ProgressBarMode.indeterminate} .showValue=${false} ></obc-progress-bar> </div> `; } renderSignedIn() { return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-primary signed-in\"> ${this.renderUserProfile(\"vertical\", \"large\")} </div> <div class=\"divider\" aria-hidden=\"true\"></div> ${this.signedInActions.length ? html` <div class=\"nav-container\"> ${this.signedInActions.map((action) => { const normalizedId = this.normalizeActionId(action.id); return html` <obc-navigation-item .label=${action.label} hasIcon @click=${() => this.handleSignedInActionClick(action)} > <span slot=\"icon\"> <slot name=\"signed-in-action-icon-${normalizedId}\"> ${this.getSignedInActionIcon(normalizedId)} </slot> </span> </obc-navigation-item> `; })} </div> ` : nothing} <div class=\"button-container\"> <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } renderSignedInSmall() { const primaryAction = this.signedInActions.find( (action) => action.id === this.primaryActionId ); return html` <div class=\"title-container\"> <h3 class=\"title\">${msg(\"User\")}</h3> </div> <div class=\"user-container\"> ${this.renderUserProfile(\"horizontal\", \"regular\")} </div> <div class=\"button-container\"> ${primaryAction ? html` <obc-button variant=${ButtonVariant.normal} fullWidth @click=${() => this.handleSignedInActionClick(primaryAction)} > ${primaryAction.label} </obc-button> ` : nothing} <obc-button variant=${ButtonVariant.normal} fullWidth @click=${this.handleSignOutClick} > ${msg(\"Sign out\")} </obc-button> </div> `; } render() { let content = nothing; if (this.type === \"sign-in\") { content = this.size === \"small\" ? this.renderSignInSmall() : this.renderSignIn(); } if (this.type === \"user-sign-in\") { content = this.size === \"small\" ? this.renderUserSignInSmall() : this.renderUserSignIn(); } if (this.type === \"loading-sign-in\") { content = this.size === \"small\" ? this.renderLoadingSignInSmall() : this.renderLoadingSignIn(); } if (this.type === \"signed-in\") { content = this.size === \"small\" ? this.renderSignedInSmall() : this.renderSignedIn(); } return html` <div class=${classMap({ card: true, [`size-${this.size}`]: true, [`type-${this.type}`]: true })} > ${content} </div> `; } }"
8409
8409
  }
8410
8410
  ],
8411
8411
  "exports": [
@@ -70040,7 +70040,7 @@
70040
70040
  "declarations": [
70041
70041
  {
70042
70042
  "kind": "class",
70043
- "description": "`<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n\nProvides multiple layouts for authentication and account access states, including\nsign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n\n### Features\n- **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n- **Size Options:** Regular and small sizes for compact layouts.\n- **Recent Users:** Optional \"Recently signed in\" section for quick access.\n- **Navigation Actions:** Signed-in state lists the actions it is given.\n\n### Variants\n- `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n- `size`: `regular`, `small`\n\n### Usage Guidelines\nUse `obc-user-menu` in authentication or account panels where quick access to\nsign-in, profile, or account actions is needed. The `user-sign-in` type is\nbest for fast re-auth flows; `loading-sign-in` is for pending auth states.\n\n### Properties and Configuration\n- `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n- `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n- `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n Defaults to `false`.\n- `username` (`string`): Current username value for sign-in layouts.\n- `password` (`string`): Current password value for sign-in layouts.\n- `usernameError` (`string`): Error message for the username field.\n- `passwordError` (`string`): Error message for the password field.\n- `userInitials` (`string`): Initials for the primary user profile.\n- `userLabel` (`string`): Label for the primary user profile.\n- `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n \"Recently signed in\" section. Empty renders no section.\n- `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n signed-in navigation list. Empty renders no actions.\n- `primaryActionId` (`string`): Id of the action promoted to a button in the\n small signed-in layout.\n\n### Events\n- `sign-in-click` – Fired when a sign-in button is clicked.\n- `sign-out-click` – Fired when the sign-out button is clicked.\n- `signed-in-action-click` – Fired when a signed-in action is clicked.\n- `recent-user-click` – Fired when a recent user button is clicked.\n\n### Slots\n- `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n `{id}` is the normalized action id.\n\n### Example\n```html\n<obc-user-menu\n type=\"user-sign-in\"\n size=\"small\"\n hasRecentlySignedIn=\"false\"\n userInitials=\"JD\"\n userLabel=\"John Doe\"\n></obc-user-menu>\n```",
70043
+ "description": "`<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n\nProvides multiple layouts for authentication and account access states, including\nsign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n\n### Features\n- **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n- **Size Options:** Regular and small sizes for compact layouts.\n- **Recent Users:** Optional \"Recently signed in\" section for quick access.\n- **Navigation Actions:** Signed-in state lists the actions it is given.\n\n### Variants\n- `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n- `size`: `regular`, `small`\n\n### Usage Guidelines\nUse `obc-user-menu` in authentication or account panels where quick access to\nsign-in, profile, or account actions is needed. The `user-sign-in` type is\nbest for fast re-auth flows; `loading-sign-in` is for pending auth states.\n\n### Properties and Configuration\n- `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n- `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n- `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n Defaults to `false`.\n- `showUsername` (`boolean`): Toggles the username field. Defaults to `true`.\n- `showPassword` (`boolean`): Toggles the password field. Defaults to `true`.\n- `username` (`string`): Current username value for sign-in layouts.\n- `password` (`string`): Current password value for sign-in layouts.\n- `usernameError` (`string`): Error message for the username field.\n- `passwordError` (`string`): Error message for the password field.\n- `userInitials` (`string`): Initials for the primary user profile.\n- `userLabel` (`string`): Label for the primary user profile.\n- `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n \"Recently signed in\" section. Empty renders no section.\n- `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n signed-in navigation list. Empty renders no actions.\n- `primaryActionId` (`string`): Id of the action promoted to a button in the\n small signed-in layout.\n\n### Events\n- `sign-in-click` – Fired when a sign-in button is clicked.\n- `sign-out-click` – Fired when the sign-out button is clicked.\n- `signed-in-action-click` – Fired when a signed-in action is clicked.\n- `recent-user-click` – Fired when a recent user button is clicked.\n\n### Slots\n- `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n `{id}` is the normalized action id.\n\n### Example\n```html\n<obc-user-menu\n type=\"user-sign-in\"\n size=\"small\"\n hasRecentlySignedIn=\"false\"\n userInitials=\"JD\"\n userLabel=\"John Doe\"\n></obc-user-menu>\n```",
70044
70044
  "name": "ObcUserMenu",
70045
70045
  "slots": [
70046
70046
  {
@@ -70074,6 +70074,15 @@
70074
70074
  "default": "false",
70075
70075
  "description": "Toggles the \"Recently signed in\" section visibility."
70076
70076
  },
70077
+ {
70078
+ "kind": "field",
70079
+ "name": "showUsername",
70080
+ "type": {
70081
+ "text": "boolean"
70082
+ },
70083
+ "default": "true",
70084
+ "description": "Controls the visibility of the username field."
70085
+ },
70077
70086
  {
70078
70087
  "kind": "field",
70079
70088
  "name": "username",
@@ -70083,6 +70092,15 @@
70083
70092
  "default": "''",
70084
70093
  "description": "Current username value for sign-in layouts."
70085
70094
  },
70095
+ {
70096
+ "kind": "field",
70097
+ "name": "showPassword",
70098
+ "type": {
70099
+ "text": "boolean"
70100
+ },
70101
+ "default": "true",
70102
+ "description": "Controls the visibility of the password field."
70103
+ },
70086
70104
  {
70087
70105
  "kind": "field",
70088
70106
  "name": "password",
@@ -70392,7 +70410,7 @@
70392
70410
  {
70393
70411
  "name": "sign-in-click",
70394
70412
  "type": {
70395
- "text": "CustomEvent<{username: string, password: string}>"
70413
+ "text": "CustomEvent<{username?: string, password?: string}>"
70396
70414
  },
70397
70415
  "description": "Fired when a sign-in button is clicked."
70398
70416
  },
package/dist/components/user-menu/user-menu.css.js CHANGED
@@ -65,6 +65,10 @@ const componentStyle = css`* {
65
65
  calc(var(--app-components-user-menu-padding-horizontal) * 2);
66
66
  }
67
67
 
68
+ .signin-only:is(.card .login-container) {
69
+ padding-bottom: var(--app-components-user-menu-padding-vertical);
70
+ }
71
+
68
72
  .card.size-small.type-sign-in .login-container,.card.size-small.type-user-sign-in .login-container {
69
73
  padding-bottom: var(--app-components-user-menu-padding-vertical);
70
74
  }
package/dist/components/user-menu/user-menu.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"user-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"user-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/user-menu/user-menu.d.ts CHANGED
@@ -52,6 +52,8 @@ export type ObcUserMenuSignedInAction = {
52
52
  * - `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.
53
53
  * - `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.
54
54
  * Defaults to `false`.
55
+ * - `showUsername` (`boolean`): Toggles the username field. Defaults to `true`.
56
+ * - `showPassword` (`boolean`): Toggles the password field. Defaults to `true`.
55
57
  * - `username` (`string`): Current username value for sign-in layouts.
56
58
  * - `password` (`string`): Current password value for sign-in layouts.
57
59
  * - `usernameError` (`string`): Error message for the username field.
@@ -91,9 +93,9 @@ export type ObcUserMenuSignedInAction = {
91
93
  * @property hasRecentlySignedIn - Toggles the "Recently signed in" section visibility.
92
94
  * @availableWhen hasRecentlySignedIn type in [signIn, userSignIn]
93
95
  * @property username - Current username value for sign-in layouts.
94
- * @availableWhen username type==signIn
96
+ * @availableWhen username showUsername==true && type==signIn
95
97
  * @property password - Current password value for sign-in layouts.
96
- * @availableWhen password type in [signIn, userSignIn]
98
+ * @availableWhen password showPassword==true && type in [signIn, userSignIn]
97
99
  * @property usernameError - Error message for the username field.
98
100
  * @availableWhen usernameError type==signIn
99
101
  * @property passwordError - Error message for the password field.
@@ -105,10 +107,14 @@ export type ObcUserMenuSignedInAction = {
105
107
  * @property recentUsers - Recent users for the "Recently signed in" section.
106
108
  * @property signedInActions - Actions shown in the signed-in navigation list.
107
109
  * @availableWhen signedInActions type==signedIn
110
+ * @property showUsername - Controls the visibility of the username field.
111
+ * @availableWhen showUsername type==signIn
112
+ * @property showPassword - Controls the visibility of the password field.
113
+ * @availableWhen showPassword type in [signIn, userSignIn]
108
114
  * @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.
109
115
  * @availableWhen primaryActionId type==signedIn && size==small
110
116
  * @slot signed-in-action-icon-<id> - Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).
111
- * @fires {CustomEvent<{username: string, password: string}>} sign-in-click - Fired when a sign-in button is clicked.
117
+ * @fires {CustomEvent<{username?: string, password?: string}>} sign-in-click - Fired when a sign-in button is clicked.
112
118
  * @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.
113
119
  * @fires {CustomEvent<{id: string, label: string}>} signed-in-action-click - Fired when a signed-in action is clicked.
114
120
  * @fires {CustomEvent<{initials: string, label: string}>} recent-user-click - Fired when a recent user button is clicked.
@@ -121,8 +127,12 @@ export declare class ObcUserMenu extends LitElement {
121
127
  size: ObcUserMenuSize;
122
128
  /** Toggles the "Recently signed in" section visibility. */
123
129
  hasRecentlySignedIn: boolean;
130
+ /** Controls the visibility of the username field. */
131
+ showUsername: boolean;
124
132
  /** Current username value for sign-in layouts. */
125
133
  username: string;
134
+ /** Controls the visibility of the password field. */
135
+ showPassword: boolean;
126
136
  /** Current password value for sign-in layouts. */
127
137
  password: string;
128
138
  /** Error message for the username field. */
package/dist/components/user-menu/user-menu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../src/components/user-menu/user-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAalC,oBAAY,eAAe;IACzB,MAAM,YAAY;IAClB,UAAU,iBAAiB;IAC3B,aAAa,oBAAoB;IACjC,QAAQ,cAAc;CACvB;AAED,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,qBAEa,WAAY,SAAQ,UAAU;IACf,IAAI,EAAE,eAAe,CAA0B;IAE/C,IAAI,EAAE,eAAe,CAA2B;IAG1E,mBAAmB,UAAS;IAEF,QAAQ,SAAM;IAEd,QAAQ,SAAM;IAEd,aAAa,SAAM;IAEnB,aAAa,SAAM;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAG7C,WAAW,EAAE,eAAe,EAAE,CAAM;IAGpC,eAAe,EAAE,yBAAyB,EAAE,CAAM;IAExB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEnD,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,iBAAiB;IA8BzB,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IA2CpB,OAAO,CAAC,iBAAiB;IA4CzB,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,qBAAqB;IAwC7B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IAiBhC,OAAO,CAAC,cAAc;IA2CtB,OAAO,CAAC,mBAAmB;IAkClB,MAAM;IAwCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
1
+ {"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../src/components/user-menu/user-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAalC,oBAAY,eAAe;IACzB,MAAM,YAAY;IAClB,UAAU,iBAAiB;IAC3B,aAAa,oBAAoB;IACjC,QAAQ,cAAc;CACvB;AAED,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,qBAEa,WAAY,SAAQ,UAAU;IACf,IAAI,EAAE,eAAe,CAA0B;IAE/C,IAAI,EAAE,eAAe,CAA2B;IAG1E,mBAAmB,UAAS;IAG5B,YAAY,UAAQ;IAEM,QAAQ,SAAM;IAGxC,YAAY,UAAQ;IAEM,QAAQ,SAAM;IAEd,aAAa,SAAM;IAEnB,aAAa,SAAM;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAG7C,WAAW,EAAE,eAAe,EAAE,CAAM;IAGpC,eAAe,EAAE,yBAAyB,EAAE,CAAM;IAExB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEnD,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,iBAAiB;IA8BzB,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAoDpB,OAAO,CAAC,iBAAiB;IAqDzB,OAAO,CAAC,gBAAgB;IAgDxB,OAAO,CAAC,qBAAqB;IA+C7B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IAiBhC,OAAO,CAAC,cAAc;IA2CtB,OAAO,CAAC,mBAAmB;IAkClB,MAAM;IAwCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
package/dist/components/user-menu/user-menu.js CHANGED
@@ -41,7 +41,9 @@ let ObcUserMenu = class extends LitElement {
41
41
  this.type = "sign-in";
42
42
  this.size = "regular";
43
43
  this.hasRecentlySignedIn = false;
44
+ this.showUsername = true;
44
45
  this.username = "";
46
+ this.showPassword = true;
45
47
  this.password = "";
46
48
  this.usernameError = "";
47
49
  this.passwordError = "";
@@ -167,12 +169,13 @@ let ObcUserMenu = class extends LitElement {
167
169
  }
168
170
  validateSignIn() {
169
171
  let valid = true;
170
- const needsUsername = this.type === "sign-in";
172
+ const needsUsername = this.type === "sign-in" && this.showUsername;
173
+ const needsPassword = this.showPassword;
171
174
  if (needsUsername && !this.username) {
172
175
  this.usernameError = msg("Username is required");
173
176
  valid = false;
174
177
  }
175
- if (!this.password) {
178
+ if (needsPassword && !this.password) {
176
179
  this.passwordError = msg("Password is required");
177
180
  valid = false;
178
181
  }
@@ -184,7 +187,10 @@ let ObcUserMenu = class extends LitElement {
184
187
  }
185
188
  this.dispatchEvent(
186
189
  new CustomEvent("sign-in-click", {
187
- detail: { username: this.username, password: this.password }
190
+ detail: {
191
+ username: this.showUsername ? this.username : void 0,
192
+ password: this.showPassword ? this.password : void 0
193
+ }
188
194
  })
189
195
  );
190
196
  }
@@ -196,21 +202,26 @@ let ObcUserMenu = class extends LitElement {
196
202
  <div class="title-container">
197
203
  <h3 class="title">${msg("Sign in")}</h3>
198
204
  </div>
199
- <div class="login-container">
200
- ${this.renderTextInput(
205
+ <div
206
+ class=${classMap({
207
+ "login-container": true,
208
+ "signin-only": !this.showRecentUsers
209
+ })}
210
+ >
211
+ ${this.showUsername ? this.renderTextInput(
201
212
  msg("Username"),
202
213
  HTMLInputTypeAttribute.Text,
203
214
  this.username,
204
215
  this.handleUsernameInput.bind(this),
205
216
  this.usernameError
206
- )}
207
- ${this.renderTextInput(
217
+ ) : nothing}
218
+ ${this.showPassword ? this.renderTextInput(
208
219
  msg("Password"),
209
220
  HTMLInputTypeAttribute.Password,
210
221
  this.password,
211
222
  this.handlePasswordInput.bind(this),
212
223
  this.passwordError
213
- )}
224
+ ) : nothing}
214
225
  <obc-button
215
226
  variant=${ButtonVariant.raised}
216
227
  fullWidth
@@ -236,21 +247,26 @@ let ObcUserMenu = class extends LitElement {
236
247
  <div class="title-container">
237
248
  <h3 class="title">${msg("Sign in")}</h3>
238
249
  </div>
239
- <div class="login-container">
240
- ${this.renderTextInput(
250
+ <div
251
+ class=${classMap({
252
+ "login-container": true,
253
+ "signin-only": !this.showRecentUsers
254
+ })}
255
+ >
256
+ ${this.showUsername ? this.renderTextInput(
241
257
  msg("Username"),
242
258
  HTMLInputTypeAttribute.Text,
243
259
  this.username,
244
260
  this.handleUsernameInput.bind(this),
245
261
  this.usernameError
246
- )}
247
- ${this.renderTextInput(
262
+ ) : nothing}
263
+ ${this.showPassword ? this.renderTextInput(
248
264
  msg("Password"),
249
265
  HTMLInputTypeAttribute.Password,
250
266
  this.password,
251
267
  this.handlePasswordInput.bind(this),
252
268
  this.passwordError
253
- )}
269
+ ) : nothing}
254
270
  <obc-button
255
271
  variant=${ButtonVariant.raised}
256
272
  fullWidth
@@ -277,18 +293,23 @@ let ObcUserMenu = class extends LitElement {
277
293
  <div class="title-container">
278
294
  <h3 class="title">${msg("Sign in")}</h3>
279
295
  </div>
280
- <div class="login-container">
296
+ <div
297
+ class=${classMap({
298
+ "login-container": true,
299
+ "signin-only": !this.showRecentUsers
300
+ })}
301
+ >
281
302
  <div class="user-primary">
282
303
  ${this.renderUserProfile("vertical", "large")}
283
304
  </div>
284
305
  <div class="fields">
285
- ${this.renderTextInput(
306
+ ${this.showPassword ? this.renderTextInput(
286
307
  msg("Password"),
287
308
  HTMLInputTypeAttribute.Password,
288
309
  this.password,
289
310
  this.handlePasswordInput.bind(this),
290
311
  this.passwordError
291
- )}
312
+ ) : nothing}
292
313
  <obc-button
293
314
  variant=${ButtonVariant.raised}
294
315
  fullWidth
@@ -318,14 +339,19 @@ let ObcUserMenu = class extends LitElement {
318
339
  <div class="user-container">
319
340
  ${this.renderUserProfile("horizontal", "regular")}
320
341
  </div>
321
- <div class="login-container">
322
- ${this.renderTextInput(
342
+ <div
343
+ class=${classMap({
344
+ "login-container": true,
345
+ "signin-only": !this.showRecentUsers
346
+ })}
347
+ >
348
+ ${this.showPassword ? this.renderTextInput(
323
349
  msg("Password"),
324
350
  HTMLInputTypeAttribute.Password,
325
351
  this.password,
326
352
  this.handlePasswordInput.bind(this),
327
353
  this.passwordError
328
- )}
354
+ ) : nothing}
329
355
  <obc-button
330
356
  variant=${ButtonVariant.raised}
331
357
  fullWidth
@@ -487,9 +513,15 @@ __decorateClass([
487
513
  __decorateClass([
488
514
  property({ type: Boolean })
489
515
  ], ObcUserMenu.prototype, "hasRecentlySignedIn", 2);
516
+ __decorateClass([
517
+ property({ type: Boolean, attribute: false })
518
+ ], ObcUserMenu.prototype, "showUsername", 2);
490
519
  __decorateClass([
491
520
  property({ type: String })
492
521
  ], ObcUserMenu.prototype, "username", 2);
522
+ __decorateClass([
523
+ property({ type: Boolean, attribute: false })
524
+ ], ObcUserMenu.prototype, "showPassword", 2);
493
525
  __decorateClass([
494
526
  property({ type: String })
495
527
  ], ObcUserMenu.prototype, "password", 2);
package/dist/components/user-menu/user-menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"user-menu.js","sources":["../../../src/components/user-menu/user-menu.ts"],"sourcesContent":["import {LitElement, TemplateResult, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './user-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../button/button.js';\nimport '../user-button/user-button.js';\nimport '../progress-bar/progress-bar.js';\nimport '../navigation-item/navigation-item.js';\nimport '../../icons/icon-calendar-google.js';\nimport '../../icons/icon-log-open-google.js';\nimport '../../icons/icon-settings-iec.js';\nimport '../../icons/icon-user.js';\nimport {\n HTMLInputTypeAttribute,\n ObcTextInputFieldTextAlign,\n} from '../text-input-field/text-input-field.js';\nimport {ButtonVariant} from '../button/button.js';\nimport {\n ProgressBarMode,\n ProgressBarType,\n} from '../progress-bar/progress-bar.js';\nimport {Size, StyleType, Variant} from '../user-button/user-button.js';\nimport {localized, msg} from '@lit/localize';\n\nexport enum ObcUserMenuType {\n signIn = 'sign-in',\n userSignIn = 'user-sign-in',\n loadingSignIn = 'loading-sign-in',\n signedIn = 'signed-in',\n}\n\nexport enum ObcUserMenuSize {\n regular = 'regular',\n small = 'small',\n}\n\nexport type ObcUserMenuUser = {\n initials: string;\n label: string;\n};\n\nexport type ObcUserMenuSignedInAction = {\n id: string;\n label: string;\n};\n\n/**\n * `<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n *\n * Provides multiple layouts for authentication and account access states, including\n * sign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n *\n * ### Features\n * - **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n * - **Size Options:** Regular and small sizes for compact layouts.\n * - **Recent Users:** Optional \"Recently signed in\" section for quick access.\n * - **Navigation Actions:** Signed-in state lists the actions it is given.\n *\n * ### Variants\n * - `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n * - `size`: `regular`, `small`\n *\n * ### Usage Guidelines\n * Use `obc-user-menu` in authentication or account panels where quick access to\n * sign-in, profile, or account actions is needed. The `user-sign-in` type is\n * best for fast re-auth flows; `loading-sign-in` is for pending auth states.\n *\n * ### Properties and Configuration\n * - `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n * - `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n * - `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n * Defaults to `false`.\n * - `username` (`string`): Current username value for sign-in layouts.\n * - `password` (`string`): Current password value for sign-in layouts.\n * - `usernameError` (`string`): Error message for the username field.\n * - `passwordError` (`string`): Error message for the password field.\n * - `userInitials` (`string`): Initials for the primary user profile.\n * - `userLabel` (`string`): Label for the primary user profile.\n * - `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n * \"Recently signed in\" section. Empty renders no section.\n * - `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n * signed-in navigation list. Empty renders no actions.\n * - `primaryActionId` (`string`): Id of the action promoted to a button in the\n * small signed-in layout.\n *\n * ### Events\n * - `sign-in-click` – Fired when a sign-in button is clicked.\n * - `sign-out-click` – Fired when the sign-out button is clicked.\n * - `signed-in-action-click` – Fired when a signed-in action is clicked.\n * - `recent-user-click` – Fired when a recent user button is clicked.\n *\n * ### Slots\n * - `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n * `{id}` is the normalized action id.\n *\n * ### Example\n * ```html\n * <obc-user-menu\n * type=\"user-sign-in\"\n * size=\"small\"\n * hasRecentlySignedIn=\"false\"\n * userInitials=\"JD\"\n * userLabel=\"John Doe\"\n * ></obc-user-menu>\n * ```\n *\n * @property type - Controls the visual layout of the user menu.\n * @property size - Controls the overall size of the user menu.\n * @property hasRecentlySignedIn - Toggles the \"Recently signed in\" section visibility.\n * @availableWhen hasRecentlySignedIn type in [signIn, userSignIn]\n * @property username - Current username value for sign-in layouts.\n * @availableWhen username type==signIn\n * @property password - Current password value for sign-in layouts.\n * @availableWhen password type in [signIn, userSignIn]\n * @property usernameError - Error message for the username field.\n * @availableWhen usernameError type==signIn\n * @property passwordError - Error message for the password field.\n * @availableWhen passwordError type in [signIn, userSignIn]\n * @property userInitials - Initials for the primary user profile.\n * @availableWhen userInitials type!=signIn\n * @property userLabel - Label for the primary user profile.\n * @availableWhen userLabel type!=signIn\n * @property recentUsers - Recent users for the \"Recently signed in\" section.\n * @property signedInActions - Actions shown in the signed-in navigation list.\n * @availableWhen signedInActions type==signedIn\n * @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.\n * @availableWhen primaryActionId type==signedIn && size==small\n * @slot signed-in-action-icon-<id> - Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).\n * @fires {CustomEvent<{username: string, password: string}>} sign-in-click - Fired when a sign-in button is clicked.\n * @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.\n * @fires {CustomEvent<{id: string, label: string}>} signed-in-action-click - Fired when a signed-in action is clicked.\n * @fires {CustomEvent<{initials: string, label: string}>} recent-user-click - Fired when a recent user button is clicked.\n * @stable\n */\n@customElement('obc-user-menu')\n@localized()\nexport class ObcUserMenu extends LitElement {\n @property({type: String}) type: ObcUserMenuType = ObcUserMenuType.signIn;\n\n @property({type: String}) size: ObcUserMenuSize = ObcUserMenuSize.regular;\n\n @property({type: Boolean})\n hasRecentlySignedIn = false;\n\n @property({type: String}) username = '';\n\n @property({type: String}) password = '';\n\n @property({type: String}) usernameError = '';\n\n @property({type: String}) passwordError = '';\n\n @property({type: String}) userInitials?: string;\n\n @property({type: String}) userLabel?: string;\n\n @property({type: Array, attribute: false})\n recentUsers: ObcUserMenuUser[] = [];\n\n @property({type: Array, attribute: false})\n signedInActions: ObcUserMenuSignedInAction[] = [];\n\n @property({type: String}) primaryActionId?: string;\n\n private get showRecentUsers() {\n return this.hasRecentlySignedIn && this.recentUsers.length > 0;\n }\n\n private renderTextInput(\n placeholder: string,\n type: HTMLInputTypeAttribute = HTMLInputTypeAttribute.Text,\n value = '',\n onInput?: (event: Event) => void,\n errorText = ''\n ) {\n const isPassword = type === HTMLInputTypeAttribute.Password;\n return html`\n <obc-text-input-field\n .placeholder=${placeholder}\n .type=${type}\n .textAlign=${ObcTextInputFieldTextAlign.Left}\n .value=${value}\n .error=${Boolean(errorText)}\n .errorText=${errorText}\n .required=${true}\n .hasClearButton=${!isPassword}\n @input=${onInput}\n >\n </obc-text-input-field>\n `;\n }\n\n private renderUserButtons(count: number, isLarge: boolean) {\n const size = isLarge ? Size.large : Size.regular;\n const users = this.recentUsers.slice(0, count);\n return html`\n <div\n class=${classMap({\n users: true,\n large: isLarge,\n single: users.length === 1,\n })}\n >\n ${users.map(\n (user) => html`\n <obc-user-button\n .variant=${Variant.initials}\n .styleType=${StyleType.normal}\n .size=${size}\n .initials=${user.initials}\n .label=${user.label}\n @click=${() => this.handleRecentUserClick(user)}\n ></obc-user-button>\n `\n )}\n </div>\n `;\n }\n\n private renderUserProfile(\n layout: 'vertical' | 'horizontal',\n size: 'large' | 'regular'\n ) {\n if (!this.userInitials && !this.userLabel) {\n return nothing;\n }\n const userButtonSize = size === 'large' ? Size.large : Size.regular;\n return html`\n <div\n class=${classMap({\n 'user-profile': true,\n [layout]: true,\n })}\n >\n <obc-user-button\n class=${classMap({\n 'user-avatar': true,\n [`size-${size}`]: true,\n })}\n .variant=${Variant.initials}\n .styleType=${StyleType.normal}\n .size=${userButtonSize}\n .initials=${this.userInitials ?? ''}\n .label=${this.userLabel ?? ''}\n ></obc-user-button>\n </div>\n `;\n }\n\n private getSignedInActionIcon(actionId: string) {\n switch (actionId) {\n case 'calendar':\n return html`<obi-calendar-google></obi-calendar-google>`;\n case 'log':\n return html`<obi-log-open-google></obi-log-open-google>`;\n case 'preferences':\n return html`<obi-settings-iec></obi-settings-iec>`;\n case 'user-account':\n return html`<obi-user></obi-user>`;\n default:\n return nothing;\n }\n }\n\n private normalizeActionId(actionId: string) {\n return actionId\n .trim()\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-');\n }\n\n private handleSignedInActionClick(action: ObcUserMenuSignedInAction) {\n this.dispatchEvent(\n new CustomEvent('signed-in-action-click', {\n detail: {id: action.id, label: action.label},\n })\n );\n }\n\n private handleRecentUserClick(user: ObcUserMenuUser) {\n this.dispatchEvent(\n new CustomEvent('recent-user-click', {\n detail: {initials: user.initials, label: user.label},\n })\n );\n }\n\n private handleUsernameInput(event: Event) {\n const target = event.target as {value?: string};\n this.username = target.value ?? '';\n if (this.username) {\n this.usernameError = '';\n }\n }\n\n private handlePasswordInput(event: Event) {\n const target = event.target as {value?: string};\n this.password = target.value ?? '';\n if (this.password) {\n this.passwordError = '';\n }\n }\n\n private validateSignIn() {\n let valid = true;\n const needsUsername = this.type === ObcUserMenuType.signIn;\n\n if (needsUsername && !this.username) {\n this.usernameError = msg('Username is required');\n valid = false;\n }\n\n if (!this.password) {\n this.passwordError = msg('Password is required');\n valid = false;\n }\n\n return valid;\n }\n\n private handleSignInClick() {\n if (!this.validateSignIn()) {\n return;\n }\n this.dispatchEvent(\n new CustomEvent('sign-in-click', {\n detail: {username: this.username, password: this.password},\n })\n );\n }\n\n private handleSignOutClick() {\n this.dispatchEvent(new CustomEvent('sign-out-click'));\n }\n\n private renderSignIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"login-container\">\n ${this.renderTextInput(\n msg('Username'),\n HTMLInputTypeAttribute.Text,\n this.username,\n this.handleUsernameInput.bind(this),\n this.usernameError\n )}\n ${this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"recent-container\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recently signed in')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, true)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderSignInSmall() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"login-container\">\n ${this.renderTextInput(\n msg('Username'),\n HTMLInputTypeAttribute.Text,\n this.username,\n this.handleUsernameInput.bind(this),\n this.usernameError\n )}\n ${this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"divider\" aria-hidden=\"true\"></div>\n <div class=\"recent-container recent\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recent')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, false)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderUserSignIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"login-container\">\n <div class=\"user-primary\">\n ${this.renderUserProfile('vertical', 'large')}\n </div>\n <div class=\"fields\">\n ${this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"recent-container\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recently signed in')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, true)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderUserSignInSmall() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"user-container\">\n ${this.renderUserProfile('horizontal', 'regular')}\n </div>\n <div class=\"login-container\">\n ${this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"divider\" aria-hidden=\"true\"></div>\n <div class=\"recent-container recent\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recent')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, false)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderLoadingSignIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"user-primary loading\">\n ${this.renderUserProfile('vertical', 'large')}\n <obc-progress-bar\n class=\"progress\"\n type=${ProgressBarType.linear}\n mode=${ProgressBarMode.indeterminate}\n .showValue=${false}\n ></obc-progress-bar>\n </div>\n `;\n }\n\n private renderLoadingSignInSmall() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"user-primary loading\">\n ${this.renderUserProfile('horizontal', 'regular')}\n <obc-progress-bar\n class=\"progress\"\n type=${ProgressBarType.linear}\n mode=${ProgressBarMode.indeterminate}\n .showValue=${false}\n ></obc-progress-bar>\n </div>\n `;\n }\n\n private renderSignedIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('User')}</h3>\n </div>\n <div class=\"user-primary signed-in\">\n ${this.renderUserProfile('vertical', 'large')}\n </div>\n <div class=\"divider\" aria-hidden=\"true\"></div>\n ${this.signedInActions.length\n ? html`\n <div class=\"nav-container\">\n ${this.signedInActions.map((action) => {\n const normalizedId = this.normalizeActionId(action.id);\n return html`\n <obc-navigation-item\n .label=${action.label}\n hasIcon\n @click=${() => this.handleSignedInActionClick(action)}\n >\n <span slot=\"icon\">\n <slot name=\"signed-in-action-icon-${normalizedId}\">\n ${this.getSignedInActionIcon(normalizedId)}\n </slot>\n </span>\n </obc-navigation-item>\n `;\n })}\n </div>\n `\n : nothing}\n <div class=\"button-container\">\n <obc-button\n variant=${ButtonVariant.normal}\n fullWidth\n @click=${this.handleSignOutClick}\n >\n ${msg('Sign out')}\n </obc-button>\n </div>\n `;\n }\n\n private renderSignedInSmall() {\n const primaryAction = this.signedInActions.find(\n (action) => action.id === this.primaryActionId\n );\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('User')}</h3>\n </div>\n <div class=\"user-container\">\n ${this.renderUserProfile('horizontal', 'regular')}\n </div>\n <div class=\"button-container\">\n ${primaryAction\n ? html`\n <obc-button\n variant=${ButtonVariant.normal}\n fullWidth\n @click=${() => this.handleSignedInActionClick(primaryAction)}\n >\n ${primaryAction.label}\n </obc-button>\n `\n : nothing}\n <obc-button\n variant=${ButtonVariant.normal}\n fullWidth\n @click=${this.handleSignOutClick}\n >\n ${msg('Sign out')}\n </obc-button>\n </div>\n `;\n }\n\n override render() {\n let content: TemplateResult | symbol = nothing;\n if (this.type === ObcUserMenuType.signIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderSignInSmall()\n : this.renderSignIn();\n }\n if (this.type === ObcUserMenuType.userSignIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderUserSignInSmall()\n : this.renderUserSignIn();\n }\n if (this.type === ObcUserMenuType.loadingSignIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderLoadingSignInSmall()\n : this.renderLoadingSignIn();\n }\n if (this.type === ObcUserMenuType.signedIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderSignedInSmall()\n : this.renderSignedIn();\n }\n\n return html`\n <div\n class=${classMap({\n card: true,\n [`size-${this.size}`]: true,\n [`type-${this.type}`]: true,\n })}\n >\n ${content}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-user-menu': ObcUserMenu;\n }\n}\n"],"names":["ObcUserMenuType","ObcUserMenuSize"],"mappings":"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"}
1
+ {"version":3,"file":"user-menu.js","sources":["../../../src/components/user-menu/user-menu.ts"],"sourcesContent":["import {LitElement, TemplateResult, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './user-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../button/button.js';\nimport '../user-button/user-button.js';\nimport '../progress-bar/progress-bar.js';\nimport '../navigation-item/navigation-item.js';\nimport '../../icons/icon-calendar-google.js';\nimport '../../icons/icon-log-open-google.js';\nimport '../../icons/icon-settings-iec.js';\nimport '../../icons/icon-user.js';\nimport {\n HTMLInputTypeAttribute,\n ObcTextInputFieldTextAlign,\n} from '../text-input-field/text-input-field.js';\nimport {ButtonVariant} from '../button/button.js';\nimport {\n ProgressBarMode,\n ProgressBarType,\n} from '../progress-bar/progress-bar.js';\nimport {Size, StyleType, Variant} from '../user-button/user-button.js';\nimport {localized, msg} from '@lit/localize';\n\nexport enum ObcUserMenuType {\n signIn = 'sign-in',\n userSignIn = 'user-sign-in',\n loadingSignIn = 'loading-sign-in',\n signedIn = 'signed-in',\n}\n\nexport enum ObcUserMenuSize {\n regular = 'regular',\n small = 'small',\n}\n\nexport type ObcUserMenuUser = {\n initials: string;\n label: string;\n};\n\nexport type ObcUserMenuSignedInAction = {\n id: string;\n label: string;\n};\n\n/**\n * `<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n *\n * Provides multiple layouts for authentication and account access states, including\n * sign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n *\n * ### Features\n * - **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n * - **Size Options:** Regular and small sizes for compact layouts.\n * - **Recent Users:** Optional \"Recently signed in\" section for quick access.\n * - **Navigation Actions:** Signed-in state lists the actions it is given.\n *\n * ### Variants\n * - `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n * - `size`: `regular`, `small`\n *\n * ### Usage Guidelines\n * Use `obc-user-menu` in authentication or account panels where quick access to\n * sign-in, profile, or account actions is needed. The `user-sign-in` type is\n * best for fast re-auth flows; `loading-sign-in` is for pending auth states.\n *\n * ### Properties and Configuration\n * - `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n * - `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n * - `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n * Defaults to `false`.\n * - `showUsername` (`boolean`): Toggles the username field. Defaults to `true`.\n * - `showPassword` (`boolean`): Toggles the password field. Defaults to `true`.\n * - `username` (`string`): Current username value for sign-in layouts.\n * - `password` (`string`): Current password value for sign-in layouts.\n * - `usernameError` (`string`): Error message for the username field.\n * - `passwordError` (`string`): Error message for the password field.\n * - `userInitials` (`string`): Initials for the primary user profile.\n * - `userLabel` (`string`): Label for the primary user profile.\n * - `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n * \"Recently signed in\" section. Empty renders no section.\n * - `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n * signed-in navigation list. Empty renders no actions.\n * - `primaryActionId` (`string`): Id of the action promoted to a button in the\n * small signed-in layout.\n *\n * ### Events\n * - `sign-in-click` – Fired when a sign-in button is clicked.\n * - `sign-out-click` – Fired when the sign-out button is clicked.\n * - `signed-in-action-click` – Fired when a signed-in action is clicked.\n * - `recent-user-click` – Fired when a recent user button is clicked.\n *\n * ### Slots\n * - `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n * `{id}` is the normalized action id.\n *\n * ### Example\n * ```html\n * <obc-user-menu\n * type=\"user-sign-in\"\n * size=\"small\"\n * hasRecentlySignedIn=\"false\"\n * userInitials=\"JD\"\n * userLabel=\"John Doe\"\n * ></obc-user-menu>\n * ```\n *\n * @property type - Controls the visual layout of the user menu.\n * @property size - Controls the overall size of the user menu.\n * @property hasRecentlySignedIn - Toggles the \"Recently signed in\" section visibility.\n * @availableWhen hasRecentlySignedIn type in [signIn, userSignIn]\n * @property username - Current username value for sign-in layouts.\n * @availableWhen username showUsername==true && type==signIn\n * @property password - Current password value for sign-in layouts.\n * @availableWhen password showPassword==true && type in [signIn, userSignIn]\n * @property usernameError - Error message for the username field.\n * @availableWhen usernameError type==signIn\n * @property passwordError - Error message for the password field.\n * @availableWhen passwordError type in [signIn, userSignIn]\n * @property userInitials - Initials for the primary user profile.\n * @availableWhen userInitials type!=signIn\n * @property userLabel - Label for the primary user profile.\n * @availableWhen userLabel type!=signIn\n * @property recentUsers - Recent users for the \"Recently signed in\" section.\n * @property signedInActions - Actions shown in the signed-in navigation list.\n * @availableWhen signedInActions type==signedIn\n * @property showUsername - Controls the visibility of the username field.\n * @availableWhen showUsername type==signIn\n * @property showPassword - Controls the visibility of the password field.\n * @availableWhen showPassword type in [signIn, userSignIn]\n * @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.\n * @availableWhen primaryActionId type==signedIn && size==small\n * @slot signed-in-action-icon-<id> - Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).\n * @fires {CustomEvent<{username?: string, password?: string}>} sign-in-click - Fired when a sign-in button is clicked.\n * @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.\n * @fires {CustomEvent<{id: string, label: string}>} signed-in-action-click - Fired when a signed-in action is clicked.\n * @fires {CustomEvent<{initials: string, label: string}>} recent-user-click - Fired when a recent user button is clicked.\n * @stable\n */\n@customElement('obc-user-menu')\n@localized()\nexport class ObcUserMenu extends LitElement {\n @property({type: String}) type: ObcUserMenuType = ObcUserMenuType.signIn;\n\n @property({type: String}) size: ObcUserMenuSize = ObcUserMenuSize.regular;\n\n @property({type: Boolean})\n hasRecentlySignedIn = false;\n\n @property({type: Boolean, attribute: false})\n showUsername = true;\n\n @property({type: String}) username = '';\n\n @property({type: Boolean, attribute: false})\n showPassword = true;\n\n @property({type: String}) password = '';\n\n @property({type: String}) usernameError = '';\n\n @property({type: String}) passwordError = '';\n\n @property({type: String}) userInitials?: string;\n\n @property({type: String}) userLabel?: string;\n\n @property({type: Array, attribute: false})\n recentUsers: ObcUserMenuUser[] = [];\n\n @property({type: Array, attribute: false})\n signedInActions: ObcUserMenuSignedInAction[] = [];\n\n @property({type: String}) primaryActionId?: string;\n\n private get showRecentUsers() {\n return this.hasRecentlySignedIn && this.recentUsers.length > 0;\n }\n\n private renderTextInput(\n placeholder: string,\n type: HTMLInputTypeAttribute = HTMLInputTypeAttribute.Text,\n value = '',\n onInput?: (event: Event) => void,\n errorText = ''\n ) {\n const isPassword = type === HTMLInputTypeAttribute.Password;\n return html`\n <obc-text-input-field\n .placeholder=${placeholder}\n .type=${type}\n .textAlign=${ObcTextInputFieldTextAlign.Left}\n .value=${value}\n .error=${Boolean(errorText)}\n .errorText=${errorText}\n .required=${true}\n .hasClearButton=${!isPassword}\n @input=${onInput}\n >\n </obc-text-input-field>\n `;\n }\n\n private renderUserButtons(count: number, isLarge: boolean) {\n const size = isLarge ? Size.large : Size.regular;\n const users = this.recentUsers.slice(0, count);\n return html`\n <div\n class=${classMap({\n users: true,\n large: isLarge,\n single: users.length === 1,\n })}\n >\n ${users.map(\n (user) => html`\n <obc-user-button\n .variant=${Variant.initials}\n .styleType=${StyleType.normal}\n .size=${size}\n .initials=${user.initials}\n .label=${user.label}\n @click=${() => this.handleRecentUserClick(user)}\n ></obc-user-button>\n `\n )}\n </div>\n `;\n }\n\n private renderUserProfile(\n layout: 'vertical' | 'horizontal',\n size: 'large' | 'regular'\n ) {\n if (!this.userInitials && !this.userLabel) {\n return nothing;\n }\n const userButtonSize = size === 'large' ? Size.large : Size.regular;\n return html`\n <div\n class=${classMap({\n 'user-profile': true,\n [layout]: true,\n })}\n >\n <obc-user-button\n class=${classMap({\n 'user-avatar': true,\n [`size-${size}`]: true,\n })}\n .variant=${Variant.initials}\n .styleType=${StyleType.normal}\n .size=${userButtonSize}\n .initials=${this.userInitials ?? ''}\n .label=${this.userLabel ?? ''}\n ></obc-user-button>\n </div>\n `;\n }\n\n private getSignedInActionIcon(actionId: string) {\n switch (actionId) {\n case 'calendar':\n return html`<obi-calendar-google></obi-calendar-google>`;\n case 'log':\n return html`<obi-log-open-google></obi-log-open-google>`;\n case 'preferences':\n return html`<obi-settings-iec></obi-settings-iec>`;\n case 'user-account':\n return html`<obi-user></obi-user>`;\n default:\n return nothing;\n }\n }\n\n private normalizeActionId(actionId: string) {\n return actionId\n .trim()\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-');\n }\n\n private handleSignedInActionClick(action: ObcUserMenuSignedInAction) {\n this.dispatchEvent(\n new CustomEvent('signed-in-action-click', {\n detail: {id: action.id, label: action.label},\n })\n );\n }\n\n private handleRecentUserClick(user: ObcUserMenuUser) {\n this.dispatchEvent(\n new CustomEvent('recent-user-click', {\n detail: {initials: user.initials, label: user.label},\n })\n );\n }\n\n private handleUsernameInput(event: Event) {\n const target = event.target as {value?: string};\n this.username = target.value ?? '';\n if (this.username) {\n this.usernameError = '';\n }\n }\n\n private handlePasswordInput(event: Event) {\n const target = event.target as {value?: string};\n this.password = target.value ?? '';\n if (this.password) {\n this.passwordError = '';\n }\n }\n\n private validateSignIn() {\n let valid = true;\n const needsUsername =\n this.type === ObcUserMenuType.signIn && this.showUsername;\n const needsPassword = this.showPassword;\n\n if (needsUsername && !this.username) {\n this.usernameError = msg('Username is required');\n valid = false;\n }\n\n if (needsPassword && !this.password) {\n this.passwordError = msg('Password is required');\n valid = false;\n }\n\n return valid;\n }\n\n private handleSignInClick() {\n if (!this.validateSignIn()) {\n return;\n }\n this.dispatchEvent(\n new CustomEvent('sign-in-click', {\n detail: {\n username: this.showUsername ? this.username : undefined,\n password: this.showPassword ? this.password : undefined,\n },\n })\n );\n }\n\n private handleSignOutClick() {\n this.dispatchEvent(new CustomEvent('sign-out-click'));\n }\n\n private renderSignIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div\n class=${classMap({\n 'login-container': true,\n 'signin-only': !this.showRecentUsers,\n })}\n >\n ${this.showUsername\n ? this.renderTextInput(\n msg('Username'),\n HTMLInputTypeAttribute.Text,\n this.username,\n this.handleUsernameInput.bind(this),\n this.usernameError\n )\n : nothing}\n ${this.showPassword\n ? this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )\n : nothing}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"recent-container\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recently signed in')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, true)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderSignInSmall() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div\n class=${classMap({\n 'login-container': true,\n 'signin-only': !this.showRecentUsers,\n })}\n >\n ${this.showUsername\n ? this.renderTextInput(\n msg('Username'),\n HTMLInputTypeAttribute.Text,\n this.username,\n this.handleUsernameInput.bind(this),\n this.usernameError\n )\n : nothing}\n ${this.showPassword\n ? this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )\n : nothing}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"divider\" aria-hidden=\"true\"></div>\n <div class=\"recent-container recent\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recent')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, false)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderUserSignIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div\n class=${classMap({\n 'login-container': true,\n 'signin-only': !this.showRecentUsers,\n })}\n >\n <div class=\"user-primary\">\n ${this.renderUserProfile('vertical', 'large')}\n </div>\n <div class=\"fields\">\n ${this.showPassword\n ? this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )\n : nothing}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"recent-container\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recently signed in')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, true)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderUserSignInSmall() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"user-container\">\n ${this.renderUserProfile('horizontal', 'regular')}\n </div>\n <div\n class=${classMap({\n 'login-container': true,\n 'signin-only': !this.showRecentUsers,\n })}\n >\n ${this.showPassword\n ? this.renderTextInput(\n msg('Password'),\n HTMLInputTypeAttribute.Password,\n this.password,\n this.handlePasswordInput.bind(this),\n this.passwordError\n )\n : nothing}\n <obc-button\n variant=${ButtonVariant.raised}\n fullWidth\n @click=${this.handleSignInClick}\n >\n ${msg('Sign in')}\n </obc-button>\n </div>\n ${this.showRecentUsers\n ? html`\n <div class=\"divider\" aria-hidden=\"true\"></div>\n <div class=\"recent-container recent\">\n <div class=\"title-container\">\n <div class=\"subtitle\">${msg('Recent')}</div>\n </div>\n <div class=\"actions-container\">\n ${this.renderUserButtons(3, false)}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n\n private renderLoadingSignIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"user-primary loading\">\n ${this.renderUserProfile('vertical', 'large')}\n <obc-progress-bar\n class=\"progress\"\n type=${ProgressBarType.linear}\n mode=${ProgressBarMode.indeterminate}\n .showValue=${false}\n ></obc-progress-bar>\n </div>\n `;\n }\n\n private renderLoadingSignInSmall() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('Sign in')}</h3>\n </div>\n <div class=\"user-primary loading\">\n ${this.renderUserProfile('horizontal', 'regular')}\n <obc-progress-bar\n class=\"progress\"\n type=${ProgressBarType.linear}\n mode=${ProgressBarMode.indeterminate}\n .showValue=${false}\n ></obc-progress-bar>\n </div>\n `;\n }\n\n private renderSignedIn() {\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('User')}</h3>\n </div>\n <div class=\"user-primary signed-in\">\n ${this.renderUserProfile('vertical', 'large')}\n </div>\n <div class=\"divider\" aria-hidden=\"true\"></div>\n ${this.signedInActions.length\n ? html`\n <div class=\"nav-container\">\n ${this.signedInActions.map((action) => {\n const normalizedId = this.normalizeActionId(action.id);\n return html`\n <obc-navigation-item\n .label=${action.label}\n hasIcon\n @click=${() => this.handleSignedInActionClick(action)}\n >\n <span slot=\"icon\">\n <slot name=\"signed-in-action-icon-${normalizedId}\">\n ${this.getSignedInActionIcon(normalizedId)}\n </slot>\n </span>\n </obc-navigation-item>\n `;\n })}\n </div>\n `\n : nothing}\n <div class=\"button-container\">\n <obc-button\n variant=${ButtonVariant.normal}\n fullWidth\n @click=${this.handleSignOutClick}\n >\n ${msg('Sign out')}\n </obc-button>\n </div>\n `;\n }\n\n private renderSignedInSmall() {\n const primaryAction = this.signedInActions.find(\n (action) => action.id === this.primaryActionId\n );\n return html`\n <div class=\"title-container\">\n <h3 class=\"title\">${msg('User')}</h3>\n </div>\n <div class=\"user-container\">\n ${this.renderUserProfile('horizontal', 'regular')}\n </div>\n <div class=\"button-container\">\n ${primaryAction\n ? html`\n <obc-button\n variant=${ButtonVariant.normal}\n fullWidth\n @click=${() => this.handleSignedInActionClick(primaryAction)}\n >\n ${primaryAction.label}\n </obc-button>\n `\n : nothing}\n <obc-button\n variant=${ButtonVariant.normal}\n fullWidth\n @click=${this.handleSignOutClick}\n >\n ${msg('Sign out')}\n </obc-button>\n </div>\n `;\n }\n\n override render() {\n let content: TemplateResult | symbol = nothing;\n if (this.type === ObcUserMenuType.signIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderSignInSmall()\n : this.renderSignIn();\n }\n if (this.type === ObcUserMenuType.userSignIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderUserSignInSmall()\n : this.renderUserSignIn();\n }\n if (this.type === ObcUserMenuType.loadingSignIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderLoadingSignInSmall()\n : this.renderLoadingSignIn();\n }\n if (this.type === ObcUserMenuType.signedIn) {\n content =\n this.size === ObcUserMenuSize.small\n ? this.renderSignedInSmall()\n : this.renderSignedIn();\n }\n\n return html`\n <div\n class=${classMap({\n card: true,\n [`size-${this.size}`]: true,\n [`type-${this.type}`]: true,\n })}\n >\n ${content}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-user-menu': ObcUserMenu;\n }\n}\n"],"names":["ObcUserMenuType","ObcUserMenuSize"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents-full-bundle",
3
- "version": "2.0.0-next.139",
3
+ "version": "2.0.0-next.140",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/user-menu/user-menu.css CHANGED
@@ -48,6 +48,10 @@
48
48
  padding: var(--app-components-user-menu-padding-vertical)
49
49
  calc(var(--app-components-user-menu-padding-horizontal) * 2) 0
50
50
  calc(var(--app-components-user-menu-padding-horizontal) * 2);
51
+
52
+ &.signin-only {
53
+ padding-bottom: var(--app-components-user-menu-padding-vertical);
54
+ }
51
55
  }
52
56
 
53
57
  &.size-small.type-sign-in .login-container,
package/src/components/user-menu/user-menu.stories.ts CHANGED
@@ -28,27 +28,6 @@ const meta: Meta<ObcUserMenu> = {
28
28
  control: {type: 'select'},
29
29
  options: Object.values(ObcUserMenuSize),
30
30
  },
31
- hasRecentlySignedIn: {
32
- control: {type: 'boolean'},
33
- },
34
- username: {
35
- control: {type: 'text'},
36
- },
37
- password: {
38
- control: {type: 'text'},
39
- },
40
- usernameError: {
41
- control: {type: 'text'},
42
- },
43
- passwordError: {
44
- control: {type: 'text'},
45
- },
46
- userInitials: {
47
- control: {type: 'text'},
48
- },
49
- userLabel: {
50
- control: {type: 'text'},
51
- },
52
31
  recentUsers: {
53
32
  control: {type: 'object'},
54
33
  },
@@ -63,6 +42,8 @@ const meta: Meta<ObcUserMenu> = {
63
42
  type: ObcUserMenuType.signIn,
64
43
  size: ObcUserMenuSize.regular,
65
44
  hasRecentlySignedIn: false,
45
+ showUsername: true,
46
+ showPassword: true,
66
47
  username: '',
67
48
  password: '',
68
49
  usernameError: '',
@@ -88,6 +69,8 @@ const meta: Meta<ObcUserMenu> = {
88
69
  type=${args.type}
89
70
  size=${args.size}
90
71
  ?hasRecentlySignedIn=${args.hasRecentlySignedIn}
72
+ .showUsername=${args.showUsername}
73
+ .showPassword=${args.showPassword}
91
74
  username=${args.username}
92
75
  password=${args.password}
93
76
  usernameError=${args.usernameError}
@@ -168,6 +151,31 @@ export const UserSignInSmall: Story = {
168
151
  },
169
152
  };
170
153
 
154
+ export const SignInWithoutFields: Story = {
155
+ args: {
156
+ type: ObcUserMenuType.signIn,
157
+ size: ObcUserMenuSize.small,
158
+ showUsername: false,
159
+ showPassword: false,
160
+ },
161
+ };
162
+
163
+ export const UserSignInWithoutPasswordRegular: Story = {
164
+ args: {
165
+ type: ObcUserMenuType.userSignIn,
166
+ size: ObcUserMenuSize.regular,
167
+ showPassword: false,
168
+ },
169
+ };
170
+
171
+ export const UserSignInWithoutPasswordSmall: Story = {
172
+ args: {
173
+ type: ObcUserMenuType.userSignIn,
174
+ size: ObcUserMenuSize.small,
175
+ showPassword: false,
176
+ },
177
+ };
178
+
171
179
  export const SignedInWithoutActions: Story = {
172
180
  args: {
173
181
  type: ObcUserMenuType.signedIn,