label.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.82
  5. */
  6. import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
  7. import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
  8. import { CSS } from "./resources";
  9. /**
  10. * @slot - A slot for adding text and a component that can be labeled.
  11. */
  12. export class Label {
  13. constructor() {
  14. //--------------------------------------------------------------------------
  15. //
  16. // Properties
  17. //
  18. //--------------------------------------------------------------------------
  19. /** specify the text alignment of the label */
  20. this.alignment = "start";
  21. /**
  22. * specify the status of the label and any child input / input messages
  23. * @deprecated set directly on child element instead
  24. */
  25. this.status = "idle";
  26. /** specify the scale of the label, defaults to m */
  27. this.scale = "m";
  28. /** is the wrapped element positioned inline with the label slotted text */
  29. this.layout = "default";
  30. /** eliminates any space around the label */
  31. this.disableSpacing = false;
  32. /**
  33. * is the label disabled
  34. *
  35. * @deprecated use the `disabled` property on the interactive components instead
  36. */
  37. this.disabled = false;
  38. //--------------------------------------------------------------------------
  39. //
  40. // Private Methods
  41. //
  42. //--------------------------------------------------------------------------
  43. this.labelClickHandler = (event) => {
  44. this.calciteInternalLabelClick.emit({
  45. sourceEvent: event
  46. });
  47. };
  48. }
  49. //--------------------------------------------------------------------------
  50. //
  51. // Lifecycle
  52. //
  53. //--------------------------------------------------------------------------
  54. connectedCallback() {
  55. document.dispatchEvent(new CustomEvent(labelConnectedEvent));
  56. }
  57. disconnectedCallback() {
  58. document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
  59. }
  60. render() {
  61. return (h(Host, { onClick: this.labelClickHandler },
  62. h("div", { class: CSS.container },
  63. h("slot", null))));
  64. }
  65. static get is() { return "calcite-label"; }
  66. static get encapsulation() { return "shadow"; }
  67. static get originalStyleUrls() { return {
  68. "$": ["label.scss"]
  69. }; }
  70. static get styleUrls() { return {
  71. "$": ["label.css"]
  72. }; }
  73. static get properties() { return {
  74. "alignment": {
  75. "type": "string",
  76. "mutable": false,
  77. "complexType": {
  78. "original": "Alignment",
  79. "resolved": "\"center\" | \"end\" | \"start\"",
  80. "references": {
  81. "Alignment": {
  82. "location": "import",
  83. "path": "../interfaces"
  84. }
  85. }
  86. },
  87. "required": false,
  88. "optional": false,
  89. "docs": {
  90. "tags": [],
  91. "text": "specify the text alignment of the label"
  92. },
  93. "attribute": "alignment",
  94. "reflect": true,
  95. "defaultValue": "\"start\""
  96. },
  97. "status": {
  98. "type": "string",
  99. "mutable": false,
  100. "complexType": {
  101. "original": "Status",
  102. "resolved": "\"idle\" | \"invalid\" | \"valid\"",
  103. "references": {
  104. "Status": {
  105. "location": "import",
  106. "path": "../interfaces"
  107. }
  108. }
  109. },
  110. "required": false,
  111. "optional": false,
  112. "docs": {
  113. "tags": [{
  114. "name": "deprecated",
  115. "text": "set directly on child element instead"
  116. }],
  117. "text": "specify the status of the label and any child input / input messages"
  118. },
  119. "attribute": "status",
  120. "reflect": true,
  121. "defaultValue": "\"idle\""
  122. },
  123. "for": {
  124. "type": "string",
  125. "mutable": false,
  126. "complexType": {
  127. "original": "string",
  128. "resolved": "string",
  129. "references": {}
  130. },
  131. "required": false,
  132. "optional": false,
  133. "docs": {
  134. "tags": [],
  135. "text": "The id of the input associated with the label"
  136. },
  137. "attribute": "for",
  138. "reflect": true
  139. },
  140. "scale": {
  141. "type": "string",
  142. "mutable": false,
  143. "complexType": {
  144. "original": "Scale",
  145. "resolved": "\"l\" | \"m\" | \"s\"",
  146. "references": {
  147. "Scale": {
  148. "location": "import",
  149. "path": "../interfaces"
  150. }
  151. }
  152. },
  153. "required": false,
  154. "optional": false,
  155. "docs": {
  156. "tags": [],
  157. "text": "specify the scale of the label, defaults to m"
  158. },
  159. "attribute": "scale",
  160. "reflect": true,
  161. "defaultValue": "\"m\""
  162. },
  163. "layout": {
  164. "type": "string",
  165. "mutable": false,
  166. "complexType": {
  167. "original": "\"inline\" | \"inline-space-between\" | \"default\"",
  168. "resolved": "\"default\" | \"inline\" | \"inline-space-between\"",
  169. "references": {}
  170. },
  171. "required": false,
  172. "optional": false,
  173. "docs": {
  174. "tags": [],
  175. "text": "is the wrapped element positioned inline with the label slotted text"
  176. },
  177. "attribute": "layout",
  178. "reflect": true,
  179. "defaultValue": "\"default\""
  180. },
  181. "disableSpacing": {
  182. "type": "boolean",
  183. "mutable": false,
  184. "complexType": {
  185. "original": "boolean",
  186. "resolved": "boolean",
  187. "references": {}
  188. },
  189. "required": false,
  190. "optional": false,
  191. "docs": {
  192. "tags": [],
  193. "text": "eliminates any space around the label"
  194. },
  195. "attribute": "disable-spacing",
  196. "reflect": false,
  197. "defaultValue": "false"
  198. },
  199. "disabled": {
  200. "type": "boolean",
  201. "mutable": false,
  202. "complexType": {
  203. "original": "boolean",
  204. "resolved": "boolean",
  205. "references": {}
  206. },
  207. "required": false,
  208. "optional": false,
  209. "docs": {
  210. "tags": [{
  211. "name": "deprecated",
  212. "text": "use the `disabled` property on the interactive components instead"
  213. }],
  214. "text": "is the label disabled"
  215. },
  216. "attribute": "disabled",
  217. "reflect": true,
  218. "defaultValue": "false"
  219. }
  220. }; }
  221. static get events() { return [{
  222. "method": "calciteInternalLabelClick",
  223. "name": "calciteInternalLabelClick",
  224. "bubbles": false,
  225. "cancelable": true,
  226. "composed": true,
  227. "docs": {
  228. "tags": [{
  229. "name": "internal",
  230. "text": undefined
  231. }],
  232. "text": ""
  233. },
  234. "complexType": {
  235. "original": "{\n sourceEvent: MouseEvent;\n }",
  236. "resolved": "{ sourceEvent: MouseEvent; }",
  237. "references": {
  238. "MouseEvent": {
  239. "location": "global"
  240. }
  241. }
  242. }
  243. }]; }
  244. static get elementRef() { return "el"; }
  245. }