@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
43 lines (42 loc) • 4.01 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit-html";
import { keyed } from "lit-html/directives/keyed.js";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { c as componentFocusable } from "../../chunks/component.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
textContainer: "text-container",
fullName: "full-name",
username: "username",
button: "button"
};
const styles = css`:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border:none;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}calcite-avatar{padding-inline:1rem;--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1))}.username{font-size:var(--calcite-font-size--1);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2))}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:active) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3)}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
class NavigationUser extends LitElement {
constructor() {
super(...arguments);
this.textDisabled = false;
}
static {
this.properties = { active: [7, {}, { reflect: true, type: Boolean }], fullName: 1, label: 1, textDisabled: [7, {}, { reflect: true, type: Boolean }], thumbnail: 1, userId: 1, username: 1 };
}
static {
this.shadowRootOptions = { mode: "open", delegatesFocus: true };
}
static {
this.styles = styles;
}
async setFocus() {
await componentFocusable(this);
this.el.focus();
}
render() {
return html`<button .ariaLabel=${this.label} class=${safeClassMap(CSS.button)}><calcite-avatar .fullName=${this.fullName} .label=${this.label} .thumbnail=${this.thumbnail} .userId=${this.userId} .username=${this.username}></calcite-avatar>${(this.fullName || this.username) && !this.textDisabled && html`<div class=${safeClassMap(CSS.textContainer)}>${this.fullName && keyed(CSS.fullName, html`<span class=${safeClassMap(CSS.fullName)}>${this.fullName}</span>`) || ""}${this.username && keyed(CSS.username, html`<span class=${safeClassMap(CSS.username)}>${this.username}</span>`) || ""}</div>` || ""}</button>`;
}
}
customElement("calcite-navigation-user", NavigationUser);
export {
NavigationUser
};