'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7cdf1df1.js');

const dvnFieldDisplayMultipleChoiceCss = ".sc-dvn-field-display-multiple-choice-h{display:block}.sc-dvn-field-display-multiple-choice-h ul.sc-dvn-field-display-multiple-choice{margin:0;padding-left:0}.sc-dvn-field-display-multiple-choice-h ul.sc-dvn-field-display-multiple-choice li.sc-dvn-field-display-multiple-choice{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sc-dvn-field-display-multiple-choice-h dvn-button.sc-dvn-field-display-multiple-choice{margin-right:4px}";

const DvnFieldDisplayMultipleChoice = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.value = [];
  }
  render() {
    var _a;
    const placeholderListElementCount = (((_a = this.meta) === null || _a === void 0 ? void 0 : _a.lines) || 0) - this.value.length;
    if (this.field.inputType === 'tag-cloud') {
      return (index.h(index.Host, { style: { height: this.fixHeight ? `${(this.field.options || []).length * 20}px` : undefined } }, this.value.map(v => (index.h("dvn-button", { leaned: true, scale: "small", shape: "rounded", view: "outline", tagMode: true }, this.field.getOptionOfValue(v).label))), this.value.length === 0 && '-'));
    }
    return (index.h(index.Host, { style: { height: this.fixHeight ? `${(this.field.options || []).length * 20}px` : undefined } }, index.h("ul", null, this.value.map(v => (index.h("li", null, this.field.getOptionOfValue(v).label))), this.value.length === 0 && '-', placeholderListElementCount > 0 && new Array(placeholderListElementCount).fill(0).map(() => (index.h("li", null))))));
  }
};
DvnFieldDisplayMultipleChoice.style = dvnFieldDisplayMultipleChoiceCss;

exports.dvn_field_display_multiple_choice = DvnFieldDisplayMultipleChoice;
