@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -1,12 +1,13 @@
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
 import { isValidFormattedStringTime, formattedStringToCustomUnformattedStringTime, unformattedStringToFormattedStringTime, formatTime, getProps, setProps, } from '../../utils/utils';
-import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupTimePickerProps, } from './kup-time-picker-declarations';
 import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDatesFormats } from '../../utils/kup-dates/kup-dates-declarations';
+import { FTextField } from '../../f-components/f-text-field/f-text-field';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { KupDynamicPositionPlacement } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupTimePicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -68,14 +69,13 @@ export class KupTimePicker {
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;
+    this.textFieldContainerEl = undefined;
     this.textfieldEl = undefined;
-    this.pickerContainerEl = undefined;
-    this.pickerEl = undefined;
-    this.pickerOpened = false;
+    this.pickerKupEl = undefined;
+    this.clickCb = null;
   }
   onKupTimePickerItemClick(e, value) {
     if (e != null) {
-      e.stopPropagation();
       if (value == null) {
         value = e.detail.selected.value;
       }
@@ -91,9 +91,9 @@ export class KupTimePicker {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.setFocus();
   }
-  onKupClearIconClick(e) {
-    e.stopPropagation();
+  onKupClearIconClick() {
     this.setPickerValueSelected('');
     this.kupChange.emit({
       comp: this,
@@ -113,29 +113,17 @@ export class KupTimePicker {
       value: this.value,
     });
   }
-  onKupTextFieldBlur(e) {
-    const eventValue = e.detail.value;
-    if (eventValue) {
-      const newValue = this.getFormattedValue(eventValue);
-      if (newValue) {
-        this.setValue(newValue);
-      }
-    }
-  }
   onKupChange(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupChange);
+    this.refreshPickerValue(e.target.value, this.kupChange);
   }
-  onKupClick(e) {
-    e.stopPropagation();
+  onKupClick() {
     this.kupClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
     });
   }
-  onKupFocus(e) {
-    e.stopPropagation();
+  onKupFocus() {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
@@ -143,15 +131,12 @@ export class KupTimePicker {
     });
   }
   onKupInput(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupInput);
+    this.refreshPickerValue(e.target.value, this.kupInput);
   }
   onKupTextFieldSubmit(e) {
-    e.stopPropagation();
-    this.refreshPickerValue(e.detail.value, this.kupTextFieldSubmit);
+    this.refreshPickerValue(e.target.value, this.kupTextFieldSubmit);
   }
-  onKupIconClick(e) {
-    e.stopPropagation();
+  onKupIconClick() {
     if (this.isPickerOpened()) {
       this.closePicker();
     }
@@ -173,7 +158,6 @@ export class KupTimePicker {
         this.closePicker();
       }
       if (e.key === 'Enter') {
-        e.stopPropagation();
         this.onKupTimePickerItemClick(null);
       }
     }
@@ -229,7 +213,7 @@ export class KupTimePicker {
    */
   async setFocus() {
     if (this.textfieldEl != null) {
-      this.textfieldEl.setFocus();
+      this.textfieldEl.focus();
     }
   }
   /**
@@ -244,7 +228,6 @@ export class KupTimePicker {
    */
   async setValue(value) {
     this.value = value;
-    this.setTextFieldInitalValue(this.getTimeForOutput());
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -259,7 +242,6 @@ export class KupTimePicker {
     if (isValidFormattedStringTime(eventDetailValue, this.manageSeconds)) {
       this.value = eventDetailValue;
       newValue = this.value;
-      this.setTextFieldInitalValue(this.getTimeForOutput());
     }
     if (newValue != null) {
       eventToRaise.emit({
@@ -284,76 +266,69 @@ export class KupTimePicker {
       return;
     }
     this.value = newValue;
-    this.setTextFieldInitalValue(this.getTimeForOutput());
   }
   getPickerValueSelected() {
     return this.value;
   }
-  setTextFieldInitalValue(value) {
-    if (this.textfieldEl !== undefined) {
-      this.textfieldEl.setValue(value);
-    }
-  }
   getValueForPickerComponent() {
     return this.value;
   }
   openPicker() {
-    let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = true;
-    this.setClockViewActive(true, false, false);
-    let textFieldWidth = null;
-    if (textfieldEl != null) {
-      textFieldWidth =
-        textfieldEl.shadowRoot.querySelector('.mdc-text-field').clientWidth;
-      textfieldEl.classList.add('toggled');
-      textfieldEl.emitSubmitEventOnEnter = false;
+    const elStyle = this.pickerKupEl.style;
+    elStyle.height = 'auto';
+    elStyle.minWidth = this.textFieldContainerEl.clientWidth + 'px';
+    this.pickerKupEl.menuVisible = true;
+    if (this.textfieldEl != null) {
+      this.textfieldEl.classList.add('toggled');
     }
-    if (containerEl != null) {
-      this.kupManager.dynamicPosition.start(containerEl);
-      containerEl.classList.add('visible');
-      let elStyle = containerEl.style;
-      elStyle.height = 'auto';
-      if (textFieldWidth != null) {
-        elStyle.minWidth = textFieldWidth + 'px';
-      }
+    if (this.kupManager.dynamicPosition.isRegistered(this.pickerKupEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.pickerKupEl, this.textFieldContainerEl);
     }
-    this.refresh();
+    else {
+      this.kupManager.dynamicPosition.register(this.pickerKupEl, this.textFieldContainerEl, 0, KupDynamicPositionPlacement.AUTO, true);
+    }
+    this.kupManager.dynamicPosition.start(this.pickerKupEl);
+    if (!this.clickCb) {
+      this.clickCb = {
+        cb: () => {
+          this.closePicker();
+        },
+        el: this.pickerKupEl,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCb, true);
   }
   closePicker() {
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.removeClickCallback(this.clickCb);
     let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = false;
     if (textfieldEl != null) {
       textfieldEl.classList.remove('toggled');
-      textfieldEl.emitSubmitEventOnEnter = true;
-    }
-    if (containerEl != null) {
-      this.kupManager.dynamicPosition.stop(containerEl);
-      containerEl.classList.remove('visible');
     }
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.dynamicPosition.stop(this.pickerKupEl);
+    this.kupManager.removeClickCallback(this.clickCb);
   }
   isPickerOpened() {
-    return this.pickerOpened;
+    return this.pickerKupEl.menuVisible == true;
   }
   getTextFieldId() {
     return this.textfieldEl.id;
   }
   getPickerElId() {
-    return this.pickerEl.id;
-  }
-  prepTimeTextfield() {
-    return this.prepTextfield(this.getTimeForOutput());
+    return this.pickerKupEl.id;
   }
   prepTextfield(initialValue) {
-    let textfieldData = Object.assign({}, this.data['kup-text-field']);
-    if (!textfieldData['icon']) {
-      textfieldData['icon'] = 'access_time';
+    const fullHeight = this.rootElement.classList.contains('kup-full-height');
+    const fullWidth = this.rootElement.classList.contains('kup-full-width');
+    const textfieldData = Object.assign({}, this.data['kup-text-field']);
+    if (!textfieldData.icon) {
+      textfieldData.icon = 'access_time';
     }
-    if (textfieldData['icon']) {
-      textfieldData['trailingIcon'] = true;
+    if (textfieldData.icon) {
+      textfieldData.trailingIcon = true;
     }
-    let comp = (h("kup-text-field", Object.assign({}, textfieldData, { disabled: this.disabled, id: this.rootElement.id + '_text-field', initialValue: initialValue, "onkup-textfield-change": (e) => this.onKupChange(e), "onkup-textfield-click": (e) => this.onKupClick(e), "onkup-textfield-focus": (e) => this.onKupFocus(e), "onkup-textfield-input": (e) => this.onKupInput(e), "onkup-textfield-blur": (e) => this.onKupTextFieldBlur(e), "onkup-textfield-iconclick": (e) => this.onKupIconClick(e), "onkup-textfield-submit": (e) => this.onKupTextFieldSubmit(e), "onkup-textfield-cleariconclick": (e) => this.onKupClearIconClick(e), ref: (el) => (this.textfieldEl = el) })));
+    let comp = (h(FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, id: this.rootElement.id + '_text-field', value: initialValue, onChange: (e) => this.onKupChange(e), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onInput: (e) => this.onKupInput(e), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onClearIconClick: () => this.onKupClearIconClick() }), this.prepTimePicker()));
     return comp;
   }
   isRelatedTargetInThisComponent(e) {
@@ -373,196 +348,25 @@ export class KupTimePicker {
     let idConc = '#time-picker-div#confirm#';
     return idConc.indexOf('#' + id + '#') >= 0;
   }
-  setTimeFromClock(e) {
-    let text = this.hoursEl.innerText + ':' + this.minutesEl.innerText;
-    if (this.manageSeconds) {
-      text += ':' + this.secondsEl.innerText;
-    }
-    this.onKupTimePickerItemClick(e, text);
-  }
-  createClock() {
-    let selectedTime;
-    if (this.value) {
-      selectedTime = this.kupManager.dates.toDate(this.value, this.manageSeconds
-        ? KupDatesFormats.ISO_TIME
-        : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
-    }
-    else {
-      selectedTime = new Date();
-    }
-    let hh = selectedTime.getHours().toString();
-    let mm = selectedTime.getMinutes().toString();
-    if (hh.length === 1) {
-      hh = '0' + hh;
-    }
-    if (mm.length === 1) {
-      mm = '0' + mm;
-    }
-    let ss = '';
-    if (this.manageSeconds) {
-      ss = selectedTime.getSeconds().toString();
-      if (ss.length === 1) {
-        ss = '0' + ss;
-      }
-    }
-    let seconds;
-    let time = [
-      h("span", { class: "h", ref: (el) => (this.hoursEl = el), onClick: () => {
-          this.setClockViewActive(true, false, false);
-          this.switchView(this.hoursEl, this.hoursCircleEl);
-        }, innerHTML: hh }),
-      ':',
-      h("span", { class: "m", ref: (el) => (this.minutesEl = el), onClick: () => {
-          this.setClockViewActive(false, true, false);
-          this.switchView(this.minutesEl, this.minutesCircleEl);
-        }, innerHTML: mm }),
-    ];
-    if (this.manageSeconds) {
-      seconds = (h("div", { class: "circle seconds", ref: (el) => (this.secondsCircleEl = el) },
-        this.buildClock(60, 101, 115, 115, 'sec unit', 0, 5, ss),
-        h("div", { class: "mid" })));
-      time.push(':', h("span", { class: "s", ref: (el) => (this.secondsEl = el), onClick: () => {
-          this.setClockViewActive(false, false, true);
-          this.switchView(this.secondsEl, this.secondsCircleEl);
-        }, innerHTML: ss }));
-    }
-    return (h("div", { class: "clock", id: this.rootElement.id + '_clock', ref: (el) => (this.pickerEl = el) },
-      h("div", { class: "top" }, time),
-      h("div", { class: "circle hours", ref: (el) => (this.hoursCircleEl = el) },
-        this.buildClock(12, 101, 105, 105, 'hour', 0, 1, hh),
-        this.buildClock(12, 64, 110, 110, 'hour2', 12, 1, hh),
-        h("div", { class: "mid" })),
-      h("div", { class: "circle minutes", ref: (el) => (this.minutesCircleEl = el) },
-        this.buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm),
-        h("div", { class: "mid" })),
-      seconds,
-      h("div", { class: "actions" },
-        h("kup-button", { "onkup-button-click": (e) => {
-            this.setTimeFromClock(e);
-          }, id: "confirm", styling: FButtonStyling.FLAT, label: "Ok" }))));
-  }
-  switchView(el, elCircle) {
-    this.hoursEl.classList.remove('active');
-    this.hoursCircleEl.classList.remove('active');
-    this.minutesEl.classList.remove('active');
-    this.minutesCircleEl.classList.remove('active');
-    if (this.secondsEl) {
-      this.secondsEl.classList.remove('active');
-      this.secondsCircleEl.classList.remove('active');
-    }
-    el.classList.add('active');
-    elCircle.classList.add('active');
-  }
-  setClockViewActive(hoursActive, minutesActive, secondsActive) {
-    this.hoursActive = hoursActive;
-    this.minutesActive = minutesActive;
-    this.secondsActive = secondsActive;
-  }
-  buildClock(num, radius, offsetX, offsetY, className, add, separator, selectedValue) {
-    let x, y;
-    let divsArray = [];
-    for (var n = 0; n < num; n++) {
-      x = radius * Math.cos((n / num) * 2 * Math.PI);
-      y = radius * Math.sin((n / num) * 2 * Math.PI);
-      let text;
-      let dataValue = {};
-      let style = {};
-      if (separator == 1) {
-        if (n + 3 > 12) {
-          text = n + 3 - 12 + add + '';
-        }
-        else {
-          let calc = n + 3 + add;
-          if (calc !== 24) {
-            text = n + 3 + add + '';
-          }
-          else {
-            text = '00';
-          }
-        }
-        dataValue['data-value'] = text;
-      }
-      else {
-        if (n % separator == 0) {
-          if (n + 15 >= 60) {
-            dataValue['data-value'] = n + 15 - 60 + '';
-            text = n + 15 - 60 + add + '';
-          }
-          else {
-            dataValue['data-value'] = n + 15 + '';
-            text = n + 15 + add + '';
-          }
-        }
-        else {
-          if (n + 15 >= 60) {
-            dataValue['data-value'] = n + 15 - 60 + '';
-            text = '⋅';
-          }
-          else {
-            dataValue['data-value'] = n + 15 + '';
-            text = '\u00B7';
-          }
-        }
-      }
-      style['left'] = x + offsetX + 'px';
-      style['top'] = y + offsetY + 'px';
-      if (dataValue['data-value'].length === 1) {
-        dataValue['data-value'] = '0' + dataValue['data-value'];
-      }
-      let elClass = className;
-      if (dataValue['data-value'] === selectedValue) {
-        elClass += ' selected';
-      }
-      let div = (h("div", Object.assign({ class: elClass, style: style }, dataValue, { onClick: (e) => this.setClockTime(e) }), text));
-      divsArray.push(div);
-    }
-    return divsArray;
-  }
-  setClockTime(e) {
-    let time = e.target.getAttribute('data-value');
-    if (this.hoursActive) {
-      this.hoursEl.innerText = time;
-      this.hoursCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setClockViewActive(false, true, false);
-      this.switchView(this.minutesEl, this.minutesCircleEl);
-    }
-    else if (this.minutesActive) {
-      this.minutesEl.innerText = time;
-      this.minutesCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      if (this.manageSeconds) {
-        this.setClockViewActive(false, false, true);
-        this.switchView(this.secondsEl, this.secondsCircleEl);
-      }
-      else {
-        this.setTimeFromClock(e);
-      }
-    }
-    else {
-      this.secondsEl.innerText = time;
-      this.secondsCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setTimeFromClock(e);
-    }
-    e.target.classList.add('selected');
-  }
   prepTimePicker() {
-    let widget = undefined;
     if (this.clockVariant) {
-      widget = this.createClock();
+      const data = {
+        options: {
+          initialValue: this.value,
+          manageSeconds: this.manageSeconds,
+          hoursActive: this.hoursActive,
+          minutesActive: this.minutesActive,
+          secondsActive: this.secondsActive,
+        },
+      };
+      return (h("kup-card", { ref: (el) => (this.pickerKupEl = el), data: data, "layout-family": "builtin", "layout-number": "2", "size-x": "300px", "size-y": "450px", "is-menu": true, "onkup-card-click": (ev) => {
+          if (ev.detail.value != null && ev.detail.value != '')
+            this.onKupTimePickerItemClick(ev, ev.detail.value);
+        } }));
     }
     else {
-      widget = (h("kup-list", { data: this.createTimeListData(this.value), "is-menu": true, "menu-visible": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list', ref: (el) => (this.pickerEl = el) }));
+      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list' }));
     }
-    return (h("div", { tabindex: "-1", id: "time-picker-div", ref: (el) => (this.pickerContainerEl = el), onBlur: (e) => {
-        if (!this.isRelatedTargetInThisComponent(e)) {
-          this.onKupBlur();
-        }
-      } }, widget));
   }
   createTimeListData(value) {
     let listData = [];
@@ -606,11 +410,6 @@ export class KupTimePicker {
     let v1 = unformattedStringToFormattedStringTime(this.value, this.manageSeconds);
     return v1;
   }
-  recalcPosition() {
-    if (this.pickerContainerEl != null && this.textfieldEl != null) {
-      this.kupManager.dynamicPosition.register(this.pickerContainerEl, this.textfieldEl);
-    }
-  }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
@@ -633,45 +432,26 @@ export class KupTimePicker {
     this.kupManager.debug.logRender(this, false);
   }
   componentDidRender() {
-    if (this.clockVariant) {
-      if (this.hoursActive) {
-        this.switchView(this.hoursEl, this.hoursCircleEl);
-      }
-      else if (this.minutesActive) {
-        this.switchView(this.minutesEl, this.minutesCircleEl);
-      }
-      else if (this.secondsActive) {
-        this.switchView(this.secondsEl, this.secondsCircleEl);
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const f = root.querySelector('.f-text-field');
+      if (f) {
+        this.textFieldContainerEl = f;
+        this.textfieldEl = f.querySelector('input');
+        FTextFieldMDC(f);
       }
     }
-    this.recalcPosition();
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let hostClass = {};
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['className'] &&
-      this.data['kup-text-field']['className'].indexOf('kup-full-height') > -1) {
-      hostClass['kup-full-height'] = true;
-    }
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['fullWidth']) {
-      hostClass['kup-full-width'] = true;
-    }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { class: hostClass, onBlur: () => this.onKupBlur() },
-      customStyle ? h("style", null, customStyle) : null,
-      h("div", { id: componentWrapperId },
-        this.prepTimeTextfield(),
-        this.prepTimePicker())));
+    return (h(Host, null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
-    const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
-    if (dynamicPositionElements.length > 0) {
-      this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
+    if (this.pickerKupEl) {
+      this.pickerKupEl.remove();
     }
   }
   static get is() { return "kup-time-picker"; }
@@ -695,8 +475,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When set to true, the drop down menu will display a clock."
       },
@@ -716,11 +496,11 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -744,8 +524,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{}",
-            "name": "default"
+            "name": "default",
+            "text": "{}"
           }],
         "text": "Props of the sub-components (time input text field)"
       },
@@ -763,8 +543,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -784,8 +564,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component."
       },
@@ -805,8 +585,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Manage seconds."
       },
@@ -826,8 +606,8 @@ export class KupTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "10",
-            "name": "default"
+            "name": "default",
+            "text": "10"
           }],
         "text": "Minutes step."
       },
@@ -1026,8 +806,8 @@ export class KupTimePicker {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -1106,8 +886,8 @@ export class KupTimePicker {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],