@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
167 lines (166 loc) • 4.81 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 { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";
import { CSS } from "./resources";
/**
* @slot - A slot for adding text and a component that can be labeled.
*/
export class Label {
constructor() {
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
this.labelClickHandler = (event) => {
this.calciteInternalLabelClick.emit({
sourceEvent: event
});
};
this.alignment = "start";
this.for = undefined;
this.scale = "m";
this.layout = "default";
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
document.dispatchEvent(new CustomEvent(labelConnectedEvent));
}
disconnectedCallback() {
document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
}
render() {
return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: CSS.container }, h("slot", null))));
}
static get is() { return "calcite-label"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["label.scss"]
};
}
static get styleUrls() {
return {
"$": ["label.css"]
};
}
static get properties() {
return {
"alignment": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Alignment",
"resolved": "\"center\" | \"end\" | \"start\"",
"references": {
"Alignment": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the text alignment of the component."
},
"attribute": "alignment",
"reflect": true,
"defaultValue": "\"start\""
},
"for": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component."
},
"attribute": "for",
"reflect": true
},
"scale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size of the component."
},
"attribute": "scale",
"reflect": true,
"defaultValue": "\"m\""
},
"layout": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"inline\" | \"inline-space-between\" | \"default\"",
"resolved": "\"default\" | \"inline\" | \"inline-space-between\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the layout of the label in relation to the component. Use `\"inline\"` positions to wrap the label and component on the same line."
},
"attribute": "layout",
"reflect": true,
"defaultValue": "\"default\""
}
};
}
static get events() {
return [{
"method": "calciteInternalLabelClick",
"name": "calciteInternalLabelClick",
"bubbles": false,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "{\n sourceEvent: MouseEvent;\n }",
"resolved": "{ sourceEvent: MouseEvent; }",
"references": {
"MouseEvent": {
"location": "global"
}
}
}
}];
}
static get elementRef() { return "el"; }
}