combobox-item-group.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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, Prop, h, Element } 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" },
  37. h("li", { class: { [CSS.label]: true, [indent]: true }, id: this.guid, role: "presentation" },
  38. h("span", { class: CSS.title }, this.label)),
  39. h("slot", null)));
  40. }
  41. static get is() { return "calcite-combobox-item-group"; }
  42. static get encapsulation() { return "shadow"; }
  43. static get originalStyleUrls() { return {
  44. "$": ["combobox-item-group.scss"]
  45. }; }
  46. static get styleUrls() { return {
  47. "$": ["combobox-item-group.css"]
  48. }; }
  49. static get properties() { return {
  50. "ancestors": {
  51. "type": "unknown",
  52. "mutable": true,
  53. "complexType": {
  54. "original": "ComboboxChildElement[]",
  55. "resolved": "ComboboxChildElement[]",
  56. "references": {
  57. "ComboboxChildElement": {
  58. "location": "import",
  59. "path": "../combobox/interfaces"
  60. }
  61. }
  62. },
  63. "required": false,
  64. "optional": false,
  65. "docs": {
  66. "tags": [],
  67. "text": "Parent and grandparent combobox items, this is set internally for use from combobox"
  68. }
  69. },
  70. "label": {
  71. "type": "string",
  72. "mutable": false,
  73. "complexType": {
  74. "original": "string",
  75. "resolved": "string",
  76. "references": {}
  77. },
  78. "required": true,
  79. "optional": false,
  80. "docs": {
  81. "tags": [],
  82. "text": "Title of the group"
  83. },
  84. "attribute": "label",
  85. "reflect": false
  86. }
  87. }; }
  88. static get elementRef() { return "el"; }
  89. }