123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245 |
- /*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
- */
- import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
- import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
- import { CSS } from "./resources";
- /**
- * @slot - A slot for adding text and a component that can be labeled.
- */
- export class Label {
- constructor() {
- //--------------------------------------------------------------------------
- //
- // Properties
- //
- //--------------------------------------------------------------------------
- /** specify the text alignment of the label */
- this.alignment = "start";
- /**
- * specify the status of the label and any child input / input messages
- * @deprecated set directly on child element instead
- */
- this.status = "idle";
- /** specify the scale of the label, defaults to m */
- this.scale = "m";
- /** is the wrapped element positioned inline with the label slotted text */
- this.layout = "default";
- /** eliminates any space around the label */
- this.disableSpacing = false;
- /**
- * is the label disabled
- *
- * @deprecated use the `disabled` property on the interactive components instead
- */
- this.disabled = false;
- //--------------------------------------------------------------------------
- //
- // Private Methods
- //
- //--------------------------------------------------------------------------
- this.labelClickHandler = (event) => {
- this.calciteInternalLabelClick.emit({
- sourceEvent: event
- });
- };
- }
- //--------------------------------------------------------------------------
- //
- // 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": "specify the text alignment of the label"
- },
- "attribute": "alignment",
- "reflect": true,
- "defaultValue": "\"start\""
- },
- "status": {
- "type": "string",
- "mutable": false,
- "complexType": {
- "original": "Status",
- "resolved": "\"idle\" | \"invalid\" | \"valid\"",
- "references": {
- "Status": {
- "location": "import",
- "path": "../interfaces"
- }
- }
- },
- "required": false,
- "optional": false,
- "docs": {
- "tags": [{
- "name": "deprecated",
- "text": "set directly on child element instead"
- }],
- "text": "specify the status of the label and any child input / input messages"
- },
- "attribute": "status",
- "reflect": true,
- "defaultValue": "\"idle\""
- },
- "for": {
- "type": "string",
- "mutable": false,
- "complexType": {
- "original": "string",
- "resolved": "string",
- "references": {}
- },
- "required": false,
- "optional": false,
- "docs": {
- "tags": [],
- "text": "The id of the input associated with the label"
- },
- "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": "specify the scale of the label, defaults to m"
- },
- "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": "is the wrapped element positioned inline with the label slotted text"
- },
- "attribute": "layout",
- "reflect": true,
- "defaultValue": "\"default\""
- },
- "disableSpacing": {
- "type": "boolean",
- "mutable": false,
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "required": false,
- "optional": false,
- "docs": {
- "tags": [],
- "text": "eliminates any space around the label"
- },
- "attribute": "disable-spacing",
- "reflect": false,
- "defaultValue": "false"
- },
- "disabled": {
- "type": "boolean",
- "mutable": false,
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "required": false,
- "optional": false,
- "docs": {
- "tags": [{
- "name": "deprecated",
- "text": "use the `disabled` property on the interactive components instead"
- }],
- "text": "is the label disabled"
- },
- "attribute": "disabled",
- "reflect": true,
- "defaultValue": "false"
- }
- }; }
- static get events() { return [{
- "method": "calciteInternalLabelClick",
- "name": "calciteInternalLabelClick",
- "bubbles": false,
- "cancelable": true,
- "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"; }
- }
|