@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.75

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -89,21 +83,21 @@
 }
 
 .container {
-  width: 100%;
   display: inline-grid;
+  width: 100%;
   align-items: center;
   grid-template-columns: 1fr auto;
 }
 
 .preview {
   grid-column: 2/3;
-  display: flex;
-  align-items: center;
   pointer-events: none;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  display: flex;
+  align-items: center;
   z-index: 1;
 }
 
@@ -114,6 +108,6 @@
 
 .input {
   grid-column: 1/3;
-  text-transform: uppercase;
   width: 100%;
+  text-transform: uppercase;
 }

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.js

@@ -6,9 +6,8 @@ import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from
 import { hexChar, hexToRGB, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../calcite-color-picker/utils";
 import Color from "color";
 import { CSS } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { TEXT } from "../calcite-color-picker/resources";
-import { getKey } from "../../utils/key";
 const DEFAULT_COLOR = Color();
 export class CalciteColorPickerHexInput {
   constructor() {
@@ -133,7 +132,7 @@ export class CalciteColorPickerHexInput {
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { internalColor, value } = this;
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Tab" || key === "Enter") {
       this.onInputChange();
       return;
@@ -164,11 +163,10 @@ export class CalciteColorPickerHexInput {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { el, intlHex, value } = this;
+    const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    const elementDir = getElementDir(el);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
       hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/calcite-color-picker-swatch/calcite-color-picker-swatch.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -85,8 +79,8 @@
 }
 
 :host {
-  display: inline-flex;
   position: relative;
+  display: inline-flex;
 }
 
 :host([scale=s]) {
@@ -109,7 +103,6 @@
   height: inherit;
   width: inherit;
 }
-
 .swatch rect {
   transition-property: all;
   transition-duration: 150ms;
@@ -117,11 +110,11 @@
 }
 
 .no-color-icon {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   height: 100%;
   width: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
 }

package/dist/collection/components/calcite-color-picker-swatch/resources.js

@@ -7,6 +7,6 @@ export const CSS = {
   noColorIcon: "no-color-icon"
 };
 export const COLORS = {
-  borderLight: "rgba(0, 0, 0, 0.15)",
+  borderLight: "rgba(0, 0, 0, 0.3)",
   borderDark: "rgba(255, 255, 255, 0.15)"
 };

package/dist/collection/components/calcite-combobox/calcite-combobox.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -91,10 +85,9 @@
 *
 * @prop --calcite-combobox-input-height: the height of the combobox input
 */
-
 :host {
-  display: block;
   position: relative;
+  display: block;
 }
 
 :host([disabled]) {
@@ -136,8 +129,7 @@
   padding: 0 var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l);
 }
 
-:host(:focus-within) .wrapper,
-.wrapper--active {
+:host(:focus-within) .wrapper, .wrapper--active {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -153,28 +145,27 @@
   flex-grow: 1;
   flex-wrap: wrap;
   align-items: center;
-  padding: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding: 0px;
 }
 
 .input {
   flex-grow: 1;
-  font-family: inherit;
-  padding: 0;
-  background-color: transparent;
-  border-style: none;
-  color: var(--calcite-ui-text-1);
   -webkit-appearance: none;
           appearance: none;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
+  font-family: inherit;
+  color: var(--calcite-ui-text-1);
   font-size: inherit;
   height: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
   min-width: 120px;
   margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
 }
-
 .input:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -185,9 +176,9 @@
 }
 
 .input--single {
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 0;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  padding: 0px;
 }
 
 .wrapper--active .input-single {
@@ -195,10 +186,10 @@
 }
 
 .input--hidden {
-  width: 0;
-  min-width: 0;
-  opacity: 0;
   pointer-events: none;
+  width: 0px;
+  min-width: 0px;
+  opacity: 0;
 }
 
 .input--icon {
@@ -216,32 +207,31 @@
 }
 
 .label {
-  padding: 0;
+  pointer-events: none;
   display: flex;
-  font-weight: var(--calcite-font-weight-normal);
+  max-width: 100%;
   flex: 1 1 auto;
-  pointer-events: none;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  padding: 0px;
+  font-weight: var(--calcite-font-weight-normal);
   height: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
 }
 
 .label--spaced {
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: var(--calcite-combobox-item-spacing-unit-l);
   padding-right: var(--calcite-combobox-item-spacing-unit-l);
 }
 
-.icon-end,
-.icon-start {
-  cursor: pointer;
+.icon-end, .icon-start {
   display: flex;
-  align-items: center;
   width: 1rem;
+  cursor: pointer;
+  align-items: center;
 }
 
 .icon-end {
@@ -268,23 +258,18 @@
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   border-radius: 0.25rem;
 }
-
 .popper-container[data-popper-placement^=bottom] .calcite-popper-anim {
   transform: translateY(-5px);
 }
-
 .popper-container[data-popper-placement^=top] .calcite-popper-anim {
   transform: translateY(5px);
 }
-
 .popper-container[data-popper-placement^=left] .calcite-popper-anim {
   transform: translateX(5px);
 }
-
 .popper-container[data-popper-placement^=right] .calcite-popper-anim {
   transform: translateX(-5px);
 }
-
 .popper-container[data-popper-placement] .calcite-popper-anim--active {
   opacity: 1;
   visibility: visible;
@@ -309,25 +294,26 @@
 }
 
 .list-container {
-  overflow-y: auto;
   max-height: 100vh;
+  overflow-y: auto;
   background-color: var(--calcite-ui-foreground-1);
   width: var(--calcite-dropdown-width);
 }
 
 .list {
+  margin: 0px;
   display: block;
-  margin: 0;
-  padding: 0;
+  padding: 0px;
 }
 
 .list--hide {
-  height: 0;
+  height: 0px;
   overflow: hidden;
 }
 
 .chip {
-  margin: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) var(--calcite-combobox-item-spacing-unit-s) calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
+  margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
+  margin-inline: 0 var(--calcite-combobox-item-spacing-unit-s);
   max-width: 100%;
 }
 
@@ -335,17 +321,8 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.chip:last-child {
-  margin-right: 0;
-}
-
-.chip--rtl {
-  margin-right: unset;
-  margin-left: var(--calcite-combobox-item-spacing-unit-l);
-}
-
-.chip--rtl:last-child {
-  margin-left: 0;
+.chip:last-of-type {
+  margin-inline-end: 0;
 }
 
 .item {

package/dist/collection/components/calcite-combobox/calcite-combobox.js

@@ -4,17 +4,20 @@
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
-import { getElementDir, getElementStyleDir } from "../../utils/dom";
 import { debounce } from "lodash-es";
-import { getKey } from "../../utils/key";
 import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
+const itemUidPrefix = "combobox-item-";
+const chipUidPrefix = "combobox-chip-";
+const labelUidPrefix = "combobox-label-";
+const listboxUidPrefix = "combobox-listbox-";
+const inputUidPrefix = "combobox-input-";
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
@@ -49,6 +52,10 @@ export class CalciteCombobox {
     this.scale = "m";
     /** The value(s) of the selectedItem(s) */
     this.value = null;
+    /** string to override the English "Remove tag" text for when an item is selected.
+     * @default "Remove tag"
+     */
+    this.intlRemoveTag = TEXT.removeTag;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -86,7 +93,7 @@ export class CalciteCombobox {
       this.setFocus();
     };
     this.keydownHandler = (event) => {
-      const key = getKey(event.key, getElementStyleDir(this.el));
+      const { key } = event;
       switch (key) {
         case "Tab":
           this.activeChipIndex = -1;
@@ -187,7 +194,9 @@ export class CalciteCombobox {
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+      if ((!this.active && !this.open) ||
+        composedPath.includes(this.el) ||
+        composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text) {
@@ -202,6 +211,7 @@ export class CalciteCombobox {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
+      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -555,7 +565,6 @@ export class CalciteCombobox {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = guid();
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -605,7 +614,9 @@ export class CalciteCombobox {
   focusChip() {
     var _a;
     const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
-    const chip = this.referenceEl.querySelector(`#chip-${guid}`);
+    const chip = guid
+      ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
+      : null;
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
@@ -651,22 +662,20 @@ export class CalciteCombobox {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode, el } = this;
-    const dir = getElementDir(el);
+    const { activeChipIndex, scale, selectionMode, intlRemoveTag } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
-        "chip--active": activeChipIndex === i,
-        "chip--rtl": dir === "rtl"
+        "chip--active": activeChipIndex === i
       };
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { "aria-label": label, class: chipClasses, dismissLabel: "remove tag", dismissible: true, icon: item.icon, id: `chip-${item.guid}`, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
-    const { active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
+    const { guid, active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
     const showLabel = !active && single && !!selectedItem;
@@ -678,16 +687,16 @@ export class CalciteCombobox {
           label: true,
           "label--spaced": needsIcon
         }, key: "label", onFocus: this.comboboxFocusHandler, tabindex: "0" }, selectedItem.textLabel)),
-      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": guid, "aria-label": getLabelText(this), class: {
+      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
           input: true,
           "input--single": true,
           "input--transparent": this.activeChipIndex > -1,
           "input--hidden": showLabel,
           "input--icon": single && needsIcon
-        }, disabled: disabled, id: `${guid}-input`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
+        }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
-    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;
@@ -717,9 +726,8 @@ export class CalciteCombobox {
   render() {
     const { guid, open, label } = this;
     const single = this.selectionMode === "single";
-    const labelId = `${guid}-label`;
     return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": labelId, "aria-owns": guid, class: {
+      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
           "wrapper--active": open
@@ -727,10 +735,10 @@ export class CalciteCombobox {
         h("div", { class: "grid-input" },
           this.renderIconStart(),
           !single && this.renderChips(),
-          h("label", { class: "screen-readers-only", htmlFor: `${guid}-input`, id: labelId }, label),
+          h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label),
           this.renderInput()),
         this.renderIconEnd()),
-      h("ul", { "aria-labelledby": labelId, "aria-multiselectable": "true", class: "screen-readers-only", id: guid, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
+      h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
       this.renderPopperContainer(),
       h(HiddenFormInputSlot, { component: this })));
   }
@@ -972,6 +980,27 @@ export class CalciteCombobox {
       "attribute": "value",
       "reflect": false,
       "defaultValue": "null"
+    },
+    "intlRemoveTag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"Remove tag\""
+          }],
+        "text": "string to override the English \"Remove tag\" text for when an item is selected."
+      },
+      "attribute": "intl-remove-tag",
+      "reflect": false,
+      "defaultValue": "TEXT.removeTag"
     }
   }; }
   static get states() { return {