System.register(["reactive-jsx", "src/components/widgets/lively-morph.js"], function (_export, _context) {
  "use strict";

  var _childExpression, _children, _attributeExpression, _attributes, _element, Morph;

  return {
    setters: [function (_reactiveJsx) {
      _childExpression = _reactiveJsx.childExpression;
      _children = _reactiveJsx.children;
      _attributeExpression = _reactiveJsx.attributeExpression;
      _attributes = _reactiveJsx.attributes;
      _element = _reactiveJsx.element;
    }, function (_srcComponentsWidgetsLivelyMorphJs) {
      Morph = _srcComponentsWidgetsLivelyMorphJs.default;
    }],
    execute: function () {
      const __SystemJSRewritingHack = {};
      _recorder_._src_components_widgets_input_combobox_js = _recorder_._src_components_widgets_input_combobox_js || {};
      Object.defineProperty(_recorder_._src_components_widgets_input_combobox_js, "Morph", {
        get() {
          return Morph;
        },

        set(thisIsVererySecretVariableName) {
          Morph = thisIsVererySecretVariableName;
          return true;
        },

        enumerable: true,
        configurable: true
      });


      /*MD 
      ## Combobox Widget
        <edit://test/templates/input-combobox-test.js>
      
      MD*/

      class InputCombobox extends Morph {

        initialize() {
          lively.html.registerAttributeObservers(this);

          this.get("#input").addEventListener("change", evt => {
            this.setAttribute("value", this.get("#input").value);
            this.dispatchEvent(new Event("change"));
          });
        }

        get value() {
          return this.getAttribute("value");
        }

        set value(s) {
          this.setAttribute("value", s);
          this.updateView();
        }

        onValueChanged() {
          this.updateView();
        }

        updateView() {
          var newValue = this.getAttribute("value");
          if (this.get("#input").value != newValue) {
            this.get("#input").value = newValue;
          }
        }

        setOptions(list) {
          var optionsElement = this.get("#options");
          optionsElement.innerHTML = "";
          for (var ea of list) {
            if (ea.value && ea.string) {
              optionsElement.appendChild(_element("option", _attributes(_attributeExpression("value", ea.value)), _children(_childExpression(ea.string)), {
                file: 'https://lively-kernel.org/lively4/composed-offset/src/components/widgets/input-combobox.js',
                end: {
                  column: 80,
                  line: 45
                },
                start: {
                  column: 35,
                  line: 45
                }
              }));
            } else {
              optionsElement.appendChild(_element("option", _attributes(_attributeExpression("value", ea)), _children(_childExpression(ea)), {
                file: 'https://lively-kernel.org/lively4/composed-offset/src/components/widgets/input-combobox.js',
                end: {
                  column: 67,
                  line: 47
                },
                start: {
                  column: 35,
                  line: 47
                }
              }));
            }
          }
          optionsElement.value = "";
        }

        async livelyExample() {
          this.setOptions(["Apple", "Babanna", "Oranges"]);
        }

      }

      _export("default", InputCombobox);

      Object.defineProperty(_recorder_._src_components_widgets_input_combobox_js, "InputCombobox", {
        get() {
          return InputCombobox;
        },

        set(thisIsVererySecretVariableName) {
          _export("default", InputCombobox = thisIsVererySecretVariableName);

          return true;
        },

        enumerable: true,
        configurable: true
      });
    }
  };
});