@yoobic/yobi 8.2.0-7 → 8.2.0

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

@@ -0,0 +1,440 @@
+import { translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { isEqual, isString } from 'lodash-es';
+import { showSlidesMedia } from '../../../../utils/helpers/common-helpers';
+import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
+export class YooFormChoiceImageComponent {
+  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, this.hasEmptyValues && ['NOEMPTYVALUES']);
+  }
+  onValueChanged(newValue, oldValue) {
+    updateValue(newValue, oldValue, this);
+  }
+  get hasEmptyValues() {
+    var _a;
+    return this.values.length >= 2 && !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.filter(v => (v.image && !v.text) || (!v.image && v.text)).length);
+  }
+  componentWillLoad() {
+    prepareChoice(this);
+  }
+  componentDidLoad() {
+    hasWarnings(this.values, this, this.hasEmptyValues && ['NOEMPTYVALUES']);
+  }
+  renderImage(image, text, values, index) {
+    const readonly = this.readonly || this.isPdf;
+    const isCorrect = this.answer.some(val => isEqual({ text, image }, val));
+    const onOpenImage = (values, index) => showSlidesMedia({ items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
+    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
+      h("div", { class: { 'content': true, 'correct-answer': this.readonly && this.answer.length && isCorrect, 'wrong-answer': this.readonly && this.answer.length && !isCorrect } },
+        h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(values[index], this) }),
+        !readonly && [
+          h("yoo-form-checkbox", { value: isSelected(values[index], this.selection), onClick: () => onItemSelect(values[index], this), animated: this.animated }),
+          h("yoo-tag", { color: "dark-60", icon: "maximize", iconOnlyColor: "light", size: "small", onClick: () => onOpenImage(values, index) })
+        ]),
+      text && h("div", { class: "text truncate" }, translateMulti(text))));
+  }
+  renderImages() {
+    let values = this.choices || [];
+    if (this.readonly && this.value) {
+      const answers = Array.isArray(this.value) ? this.value : [this.value];
+      values = values.filter(value => answers.some((answer) => isString(answer) ? answer === value.text : isEqual(answer, value)));
+    }
+    return values.map((value, index) => {
+      const { text, image } = value || {};
+      return image && this.renderImage(image, text, values, index);
+    });
+  }
+  renderBanner() {
+    return this.livePreview && h("yoo-banner", null,
+      h("p", { slot: "content" }));
+  }
+  render() {
+    return (h(Host, null,
+      !this.readonly && this.renderBanner(),
+      (this.readonly || this.choices) && this.renderImages()));
+  }
+  static get is() { return "yoo-form-choice-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["form-choice-image.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["form-choice-image.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"
+    },
+    "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
+    },
+    "isHistory": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-history",
+      "reflect": false
+    },
+    "isPdf": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-pdf",
+      "reflect": true
+    },
+    "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": "IFormChoiceValue[]",
+        "resolved": "IFormChoiceValue[]",
+        "references": {
+          "IFormChoiceValue": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "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": "IFormChoiceValue[]",
+        "resolved": "IFormChoiceValue[]",
+        "references": {
+          "IFormChoiceValue": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "IFormChoiceValue[] | IFormChoiceValue",
+        "resolved": "IFormChoiceValue | IFormChoiceValue[]",
+        "references": {
+          "IFormChoiceValue": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  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"
+    }]; }
+}