@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
207 lines (206 loc) • 6.02 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h, Host } from "@stencil/core";
import { CSS } from "./resources";
import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
export class CalciteNavigationUser {
constructor() {
this.active = undefined;
this.fullName = undefined;
this.label = undefined;
this.textDisabled = false;
this.thumbnail = undefined;
this.userId = undefined;
this.username = undefined;
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
await componentLoaded(this);
this.el.focus();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
setUpLoadableComponent(this);
}
componentDidLoad() {
setComponentLoaded(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
return (h(Host, null, h("button", { "aria-label": this.label, class: CSS.button }, h("calcite-avatar", { "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (h("div", { class: CSS.textContainer }, this.fullName && (h("span", { class: CSS.fullName, key: CSS.fullName }, this.fullName)), this.username && (h("span", { class: CSS.username, key: CSS.username }, this.username)))))));
}
static get is() { return "calcite-navigation-user"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["navigation-user.scss"]
};
}
static get styleUrls() {
return {
"$": ["navigation-user.css"]
};
}
static get properties() {
return {
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When true, the component is highlighted."
},
"attribute": "active",
"reflect": true
},
"fullName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the full name of the user."
},
"attribute": "full-name",
"reflect": false
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies."
},
"attribute": "label",
"reflect": false
},
"textDisabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, hides the `fullName` and `username` contents."
},
"attribute": "text-disabled",
"reflect": true,
"defaultValue": "false"
},
"thumbnail": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `src` to an image (remember to add a token if the user is private)."
},
"attribute": "thumbnail",
"reflect": false
},
"userId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the unique id of the user."
},
"attribute": "user-id",
"reflect": false
},
"username": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the username of the user."
},
"attribute": "username",
"reflect": false
}
};
}
static get methods() {
return {
"setFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the component.",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}