@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
233 lines (232 loc) • 6.92 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 CalciteNavigationLogo {
constructor() {
this.active = undefined;
this.href = undefined;
this.label = undefined;
this.rel = undefined;
this.description = undefined;
this.target = undefined;
this.heading = undefined;
this.thumbnail = undefined;
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
await componentLoaded(this);
if (this.href) {
this.el.focus();
}
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
setUpLoadableComponent(this);
}
componentDidLoad() {
setComponentLoaded(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { heading, description, thumbnail } = this;
return (h(Host, null, h("a", { class: CSS.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && h("img", { alt: this.label || "", class: CSS.image, src: thumbnail }), (heading || description) && (h("div", { class: CSS.container }, heading && (h("span", { "aria-label": this.heading, class: CSS.heading, key: CSS.heading }, heading)), description && (h("span", { "aria-label": this.description, class: CSS.description, key: CSS.description }, description)))))));
}
static get is() { return "calcite-navigation-logo"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["navigation-logo.scss"]
};
}
static get styleUrls() {
return {
"$": ["navigation-logo.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
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the URL destination of the component, which can be set as an absolute or relative path."
},
"attribute": "href",
"reflect": true
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies."
},
"attribute": "label",
"reflect": false
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "mdn",
"text": "[rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)"
}],
"text": "Defines the relationship between the `href` value and the current document."
},
"attribute": "rel",
"reflect": true
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A description for the component, which displays below the `heading`."
},
"attribute": "description",
"reflect": false
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "mdn",
"text": "[target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)"
}],
"text": "Specifies where to open the linked document defined in the `href` property."
},
"attribute": "target",
"reflect": true
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies heading text for the component, such as a product or organization name."
},
"attribute": "heading",
"reflect": 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."
},
"attribute": "thumbnail",
"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"; }
}