@yoobic/yobi 8.2.0-9 → 8.2.2

package/dist/collection/components/form/form-choice/radio/form-choice-radio.js

@@ -0,0 +1,481 @@
+import { translate, translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { compact, isString } from 'lodash-es';
+import { setValueAndValidateInput } from '../../../../utils/helpers/form-input-helpers';
+import { hasWarnings, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
+import { ReadonlyCard } from '../readonly-card/readonly-card';
+export class YooFormChoiceRadioComponent {
+  constructor() {
+    this.multiple = false;
+    this.validators = [];
+    this.shuffled = false;
+    this.answer = [];
+    this.values = [];
+    this.selection = [];
+    this.choices = [];
+  }
+  onValuesChanged(newValues, oldValues) {
+    updateValues(newValues, oldValues, this);
+  }
+  onValueChange(newValue, oldValue) {
+    updateValue(newValue, oldValue, this, (v) => this.onItemSelectRadio(v, true, true));
+  }
+  get valuesWithOther() {
+    return [...this.choices].concat(compact([this.allowOther && !this.multiple && translate('OTHER')]));
+  }
+  componentWillLoad() {
+    var _a;
+    prepareChoice(this);
+    this.textareaValue = !((_a = this.choices) === null || _a === void 0 ? void 0 : _a.includes(this.value)) && this.value;
+  }
+  componentDidLoad() {
+    hasWarnings(this.values, this);
+    this.updateShowOther(true);
+  }
+  convertToEntities(values) {
+    return values.map((value) => ({ _id: value, title: translateMulti(value) }));
+  }
+  convertToChoiceFormat(valuesEntity) {
+    return valuesEntity.map(({ _id }) => _id);
+  }
+  setShowOther(value, didLoad) {
+    this.showOther = value;
+    // wait for the textarea to be presented
+    setTimeout(() => {
+      // prevent focus on did load otherwise mutiple focus on form-choice will be fired
+      if (this.showOther && this.textareaRef && !didLoad) {
+        this.textareaRef.focus();
+      }
+    }, 50);
+  }
+  updateShowOther(didLoad) {
+    if (this.allowOther && this.value && this.choices && !this.choices.includes(this.value)) {
+      this.setShowOther(true, didLoad);
+    }
+  }
+  onInput(ev) {
+    var _a;
+    ev.stopPropagation();
+    this.textareaValue = ev.target.value;
+    this.selection = [this.textareaValue];
+    setValueAndValidateInput(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
+    this.updateShowOther();
+  }
+  onItemSelectRadio(item, preventSetValue = false, onValueChange = false) {
+    if (item === null && !onValueChange) {
+      onItemSelect(item, this);
+    }
+    else if (this.multiple && !onValueChange) {
+      this.selection = this.convertToChoiceFormat(item);
+      setValueAndValidateInput(this.selection, this);
+    }
+    else {
+      const itemVal = isString(item) ? item : item._id;
+      if (!this.customEvent && itemVal === translate('OTHER')) {
+        this.value = null;
+        this.selection = [];
+        if (!this.showOther)
+          this.setShowOther(true);
+      }
+      else {
+        onItemSelect(itemVal, this, preventSetValue);
+        if (this.showOther)
+          this.setShowOther(false);
+      }
+    }
+  }
+  onTextAreaFocused() {
+    this.inputFocused.emit({ host: this.textareaRef });
+  }
+  renderRadio() {
+    const valuesEntity = this.convertToEntities(this.valuesWithOther);
+    let initialEntity = null;
+    if (this.showOther) {
+      initialEntity = valuesEntity.find((v) => v._id === translate('OTHER'));
+    }
+    else if (this.value) {
+      initialEntity = this.convertToEntities(!Array.isArray(this.value) ? [this.value] : this.value);
+    }
+    return [
+      this.choices &&
+        h("yoo-grid", { class: "choice radio-button-choice", blockSelectionMode: true, items: valuesEntity, initialSelection: initialEntity, keepSelection: true, multiple: this.multiple, displayType: "card-list", onSelected: (ev) => this.onItemSelectRadio(ev.detail), hideHeader: true, isLocal: true, useTranslate: this.useTranslate, animated: false, valuesColor: this.valuesColor }),
+      this.showOther &&
+        h("div", { class: "input-zone" },
+          h("textarea", { ref: (el) => (this.textareaRef = el), value: this.textareaValue, onInput: (ev) => this.onInput(ev), onFocus: () => this.onTextAreaFocused() }))
+    ];
+  }
+  renderBanner() {
+    return this.livePreview && h("yoo-banner", null,
+      h("p", { slot: "content" }));
+  }
+  render() {
+    return (h(Host, null, this.readonly ?
+      h(ReadonlyCard, { value: this.value, answer: this.answer, valuesColor: this.valuesColor, classNames: "radio" }) : [
+      this.renderBanner(),
+      this.choices && this.renderRadio()
+    ]));
+  }
+  static get is() { return "yoo-form-choice-radio"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["form-choice-radio.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["form-choice-radio.css"]
+  }; }
+  static get properties() { return {
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false
+    },
+    "validators": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(Validator<any[]> | IValidatorEntry)[]",
+        "resolved": "(IValidatorEntry | Validator<any[]>)[]",
+        "references": {
+          "Validator": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          },
+          "IValidatorEntry": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
+    "useTranslate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "use-translate",
+      "reflect": false
+    },
+    "allowOther": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "allow-other",
+      "reflect": false
+    },
+    "valuesColor": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ key: string; value: string }[]",
+        "resolved": "{ key: string; value: string; }[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "livePreview": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "live-preview",
+      "reflect": false
+    },
+    "shuffled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "shuffled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "answer": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false
+    },
+    "customEvent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "custom-event",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "values": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string[] | string",
+        "resolved": "string | string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "showOther": {},
+    "selection": {}
+  }; }
+  static get events() { return [{
+      "method": "validityChanged",
+      "name": "validityChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "inputBlurred",
+      "name": "inputBlurred",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "inputFocused",
+      "name": "inputFocused",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "inputChanged",
+      "name": "inputChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "choiceSelected",
+      "name": "choiceSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "values",
+      "methodName": "onValuesChanged"
+    }, {
+      "propName": "value",
+      "methodName": "onValueChange"
+    }]; }
+}

package/dist/collection/components/form/form-choice/readonly-card/readonly-card.js

@@ -0,0 +1,11 @@
+import { translateMulti } from '@shared/utils';
+import { h } from '@stencil/core';
+export const ReadonlyCard = ({ value, values, answer, valuesColor, classNames }) => {
+  const classes = typeof classNames === 'string' ? classNames : Object.keys(classNames).join(' ');
+  return h("div", { class: { [classes]: !!classes, 'readonly-card': true } }, (!!value && (Array.isArray(value) ? value : [value])).map((val) => {
+    var _a, _b;
+    const isCorrect = answer === null || answer === void 0 ? void 0 : answer.includes(val);
+    const title = (_a = values === null || values === void 0 ? void 0 : values.find((v) => (v === null || v === void 0 ? void 0 : v.value) === val)) === null || _a === void 0 ? void 0 : _a.title;
+    return h("div", { class: { text: true, valid: answer && isCorrect, invalid: answer && !isCorrect }, style: { color: (_b = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find(e => e.key === val)) === null || _b === void 0 ? void 0 : _b.value }, innerHTML: translateMulti(title || val) });
+  }));
+};

package/dist/collection/components/form/form-date-time/form-date-time.js

@@ -158,7 +158,7 @@ export class YooFormDateTimeComponent {
     if (newMinutes === 0 && prevMinutes !== newMinutes) {
       defaultValue.setHours(defaultValue.getHours() + 1);
     }
-    this.value = this.value || defaultValue;
+    this.value = this.value || (this.isRange ? [defaultValue] : defaultValue);
     this.onToggle(ev);
   }
   onClearClicked(event) {
@@ -278,7 +278,7 @@ export class YooFormDateTimeComponent {
     if (this.isTimeInput(this.type)) {
       setValueAndValidateInput(this.currentTime, this);
     }
-    else if ((this.isSchedule && (!isNativeMobile() || isAndroid())) || (!isNativeMobile() && this.isDateTimeInput(this.type))) {
+    else if ((this.isSchedule && (!isNativeMobile() || isAndroid())) || this.isDateTimeInput(this.type)) {
       // Here we simply increment/decrement time to avoid changing dates
       const updatedValue = this.updateTimeValue(this.value, this.currentTime);
       setValueAndValidateInput(convertValueForInputType(updatedValue, this.type, this.useISOString), this);