@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.69

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

@@ -169,24 +169,21 @@ export class CalciteInput {
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {
-      if (this.type !== "number") {
+      if ((nativeEvent instanceof KeyboardEvent && nativeEvent.repeat) || this.type !== "number") {
         return;
       }
-      const value = this.value;
       const inputMax = this.maxString ? parseFloat(this.maxString) : null;
       const inputMin = this.minString ? parseFloat(this.minString) : null;
-      const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-      const inputVal = value && value !== "" ? parseFloat(value) : 0;
-      let newValue = value;
-      if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
-        newValue = (inputVal + inputStep).toString();
-      }
-      if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
-        newValue = (inputVal - inputStep).toString();
-      }
-      this.setValue(newValue, nativeEvent, true);
+      const valueNudgeDelayInMs = 500;
+      this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      this.nudgeNumberValueIntervalId = setInterval(() => {
+        this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      }, valueNudgeDelayInMs);
     };
-    this.numberButtonClickHandler = (event) => {
+    this.numberButtonMouseUpAndMouseOutHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
+    this.numberButtonMouseDownHandler = (event) => {
       // todo, when dropping ie11 support, refactor to use stepup/stepdown
       // prevent blur and re-focus of input on mousedown
       event.preventDefault();
@@ -232,6 +229,9 @@ export class CalciteInput {
         }
       }
     };
+    this.inputKeyUpHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
   }
   disabledWatcher() {
     this.setDisabledAction();
@@ -350,6 +350,19 @@ export class CalciteInput {
   onLabelClick() {
     this.setFocus();
   }
+  incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent) {
+    const value = this.value;
+    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
+    const inputVal = value && value !== "" ? parseFloat(value) : 0;
+    let newValue = value;
+    if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
+      newValue = (inputVal + inputStep).toString();
+    }
+    if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
+      newValue = (inputVal - inputStep).toString();
+    }
+    this.setValue(newValue, nativeEvent, true);
+  }
   setDisabledAction() {
     if (!this.slottedActionEl) {
       return;
@@ -375,21 +388,21 @@ export class CalciteInput {
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" },
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" },
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "chevron-down", scale: "s" })));
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper },
       numberButtonsHorizontalUp,
       numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
+    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
     const childEl = [
-      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
+      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
       this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper },
         h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
     ];
@@ -548,8 +561,8 @@ export class CalciteInput {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -640,8 +653,8 @@ export class CalciteInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Toggles locale formatting for numbers."
       },
@@ -695,8 +708,8 @@ export class CalciteInput {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "use maxLength instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use maxLength instead"
           }],
         "text": "Maximum length of text input."
       },
@@ -974,8 +987,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -992,8 +1005,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -1025,8 +1038,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "This event fires each time a new value is typed and committed."
       },

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.js

@@ -140,7 +140,7 @@ export class CalciteInputDatePicker {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: DEFAULT_PLACEMENT,
@@ -583,8 +583,8 @@ export class CalciteInputDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Previous month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous month\""
           }],
         "text": "Localized string for \"previous month\" (used for aria label)"
       },
@@ -604,8 +604,8 @@ export class CalciteInputDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Next month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next month\""
           }],
         "text": "Localized string for \"next month\" (used for aria label)"
       },
@@ -792,8 +792,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
           }],
         "text": "Trigger calcite date change when a user changes the date range."
       },
@@ -815,8 +815,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -833,8 +833,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-input-message/calcite-input-message.js

@@ -155,8 +155,8 @@ export class CalciteInputMessage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"floating\" type is no longer supported",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "\"floating\" type is no longer supported"
           }],
         "text": "specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input)"
       },

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

@@ -208,8 +208,8 @@ export class CalciteLabel {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -158,10 +158,8 @@
   text-align: center;
   font-size: var(--calcite-loader-font-size);
   width: var(--calcite-loader-size);
-  top: 4rem;
   left: 50%;
   margin-left: calc(var(--calcite-loader-size) / 2 * -1);
-  margin-top: calc(var(--calcite-loader-size) / 2);
   line-height: 0.25;
   transform: scale(1, 1);
 }
@@ -172,7 +170,6 @@
   opacity: 1;
   width: var(--calcite-loader-size);
   height: var(--calcite-loader-size);
-  top: 4rem;
   left: 50%;
   margin-left: calc(var(--calcite-loader-size) / 2 * -1);
   transform: scale(1, 1);

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

@@ -540,7 +540,7 @@ export class CalciteModal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal begins the open animation"
+        "text": "Fired when the modal finishes the open animation"
       },
       "complexType": {
         "original": "any",
@@ -555,7 +555,7 @@ export class CalciteModal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal begins the close animation"
+        "text": "Fired when the modal finishes the close animation"
       },
       "complexType": {
         "original": "any",

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

@@ -194,8 +194,8 @@ export class CalciteNotice {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "String for the close button."
       },

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

@@ -154,8 +154,8 @@ export class CalciteOption {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-option-group/calcite-option-group.js

@@ -84,8 +84,8 @@ export class CalciteOptionGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -232,8 +232,8 @@ export class CalcitePagination {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Next\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next\""
           }],
         "text": "Used as an accessible label (aria-label) for the next button"
       },
@@ -253,8 +253,8 @@ export class CalcitePagination {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Previous\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous\""
           }],
         "text": "Used as an accessible label (aria-label) of the previous button"
       },
@@ -294,8 +294,8 @@ export class CalcitePagination {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calcitePaginationChange instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calcitePaginationChange instead"
           }],
         "text": "Emitted whenever the selected page changes."
       },
@@ -316,8 +316,8 @@ export class CalcitePagination {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [CalcitePaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pagination/calcite-pagination.tsx#L18)",
-            "name": "see"
+            "name": "see",
+            "text": " [CalcitePaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pagination/calcite-pagination.tsx#L18)"
           }],
         "text": "Emitted whenever the selected page changes."
       },

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

@@ -233,10 +233,14 @@ h5.heading {
 }
 
 .header-content {
-  display: block;
   overflow: hidden;
   margin-right: auto;
-  padding: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .header-content .heading,

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.js

@@ -224,8 +224,8 @@ export class CalcitePickListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "When true, the item cannot be selected by user interaction.",
-            "name": "internal"
+            "name": "internal",
+            "text": "When true, the item cannot be selected by user interaction."
           }],
         "text": ""
       },
@@ -250,8 +250,8 @@ export class CalcitePickListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },
@@ -343,8 +343,8 @@ export class CalcitePickListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Remove\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Remove\""
           }],
         "text": "Used as an accessible label (aria-label) for the \"remove item\" action. Only applicable if removable is true."
       },
@@ -412,8 +412,8 @@ export class CalcitePickListItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted whenever the the item's label, description, value or metadata properties are modified."
       },
@@ -430,8 +430,8 @@ export class CalcitePickListItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted whenever the the item's value property is modified."
       },

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

@@ -158,7 +158,7 @@ export class CalcitePopover {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -295,8 +295,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "use dismissible instead.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use dismissible instead."
           }],
         "text": "Display a close button within the Popover."
       },
@@ -446,8 +446,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "6",
-            "name": "default"
+            "name": "default",
+            "text": "6"
           }],
         "text": "Offset the position of the popover away from the reference element."
       },
@@ -531,8 +531,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)",
-            "name": "see"
+            "name": "see",
+            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the referenceElement."
       },
@@ -573,8 +573,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "Text for close button."
       },

package/dist/collection/components/calcite-popover-manager/calcite-popover-manager.js

@@ -86,8 +86,8 @@ export class CalcitePopoverManager {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "`[data-calcite-popover-reference]`",
-            "name": "default"
+            "name": "default",
+            "text": "`[data-calcite-popover-reference]`"
           }],
         "text": "CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover."
       },

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

@@ -94,8 +94,8 @@ export class CalciteRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio."
       },
@@ -133,8 +133,8 @@ export class CalciteRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio."
       },

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -289,8 +289,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio button."
       },
@@ -345,8 +345,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio button."
       },
@@ -366,8 +366,8 @@ export class CalciteRadioButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the radio input"
       },
@@ -458,8 +458,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is blurred."
       },
@@ -491,8 +491,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the checked property changes.  This is an internal event used for styling purposes only.\nUse calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms."
       },
@@ -509,8 +509,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is focused."
       },

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js

@@ -207,8 +207,8 @@ export class CalciteRadioGroupItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the item has been selected."
       },

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

@@ -266,8 +266,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Rating\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Rating\""
           }],
         "text": "Localized string for \"Rating\" (used for aria label)"
       },
@@ -287,8 +287,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Stars: ${num}\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Stars: ${num}\""
           }],
         "text": "Localized string for labelling each star, `${num}` in the string will be replaced by the number"
       },

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

@@ -60,8 +60,8 @@ export class CalciteScrim {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },