render method

@override dynamic render()

Renders the elements of this component.

Accepted return types:

• web UINode and UIElement.
• DIVElement, DOMNode, AsDOMElement and AsDOMNode.
• Future.
• UIAsyncContent.
• String, parsed as HTML.
• Map (rendered as JSON).
• List with previous types (recursively).
• Function that returns any previous type. Including Function<Future>, allowing async functions.

Implementation

@override
dynamic render() {
  if (_input == null) {
    var input = _input = HTMLInputElement()
      ..classList.add('ui-multi-selection-input')
      ..type = 'text';

    input
      ..style.padding = '5px 10px'
      ..style.border = '1px solid #ccc'
      ..style.width = '100%'
      ..style.color = 'inherit';

    //style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%"

    _optionsPanel = HTMLDivElement()
      ..style.display = 'none'
      ..style.backgroundColor = 'rgba(255,255,255, 0.90)'
      ..style.position = 'absolute'
      ..style.left = '0px'
      ..style.top = '0px'
      ..style.textAlign = 'left'
      ..style.padding = '4px';

    _optionsPanel!.classList.add('shadow');
    _optionsPanel!.classList.add('p-2');
    _optionsPanel!.classList.add('ui-multi-selection-options-menu');

    window.onResize.listen((e) => _updateDivOptionsPosition());

    _input!.onKeyUp.listen((e) {
      if (allowInputValue) {
        if (hasSelection) {
          uncheckAll();
        }
        _optionsPanelInteractionCompleter.interact(noTriggering: true);
        _inputInteractionCompleter.interact();
      }

      _updateOptionsPanel();

      _toggleDivOptions(false);
    });

    _input!.onClick.listen((e) {
      if (hasSelection || !allowInputValue) {
        _input!.value = '';
      }
      _toggleDivOptions(false);
    });

    _input!.onMouseEnter.listen((e) => _mouseEnter(_input));
    _input!.onMouseLeave.listen((e) => _mouseLeave(_input));

    _optionsPanel!.onMouseEnter.listen((e) => _mouseEnter(_optionsPanel));
    _optionsPanel!.onMouseLeave.listen((e) => _mouseLeave(_optionsPanel));

    _optionsPanel!.onMouseMove.listen((e) => _onOptionsPanelMouseMove(e));

    _optionsPanel!.onTouchEnter.listen((e) => _mouseEnter(_input));
    _optionsPanel!.onTouchLeave.listen((e) => _mouseLeave(_input));

    window.onTouchStart.listen((e) {
      if (_optionsPanel == null) return;

      var overDivOptions = nodeTreeContainsAny(_optionsPanel!,
          e.targetTouches.toIterable().map((t) => t.target as UINode));
      if (!overDivOptions && _isShowing()) {
        _toggleDivOptions(true);
      }
    });
  }

  _optionsPanel!.style.maxHeight = '60vh';
  _optionsPanel!.style.overflowY = 'auto';

  var checksList = _renderPanelOptions();
  _checkElements = checksList;

  _updateElementText();

  return [_input, _optionsPanel];
}