@yoobic/yobi 8.2.0-9 → 8.2.2

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

@@ -1,888 +0,0 @@
-import { MessageType } from '@shared/interfaces';
-import { isNullOrUndefined, translate, translateMulti } from '@shared/utils';
-import { isChromatic } from '@shared/utils';
-import { Component, Event, h, Prop, State, Watch } from '@stencil/core';
-import { compact, findIndex, isEqual, isString, shuffle } from 'lodash-es';
-import { setColorSVG, showSlidesMedia } from '../../../utils/helpers/common-helpers';
-import { hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
-import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
-export class YooFormChoiceComponent {
-  constructor() {
-    this.animated = true;
-    this.multiple = false;
-    this.validators = [];
-    this.shuffled = false;
-    this.answer = [];
-    this.values = [];
-    this.selection = [];
-    this.imgRefs = [];
-    this.choices = [];
-  }
-  onValuesChanged(newValues, oldValues) {
-    if (!isEqual(newValues, oldValues)) {
-      this.showWarning();
-    }
-  }
-  onValueChange(newValue, oldValue) {
-    if (!isEqual(newValue, oldValue)) {
-      this.selection = [];
-      const values = compact([].concat(this.value));
-      values.forEach((v) => {
-        if (!this.selection || this.selection.indexOf(v) < 0) {
-          this.onItemSelect(v, true);
-        }
-      });
-    }
-  }
-  componentWillLoad() {
-    var _a;
-    setValidator(this);
-    this.updateChoices();
-    if (!isNullOrUndefined(this.value)) {
-      this.selection = [].concat(this.value);
-    }
-    this.textareaValue = this.value && !((_a = this.choices) === null || _a === void 0 ? void 0 : _a.includes(this.value)) ? this.value : undefined;
-  }
-  componentDidLoad() {
-    this.updateShowOther(true);
-    this.showWarning();
-  }
-  showWarning() {
-    var _a;
-    const hasDuplicatedValues = hasDuplicates(this.values);
-    const hasEmptyValues = this.type === 'image' && 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);
-    const bannerMessage = hasDuplicatedValues ? 'NODUPLICATEVALUES' : hasEmptyValues ? 'NOEMPTYVALUES' : '';
-    showWarningAlert(this.outerContainerElement, hasDuplicatedValues || hasEmptyValues, bannerMessage);
-    !hasDuplicatedValues && this.updateChoices();
-  }
-  updateChoices() {
-    this.choices = this.shuffled ? shuffle(this.values) : this.values;
-  }
-  validate() {
-    let isValid = true;
-    if (this.required && (this.value === null || this.value === undefined)) {
-      isValid = false;
-    }
-    if (!this.validity || this.validity !== isValid) {
-      this.validity = isValid;
-    }
-    this.validityChanged.emit(this.validity);
-    return this.validity;
-  }
-  convertToEntities(values) {
-    return values.map((value) => ({ _id: value, title: translateMulti(value) }));
-  }
-  convertToChoiceFormat(valuesEntity) {
-    return valuesEntity.map(({ _id }) => _id);
-  }
-  getValuesWithOther() {
-    const valuesOther = [...this.choices];
-    if (this.allowOther && !this.multiple) {
-      valuesOther.push(translate('OTHER'));
-    }
-    return valuesOther;
-  }
-  setShowOther(value, didLoad) {
-    this.showOther = value;
-    // wait for a while 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.indexOf(this.value) < 0) {
-      this.setShowOther(true, didLoad);
-    }
-  }
-  onInput(ev) {
-    ev.stopPropagation();
-    this.textareaValue = ev.target.value;
-    this.selection = [this.textareaValue];
-    setValueAndValidateInput(this.multiple ? this.selection : this.selection.length > 0 ? this.selection[0] : null, this);
-    this.updateShowOther();
-  }
-  onItemSelect(item, preventSetValue = false) {
-    if (this.customEvent) {
-      this.choiceSelected.emit(item);
-    }
-    else if (!this.readonly) {
-      if (item === translate('OTHER')) {
-        this.value = null;
-        this.selection = [];
-        this.setShowOther(true);
-      }
-      else {
-        const index = this.selection.indexOf(item);
-        if (this.multiple) {
-          this.selection = index < 0 ? [...this.selection, item] : [...this.selection.slice(0, index), ...this.selection.slice(index + 1)];
-        }
-        else {
-          this.selection = index < 0 ? [item] : [];
-        }
-        if (!preventSetValue) {
-          setValueAndValidateInput(this.multiple ? this.selection : this.selection.length > 0 ? this.selection[0] : null, this);
-        }
-        this.setShowOther(false);
-      }
-    }
-  }
-  onItemSelectRadio(item) {
-    if (item === null) {
-      this.onItemSelect(item);
-    }
-    else if (this.multiple) {
-      this.selection = this.convertToChoiceFormat(item);
-      setValueAndValidateInput(this.selection, this);
-    }
-    else {
-      this.onItemSelect(item._id);
-    }
-  }
-  isSelected(item) {
-    const selection = [].concat(this.selection);
-    const index = findIndex(selection, (s) => isEqual(item, s));
-    return index >= 0;
-  }
-  onTextAreaFocused() {
-    const evDetail = { host: this.textareaRef };
-    this.inputFocused.emit(evDetail);
-  }
-  renderButton() {
-    return (h("div", { class: "grid-container" }, this.choices
-      .map((item) => ({ icon: item.icon, text: isString(item) ? item : (item === null || item === void 0 ? void 0 : item._id) || (item === null || item === void 0 ? void 0 : item.value) || (item === null || item === void 0 ? void 0 : item.title) || '' }))
-      .map(({ icon, text }) => (h("yoo-button", { color: this.isSelected(text) ? this.getBackgroundColor(text) : 'light', customColor: this.getColor(text), size: this.size || 'large', onClick: () => this.onItemSelect(text) },
-      icon && h("yoo-icon", { slot: "start", color: this.isSelected(text) ? 'light' : 'dark', name: icon, size: this.size || 'large' }),
-      this.useTranslate ? translate(text === null || text === void 0 ? void 0 : text.toUpperCase()) : translateMulti(text))))));
-  }
-  renderRadio() {
-    const valuesOther = this.getValuesWithOther();
-    const valuesEntity = this.convertToEntities(valuesOther);
-    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: "radio-button-choice form-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 })) : null,
-      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() }))) : null
-    ];
-  }
-  getColor(value) {
-    if (this.valuesColor && value) {
-      if (!this.isSelected(value)) {
-        return '';
-      }
-      const color = this.valuesColor.find((e) => e.key === value);
-      return (color === null || color === void 0 ? void 0 : color.value) || '';
-    }
-  }
-  getBackgroundColor(value) {
-    if (this.valuesColor && value) {
-      const color = this.valuesColor.find((e) => e.key === value);
-      if (color === null || color === void 0 ? void 0 : color.value) {
-        return null;
-      }
-    }
-    return 'app-color';
-  }
-  renderChat() {
-    var _a;
-    const getMessage = (opts) => ({ readonly: true, type: MessageType.text, ...opts });
-    return (h("div", { class: "messages-container" },
-      !this.description && h("div", { class: "chat-title" }, translate('THECLIENTASKS')),
-      h("yoo-chat-message", { class: "radius", ...this.animated && { animation: 'loading' }, message: getMessage({ content: translateMulti(this.sentence), isAlternate: false }) }),
-      h("div", { class: "chat-title alternate" }, translate('WHATSTHECORRECTRESPONSE')), (_a = this.choices) === null || _a === void 0 ? void 0 :
-      _a.map((v, i, s) => (h("yoo-chat-message", { class: { choice: true, radius: true, selected: this.isSelected(v) }, style: this.animated ? { '--choice-index': i.toString() } : {}, message: getMessage({ content: v, isFirst: !i, isLast: i === s.length - 1, isAlternate: true }), onClick: () => this.onItemSelect(v) })))));
-  }
-  renderCard() {
-    var _a, _b, _c;
-    if ((_a = this.choices) === null || _a === void 0 ? void 0 : _a.length) {
-      (_b = this.imgRefs) === null || _b === void 0 ? void 0 : _b.forEach((imgRef) => setColorSVG(imgRef.shadowRoot.querySelector('svg'), imgRef.classList.contains('selected') ? 'app-color' : 'stable'));
-      const hasImage = 'image' in this.choices[0] || 'lottie' in this.choices[0];
-      const hasOne = ((_c = this.choices) === null || _c === void 0 ? void 0 : _c.length) === 1;
-      const style = {};
-      if (this.cardColumns) {
-        style.gridTemplateColumns = `repeat(${this.cardColumns}, minmax(var(--card-width), 1fr))`;
-      }
-      return (h("div", { class: { 'card-container': true, 'has-checkmark': !hasImage, 'has-image': hasImage, 'has-one': hasOne, 'selected': this.selected }, style: style }, this.choices.map((item, index) => {
-        const value = isNullOrUndefined(item.value) ? item.title : item.value;
-        const isSelected = this.isSelected(value);
-        return (h("div", { class: { 'card-select': true, selected: isSelected }, style: { maxWidth: this.maxWidth > 0 ? this.maxWidth + 'px' : null }, onClick: () => this.onItemSelect(value) },
-          h("div", { class: "card-content" },
-            item.icon && (h("div", { class: "card-icon" },
-              h("yoo-icon", { color: isSelected ? 'app-color' : 'dark', size: "extra-large", name: item.icon }))),
-            item.lottie && (h("div", { class: "card-image" },
-              h("yoo-lottie", { type: item.lottie, autoplay: !isChromatic(), loop: true }))),
-            item.image && (h("div", { class: "card-image" },
-              h("yoo-img", { svgOptions: { beforeInject: (_, svg) => isSelected && setColorSVG(svg, 'app-color') }, ref: (el) => (this.imgRefs[index] = el), class: { selected: isSelected }, src: item.image }))),
-            item.emoji && (h("div", { class: "card-emoji" }, item.emoji)),
-            item.title && h("div", { class: { 'card-heading': true } }, this.useTranslate ? translate(item.title.toUpperCase()) : translateMulti(item.title)),
-            item.description && h("div", { class: "card-description" }, translate(item.description))),
-          !item.image && !item.lottie && !item.hideCheckbox && (h("div", { class: "check-container" },
-            h("yoo-icon", { name: "check" })))));
-      })));
-    }
-  }
-  renderImage() {
-    let values = this.choices || [];
-    const readonly = this.readonly || this.isPdf;
-    const onOpenImage = (values, index) => showSlidesMedia({ items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
-    if (this.readonly && this.value) {
-      const answers = Array.isArray(this.value) ? this.value : [this.value];
-      values = values.filter(({ text }) => answers.some((answer) => answer === text));
-    }
-    return (h("div", { class: { 'images-container': true, readonly: this.readonly } }, values.map((value, index) => {
-      const { text, image } = value || {};
-      const answer = this.type === 'image' ? [].concat(this.answer).map(a => a.text ? a.text : a) : this.answer;
-      const isCorrect = (answer === null || answer === void 0 ? void 0 : answer.length) <= 0 ? null : answer.includes(text);
-      return image && (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
-        h("div", { class: { 'image-content': true, 'correct-answer': this.readonly && isCorrect === true, 'wrong-answer': this.readonly && isCorrect === false } },
-          image && h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && this.onItemSelect(text) }),
-          !readonly && [
-            h("yoo-form-checkbox", { value: this.isSelected(text), onClick: () => this.onItemSelect(text), 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))));
-    })));
-  }
-  renderReadonlyChat() {
-    if (!this.value) {
-      return;
-    }
-    const values = Array.isArray(this.value) ? this.value : [this.value];
-    return values.map((val) => {
-      var _a;
-      const isCorrect = ((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length) <= 0 ? null : this.answer.includes(val);
-      return h("div", { class: { 'answer-container': true, 'correct-answer': isCorrect === true, 'wrong-answer': isCorrect === false } }, translateMulti(val));
-    });
-  }
-  renderReadonlyRadio() {
-    if (!this.value) {
-      return;
-    }
-    const values = Array.isArray(this.value) ? this.value : [this.value];
-    return values.map((val) => {
-      var _a, _b, _c;
-      if (((_a = this.valuesColor) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-        const color = (_b = this.valuesColor.find((e) => e.key === val)) === null || _b === void 0 ? void 0 : _b.value;
-        return h("div", { class: { text: true }, style: { color: color }, innerHTML: translateMulti(val) });
-      }
-      else {
-        const isCorrect = ((_c = this.answer) === null || _c === void 0 ? void 0 : _c.length) <= 0 ? null : this.answer.includes(val);
-        return h("div", { class: { text: true, 'correct-answer': isCorrect === true, 'wrong-answer': isCorrect === false }, innerHTML: translateMulti(val) });
-      }
-    });
-  }
-  renderReadonly() {
-    if (this.type === 'chat') {
-      return this.renderReadonlyChat();
-    }
-    else if (this.type === 'image') {
-      return this.renderImage();
-    }
-    else if (this.type === 'radio') {
-      return this.renderReadonlyRadio();
-    }
-    else {
-      if (!this.value) {
-        return;
-      }
-      return [].concat(this.value).map((v) => {
-        const color = this.getColor(v);
-        let style = {};
-        if (color) {
-          style = { color };
-        }
-        return h("div", { class: "text", innerHTML: translateMulti(v), style: style });
-      });
-    }
-  }
-  renderEditable() {
-    switch (this.type) {
-      case 'radio':
-        return this.renderRadio();
-      case 'chat':
-        return this.sentence ? this.renderChat() : null;
-      case 'image':
-        return this.renderImage();
-      case 'button':
-        return this.renderButton();
-      case 'card':
-        return this.renderCard();
-    }
-  }
-  renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
-      h("p", { slot: "content" }));
-  }
-  render() {
-    return this.readonly ?
-      h("div", { class: { 'readonly': true, [this.type]: true } }, this.renderReadonly()) :
-      h("div", { class: "outer-container", ref: el => this.outerContainerElement = el },
-        this.renderBanner(),
-        this.choices && this.renderEditable());
-  }
-  static get is() { return "yoo-form-choice"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-choice.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-choice.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"
-    },
-    "complexValues": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IMultiInputValue[][]",
-        "resolved": "IMultiInputValue[][]",
-        "references": {
-          "IMultiInputValue": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any[] | any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": 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": "[]"
-    },
-    "asyncValidators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "AsyncValidator<any[]>[]",
-        "resolved": "AsyncValidator<any[]>[]",
-        "references": {
-          "AsyncValidator": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "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
-    },
-    "useTranslate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "use-translate",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'button' | 'radio' | 'image' | 'chat' | 'card'",
-        "resolved": "\"button\" | \"card\" | \"chat\" | \"image\" | \"radio\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false
-    },
-    "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
-    },
-    "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": ""
-      }
-    },
-    "validity": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "validity",
-      "reflect": false
-    },
-    "maxWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-width",
-      "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": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "values": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "any[]",
-        "resolved": "any[]",
-        "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
-    },
-    "cardColumns": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "card-columns",
-      "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 watchers() { return [{
-      "propName": "values",
-      "methodName": "onValuesChanged"
-    }, {
-      "propName": "value",
-      "methodName": "onValueChange"
-    }]; }
-}