@yoobic/yobi 8.2.0-5 → 8.2.0-52

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

@@ -0,0 +1,441 @@
+import { MessageType } from '@shared/interfaces';
+import { translate, translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
+import { ReadonlyCard } from '../readonly-card/readonly-card';
+export class YooFormChoiceChatComponent {
+  constructor() {
+    this.animated = true;
+    this.multiple = false;
+    this.validators = [];
+    this.shuffled = false;
+    this.answer = [];
+    this.values = [];
+    this.selection = [];
+    this.choices = [];
+  }
+  onValuesChanged(newValues, oldValues) {
+    updateValues(newValues, oldValues, this);
+  }
+  onValueChanged(newValue, oldValue) {
+    updateValue(newValue, oldValue, this);
+  }
+  componentWillLoad() {
+    prepareChoice(this);
+  }
+  componentDidLoad() {
+    hasWarnings(this.values, this);
+  }
+  renderChat() {
+    var _a;
+    const getMessage = (opts) => ({ ...opts, readonly: true, type: MessageType.text });
+    return this.choices && this.sentence &&
+      h("section", { id: "messages" },
+        !this.description && h("div", { class: "title" }, translate('THECLIENTASKS')),
+        h("yoo-chat-message", { class: "radius", animation: this.animated ? 'loading' : null, message: getMessage({ content: translateMulti(this.sentence), isAlternate: false }) }),
+        h("div", { class: "title alternate" }, translate('WHATSTHECORRECTRESPONSE')), (_a = this.choices) === null || _a === void 0 ? void 0 :
+        _a.map((value, index, s) => (h("yoo-chat-message", { class: { choice: true, radius: true, selected: isSelected(value, this.selection) }, style: this.animated ? { '--choice-index': index.toString() } : {}, message: getMessage({ content: value, isFirst: !index, isLast: index === s.length - 1, isAlternate: true }), onClick: () => onItemSelect(value, this) }))));
+  }
+  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, classNames: "chat" }) : [
+      this.renderBanner(),
+      this.renderChat()
+    ]));
+  }
+  static get is() { return "yoo-form-choice-chat"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["form-choice-chat.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["form-choice-chat.css"]
+  }; }
+  static get properties() { return {
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "animated",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "sentence": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sentence",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": 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
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TBaseSize",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "TBaseSize": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": true
+    },
+    "validity": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "validity",
+      "reflect": false
+    },
+    "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
+    },
+    "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": "Array<string> | string",
+        "resolved": "string | string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "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": "onValueChanged"
+    }]; }
+}

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

@@ -0,0 +1,62 @@
+import { isNullOrUndefined } from '@shared/utils';
+import { compact, findIndex, isEqual, shuffle } from 'lodash-es';
+import { hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
+export function isSelected(item, selection) {
+  const tmpSelection = [].concat(selection);
+  const index = findIndex(tmpSelection, (s) => isEqual(item, s));
+  return index >= 0;
+}
+export function onItemSelect(item, choiceElement, preventSetValue = false) {
+  if (choiceElement.customEvent) {
+    choiceElement.choiceSelected.emit(item);
+  }
+  else if (!choiceElement.readonly) {
+    const index = choiceElement.selection.indexOf(item);
+    if (choiceElement.multiple) {
+      choiceElement.selection = index < 0 ? [...choiceElement.selection, item] : [...choiceElement.selection.slice(0, index), ...choiceElement.selection.slice(index + 1)];
+    }
+    else {
+      choiceElement.selection = index < 0 ? [item] : [];
+    }
+    if (!preventSetValue) {
+      setValueAndValidateInput(choiceElement.multiple ? choiceElement.selection : choiceElement.selection[0], choiceElement);
+    }
+  }
+}
+export function getColor(value, valuesColor, selection) {
+  var _a;
+  if ((valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.length) && value) {
+    return isSelected(value, selection) ? ((_a = valuesColor.find(({ key }) => key === value)) === null || _a === void 0 ? void 0 : _a.value) || '' : '';
+  }
+  return '';
+}
+export function updateValue(newVal, oldVal, choiceElement, onSelectCall) {
+  if (!isEqual(oldVal, newVal)) {
+    choiceElement.selection = [];
+    compact([].concat(newVal)).forEach((v) => {
+      !onSelectCall ? onItemSelect(v, choiceElement, true) : onSelectCall(v);
+    });
+  }
+}
+export function updateValues(newVal, oldVal, choiceElement, warningMsgs) {
+  if (!isEqual(newVal, oldVal) && !hasWarnings(newVal, choiceElement, warningMsgs)) {
+    choiceElement.choices = updateChoices(choiceElement.values, choiceElement.shuffled);
+  }
+}
+export function prepareChoice(choiceElement) {
+  setValidator(choiceElement);
+  if (!isNullOrUndefined(choiceElement.value)) {
+    choiceElement.selection = [].concat(choiceElement.value);
+  }
+  choiceElement.choices = updateChoices(choiceElement.values, choiceElement.shuffled);
+}
+export function hasWarnings(values, choiceElement, warningMsgs) {
+  const duplicateMessage = 'NODUPLICATEVALUES';
+  const hasDuplicatedValues = hasDuplicates(values);
+  showWarningAlert(choiceElement.host, hasDuplicatedValues || !!(warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length), hasDuplicatedValues ? duplicateMessage : warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs[0]);
+  return hasDuplicatedValues && (warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length) > 0;
+}
+function updateChoices(values, shuffled) {
+  return shuffled ? shuffle(values) : values;
+}