combobox-item-group.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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.97
  5. */
  6. import { h } from "@stencil/core";
  7. import { CSS } from "./resources";
  8. import { getAncestors, getDepth } from "../combobox/utils";
  9. import { guid } from "../../utils/guid";
  10. import { getElementProp } from "../../utils/dom";
  11. /**
  12. * @slot - A slot for adding `calcite-combobox-item`s.
  13. */
  14. export class ComboboxItemGroup {
  15. constructor() {
  16. this.guid = guid();
  17. this.scale = "m";
  18. }
  19. // --------------------------------------------------------------------------
  20. //
  21. // Lifecycle
  22. //
  23. // --------------------------------------------------------------------------
  24. connectedCallback() {
  25. this.ancestors = getAncestors(this.el);
  26. this.scale = getElementProp(this.el, "scale", this.scale);
  27. }
  28. // --------------------------------------------------------------------------
  29. //
  30. // Render Methods
  31. //
  32. // --------------------------------------------------------------------------
  33. render() {
  34. const { el, scale } = this;
  35. const indent = `${CSS.label}--indent-${getDepth(el)}`;
  36. return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
  37. }
  38. static get is() { return "calcite-combobox-item-group"; }
  39. static get encapsulation() { return "shadow"; }
  40. static get originalStyleUrls() {
  41. return {
  42. "$": ["combobox-item-group.scss"]
  43. };
  44. }
  45. static get styleUrls() {
  46. return {
  47. "$": ["combobox-item-group.css"]
  48. };
  49. }
  50. static get properties() {
  51. return {
  52. "ancestors": {
  53. "type": "unknown",
  54. "mutable": true,
  55. "complexType": {
  56. "original": "ComboboxChildElement[]",
  57. "resolved": "ComboboxChildElement[]",
  58. "references": {
  59. "ComboboxChildElement": {
  60. "location": "import",
  61. "path": "../combobox/interfaces"
  62. }
  63. }
  64. },
  65. "required": false,
  66. "optional": false,
  67. "docs": {
  68. "tags": [],
  69. "text": "Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`."
  70. }
  71. },
  72. "label": {
  73. "type": "string",
  74. "mutable": false,
  75. "complexType": {
  76. "original": "string",
  77. "resolved": "string",
  78. "references": {}
  79. },
  80. "required": true,
  81. "optional": false,
  82. "docs": {
  83. "tags": [],
  84. "text": "Specifies the title of the component."
  85. },
  86. "attribute": "label",
  87. "reflect": false
  88. }
  89. };
  90. }
  91. static get elementRef() { return "el"; }
  92. }