text: import Sortable from "sortablejs";
  
  function init(Survey) {
    var widget = {
      name: "sortablelist",
      title: "Sortable list",
      iconName: "icon-sortablejs",
      widgetIsLoaded: function () {
        return typeof Sortable != "undefined";
      },
      defaultJSON: { choices: ["Item 1", "Item 2", "Item 3"] },
      rootStyle: "width:100%:",
      areaStyle:
        "border: 1px solid #1ab394; width:100%; min-height:50px; margin-top:10px;",
      itemStyle: "background-color:#1ab394;color:#fff;margin:5px;padding:10px;",
      isFit: function (question) {
        return question.getType() === "sortablelist";
      },
      htmlTemplate: "<div></div>",
      activatedByChanged: function (activatedBy) {
        Survey.JsonObject.metaData.addClass(
          "sortablelist",
          [
            { name: "hasOther", visible: false },
            { name: "storeOthersAsComment", visible: false },
            { name: "hasNone", visible: false },
            { name: "renderAs", visible: false }
          ],
          null,
          "checkbox"
        );
        Survey.JsonObject.metaData.addProperty("sortablelist", {
          name: "emptyText",
          default: "Move items here."
        });
        Survey.JsonObject.metaData.addProperty("sortablelist", {
          name: "useDefaultTheme",
          default: true
        });
        Survey.JsonObject.metaData.addProperty("sortablelist", {
          name: "maxAnswersCount:number",
          default: -1
        });
  
      },
      afterRender: function (question, el) {
        var self = this;
  
        if (!question.useDefaultTheme) {
          self.rootStyle = "";
          self.itemStyle = "";
          self.areaStyle = "";
        }
        el.style.cssText = self.rootStyle;
        el.className = "sjs-sortablejs-root";
        var source, result;
        var resultEl = document.createElement("div");
        var emptyEl = document.createElement("span");
        var sourceEl = document.createElement("div");
  
        resultEl.style.cssText = self.areaStyle;
        resultEl.className = "sjs-sortablejs-result";
  
        emptyEl.innerHTML = question.emptyText;
        resultEl.appendChild(emptyEl);
  
        sourceEl.style.cssText = self.areaStyle;
        sourceEl.className = "sjs-sortablejs-source";
  
        el.appendChild(resultEl);
        el.appendChild(sourceEl);
        var hasValueInResults = function (val) {
          var res = question.value;
          if (!Array.isArray(res)) return false;
          for (var i = 0; i < res.length; i++) {
            if (res[i] == val) return true;
          }
          return false;
        };
        var addChoiceToWidget = function (choice, inResults) {
          var srcEl = inResults ? resultEl : sourceEl;
          var newEl = document.createElement("div");
          newEl.innerHTML =
            "<div class='sjs-sortablejs-item' style='" +
            self.itemStyle +
            "'>" +
            choice.text +
            "</div>";
          newEl.dataset["value"] = choice.value;
          srcEl.appendChild(newEl);
        };
        var getChoicesNotInResults = function () {
          var res = [];
          question.visibleChoices.forEach(function (choice) {
            if (!hasValueInResults(choice.value)) {
              res.push(choice);
            }
          });
          return res;
        };
        var getChoicesInResults = function () {
          var res = [];
          var val = question.value;
          if (!Array.isArray(val)) return res;
          for (var i = 0; i < val.length; i++) {
            var item = Survey.ItemValue.getItemByValue(
              question.visibleChoices,
              val[i]
            );
            if (!!item) {
              res.push(item);
            }
          }
          return res;
        };
        var isUpdatingQuestionValue = false;
        var updateValueHandler = function () {
          if (isUpdatingQuestionValue) return;
          resultEl.innerHTML = "";
          resultEl.appendChild(emptyEl);
          sourceEl.innerHTML = "";
          var notInResults = getChoicesNotInResults();
          var inResults = getChoicesInResults();
          emptyEl.style.display = inResults.length > 0 ? "none" : "";
          inResults.forEach(function (choice) {
            addChoiceToWidget(choice, true);
          });
          notInResults.forEach(function (choice) {
            addChoiceToWidget(choice, false);
          });
        };
        result = question.resultEl = Sortable.create(resultEl, {
          animation: 150,
          disabled: question.isReadOnly,
          group: {
            name: question.name,
            put: function (to) {
              return question.maxAnswersCount < 0 || to.el.children.length <= question.maxAnswersCount;
            },
          },
          onSort: function (evt) {
            var result = [];
            if (resultEl.children.length === 1) {
              emptyEl.style.display = "";
            } else {
              emptyEl.style.display = "none";
              for (var i = 0; i < resultEl.children.length; i++) {
                if (typeof resultEl.children[i].dataset.value === "undefined")
                  continue;
                result.push(resultEl.children[i].dataset.value);
              }
            }
            isUpdatingQuestionValue = true;
            question.value = result;
            isUpdatingQuestionValue = false;
          }
        });
        source = question.sourceEl = Sortable.create(sourceEl, {
          animation: 150,
          disabled: question.isReadOnly,
          group: question.name
        });
        question.valueChangedCallback = updateValueHandler;
        question.readOnlyChangedCallback = function () {
          if (question.isReadOnly) {
            result.options.disabled = true;
            source.options.disabled = true;
          } else {
            result.options.disabled = false;
            source.options.disabled = false;
          }
        };
        updateValueHandler();
      },
      willUnmount: function (question, el) {
        question.resultEl.destroy();
        question.sourceEl.destroy();
        question.readOnlyChangedCallback = null;
      },
      pdfQuestionType: "checkbox"
    };
  
    Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
  }
  
  if (typeof Survey !== "undefined") {
    init(Survey);
  }
  
  export default init;
  